Merge pull request #411 from toeverything/fix/venus-i18n

Fix/venus i18n

apps/venus/src/app/common/Header.tsx

@@ -13,7 +13,7 @@ import AFFiNETextLogo from './affine-text-logo.png';
 import { HoverMenu } from './HoverMenu';
 import { MobileHeader } from './MobileHeader';
 
-import { options } from '../i18n';
+import { LOCALES } from '../i18n';
 
 export const AFFiNEHeader = () => {
     const matches = useMediaQuery('(max-width: 1024px)');
@@ -140,15 +140,15 @@ export const AFFiNEHeader = () => {
                     }}
                 />
                 <Select
-                    defaultValue="en"
+                    defaultValue={i18n.language}
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}
                     onChange={changeLanguage}
                     size="md"
                     variant="plain"
                 >
-                    {options.map(option => (
+                    {LOCALES.map(lang => (
-                        <Option key={option.value} value={option.value}>
+                        <Option key={lang.tag} value={lang.tag}>
-                            {option.text}
+                            {lang.originalName}
                         </Option>
                     ))}
                 </Select>

apps/venus/src/app/i18n/index.ts

@@ -1,25 +1,63 @@
-import i18next from 'i18next';
+import i18next, { Resource } from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import {
-import en_US from './resources/en.json';
+    I18nextProvider,
-import zh_CN from './resources/zh.json';
+    initReactI18next,
+    useTranslation,
+} from 'react-i18next';
+import { LOCALES } from './resources';
+import type en_US from './resources/en.json';
 
-const resources = {
+// See https://react.i18next.com/latest/typescript
-    en: en_US,
+declare module 'react-i18next' {
-    zh: zh_CN,
+    interface CustomTypeOptions {
-} as const;
+        // custom namespace type if you changed it
+        // defaultNS: 'ns1';
+        // custom resources type
+        resources: {
+            en: typeof en_US;
+        };
+    }
+}
+
+const STORAGE_KEY = 'i18n_lng';
+
+export { i18n, useTranslation, I18nProvider, LOCALES };
+
+const resources = LOCALES.reduce<Resource>(
+    (acc, { tag, res }) => ({ ...acc, [tag]: { translation: res } }),
+    {}
+);
+
+const fallbackLng = LOCALES[0].tag;
+const standardizeLocale = (language: string) => {
+    if (LOCALES.find(locale => locale.tag === language)) return language;
+    if (
+        LOCALES.find(
+            locale => locale.tag === language.slice(0, 2).toLowerCase()
+        )
+    )
+        return language;
+    return fallbackLng;
+};
+
+const language = standardizeLocale(
+    localStorage.getItem(STORAGE_KEY) ?? navigator.language
+);
+
+const i18n = i18next.createInstance();
+i18n.use(initReactI18next).init({
+    lng: language,
+    fallbackLng,
+    debug: process.env['NODE_ENV'] === 'development',
 
-i18next.use(initReactI18next).init({
-    lng: 'en',
-    fallbackLng: 'en',
     resources,
     interpolation: {
         escapeValue: false, // not needed for react as it escapes by default
     },
 });
 
-export const options = [
+i18n.on('languageChanged', lng => {
-    { value: 'en', text: 'English' },
+    localStorage.setItem(STORAGE_KEY, lng);
-    { value: 'zh', text: '简体中文' },
+});
-];
 
-export { i18next };
+const I18nProvider = I18nextProvider;

apps/venus/src/app/i18n/resources/en.json

@@ -1,5 +1,4 @@
 {
-    "translation": {
     "Blog": "Blog",
     "AboutUs": "About Us",
     "Open Source": "Open Source",
@@ -9,6 +8,7 @@
     "Privacy First": "Privacy First",
     "Alternative": "Alternative",
     "Check GitHub": "Check GitHub",
+    "GitHub": "GitHub",
     "Try it Online": "Try it Online",
     "language": "Language",
     "description1": {
@@ -36,5 +36,4 @@
     "BuildFor": "Build for an open and semantic future",
     "KeepUpdated": "Keep Updated on",
     "Join": "Join Our Community"
-    }
 }

apps/venus/src/app/i18n/resources/es.json

@@ -0,0 +1,32 @@
+{
+    "Alternative": "Alternativa",
+    "BuildFor": "Construir por un futuro abierto y semántico",
+    "Check GitHub": "Revisar en GitHub",
+    "Join": "Únete a nuestra comunidad",
+    "KeepUpdated": "Mantente actualizado",
+    "Open Source": "Código abierto",
+    "Privacy First": "La privacidad es lo primero",
+    "Try it Online": "Prueba Online",
+    "description1": {
+        "part1": "Affine es un base de conocimiento colaborativa de próxima generación para los profesionales.",
+        "part2": "Es más que una simple colección de Documentos, Pizarra y Tablas.",
+        "part3": "Transforma cualquier bloque como tu quieras. ",
+        "part4": "Dígale adios a la redundancia, Almacene sus datos una vez, y manténgalos como usted quiera."
+    },
+    "description2": {
+        "part1": "Dele forma a sus  páginas.",
+        "part2": "Los Documentos, Kanbans y Base de datos son completamente funcionales en cualquier lugar, en cualquier momento.  Un verdadero entorno de lo que ves y lo que obtienes para tus datos.",
+        "part3": "Todas las páginas tiene una vista de documento y de pizarra. "
+    },
+    "description3": {
+        "part1": "Programe sus tareas.",
+        "part2": "No más caos manejando múltiples vistas.",
+        "part3": "Establezca un TODO con Markdown, y edítelo sin problemas en un Kanban. ",
+        "part4": "La gestión de tablas multidimensionales debería ser así de fácil y ahora lo es."
+    },
+    "description4": {
+        "part1": "Privacidad en primer lugar, y colaboración sin compromiso. ",
+        "part2": "\nNo nos gusta estar encerrados, y a usted tampoco debería. La privacidad está en la base de todo lo que hacemos, pero no debe limitarnos, por eso no hay compromisos.",
+        "part3": "Sus datos son suyos; siempre están almacenados y protegidos de forma local, siempre disponibles para usted. Sin dejar de lado el poder disfrutar de funciones de colaboración como la edición en tiempo real y el uso compartido con otros, sin ninguna configuración en la nube."
+    }
+}

apps/venus/src/app/i18n/resources/index.ts

@@ -0,0 +1,24 @@
+import en from './en.json';
+import es from './es.json';
+import zh_Hans from './zh.json';
+
+export const LOCALES = [
+    {
+        name: 'English',
+        tag: 'en',
+        originalName: 'English',
+        res: en,
+    },
+    {
+        name: 'Simplified Chinese',
+        tag: 'zh-Hans',
+        originalName: '简体中文',
+        res: zh_Hans,
+    },
+    {
+        name: 'Spanish',
+        tag: 'es',
+        originalName: 'español',
+        res: es,
+    },
+] as const;

apps/venus/src/app/i18n/resources/zh.json

@@ -1,5 +1,4 @@
 {
-    "translation": {
     "Blog": "博客",
     "AboutUs": "关于我们",
     "Open Source": "开源",
@@ -36,5 +35,4 @@
     "BuildFor": "构建一个开放和语义化的未来",
     "KeepUpdated": "持续更新在",
     "Join": "加入我们的社区"
-    }
 }