feat: internationalization

src/components/Ecosystem/PluginsTable.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import Link from '@docusaurus/Link'
+import Translate from '@docusaurus/Translate'
 
 const PluginsTable = (props) => {
   const [nameFilter, setNameFilter] = useState()
@@ -24,12 +25,16 @@ const PluginsTable = (props) => {
   return (
     <div className="grid-container">
       <div className="grid-item-header">
-        <b>Name</b>
+        <b>
+          <Translate> Name</Translate>
+        </b>
         <br />
         <input type="text" onKeyUp={(event) => setNameFilter(event.target.value)} />
       </div>
       <div className="grid-item-header">
-        <b>Description</b>
+        <b>
+          <Translate>Description</Translate>
+        </b>
         <br />
         <input type="text" onKeyUp={(event) => setDescriptionFilter(event.target.value)} size="40" />
       </div>

src/components/GoodFirstIssue/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import Link from '@docusaurus/Link'
 import css from './styles.module.css'
+import Translate from '@docusaurus/Translate'
 
 export default GoodFirstIssue
 
@@ -41,19 +42,20 @@ function GoodFirstIssue({ url }) {
 
     fetchData() //
       .catch(setError)
-  }, [])
+  }, [url])
 
   if (loading)
     return (
       <div className="alert alert--secondary" role="alert">
-        Loading...
+        <Translate> Loading...</Translate>
       </div>
     )
 
   if (error)
     return (
       <div className="alert alert--danger" role="alert">
-        Error: {error.message}
+        <Translate> Error: </Translate>
+        {error.message}
       </div>
     )
 
@@ -75,7 +77,9 @@ function GoodFirstIssue({ url }) {
       <div className="row">
         <div className="col col--4 margin--none">
           <nav className="col-demo item shadow--lw">
-            <p className={css.panelHeading}>Projects</p>
+            <p className={css.panelHeading}>
+              <Translate>Projects</Translate>
+            </p>
             {Object.values(projects)
               .sort(byCount)
               .map((project) => ProjectFilter({ ...project, toggle: toggleProject.bind(this, project.name) }))}
@@ -101,7 +105,9 @@ function ProjectFilter({ name, count, selected, toggle }) {
       <input type="checkbox" checked={Boolean(selected)} onChange={onChange} />
       <div className="avatar__intro">
         <div className="avatar__name">{name}</div>
-        <small className="avatar__subtitle">{count} issues</small>
+        <small className="avatar__subtitle">
+          {count} <Translate>issues</Translate>
+        </small>
       </div>
     </div>
   )
@@ -118,7 +124,8 @@ function Issue(props) {
                 <Link to={props.url}>{props.title}</Link>
               </div>
               <small className="avatar__subtitle">
-                Project <Link to={props.project.url}>{props.project.name}</Link>
+                <Translate>Project </Translate>
+                <Link to={props.project.url}>{props.project.name}</Link>
               </small>
             </div>
           </div>
@@ -141,7 +148,9 @@ function Issues({ issues }) {
   if (issues.length === 0) {
     return (
       <div>
-        <strong>No issue available 😱</strong>
+        <strong>
+          <Translate>No issue available 😱</Translate>
+        </strong>
       </div>
     )
   }

src/components/HomePageHeader/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import GitHubButton from 'react-github-btn'
+import Translate from '@docusaurus/Translate'
 
 import css from './styles.module.css'
 
@@ -22,15 +23,15 @@ function HomepageHeader() {
             aria-label="Star fastify on GitHub"
             data-size="large"
             data-show-count="true">
-            Star
+            <Translate> Star</Translate>
           </GitHubButton>
           &nbsp; &nbsp;
           <GitHubButton
             href="https://github.com/fastify/fastify/fork"
             data-icon="octicon-repo-forked"
             aria-label="Fork fastify on GitHub"
             data-size="large">
-            Fork
+            <Translate>Fork</Translate>
           </GitHubButton>
         </div>
       </div>