POC Implementation using sveltekit-i18n

package.json

@@ -100,6 +100,7 @@
     "plausible-tracker": "0.3.9",
     "qr-creator": "^1.0.0",
     "stream-browserify": "^3.0.0",
+    "sveltekit-i18n": "^2.4.2",
     "ua-parser-js": "^1.0.35",
     "zod": "^3.22.3"
   },

src/frontend/src/lib/components/layout/LandingHeader.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import Logo from "$lib/components/ui/Logo.svelte";
+
+  import { locale } from "$lib/utils/translations";
+  import langMap from "$lib/utils/translations/lang.json";
   type Props = HTMLAttributes<HTMLElement>;
   const { children, class: className, ...props }: Props = $props();
+
+  const languages = Object.entries(langMap);
+  const switchLocale = (lang: string) => locale.set(lang);
 </script>
 
 <header
@@ -15,5 +21,14 @@
       Internet Identity
     </h1>
   </div>
+  <select
+    class="bg-bg-primary text-text-primary"
+    onchange={(e) => switchLocale((e.target as HTMLSelectElement).value)}
+    bind:value={$locale}
+  >
+    {#each languages as [code, label]}
+      <option value={code}>{label}</option>
+    {/each}
+  </select>
   {@render children?.()}
 </header>

src/frontend/src/lib/utils/translations/de.json

@@ -0,0 +1,5 @@
+{
+  "landing": {
+    "experience": "Erleben"
+  }
+}

src/frontend/src/lib/utils/translations/en.json

@@ -0,0 +1,5 @@
+{
+    "landing": {
+        "experience": "Experience"
+    }
+}

src/frontend/src/lib/utils/translations/es.json

@@ -0,0 +1,5 @@
+{
+  "landing": {
+    "experience": "Experiencia"
+  }
+}

src/frontend/src/lib/utils/translations/id.json

@@ -0,0 +1,5 @@
+{
+  "landing": {
+    "experience": "Pengalaman"
+  }
+}

src/frontend/src/lib/utils/translations/index.ts

@@ -0,0 +1,42 @@
+import i18n from "sveltekit-i18n";
+import type { Config } from "sveltekit-i18n";
+import lang from "./lang.json";
+
+const config: Config = {
+  translations: {
+    en: { lang },
+    es: { lang },
+    id: { lang },
+    de: { lang },
+  },
+  loaders: [
+    {
+      locale: "en",
+      key: "t",
+      loader: async () => (await import("./en.json")).default,
+    },
+    {
+      locale: "es",
+      key: "t",
+      loader: async () => (await import("./es.json")).default,
+    },
+    {
+      locale: "id",
+      key: "t",
+      loader: async () => (await import("./id.json")).default,
+    },
+    {
+      locale: "de",
+      key: "t",
+      loader: async () => (await import("./de.json")).default,
+    },
+  ],
+};
+
+export const { t, locale, locales, loading, loadTranslations } = new i18n(
+  config,
+);
+
+loading.subscribe(
+  ($loading) => $loading && console.log("Loading translations..."),
+);

src/frontend/src/lib/utils/translations/lang.json

@@ -0,0 +1,6 @@
+{
+  "en": "English",
+  "es": "Spanish",
+  "id": "Indonesian",
+  "de": "German"
+}

src/frontend/src/routes/(new-styling)/+layout.svelte

@@ -4,8 +4,16 @@
   import WaveCanvas from "$lib/components/backgrounds/WaveCanvas.svelte";
   import Toaster from "$lib/components/utils/Toaster.svelte";
   import type { LayoutProps } from "./$types";
+  import { loadTranslations, locale } from "$lib/utils/translations";
+  import { onMount } from "svelte";
 
   const { children }: LayoutProps = $props();
+
+  onMount(async () => {
+    const initLocale = "en";
+
+    await loadTranslations(initLocale, "t");
+  });
 </script>
 
 <svelte:head>

src/frontend/src/routes/(new-styling)/+page.svelte

@@ -21,6 +21,7 @@
   } from "$lib/config";
   import LandingHeader from "$lib/components/layout/LandingHeader.svelte";
   import { fade } from "svelte/transition";
+  import { t } from "$lib/utils/translations";
 
   const faq = [
     {
@@ -126,7 +127,7 @@
           <h1
             class="text-text-disabled text-center text-4xl md:text-5xl lg:text-7xl"
           >
-            Experience
+            {$t("t.landing.experience", { default: "Experience" })}
           </h1>
           <TextFade
             texts={[