Start work on i18n.

package.json

@@ -9,6 +9,7 @@
     "eslint-plugin-import": "^2.22.1",
     "file-saver": "^2.0.5",
     "html-webpack-plugin": "^5.3.1",
+    "i18next": "^20.2.1",
     "mini-css-extract-plugin": "^1.4.1",
     "node-sass": "^5.0.0",
     "prismjs": "^1.23.0",

src/main.js

@@ -1,5 +1,7 @@
 'use strict';
 
+// JS & CSS
+
 import "./scss/main.scss";
 import UIkit from 'uikit/dist/js/uikit.min.js';
 import Icons from 'uikit/dist/js/uikit-icons.min.js';
@@ -17,6 +19,8 @@ import { PageState } from "./PageState.js";
 import { makeElement } from "./htmlUtils.js";
 import { getSealStatus } from './api.js';
 
+// Pages
+
 import {
   HomePage,
   MePage,
@@ -59,6 +63,15 @@ const pages = {
   PW_GEN: new PwGenPage(),
 };
 
+// Translations
+import i18next from 'i18next';
+import translation_en from './translations/en.js'
+import translation_de from './translations/de.js'
+
+
+
+// Globals
+
 var pageState = new PageState();
 window.pageState = pageState;
 window.realPages = pages;
@@ -70,7 +83,7 @@ function ListItem(children) {
   });
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+function onLoad() {
   document.body.innerHTML = "";
   document.body.appendChild(makeElement({
     tag: "nav",
@@ -85,17 +98,17 @@ document.addEventListener('DOMContentLoaded', function () {
           children: [
             ListItem(makeElement({
               tag: "a",
-            text: "Home",
+              text: i18next.t("home_btn"),
               onclick: _ => { changePage("HOME"); }
             })),
             ListItem(makeElement({
               tag: "a",
-            text: "Back",
+              text: i18next.t("back_btn"),
               onclick: _ => { pageState.currentPage.goBack(); }
             })),
             ListItem(makeElement({
               tag: "a",
-            text: "Refresh",
+              text: i18next.t("refresh_btn"),
               onclick: _ => { changePage(pageState.currentPage); }
             })),
           ]
@@ -152,4 +165,18 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     }
   }, 5000);
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  i18next.init({
+    lng: 'de',
+    debug: true,
+    resources: {
+      en: { translation: translation_en },
+      de: { translation: translation_de },
+
+    }
+  }).then(function (t) {
+    onLoad();
+  });
 }, false);

src/translations/de.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "home_btn": "Startseite",
+  "back_btn": "Zurück",
+  "refresh_btn": "Neu laden"
+}

src/translations/en.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "home_btn": "Home",
+  "back_btn": "Back",
+  "refresh_btn": "Refresh"
+}

webpack.config.js

@@ -26,7 +26,6 @@ module.exports = {
           "sass-loader"
         ],
       },
-
     ],
   },
 };