Translate pages

frontend/src/i18n/index.ts

@@ -0,0 +1,64 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en';
+import de from './locales/de';
+import fr from './locales/fr';
+import hu from './locales/hu';
+import zh from './locales/zh';
+
+export const SUPPORTED_LANGUAGES = [
+  { code: 'en', label: 'English', flag: '\uD83C\uDDEC\uD83C\uDDE7' },
+  { code: 'fr', label: 'Fran\u00E7ais', flag: '\uD83C\uDDEB\uD83C\uDDF7' },
+  { code: 'de', label: 'Deutsch', flag: '\uD83C\uDDE9\uD83C\uDDEA' },
+  { code: 'hu', label: 'Magyar', flag: '\uD83C\uDDED\uD83C\uDDFA' },
+  { code: 'zh', label: '\u4E2D\u6587', flag: '\uD83C\uDDE8\uD83C\uDDF3' },
+] as const;
+
+export type LanguageCode = (typeof SUPPORTED_LANGUAGES)[number]['code'];
+
+const supportedCodes: Set<string> = new Set(SUPPORTED_LANGUAGES.map((l) => l.code));
+
+function detectLanguage(): string {
+  // 1. Explicit user choice (persisted from the language dropdown)
+  const stored = localStorage.getItem('language');
+  if (stored && supportedCodes.has(stored)) return stored;
+
+  // 2. Browser preference (navigator.languages falls back to navigator.language)
+  for (const tag of navigator.languages ?? [navigator.language]) {
+    // Match full tag first (e.g. "zh-CN" → "zh"), then just the prefix
+    const lower = tag.toLowerCase();
+    if (supportedCodes.has(lower)) return lower;
+    const prefix = lower.split('-')[0];
+    if (supportedCodes.has(prefix)) return prefix;
+  }
+
+  return 'en';
+}
+
+const initialLang = detectLanguage();
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    fr: { translation: fr },
+    de: { translation: de },
+    hu: { translation: hu },
+    zh: { translation: zh },
+  },
+  lng: initialLang,
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false, // React already escapes
+  },
+});
+
+/**
+ * Translate a key that is computed at runtime (not a literal).
+ * Bypasses the strict type checking on t() for dynamic key construction.
+ */
+export function tDynamic(key: string): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (i18n.t as any)(key);
+}
+
+export default i18n;