From 61e23274be011129d03c6e2831787a92991e0c68 Mon Sep 17 00:00:00 2001 From: CRIMX Date: Wed, 30 Mar 2022 16:47:26 +0800 Subject: [PATCH] feat(i18n): add variable app name (#1453) * feat(i18n): add variable app name * chore(env): add FLAT_REGION env --- .../src/pages/SplashPage/index.tsx | 2 +- .../pages/UserSettingPage/AboutPage/index.tsx | 4 +-- .../GeneralSettingPage/index.tsx | 2 +- desktop/renderer-app/src/utils/i18n.ts | 26 +++++++++++++-- desktop/renderer-app/tsconfig.json | 4 +-- .../flat-components/.storybook/i18next.js | 4 +-- packages/flat-components/.storybook/main.js | 2 +- .../LoginPage/LoginContent/index.tsx | 2 +- .../SettingPage/AppearancePicker/index.tsx | 6 ++-- packages/flat-components/tsconfig.json | 2 +- packages/flat-i18n/locales/en.json | 33 ++++++++++--------- packages/flat-i18n/locales/zh-CN.json | 31 ++++++++--------- packages/flat-i18n/vars/cn/en.json | 3 ++ packages/flat-i18n/vars/cn/zh-CN.json | 3 ++ packages/flat-i18n/vars/us/en.json | 3 ++ packages/flat-i18n/vars/us/zh-CN.json | 3 ++ scripts/constants.js | 2 +- web/flat-web/scripts/vite-plugin-dotenv.ts | 2 ++ .../src/pages/JoinPage/JoinPageDesktop.tsx | 4 +-- .../src/pages/JoinPage/JoinPageMobile.tsx | 12 +++++-- .../pages/UserSettingPage/AboutPage/index.tsx | 6 ++-- .../GeneralSettingPage/index.tsx | 2 +- web/flat-web/src/utils/i18n.ts | 25 ++++++++++++-- web/flat-web/tsconfig.json | 4 +-- 24 files changed, 125 insertions(+), 62 deletions(-) create mode 100644 packages/flat-i18n/vars/cn/en.json create mode 100644 packages/flat-i18n/vars/cn/zh-CN.json create mode 100644 packages/flat-i18n/vars/us/en.json create mode 100644 packages/flat-i18n/vars/us/zh-CN.json diff --git a/desktop/renderer-app/src/pages/SplashPage/index.tsx b/desktop/renderer-app/src/pages/SplashPage/index.tsx index d45afdd17c5..0d3ae298f33 100644 --- a/desktop/renderer-app/src/pages/SplashPage/index.tsx +++ b/desktop/renderer-app/src/pages/SplashPage/index.tsx @@ -84,7 +84,7 @@ export const SplashPage = observer<{}>(function SplashPage() { })} > flat logo {
- flat logo -
Flat
+ app logo +
{t("app-name")}
Version {runtime.appVersion}
- {t("flat-appearance-setting")} + {t("app-appearance-setting")} > = 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 . */ -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); diff --git a/desktop/renderer-app/tsconfig.json b/desktop/renderer-app/tsconfig.json index 823da80353e..a847c8f075e 100644 --- a/desktop/renderer-app/tsconfig.json +++ b/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"] } diff --git a/packages/flat-components/.storybook/i18next.js b/packages/flat-components/.storybook/i18next.js index 36b91f62946..213295a3cf2 100644 --- a/packages/flat-components/.storybook/i18next.js +++ b/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 }, diff --git a/packages/flat-components/.storybook/main.js b/packages/flat-components/.storybook/main.js index eb8bdd9f334..388c8755a52 100644 --- a/packages/flat-components/.storybook/main.js +++ b/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; diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx index 72b8bb4338f..8b1bb7a9057 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx @@ -51,7 +51,7 @@ export const LoginContent: React.FC = ({ <>
- {t("welcome-to-Flat")} + {t("app-welcome")} {t("online-interaction-to-synchronize-ideas")} diff --git a/packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx b/packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx index 9bc7dd8dcdc..a9a4e0b696c 100644 --- a/packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx +++ b/packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx @@ -24,19 +24,19 @@ export const AppearancePicker: React.FC = ({
- {t("flat-appearance-light")} + {t("app-appearance-light")}
- {t("flat-appearance-dark")} + {t("app-appearance-dark")}
- {t("flat-appearance-auto")} + {t("app-appearance-auto")}
diff --git a/packages/flat-components/tsconfig.json b/packages/flat-components/tsconfig.json index 57f5af00f53..f93ffff2fba 100644 --- a/packages/flat-components/tsconfig.json +++ b/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"], diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json index ffeeda826f0..f71a4915e28 100644 --- a/packages/flat-i18n/locales/en.json +++ b/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" } diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json index db0d0ae1237..266e8f87ad8 100644 --- a/packages/flat-i18n/locales/zh-CN.json +++ b/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": "时间" } diff --git a/packages/flat-i18n/vars/cn/en.json b/packages/flat-i18n/vars/cn/en.json new file mode 100644 index 00000000000..6867d034cc2 --- /dev/null +++ b/packages/flat-i18n/vars/cn/en.json @@ -0,0 +1,3 @@ +{ + "appName": "Flat" +} diff --git a/packages/flat-i18n/vars/cn/zh-CN.json b/packages/flat-i18n/vars/cn/zh-CN.json new file mode 100644 index 00000000000..6867d034cc2 --- /dev/null +++ b/packages/flat-i18n/vars/cn/zh-CN.json @@ -0,0 +1,3 @@ +{ + "appName": "Flat" +} diff --git a/packages/flat-i18n/vars/us/en.json b/packages/flat-i18n/vars/us/en.json new file mode 100644 index 00000000000..478e360c8d7 --- /dev/null +++ b/packages/flat-i18n/vars/us/en.json @@ -0,0 +1,3 @@ +{ + "appName": "Flint" +} diff --git a/packages/flat-i18n/vars/us/zh-CN.json b/packages/flat-i18n/vars/us/zh-CN.json new file mode 100644 index 00000000000..478e360c8d7 --- /dev/null +++ b/packages/flat-i18n/vars/us/zh-CN.json @@ -0,0 +1,3 @@ +{ + "appName": "Flint" +} diff --git a/scripts/constants.js b/scripts/constants.js index eb307558bc7..d6a3ad9179f 100644 --- a/scripts/constants.js +++ b/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"); diff --git a/web/flat-web/scripts/vite-plugin-dotenv.ts b/web/flat-web/scripts/vite-plugin-dotenv.ts index 27ac6577611..48d07bf0e60 100644 --- a/web/flat-web/scripts/vite-plugin-dotenv.ts +++ b/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 }; } diff --git a/web/flat-web/src/pages/JoinPage/JoinPageDesktop.tsx b/web/flat-web/src/pages/JoinPage/JoinPageDesktop.tsx index b9d824c180f..ada0290884e 100644 --- a/web/flat-web/src/pages/JoinPage/JoinPageDesktop.tsx +++ b/web/flat-web/src/pages/JoinPage/JoinPageDesktop.tsx @@ -36,7 +36,7 @@ export default function JoinPageDesktop({