fix: Fix i18n infrastructure

Add dev dependency fix paths and key names so that the default HTML lexer can pick them up

i18next-parser.config.js

@@ -2,9 +2,10 @@ module.exports = {
     defaultNamespace: 'translation',
     lexers: {
         js: ['JsxLexer'], // we're writing jsx inside .js files
+        html: ['HTMLLexer'],
         default: ['JavascriptLexer'],
     },
     locales: ['en', 'de'],
-    output: 'public/lang/$LOCALE.json',
+    output: 'public/i18n/$LOCALE.json',
     input: [ 'src/*.js', 'public/*.html', ],
 }

package-lock.json

@@ -21,6 +21,7 @@
         "@creativebulma/bulma-tooltip": "^1.2.0",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "css-loader": "^7.1.2",
+        "i18next-parser": "^9.3.0",
         "sass": "^1.86.3",
         "sass-loader": "^16.0.5",
         "style-loader": "^4.0.0",

package.json

@@ -24,6 +24,7 @@
     "@creativebulma/bulma-tooltip": "^1.2.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "css-loader": "^7.1.2",
+    "i18next-parser": "^9.3.0",
     "sass": "^1.86.3",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",

public/i18n/de.json

@@ -1,25 +1,23 @@
 {
-  "back-to-home": "Zurück zur Homepage",
   "app-name": "Käfigrechner",
-  "number-of-rats": "Anzahl an Ratten",
+  "how-many-rats-does-this-cage-fit": "Wie viele Ratten passen in den Käfig?",
-  "full-floors": "Vollebenen",
+  "what-cage-should-i-get": "Käfiggröße rechnen",
+  "check-existing-cage": "Käfig prüfen",
+  "cage-measurements": "Käfigmaße",
   "width-cm": "Breite (cm)",
   "depth-cm": "Tiefe (cm)",
   "height-cm": "Höhe (cm)",
-  "full-floors-tooltip": "Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.",
+  "full-floors": "Vollebenen",
+  "number-of-rats": "Anzahl an Ratten",
+  "result": "Ergebnis",
+  "change-language": "Sprache ändern",
   "failed-base-area": "Die Mindestgrundfläche des Käfigs muss {{ MINIMUM_BASE_AREA }}m² (also z.B. 100x50cm) betragen.",
   "failed-overall-area": "Die Gesamtfläche im Käfig ist zu klein.",
-  "failed-fall-height":  "Die mögliche Fallhöhe darf nicht mehr als {{ maximum_fall_height }}cm betragen.",
+  "failed-fall-height": "Die mögliche Fallhöhe darf nicht mehr als {{ maximum_fall_height }}cm betragen.",
   "failed-floor-height": "Der Mindestabstand zwischen Ebenen muss {{ minimum_floor_height }}cm betragen.",
   "failed-num-rats": "Es müssen mindestens 3 Ratten zusammenleben, Paarhaltung ist nicht artgerecht.",
   "failed-minimum-length-long-side": "Die lange Seite des Käfig muss mindestens {{ minimum_length_long_side }}cm lang sein um Rennen zu ermöglichen.",
   "failed-minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
-  "alt-savic-xl": "Bild des Käfigs Savic Suite Royal XL, ein Drahtkäfig mit vier Türen die erlauben die gesamte Vorderseite zu öffnen. Auf halber Höhe ist eine weitere Vollebene.",
-  "alt-savic-95-double": "Bild eines dekorierten Käfigs, des Savic Suite Royale 95 Double. Auf insgesamt vie Vollebenen sind Holz- und Papphäusschen, Hängematten, Futterschalen und mehr.",
-  "alt-tiaki": "Bild des Tiaki-Käfigs, ein Drahtkäfig mit vier Türen die erlauben die gesamte Vorderseite zu öffnen. Auf halber Höhe ist eine weitere Vollebene.",
-  "cage-measurements": "Käfigmaße",
   "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!",
-  "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten",
+  "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten"
-  "change-language": "Sprache ändern",
-  "result": "Ergebnis"
 }

public/i18n/en.json

@@ -1,25 +1,23 @@
 {
-  "back-to-home": "Back to home",
   "app-name": "Cage Calculator",
-  "number-of-rats": "Number of Rats",
+  "how-many-rats-does-this-cage-fit": "How many rats does this cage fit?",
-  "full-floors": "Full floors",
+  "what-cage-should-i-get": "Calculate cage size",
+  "check-existing-cage": "Check cage",
+  "cage-measurements": "Cage measurements",
   "width-cm": "Width (cm)",
   "depth-cm": "Depth (cm)",
   "height-cm": "Height (cm)",
-  "full-floors-tooltip": "A full floor is each floor with a area greater than XXm², including the bottom of the cage.",
+  "full-floors": "Full floors",
+  "number-of-rats": "Number of Rats",
+  "result": "Result",
+  "change-language": "Change language",
   "failed-base-area": "The base area of the cage must not be below {{ MINIMUM_BASE_AREA }}m².",
   "failed-overall-area": "The overall area in the cage is to small.",
-  "failed-fall-height":  "The possible fall height between floors must not be above {{ maximum_fall_height }}cm.",
+  "failed-fall-height": "The possible fall height between floors must not be above {{ maximum_fall_height }}cm.",
   "failed-floor-height": "The height between floors must be above {{ minimum_floor_height }}cm.",
   "failed-num-rats": "Rats must live in a group of at least three rats, pairs or lone rats are not species-appropriate.",
   "failed-minimum-length-long-side": "The long side of the cage must be at least {{ minimum_length_long_side }}cm long to enable running.",
   "failed-minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
-  "alt-savic-xl": "A picture of a wire bar cage with four doors that allow to open the full front of the cage. In the middle of the cage is a additional full floor.",
-  "alt-savic-95-double": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage. Inside there are hammocks, toys and four full floors with lots of hides",
-  "alt-tiaki": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage.",
-  "cage-measurements": "Cage measurements",
   "cage-complies-with-all-criteria": "This cage complies with all criteria!",
-  "cage-for-x-rats": "Cage for {{ num_rats }} rats",
+  "cage-for-x-rats": "Cage for {{ num_rats }} rats"
-  "change-language": "Change language",
-  "result": "Result"
 }

public/index.html

@@ -17,7 +17,7 @@
     <div class="navbar-brand">
         <div class="navbar-item">
             <img src="assets/img/logo_vdrd.png" alt="VdRD Log">
-            <h1 data-i18n-key="app-name" class="title is-3">Käfigrechner</h1>
+            <h1 data-i18n="app-name" class="title is-3">Käfigrechner</h1>
         </div>
     </div>
 </div>
@@ -31,7 +31,7 @@
                     <span class="icon is-small">
                         <i class="fas fa-number" aria-hidden="true"></i>
                     </span>
-                    How many rats does this cage fit?
+                    <p data-i18n="how-many-rats-does-this-cage-fit">How many rats does this cage fit?</p>
                 </a>
             </li>
             <li data-tab-id="2">
@@ -39,7 +39,7 @@
                     <span class="icon is-small">
                         <i class="fas fa-question" aria-hidden="true"></i>
                     </span>
-                    What cage should I get?
+                    <p data-i18n="what-cage-should-i-get">What cage should I get?</p>
                 </a>
             </li>
             <li data-tab-id="3">
@@ -47,7 +47,7 @@
                     <span class="icon is-small">
                         <i class="fas fa-check" aria-hidden="true"></i>
                     </span>
-                    Check existing cage
+                    <p data-i18n="check-existing-cage">Check existing cage</p>
                 </a>
             </li>
         </ul>
@@ -64,11 +64,11 @@
     <div class="" data-content-id="3">
         <div class="card">
             <div class="card-content">
-                <h2 class="title is-4"><label data-i18n-key="cage-measurements"
+                <h2 class="title is-4"><label data-i18n="cage-measurements"
                                               for="form-cage-measurements">Käfigmaße</label></h2>
                 <form id="form-cage-measurements" class="form-measurements">
 
-                    <label for="width" class="label" data-i18n-key="width-cm">Breite (cm)</label>
+                    <label for="width" class="label" data-i18n="width-cm">Breite (cm)</label>
                     <p class="control has-icons-left">
                         <input class="input" type="number" id="width" placeholder="100 cm">
                         <span class="icon is-small is-left">
@@ -76,7 +76,7 @@
                             </span>
                     </p>
 
-                    <label for="depth" class="label" data-i18n-key="depth-cm">Tiefe (cm)</label>
+                    <label for="depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
                     <p class="control has-icons-left">
                         <input class="input" type="number" id="depth" placeholder="50 cm">
                         <span class="icon is-small is-left">
@@ -84,7 +84,7 @@
                             </span>
                     </p>
 
-                    <label for="height" class="label" data-i18n-key="height-cm">Höhe (cm)</label>
+                    <label for="height" class="label" data-i18n="height-cm">Höhe (cm)</label>
                     <p class="control has-icons-left">
                         <input class="input" type="number" id="height" placeholder="120 cm">
                         <span class="icon is-small is-left">
@@ -95,7 +95,7 @@
                     <div class="columns">
                         <div class="column">
                             <label for="numFullFloors" class="label"
-                                   data-i18n-key="full-floors">Vollebenen</label>
+                                   data-i18n="full-floors">Vollebenen</label>
                             <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
                             <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
                                  stroke="currentColor">
@@ -112,7 +112,7 @@
                         </div>
 
                         <div class="column">
-                            <label for="numRats" id="labelNumRats" data-i18n-key="number-of-rats">Anzahl an
+                            <label for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl an
                                 Ratten</label>
                             <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
                         </div>
@@ -123,7 +123,7 @@
         <div class="card-footer is-fullwidth">
             <div class="card" id="result-card">
                 <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n-key="result">Ergebnis</h2>
+                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
                     <div id="resultsDiv"></div>
@@ -137,8 +137,8 @@
 
 <div class="footer">
     <div class="language-switcher">
-        <label aria-hidden="false" style="display: none" data-i18n-key="change-language"></label>
+        <label aria-hidden="false" style="display: none" data-i18n="change-language"></label>
-        <select data-i18n-switcher class="locale-switcher" id="locale-switcher">
+        <select data-i18n-switcher class="select" id="locale-switcher">
             <option value="en">English</option>
             <option value="de">Deutsch</option>
         </select>

src/index.js

@@ -29,10 +29,10 @@ async function initI18next() {
 function translatePageElements() {
     // Translate content inside a tag
     const translatableElements = document.querySelectorAll(
-        "[data-i18n-key]",
+        "[data-i18n]",
     );
     translatableElements.forEach((el) => {
-        const key = el.getAttribute("data-i18n-key");
+        const key = el.getAttribute("data-i18n");
         el.innerHTML = i18next.t(key);
     });
     // Translate alt texts