✨ feat(app): add i18n translations for de/en

package.json

@@ -16,10 +16,12 @@
     "@iiif/parser": "^1.1.2",
     "@samvera/clover-iiif": "^2.3.1",
     "axios": "^1.6.5",
+    "i18next": "^23.7.16",
     "konsta": "3.1.1",
     "konva": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.0",
     "react-konva": "^18.2.10",
     "react-plock": "^3.0.2",
     "react-router-dom": "^6.21.1",

src/components/Layout.tsx

@@ -1,5 +1,6 @@
 // @ts-expect-error konsta typing
 import { App, Icon, Page, Tabbar, TabbarLink } from "konsta/react";
+import { useTranslation } from "react-i18next";
 import {
   MdFavoriteBorder,
   MdOutlineAssignmentInd,
@@ -9,6 +10,7 @@ import {
 import { NavLink, Outlet, useMatch, useResolvedPath } from "react-router-dom";
 
 function Layout() {
+  const { t } = useTranslation();
   return (
     <App theme="material">
       <Page>
@@ -35,7 +37,7 @@ function Layout() {
                 }`}
               />
             }
-            label={"Portal"}
+            label={t("portal")}
             touchRipple={false}
           />
 
@@ -57,7 +59,7 @@ function Layout() {
                 }`}
               />
             }
-            label={"Meine Auswahl"}
+            label={t("selection")}
             touchRipple={false}
           />
 
@@ -79,7 +81,7 @@ function Layout() {
                 }`}
               />
             }
-            label={"Meine Sammlung"}
+            label={t("collection")}
             touchRipple={false}
           />
 
@@ -101,7 +103,7 @@ function Layout() {
                 }`}
               />
             }
-            label={"Meine Leinwand"}
+            label={t("artwork")}
             touchRipple={false}
           />
         </Tabbar>

src/components/Start.tsx

@@ -1,5 +1,7 @@
 // @ts-expect-error konsta typing
 import { Block, Button } from "konsta/react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 
 import CollageIcon from "/collage.webp";
 import LogoIcon from "/logo_animated.svg";
@@ -22,22 +24,16 @@ const Collage = () => {
 };
 
 function Start() {
+  const { t } = useTranslation();
   return (
     <Block className="flex flex-col flex-wrap my-0 gap-4 container mx-auto justify-center content-center text-center">
       <Logo />
-      <h1 className="text-2xl">
-        Herzlich willkommen in der schillernden Welt von GLAMorous Europe!
-      </h1>
-      <h2 className="text-xl">
-        Entdecke hier die schönsten Sammlungsobjekte aus Museen, Galerien,
-        Bibliotheken und Archiven verschiedener Länder Europas.
-      </h2>
+      <h1 className="text-2xl">{t("startTitle")}</h1>
+      <h2 className="text-xl">{t("startSubtitle")}</h2>
       <Collage />
-      <p className="text-xl">
-        Lass dich von der künstlerischen Vielfalt Europas inspirieren!
-      </p>
+      <p className="text-xl">{t("startText")}</p>
       <Button className="p-2 rounded-full text-xl" rounded inline outline>
-        Los geht's!
+        <Link to={"/selection"}>{t("startButtonText")}</Link>
       </Button>
     </Block>
   );

src/locales/de.json

@@ -0,0 +1,23 @@
+{
+  "translation": {
+    "artwork": "Meine Leinwand",
+    "artworkTitle": "Gestalte mit einzelnen Bildelementen dein ganz eigenes europäisches Kunstwerk und teile es mit anderen.",
+    "chooseLanguage": "Sprache wählen:",
+    "collection": "Meine Sammlung",
+    "collectionAddText": "Meiner Leinwand hinzufügen",
+    "collectionClose": "Schließen",
+    "collectionLoading": "Lade...",
+    "collectionTitle": "Öffne die Tür zu neuen Gemälden, Skulpturen und Fotografien, die perfekt zu deinem Geschmack passen.",
+    "portal": "Portal",
+    "selection": "Meine Auswahl",
+    "selectionCreator": "Urheber:in:",
+    "selectionLocation": "Ort:",
+    "selectionTitle": "Wähle deine persönlichen Favoriten aus.",
+    "selectionUnknown": "Unbekannt",
+    "selectionYear": "Jahr:",
+    "startButtonText": "Los geht's!",
+    "startSubtitle": "Entdecke hier die schönsten Sammlungsobjekte aus Museen, Galerien, Bibliotheken und Archiven verschiedener Länder Europas.",
+    "startText": "Lass dich von der künstlerischen Vielfalt Europas inspirieren!",
+    "startTitle": "Herzlich willkommen in der schillernden Welt von GLAMorous Europe!"
+  }
+}

src/locales/en.json

@@ -0,0 +1,23 @@
+{
+  "translation": {
+    "artwork": "My Artwork",
+    "artworkTitle": "Use individual picture elements to create your very own European work of art and share it with others.",
+    "chooseLanguage": "Choose Language:",
+    "collection": "My Collection",
+    "collectionAddText": "Add to my artwork",
+    "collectionClose": "Close",
+    "collectionLoading": "Loading...",
+    "collectionTitle": "Open the door to new paintings, sculptures and photographs that perfectly match your taste.",
+    "portal": "Portal",
+    "selection": "My Selection",
+    "selectionCreator": "Creator:",
+    "selectionLocation": "Location:",
+    "selectionTitle": "Choose your personal favourites.",
+    "selectionUnknown": "Unknown",
+    "selectionYear": "Year:",
+    "startButtonText": "Let's go!",
+    "startSubtitle": "Discover the most beautiful collection objects from museums, galleries, libraries and archives from various European countries.",
+    "startText": "Be inspired by the artistic diversity of Europe!",
+    "startTitle": "Welcome to the glittering world of GLAMorous Europe!"
+  }
+}

src/main.tsx

@@ -1,14 +1,30 @@
+import i18next from "i18next";
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { I18nextProvider } from "react-i18next";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./components/App.tsx";
 import "./index.css";
+import de from "./locales/de.json";
+import en from "./locales/en.json";
+
+i18next.init({
+  interpolation: { escapeValue: false },
+  lng: "auto",
+  fallbackLng: "de",
+  resources: {
+    de: { ...de },
+    en: { ...en },
+  },
+});
 
 createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <I18nextProvider i18n={i18next}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </I18nextProvider>
   </React.StrictMode>,
 );