Translate app with i18next

package.json

@@ -13,9 +13,12 @@
     "bootstrap": "^4.4.1",
     "excerpts": "^0.0.3",
     "html-to-react": "1.7.0",
+    "i18next": "^23.11.4",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^12.2.0",
     "react-js-pagination": "^3.0.3",
     "react-router-dom": "^6.10.0",
     "swagger-ui-react": "^4.15.5"

src/components/FeaturedDatasets/index.jsx

@@ -3,13 +3,17 @@ import PropTypes from "prop-types";
 import excerpts from 'excerpts';
 import { Link } from 'react-router-dom';
 import { Text } from "@civicactions/data-catalog-components";
+import '../../i18n';
+import { useTranslation } from 'react-i18next';
 import config from "../../assets/config";
 import './featureddatasets.scss';
 
 const FeaturedDatasets = ({ datasets }) => {
+  const { t, i18n } = useTranslation();
+
   return (
     <div className={`dc-featured-datasets ${config.container}`}>
-      <h2 className="dc-featured-title">Featured Datasets</h2>
+      <h2 className="dc-featured-title">{t('home.featured')}</h2>
       <ol>
         {datasets.map((item) => (
           <li>

src/i18n.js

@@ -0,0 +1,59 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+const resources = {
+  en: {
+    translation: {
+      'about': {
+        'title': 'About this site'
+      },
+      'home': {
+        'featured': 'Featured Datasets',
+        'topics': 'Dataset Topics'
+      },
+      'not_found': {
+        'title': 'Page not found.'
+      },
+      'publishers': {
+        'title': 'Dataset Publishers'
+      },
+      'search': {
+        'title': 'Datasets'
+      }
+    },
+  },
+  es: {
+    translation: {
+      'about': {
+        title: 'Sobre este sitio'
+      },
+      'home': {
+        'featured': 'Conjuntos de Datos Destacados',
+        'topics': 'Temas de Conjuntos de Datos'
+      },
+      'not_found': {
+        'title': 'Página no encontrada.'
+      },
+      'publishers': {
+        'title': 'Publicadores de Conjuntos de Datos',
+      },
+      'search': {
+        'title': 'Conjuntos de Datos'
+      }
+    },
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

src/templates/about/index.jsx

@@ -1,36 +1,45 @@
 import React from "react";
 import { Announcement } from "@civicactions/data-catalog-components";
-import Layout from '../../components/Layout';
+import "../../i18n";
+import { useTranslation } from "react-i18next";
+import Layout from "../../components/Layout";
 import config from "../../assets/config";
-import { version, dependencies } from '../../../package.json';
+import { version, dependencies } from "../../../package.json";
 
-const About = () => (
+const About = () => {
+  const { t, i18n } = useTranslation();
+
+  return (
     <Layout title="About">
-        <div className={`dc-page ${config.container}`}>
-            <h1>About this site</h1>
-            <div className="dc-page-content row">
-                <div className="col-md-9 col-sm-12">
-                    <p>This is the default state of the DKAN data catalog.</p>
-                    <p>
-                    This tool helps create open data catalogs using React and other
-                    libraries.
-                    </p>
-                </div>
-                <div className="col-md-3 col-sm-12">
-                    <Announcement variation="info" heading="Note">
-                    <p>Update this about page before publishing.</p>
-                    </Announcement>
-                </div>
-            </div>
-            <h2>App version:</h2>
-            <div className="dc-page-content row">
-                <div className="col-12">
-                    <p>data-catalog-app: {version}</p>
-                    <p>data-catalog-components: {dependencies["@civicactions/data-catalog-components"]}</p>
-                </div>  
-            </div>
+      <div className={`dc-page ${config.container}`}>
+        <h1>{t("about.title")}</h1>
+        <div className="dc-page-content row">
+          <div className="col-md-9 col-sm-12">
+            <p>This is the default state of the DKAN data catalog.</p>
+            <p>
+              This tool helps create open data catalogs using React and other
+              libraries.
+            </p>
+          </div>
+          <div className="col-md-3 col-sm-12">
+            <Announcement variation="info" heading="Note">
+              <p>Update this about page before publishing.</p>
+            </Announcement>
+          </div>
+        </div>
+        <h2>App version:</h2>
+        <div className="dc-page-content row">
+          <div className="col-12">
+            <p>data-catalog-app: {version}</p>
+            <p>
+              data-catalog-components:{" "}
+              {dependencies["@civicactions/data-catalog-components"]}
+            </p>
+          </div>
         </div>
+      </div>
     </Layout>
-);
+  );
+};
 
 export default About;