fix(website/i18n): language detection not always working

apps/website/src/i18n.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { mapLocale } from "./i18n";
+
+describe("mapLocale", () => {
+    it("maps Chinese", () => {
+        expect(mapLocale("zh-TW")).toStrictEqual("zh-Hant");
+        expect(mapLocale("zh-CN")).toStrictEqual("zh-Hans");
+    });
+
+    it("maps languages without countries", () => {
+        expect(mapLocale("ro-RO")).toStrictEqual("ro");
+        expect(mapLocale("ro")).toStrictEqual("ro");
+    });
+});

apps/website/src/i18n.ts

@@ -17,4 +17,17 @@ export const LOCALES: Locale[] = [
     { id: "ar", name: "اَلْعَرَبِيَّةُ", rtl: true },
 ].toSorted((a, b) => a.name.localeCompare(b.name));
 
+export function mapLocale(locale: string) {
+    if (!locale) return 'en';
+    const lower = locale.toLowerCase();
 
+    if (lower.startsWith('zh')) {
+        if (lower.includes('tw') || lower.includes('hk') || lower.includes('mo') || lower.includes('hant')) {
+            return 'zh-Hant';
+        }
+        return 'zh-Hans';
+    }
+
+    // Default for everything else
+    return locale.split('-')[0]; // e.g. "en-US" -> "en"
+}

apps/website/src/index.tsx

@@ -10,7 +10,7 @@ import SupportUs from './pages/SupportUs/SupportUs.js';
 import { createContext } from 'preact';
 import { useLayoutEffect, useState } from 'preact/hooks';
 import { default as i18next, changeLanguage } from 'i18next';
-import { LOCALES } from './i18n';
+import { LOCALES, mapLocale } from './i18n';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from "react-i18next";
 
@@ -40,7 +40,7 @@ export function App(props: {repoStargazersCount: number}) {
 
 export function LocaleProvider({ children }) {
   const { path } = useLocation();
-  const localeId = path.split('/')[1] || navigator.language;
+  const localeId = mapLocale(path.split('/')[1] || navigator.language);
   const [ loaded, setLoaded ] = useState(false);
 
   useLayoutEffect(() => {