i18n: Proof of concept

danielhjacobs · danielhjacobs · commit 6be2ab96f36f · 2024-11-13T14:08:22.000-05:00
diff --git a/i18n/index.js b/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;
diff --git a/i18n/translations.en.json b/i18n/translations.en.json
@@ -0,0 +1,3 @@
+{
+  "tagline": "An open source Flash Player emulator"
+}
diff --git a/i18n/translations.es.json b/i18n/translations.es.json
@@ -0,0 +1,3 @@
+{
+  "tagline": "Un emulador de Flash Player de código abierto"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,3 +2,6 @@ a:link,
 a:visited {
   color: var(--ruffle-orange-3);
 }
+span[data-language-switcher] {
+  display: none;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { MantineProvider, ColorSchemeScript } from "@mantine/core";
 import { cssResolver, theme } from "@/theme";
 import { Header } from "@/components/header";
 import { FooterSocial } from "@/components/footer";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Ruffle - Flash Emulator",
@@ -42,7 +43,7 @@ export default function RootLayout({
       <body>
         <MantineProvider theme={theme} cssVariablesResolver={cssResolver}>
           <Header />
-          {children}
+          <Suspense>{children}</Suspense>
           <FooterSocial />
         </MantineProvider>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -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
diff --git a/src/components/header.module.css b/src/components/header.module.css
@@ -34,6 +34,12 @@
   }
 }
 
+.hiddenOnDesktop {
+  @media (min-width: $mantine-breakpoint-md) {
+    display: none;
+  }
+}
+
 .burger {
   --burger-color: var(--ruffle-orange);
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -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, { Suspense, 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,21 @@ 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) => (
+          <Suspense key={langCode}>
+            <LanguageSwitcher lang={langCode}>
+              {languages[langCode]}
+            </LanguageSwitcher>
+          </Suspense>
+        ))}
         <Drawer
           opened={opened}
           onClose={close}
@@ -69,6 +122,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}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "tagline": "An open source Flash Player emulator"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "tagline": "Un emulador de Flash Player de código abierto"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2,3 +2,6 @@ a:link,`
`2`	`2`	`a:visited {`
`3`	`3`	`color: var(--ruffle-orange-3);`
`4`	`4`	`}`
	`5`	`+span[data-language-switcher] {`
	`6`	`+ display: none;`
	`7`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,12 @@`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`
	`37`	`+.hiddenOnDesktop {`
	`38`	`+ @media (min-width: $mantine-breakpoint-md) {`
	`39`	`+ display: none;`
	`40`	`+ }`
	`41`	`+}`
	`42`	`+`
`37`	`43`	`.burger {`
`38`	`44`	`--burger-color: var(--ruffle-orange);`
`39`	`45`	`}`