i18n translations setup

package.json

@@ -15,8 +15,11 @@
   },
   "dependencies": {
     "@etchteam/diamond-ui": "^1.0.3",
+    "i18next": "^23.7.18",
+    "i18next-http-backend": "^2.4.2",
     "lit": "^3.1.1",
     "preact": "^10.19.3",
+    "react-i18next": "^14.0.1",
     "react-router-dom": "^6.21.3"
   },
   "devDependencies": {

public/translations/cy.json

@@ -0,0 +1,5 @@
+{
+  "start": {
+    "title": "Dod o hyd i leoedd i ailgylchu."
+  }
+}

public/translations/en.json

@@ -0,0 +1,5 @@
+{
+  "start": {
+    "title": "Find places to recycle."
+  }
+}

src/index.tsx

@@ -2,7 +2,7 @@ import { LitElement, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { render as preactRender } from 'preact';
 
-import Entrypoint from './app/Entrypoint';
+import Entrypoint from './pages/Entrypoint';
 import { diamondUi } from './styles/diamond-ui';
 import { variables } from './styles/variables';
 

src/lib/i18n.ts

@@ -0,0 +1,24 @@
+import i18n from 'i18next';
+import HttpBackend, { HttpBackendOptions } from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  // load translation using http -> see /public/translations
+  // https://github.com/i18next/i18next-http-backend
+  .use(HttpBackend)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init<HttpBackendOptions>({
+    fallbackLng: 'en',
+    debug: true,
+    backend: {
+      loadPath: '/translations/{{lng}}.json',
+    },
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
+
+export default i18n;

src/app/Entrypoint.tsx → src/pages/Entrypoint.tsx

@@ -1,10 +1,13 @@
+import { Suspense } from 'preact/compat';
 import {
   createMemoryRouter,
   createRoutesFromElements,
   Route,
   RouterProvider,
 } from 'react-router-dom';
 
+import '../lib/i18n';
+
 import NotFound from './404.js';
 import StartPage from './Start.js';
 
@@ -19,7 +22,12 @@ const router = createMemoryRouter(
  * - Load up the router
  * - Setup the start page routes
  * - Lazily register sub routes
+ * - Initialise i18n (using suspense to wait for them to load in)
  */
 export default function Entrypoint() {
-  return <RouterProvider router={router} />;
+  return (
+    <Suspense fallback={<h2>loading...</h2>}>
+      <RouterProvider router={router} />
+    </Suspense>
+  );
 }

src/app/Start.tsx → src/pages/Start.tsx

@@ -1,11 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
 export default function StartPage() {
+  const { t } = useTranslation();
+
   return (
     <locator-layout>
       <header slot="header">
         <locator-logo>Recycling Locator</locator-logo>
       </header>
       <div slot="main">
-        <h2>Find places to recycle</h2>
+        <h2>{t('start.title')}</h2>
         <form>
           <label htmlFor="location">Where are you?</label>
           <input type="text" name="location" id="location" />