i18n: Proof of concept

Author: danielhjacobs

i18n/index.js

@@ -0,0 +1,14 @@
+const en = require("./translations.en.json");
+const es = require("./translations.es.json");
+
+const i18n = {
+  translations: {
+    en,
+    es,
+  },
+  defaultLang: "en",
+  useBrowserDefault: true,
+  languageDataStore: "localStorage",
+};
+
+module.exports = i18n;

i18n/translations.en.json

@@ -0,0 +1,3 @@
+{
+  "tagline": "An open source Flash Player emulator"
+}

i18n/translations.es.json

@@ -0,0 +1,3 @@
+{
+  "tagline": "Un emulador de Flash Player de código abierto"
+}

package-lock.json

@@ -38,6 +38,7 @@
     "feed": "^4.2.2",
     "gray-matter": "^4.0.3",
     "jsdom": "^25.0.1",
+    "next-export-i18n": "^3.0.0",
     "octokit": "^4.0.2",
     "postcss": "^8.4.49",
     "postcss-preset-mantine": "^1.17.0",

package.json

@@ -2,3 +2,6 @@ a:link,
 a:visited {
   color: var(--ruffle-orange-3);
 }
+span[data-language-switcher] {
+  display: none;
+}

src/app/globals.css

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useTranslation } from "next-export-i18n";
 import classes from "./index.module.css";
 import {
   Container,
@@ -26,6 +27,7 @@ const Installers = dynamic(() => import("./installers"), {
 });
 
 export default function Home() {
+  const { t } = useTranslation();
   const [latest, setLatest] = React.useState<GithubRelease | null>(null);
 
   React.useEffect(() => {
@@ -45,8 +47,8 @@ export default function Home() {
       <InteractiveLogo className={classes.logo} />
 
       <Container size="md">
-        <Title className={classes.title}>
-          An open source Flash Player emulator
+        <Title className={classes.title} suppressHydrationWarning>
+          {t("tagline")}
         </Title>
         <div className={classes.hero}>
           <Image

src/app/page.tsx

@@ -34,6 +34,12 @@
   }
 }
 
+.hiddenOnDesktop {
+  @media (min-width: $mantine-breakpoint-md) {
+    display: none;
+  }
+}
+
 .burger {
   --burger-color: var(--ruffle-orange);
 }

src/components/header.module.css

@@ -6,6 +6,8 @@ import classes from "./header.module.css";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { LanguageSwitcher } from "next-export-i18n";
+import React, { useState, useEffect } from "react";
 
 const links = [
   { link: "/", label: "About Ruffle" },
@@ -21,8 +23,45 @@ const links = [
     target: "_blank",
   },
 ];
+const languages: Record<string, string> = {
+  en: "English",
+  es: "Español",
+};
 
 export function Header() {
+  const [selectedLang, setSelectedLang] = useState("en");
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const browserLang =
+        window.navigator.language || window.navigator.languages
+          ? (window.navigator.language || window.navigator.languages[0])
+              .split("-")[0]
+              .toLowerCase()
+          : "en";
+      setSelectedLang(browserLang);
+      const selectedLang = window.localStorage
+        ? window.localStorage.getItem("next-export-i18n-lang")
+        : null;
+      if (selectedLang) {
+        setSelectedLang(selectedLang);
+      }
+    }
+  }, []);
+
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const newLang = event.target.value;
+    setSelectedLang(newLang);
+    // Trigger the LanguageSwitcher programmatically
+    const languageSwitcher = document.querySelector(
+      `[data-language-switcher][aria-label='set language to ${newLang}']`,
+    ) as HTMLElement;
+    if (languageSwitcher) {
+      languageSwitcher.click();
+    }
+  };
+
   const [opened, { toggle, close }] = useDisclosure(false);
   const pathname = usePathname();
 
@@ -43,7 +82,7 @@ export function Header() {
 
   return (
     <header className={classes.header}>
-      <Container size="md" className={classes.inner}>
+      <Container size="lg" className={classes.inner}>
         <Link href="/">
           <Image
             src="/logo.svg"
@@ -55,7 +94,19 @@ export function Header() {
         </Link>
         <Group gap={5} visibleFrom="md">
           {items}
+          <select value={selectedLang} onChange={handleLanguageChange}>
+            {Object.entries(languages).map(([langCode, langName]) => (
+              <option key={langCode} value={langCode}>
+                {langName}
+              </option>
+            ))}
+          </select>
         </Group>{" "}
+        {Object.keys(languages).map((langCode) => (
+          <LanguageSwitcher key={langCode} lang={langCode}>
+            {languages[langCode]}
+          </LanguageSwitcher>
+        ))}
         <Drawer
           opened={opened}
           onClose={close}
@@ -69,6 +120,17 @@ export function Header() {
         >
           {items}
         </Drawer>
+        <select
+          className={classes.hiddenOnDesktop}
+          value={selectedLang}
+          onChange={handleLanguageChange}
+        >
+          {Object.entries(languages).map(([langCode, langName]) => (
+            <option key={langCode} value={langCode}>
+              {langName}
+            </option>
+          ))}
+        </select>
         <Burger
           opened={opened}
           onClick={toggle}