feat(i18n): add variable app name (#1453)

* feat(i18n): add variable app name

* chore(env): add FLAT_REGION env

desktop/renderer-app/src/pages/SplashPage/index.tsx

@@ -84,7 +84,7 @@ export const SplashPage = observer<{}>(function SplashPage() {
                 })}
             >
                 <img
-                    alt="flat logo"
+                    alt="app logo"
                     height={64}
                     src={logoSVG}
                     width={64}

desktop/renderer-app/src/pages/UserSettingPage/AboutPage/index.tsx

@@ -30,8 +30,8 @@ export const AboutPage = (): React.ReactElement => {
         <UserSettingLayoutContainer>
             <div className="about-page-container">
                 <div className="about-page-middle-container">
-                    <img alt="flat logo" src={logoSVG} />
-                    <div className="flat-name">Flat</div>
+                    <img alt="app logo" src={logoSVG} />
+                    <div className="flat-name">{t("app-name")}</div>
                     <div className="flat-version">Version {runtime.appVersion}</div>
                     <Button type="primary" onClick={checkUpgradeVersion}>
                         <img src={updateSVG} />

desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx

@@ -74,7 +74,7 @@ export const GeneralSettingPage = (): React.ReactElement => {
                     </Radio.Group>
                 </div>
                 <div className="general-setting-appearance-picker-container">
-                    <span>{t("flat-appearance-setting")}</span>
+                    <span>{t("app-appearance-setting")}</span>
                     <AppearancePicker
                         changeAppearance={changeAppearance}
                         defaultValue={configStore.prefersColorScheme}

desktop/renderer-app/src/utils/i18n.ts

@@ -1,14 +1,24 @@
-import en from "flat-i18n/en.json";
-import zhCN from "flat-i18n/zh-CN.json";
 import i18next, { Resource } from "i18next";
 import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
+import en from "flat-i18n/locales/en.json";
+import zhCN from "flat-i18n/locales/zh-CN.json";
+
+import varsCNen from "flat-i18n/vars/cn/en.json";
+import varsCNzhCN from "flat-i18n/vars/cn/zh-CN.json";
+import varsUSen from "flat-i18n/vars/us/en.json";
+import varsUSzhCN from "flat-i18n/vars/us/zh-CN.json";
+
 const messages: Resource = {
     en: { translation: en },
     "zh-CN": { translation: zhCN },
 };
 
+const defaultVars: Record<string, Record<string, string>> = process.env.FLAT_REGION === "America"
+    ? { en: varsUSen, "zh-CN": varsUSzhCN }
+    : { en: varsCNen, "zh-CN": varsCNzhCN };
+
 void i18next
     .use(I18nextBrowserLanguageDetector)
     .use(initReactI18next)
@@ -20,6 +30,7 @@ void i18next
         supportedLngs: ["zh-CN", "en"],
         interpolation: {
             escapeValue: false, // react already safes from xss
+            defaultVariables: defaultVars[i18next.language] || defaultVars.en,
         },
     });
 
@@ -48,7 +59,16 @@ export const languages = ["en", "zh-CN"] as const;
  * to edit translations. open a new vscode window at <path to renderer-app>.
  */
 
-const changeLang = (lang: string): void =>
+const changeLang = (lang: string): void => {
     document.querySelector("html")?.setAttribute("lang", lang);
+
+    const defaultVariables = defaultVars[lang] || defaultVars.en;
+    if (i18next.options.interpolation) {
+        i18next.options.interpolation.defaultVariables = defaultVariables;
+    } else {
+        i18next.options.interpolation = { defaultVariables };
+    }
+};
+
 changeLang(i18next.language);
 i18next.on("languageChanged", changeLang);

desktop/renderer-app/tsconfig.json

@@ -7,11 +7,11 @@
     "baseUrl": ".",
     "paths": {
       "flat-types": ["../../packages/flat-types/src"],
-      "flat-i18n": ["../../packages/flat-i18n/locales"],
+      "flat-i18n": ["../../packages/flat-i18n"],
       "flat-components": ["../../packages/flat-components/src"]
     },
     "types": ["vite/client"]
   },
   "exclude": ["node_modules", "dist", "public"],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "typings/*.ts", "vite.config.ts","scripts/**/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "typings/*.ts", "vite.config.ts", "scripts/**/*.ts"]
 }

packages/flat-components/.storybook/i18next.js

@@ -1,8 +1,8 @@
 import { initReactI18next } from "react-i18next";
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import en from "flat-i18n/en.json";
-import zhCN from "flat-i18n/zh-CN.json";
+import en from "flat-i18n/locales/en.json";
+import zhCN from "flat-i18n/locales/zh-CN.json";
 
 const messages = {
     en: { translation: en },

packages/flat-components/.storybook/main.js

@@ -65,7 +65,7 @@ module.exports = {
         config.resolve.alias = {
             ...config.resolve.alias,
             "flat-types": path.resolve(__dirname, "..", "..", "flat-types", "src"),
-            "flat-i18n": path.resolve(__dirname, "..", "..", "flat-i18n", "locales"),
+            "flat-i18n": path.resolve(__dirname, "..", "..", "flat-i18n"),
         };
 
         return config;

packages/flat-components/src/components/LoginPage/LoginContent/index.tsx

@@ -51,7 +51,7 @@ export const LoginContent: React.FC<LoginContentProps> = ({
                         <>
                             <div className="login-content-logo">
                                 <img src={logoSVG} />
-                                <span className="login-content-title">{t("welcome-to-Flat")}</span>
+                                <span className="login-content-title">{t("app-welcome")}</span>
                                 <span className="login-content-text">
                                     {t("online-interaction-to-synchronize-ideas")}
                                 </span>

packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx

@@ -24,19 +24,19 @@ export const AppearancePicker: React.FC<AppearancePickerProps> = ({
                 <Radio value={"light"}>
                     <div className="appearance-picker-option">
                         <img src={lightSVG} />
-                        <span>{t("flat-appearance-light")}</span>
+                        <span>{t("app-appearance-light")}</span>
                     </div>
                 </Radio>
                 <Radio value={"dark"}>
                     <div className="appearance-picker-option">
                         <img src={darkSVG} />
-                        <span>{t("flat-appearance-dark")}</span>
+                        <span>{t("app-appearance-dark")}</span>
                     </div>
                 </Radio>
                 <Radio value={"auto"}>
                     <div className="appearance-picker-option">
                         <img src={autoSVG} />
-                        <span>{t("flat-appearance-auto")}</span>
+                        <span>{t("app-appearance-auto")}</span>
                     </div>
                 </Radio>
             </Radio.Group>

packages/flat-components/tsconfig.json

@@ -8,7 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "flat-types": ["../flat-types/src"],
-      "flat-i18n": ["../flat-i18n/locales"]
+      "flat-i18n": ["../flat-i18n"]
     }
   },
   "exclude": ["node_modules", "storybook-static", "public", ".storybook"],

packages/flat-i18n/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "app-name": "{{appName}}",
   "file-name": "File Name",
   "file-size": "File Size",
   "edit-date": "Last Updated",
@@ -98,9 +99,9 @@
   "today": "Today",
   "tomorrow": "Tomorrow",
   "invite-begin-time": "Start time: {{time}}",
-  "invite-prefix": "{{userName}} invites you to join the Flat room\n\nRoom theme: {{title}}",
+  "invite-prefix": "{{userName}} invites you to join the {{appName}} room\n\nRoom theme: {{title}}",
   "invite-suffix": "Room ID: {{uuid}}",
-  "invite-title": "{{userName}} invite to join the FLAT room",
+  "invite-title": "{{userName}} invite to join the {{appName}} room",
   "join-link": "Join Link : {{link}}",
   "repeat-weeks": "Repeat period: {{weeks}}",
   "room-uuid": "Room ID",
@@ -118,7 +119,7 @@
   "online-interaction-to-synchronize-ideas": "Interact online to keep ideas in sync",
   "privacy-agreement": "Privacy Policy",
   "service-policy": "Term of Service",
-  "welcome-to-Flat": "Welcome to Flat",
+  "app-welcome": "Welcome to {{appName}}",
   "back": "Back",
   "also-cancel-the-series-of-periodic-rooms": "At the same time cancel the series of periodic rooms",
   "cancel-of-periodic-rooms": "Cancel",
@@ -173,9 +174,9 @@
   "update-failed-tips": "Update failed, please reopen the program",
   "update-now": "Update immediately",
   "version-updates": "New version update",
-  "title-SplashPage": "Flat",
-  "title-LoginPage": "Flat",
-  "title-HomePage": "Flat",
+  "title-SplashPage": "{{appName}}",
+  "title-LoginPage": "{{appName}}",
+  "title-HomePage": "{{appName}}",
   "title-SmallClassPage": "Small Class",
   "title-OneToOnePage": "One To One",
   "title-BigClassPage": "Big Class",
@@ -186,7 +187,7 @@
   "title-ReplayPage": "Replay",
   "title-ModifyOrdinaryRoomPage": "Edit Room",
   "title-ModifyPeriodicRoomPage": "Edit Periodic Room",
-  "title-CloudStoragePage": "Flat",
+  "title-CloudStoragePage": "{{appName}}",
   "title-SystemCheckPage": "System Check",
   "title-CameraCheckPage": "Camera Check",
   "title-SpeakerCheckPage": "Speaker Check",
@@ -336,13 +337,13 @@
   "next-step": "Next step",
   "unable-to-hear": "Unable to hear",
   "volume": "Volume",
-  "already-installed-flat-tips": "Flat already installed? ",
-  "download-desktop-application": "Download Flat app",
+  "already-installed-tips": "{{appName}} already installed? ",
+  "download-desktop-application": "Download {{appName}} app",
   "download-desktop-application-tips": "Get the best experience",
   "login": "Login",
   "open": "Open",
   "open-now": "Open now",
-  "not-installed-flat-tips": "Not installed Flat?",
+  "not-installed-tips": "Not installed {{appName}}?",
   "download-now": "Download it now",
   "or": "or",
   "select-the-way-to-join-room": "How do you want to join room?",
@@ -362,7 +363,7 @@
   "low-volume": "The volume is too low",
   "share-screen": {
     "browser-not-permission": "Please grant your browser access to screen recording",
-    "desktop-not-permission": "Please grant Flat access to screen recording",
+    "desktop-not-permission": "Please grant {{appName}} access to screen recording",
     "choose-share-content": "Choose what to share",
     "tip-window-title": "Ending screen sharing",
     "tip-window-body": "You are sharing the current screen",
@@ -389,7 +390,7 @@
   "close-tip": "Close tip",
   "device-test-option": "Device test option",
   "turn-on-device-test": "Turn on device test when join the room",
-  "user-guide-text": "Want to learn more about Flat? ",
+  "user-guide-text": "Want to learn more about {{appName}}? ",
   "user-guide-button": "Check it out now",
   "start-recording": "Start recording",
   "stop-recording": "Stop recording",
@@ -401,10 +402,10 @@
     "hide": "Hide",
     "show": "Show"
   },
-  "flat-appearance-light": "Light",
-  "flat-appearance-dark": "Dark",
-  "flat-appearance-auto": "Auto",
-  "flat-appearance-setting": "Appearance",
+  "app-appearance-light": "Light",
+  "app-appearance-dark": "Dark",
+  "app-appearance-auto": "Auto",
+  "app-appearance-setting": "Appearance",
   "status": "Status",
   "time": "Time"
 }

packages/flat-i18n/locales/zh-CN.json

@@ -1,4 +1,5 @@
 {
+  "app-name": "{{appName}}",
   "edit-date": "修改日期",
   "file-name": "文件名称",
   "file-size": "大小",
@@ -97,12 +98,12 @@
   "all-loaded": "已全部加载",
   "no-record": "暂无记录",
   "no-room": "暂无房间",
-  "invite-prefix": "{{userName}} 邀请你加入 Flat 房间\n房间主题：{{title}}\n",
+  "invite-prefix": "{{userName}} 邀请你加入 {{appName}} 房间\n房间主题：{{title}}\n",
   "invite-begin-time": "开始时间：{{time}}\n",
   "invite-suffix": "房间号： {{uuid}}",
   "join-link": "加入链接: {{link}}",
   "repeat-weeks": "重复周期：{{weeks}}",
-  "invite-title": "{{userName}} 邀请加入 FLAT 房间",
+  "invite-title": "{{userName}} 邀请加入 {{appName}} 房间",
   "join-and-book-by-room-uuid": "可通过房间号加入和预约",
   "room-theme": "房间主题",
   "room-uuid": "房间号",
@@ -112,7 +113,7 @@
   "login-wechat": "微信登录",
   "login-github": "GitHub 登录",
   "login-agora": "声网登录",
-  "welcome-to-Flat": "欢迎使用 Flat",
+  "app-welcome": "欢迎使用 {{appName}}",
   "online-interaction-to-synchronize-ideas": "在线互动，让想法同步",
   "agree-terms": "请先同意服务条款",
   "have-read-and-agree": "已阅读并同意",
@@ -173,9 +174,9 @@
   "update-failed-tips": "更新失败，请重新打开程序",
   "update-now": "立即更新",
   "new-version-tips": "发现新版本：{{version}}, 请更新到最新版本获取更好的产品体验",
-  "title-SplashPage": "Flat",
-  "title-LoginPage": "Flat",
-  "title-HomePage": "Flat",
+  "title-SplashPage": "{{appName}}",
+  "title-LoginPage": "{{appName}}",
+  "title-HomePage": "{{appName}}",
   "title-SmallClassPage": "小班课",
   "title-OneToOnePage": "一对一",
   "title-BigClassPage": "大班课",
@@ -186,7 +187,7 @@
   "title-ReplayPage": "房间回放",
   "title-ModifyOrdinaryRoomPage": "修改房间",
   "title-ModifyPeriodicRoomPage": "修改周期性房间",
-  "title-CloudStoragePage": "Flat",
+  "title-CloudStoragePage": "{{appName}}",
   "title-SystemCheckPage": "系统检测",
   "title-CameraCheckPage": "摄像头检测",
   "title-SpeakerCheckPage": "扬声器检测",
@@ -343,10 +344,10 @@
   "web-version-join-room": "使用网页版加入房间",
   "web-version-join-room-tips": "无需下载应用, 快速加入",
   "or": "或",
-  "already-installed-flat-tips": "已安装 Flat？",
+  "already-installed-tips": "已安装 {{appName}}",
   "open": "打开",
   "open-now": "立即打开",
-  "not-installed-flat-tips": "没有安装 Flat？",
+  "not-installed-tips": "没有安装 {{appName}}",
   "download-now": "立即下载",
   "region-cn-hz": "中国",
   "region-us-sv": "美国",
@@ -362,7 +363,7 @@
   "low-volume": "音量过低",
   "share-screen": {
     "browser-not-permission": "请授予浏览器访问屏幕录制的权限",
-    "desktop-not-permission": "请授予 Flat 访问屏幕录制的权限",
+    "desktop-not-permission": "请授予 {{appName}} 访问屏幕录制的权限",
     "choose-share-content": "选择共享内容",
     "tip-window-title": "结束屏幕共享",
     "tip-window-body": "正在共享屏幕",
@@ -389,7 +390,7 @@
   "close-tip": "不再提示",
   "device-test-option": "设备检测选项",
   "turn-on-device-test": "进入房间时检测",
-  "user-guide-text": "想了解更多 Flat 的使用技巧？",
+  "user-guide-text": "想了解更多 {{appName}} 的使用技巧？",
   "user-guide-button": "立即查看",
   "start-recording": "开始录制",
   "stop-recording": "停止录制",
@@ -401,10 +402,10 @@
     "hide": "折叠",
     "show": "展开"
   },
-  "flat-appearance-light": "浅色",
-  "flat-appearance-dark": "深色",
-  "flat-appearance-auto": "自动",
-  "flat-appearance-setting": "外观",
+  "app-appearance-light": "浅色",
+  "app-appearance-dark": "深色",
+  "app-appearance-auto": "自动",
+  "app-appearance-setting": "外观",
   "status": "状态",
   "time": "时间"
 }

packages/flat-i18n/vars/cn/en.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Flat"
+}

packages/flat-i18n/vars/cn/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Flat"
+}

packages/flat-i18n/vars/us/en.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Flint"
+}

packages/flat-i18n/vars/us/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Flint"
+}

scripts/constants.js

@@ -12,7 +12,7 @@ const i18nPath = join(packagesPath, "flat-i18n");
 const componentsPath = join(packagesPath, "flat-components");
 
 const typesEntryPath = join(packagesPath, "flat-types", "src");
-const i18nEntryPath = join(packagesPath, "flat-i18n", "locales");
+const i18nEntryPath = join(packagesPath, "flat-i18n");
 const componentsEntryPath = join(packagesPath, "flat-components", "src");
 
 const rootPackageJSONPath = join(rootPath, "package.json");

web/flat-web/scripts/vite-plugin-dotenv.ts

@@ -3,6 +3,7 @@ import path from "path";
 import dotenvReal from "dotenv";
 import { expand } from "dotenv-expand";
 import type { Plugin } from "vite";
+import { configRegion } from "../../../scripts/utils/auto-choose-config";
 
 // based on https://github.com/IndexXuan/vite-plugin-env-compatible
 export function dotenv(envDir: string): Plugin {
@@ -25,6 +26,7 @@ export function dotenv(envDir: string): Plugin {
                 define["process.env.PROD"] = mode === "production";
                 define["process.env.DEV"] = mode === "development";
                 define["process.env.NODE_DEV"] = JSON.stringify(mode);
+                define["process.env.FLAT_REGION"] = JSON.stringify(configRegion());
 
                 config.define = { ...config.define, ...define };
             }