migrate to i18next

ToastHawaii · Jun 6, 2024 · fd001ad · fd001ad
1 parent d26c98e
commit fd001ad
Show file tree

Hide file tree

Showing 12 changed files with 3,263 additions and 181 deletions.
diff --git a/docs/de/main.js b/docs/de/main.js
diff --git a/docs/en/main.js b/docs/en/main.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "bignumber.js": "9.0.2",
     "details-element-polyfill": "2.4.0",
     "i18next-client": "1.11.4",
+    "i18next": "22.0.4",
+    "react-i18next": "12.1.1",
     "leaflet-overpass-layer": "github:ToastHawaii/leaflet-overpass-layer",
     "md5": "2.3.0",
     "moment": "2.29.4",

diff --git a/src/client/webpack.production.config.js b/src/client/webpack.production.config.js
@@ -26,9 +26,6 @@ module.exports = {
       filename: "./de/index.html",
       chunks: ["de"],
     }),
-    new webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify("production"),
-    }),
     new CopyWebpackPlugin({
       patterns: [
         { from: "./www" },
@@ -40,7 +37,7 @@ module.exports = {
       filename: "[name]/main.css",
     }),
   ],
-  mode: "production",
+  mode: "development",
 
   resolve: {
     // Add '.ts' and '.tsx' as resolvable extensions.

diff --git a/src/static/de/static.local.ts b/src/static/de/static.local.ts
@@ -19,25 +19,4 @@ import * as en from "../en/static.local";
 
 export const local: typeof en.local = {
   code: "de",
-  meta: {
-    title: "Unbezahlbar Karte",
-    titleShort: "Unbezahlbar",
-    description: "Erlebe die Welt. Gratis."
-  },
-  search: {
-    placeholder: "Einen Ort suchen"
-  },
-  info: {
-    osmTags: "Dokumentation",
-    query: "Abfrage",
-    overpassTurbo: "overpass-turbo"
-  },
-  menu: {
-    note: "Hinweis für Kartographen hinzufügen",
-    edit: "Karte bearbeiten",
-    share: "Ort teilen",
-    theme: "Theme ändern",
-    about: "Über diese Seite",
-    donate: "Mich unterstützen"
-  }
 };
diff --git a/src/static/en/static.local.ts b/src/static/en/static.local.ts
@@ -17,25 +17,4 @@
 
 export const local = {
   code: "en",
-  meta: {
-    title: "Priceless map",
-    titleShort: "Priceless",
-    description: "Experience the world. Free of charge."
-  },
-  search: {
-    placeholder: "Search a location"
-  },
-  info: {
-    osmTags: "Documentation",
-    query: "Query",
-    overpassTurbo: "overpass-turbo"
-  },
-  menu: {
-    note: "Add note for mappers",
-    edit: "Edit map",
-    share: "Share place",
-    theme: "Change theme",
-    about: "About this site",
-    donate: "Support me"
-  }
 };
diff --git a/src/static/initI18next.ts b/src/static/initI18next.ts
@@ -0,0 +1,27 @@
+import i18next from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import * as en from "./locales/en.json";
+import * as de from "./locales/de.json";
+
+i18next
+  .use(LanguageDetector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    detection: {
+      lookupQuerystring: "lang",
+    },
+    fallbackLng: "en",
+
+    resources: {
+      en: { translation: en },
+      de: { translation: de },
+    },
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
+    },
+    react: {
+      useSuspense: false,
+    },
+  });
diff --git a/src/static/locales/de.json b/src/static/locales/de.json
@@ -0,0 +1,23 @@
+{
+  "meta": {
+    "title": "Unbezahlbar Karte",
+    "titleShort": "Unbezahlbar",
+    "description": "Erlebe die Welt. Gratis."
+  },
+  "search": {
+    "placeholder": "Einen Ort suchen"
+  },
+  "info": {
+    "osmTags": "Dokumentation",
+    "query": "Abfrage",
+    "overpassTurbo": "overpass-turbo"
+  },
+  "menu": {
+    "note": "Hinweis für Kartographen hinzufügen",
+    "edit": "Karte bearbeiten",
+    "share": "Ort teilen",
+    "theme": "Theme ändern",
+    "about": "Über diese Seite",
+    "donate": "Mich unterstützen"
+  }
+}
diff --git a/src/static/locales/en.json b/src/static/locales/en.json
@@ -0,0 +1,23 @@
+{
+  "meta": {
+    "title": "Priceless map",
+    "description": "Experience the world. Free of charge.",
+    "titleShort": "Priceless"
+  },
+  "search": {
+    "placeholder": "Search a location"
+  },
+  "info": {
+    "osmTags": "Documentation",
+    "query": "Query",
+    "overpassTurbo": "overpass-turbo"
+  },
+  "menu": {
+    "note": "Add note for mappers",
+    "edit": "Edit map",
+    "share": "Share place",
+    "theme": "Change theme",
+    "about": "About this site",
+    "donate": "Support me"
+  }
+}
diff --git a/src/static/render.tsx b/src/static/render.tsx
@@ -19,8 +19,8 @@ import * as fs from "fs";
 import prettier from "prettier";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
-import { local as en } from "./en/static.local";
-import { local as de } from "./de/static.local";
+import { useTranslation } from "react-i18next";
+import "./initI18next";
 
 function Logo() {
   return (
@@ -39,12 +39,10 @@ render({
     {
       code: "en",
       baseUrl: "/",
-      ...en,
     },
     {
       code: "de",
       baseUrl: "/de/",
-      ...de,
     },
   ],
 });
@@ -55,25 +53,11 @@ function render(customize: {
   locals: {
     code: string;
     baseUrl: string;
-    meta: {
-      title: string;
-      titleShort: string;
-      description: string;
-    };
   }[];
 }) {
-  const locals: { [code: string]: typeof en } = {
-    en: en,
-    de: de,
-  };
-
   for (const local of customize.locals) {
     const html = ReactDOMServer.renderToStaticMarkup(
-      <App
-        local={{ meta: { ...local.meta }, ...locals[local.code] }}
-        color={customize.color}
-        baseUrl={local.baseUrl}
-      >
+      <App lang={local.code} color={customize.color} baseUrl={local.baseUrl}>
         {customize.logo}
       </App>
     );
@@ -117,30 +101,31 @@ function writeFileSyncRecursive(filename, content?, charset?) {
 }
 
 function App(attributes: {
-  local: typeof en;
+  lang: string;
   color: string;
   baseUrl: string;
   children: any;
 }) {
-  const local = attributes.local;
+  let { t } = useTranslation();
+  let a = (key: string) => t(key, { lng: attributes.lang });
   return (
-    <html className="help" lang={attributes.local.code}>
+    <html className="help" lang={attributes.lang}>
       <head>
-        <title>{local.meta.title}</title>
+        <title>{a("meta.title")}</title>
         <meta charSet="utf-8" />
-        <link rel="manifest" href={`/manifest.${local.code}.json`} />
+        <link rel="manifest" href={`/manifest.${attributes.lang}.json`} />
         <meta
           name="viewport"
           content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
         />
-        <meta name="description" content={local.meta.description} />
+        <meta name="description" content={a("meta.description")} />
 
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="application-name" content={local.meta.titleShort} />
+        <meta name="application-name" content={a("meta.titleShort")} />
         <meta
           name="apple-mobile-web-app-title"
-          content={local.meta.titleShort}
+          content={a("meta.titleShort")}
         />
         <meta name="theme-color" content={attributes.color} />
         <meta name="msapplication-navbutton-color" content={attributes.color} />
@@ -191,7 +176,7 @@ function App(attributes: {
         <h1>
           <a href={`${attributes.baseUrl}docs/`}>
             {attributes.children}
-            {local.meta.titleShort}
+            {a("meta.titleShort")}
           </a>
         </h1>
         <div id="filters">
@@ -211,7 +196,7 @@ function App(attributes: {
               <input
                 type="search"
                 id="osm-search"
-                placeholder={local.search.placeholder}
+                placeholder={a("search.placeholder")}
                 required
               />
               <button className="icon" type="submit">
@@ -228,14 +213,14 @@ function App(attributes: {
             <small>
               <details>
                 <summary>
-                  <strong>{local.info.osmTags}</strong>
+                  <strong>{a("info.osmTags")}</strong>
                 </summary>
                 <br />
                 <div className="wiki"></div>
-                <strong>{local.info.query}</strong>
+                <strong>{a("info.query")}</strong>
                 <code className="query"></code>
                 <a className="link" target="_blank">
-                  {local.info.overpassTurbo}
+                  {a("info.overpassTurbo")}
                 </a>
               </details>
             </small>
@@ -248,52 +233,52 @@ function App(attributes: {
           <button
             className="menu note help-text"
             type="button"
-            title={local.menu.note}
+            title={a("menu.note")}
           >
             <i className="fas fa-comment-alt"></i>
           </button>
           <button
             className="menu edit help-text"
             type="button"
-            title={local.menu.edit}
+            title={a("menu.edit")}
           >
             <i className="fas fa-pencil-alt"></i>
           </button>
           <button
             className="menu share help-text"
             type="button"
-            title={local.menu.share}
+            title={a("menu.share")}
           >
             <i className="fas fa-share-alt"></i>
           </button>
           <button
             className="menu theme theme-mode-dark-visible help-text"
             type="button"
-            title={local.menu.theme}
+            title={a("menu.theme")}
           >
             <i className="fas fa-circle"></i>
           </button>
           <button
             className="menu theme theme-mode-light-visible help-text"
             type="button"
-            title={local.menu.theme}
+            title={a("menu.theme")}
           >
             <i className="far fa-circle"></i>
           </button>
           <button
             className="menu theme theme-mode-system-visible help-text"
             type="button"
-            title={local.menu.theme}
+            title={a("menu.theme")}
           >
             <i className="fas fa-adjust"></i>
           </button>
-          <a className="menu about help-text" title={local.menu.about}>
+          <a className="menu about help-text" title={a("menu.about")}>
             <i className="fas fa-info"></i>
           </a>
           <a
             className="menu donate help-text"
             target="_blank"
-            title={local.menu.donate}
+            title={a("menu.donate")}
           >
             <i className="fas fa-mug-hot"></i>
           </a>

diff --git a/src/static/tsconfig.json b/src/static/tsconfig.json
@@ -13,7 +13,8 @@
                 "*",
                 "@types/*"
             ]
-        }
+        },
+        "resolveJsonModule": true
     },
     "include": [
         "*.tsx"