Merge pull request #301 from JimmFly/feat/Multi-language-support-for-venus

Feat/multi language support for venus

apps/venus/package.json

@@ -7,16 +7,18 @@
     "keywords": [],
     "author": "DarkSky <darksky2048@gmail.com>",
     "dependencies": {
-        "@mui/joy": "^5.0.0-alpha.39",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "lozad": "^1.16.0"
+        "@mui/joy": "^5.0.0-alpha.39",
+        "i18next": "^21.9.1",
+        "lozad": "^1.16.0",
+        "react-i18next": "^11.18.4"
     },
     "devDependencies": {
-        "mini-css-extract-plugin": "^2.6.1",
         "image-minimizer-webpack-plugin": "^3.2.3",
         "imagemin": "^8.0.1",
         "imagemin-optipng": "^8.0.0",
+        "mini-css-extract-plugin": "^2.6.1",
         "webpack": "^5.74.0"
     }
 }

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

@@ -0,0 +1,25 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en_US from './resources/en.json';
+import zh_CN from './resources/zh.json';
+
+const resources = {
+    en: en_US,
+    zh: zh_CN,
+} as const;
+
+i18next.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+    resources,
+    interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+    },
+});
+
+export const options = [
+    { value: 'en', text: 'English' },
+    { value: 'zh', text: '简体中文' },
+];
+
+export { i18next };

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

@@ -0,0 +1,34 @@
+{
+    "translation": {
+        "Open Source": "Open Source",
+        "Privacy First": "Privacy First",
+        "Alternative": "Alternative",
+        "Check GitHub": "Check GitHub",
+        "Try it Online": "Try it Online",
+        "description1": {
+            "part1": "Affine is the next-generation collaborative knowledge base for professionals.",
+            "part2": "It's not just a collection of Docs, whiteboard, and tables.",
+            "part3": "Transform any building block as you like.",
+            "part4": "Say goodbye to redundancy. Store your data once, and keep your data as you like it."
+        },
+        "description2": {
+            "part1": "Shape Your Page",
+            "part2": "Docs, Kanbans, and Databases are all fully functional anywhere, anytime. A truly what-you-see-is-what-you-get environment for your data.",
+            "part3": "All pages come with a document (Paper Mode) and whiteboard (Edgeless Mode) view."
+        },
+        "description3": {
+            "part1": "Plan Your Task",
+            "part2": "No more chaos managing multiple views.",
+            "part3": "Set a TODO with Markdown, and seamlessly edit it within a Kanban.",
+            "part4": "Managing multi-dimensional tables should be this simple - and now it is."
+        },
+        "description4": {
+            "part1": "Privacy-first, and collaborative. No compromises whatsoever.",
+            "part2": "We don't like being locked-in, and neither should you. Privacy is at the foundation of everything we do, but it should not limit us that's why there are no compromises.",
+            "part3": "Your data is yours;it is always locally stored and secured - available to you always. While still being able to enjoy collaboration features such as real-time editing and sharing with others, without any cloud setup."
+        },
+        "BuildFor": "Build for an open and semantic future",
+        "KeepUpdated": "Keep Updated on",
+        "Join": "Join Our Community"
+    }
+}

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

@@ -0,0 +1,34 @@
+{
+    "translation": {
+        "Open Source": "开源",
+        "Privacy First": "隐私第一",
+        "Alternative": "的另一种选择",
+        "Check GitHub": "GitHub中查看",
+        "Try it Online": "在线上试试",
+        "description1": {
+            "part1": "Affine是面向专业人士的下一代协同知识库",
+            "part2": "它不仅仅是一个文档、白板和表格的集合。",
+            "part3": "可以根据需要转换任何构建块。",
+            "part4": "向冗余说再见吧。将数据存储一次，并保留您喜欢的数据。"
+        },
+        "description2": {
+            "part1": "塑造您的页面",
+            "part2": "文档、看板和数据库在任何地方、任何时候都是完全可用的，一个真正的“所见即所得”的数据环境。",
+            "part3": "所有页面都有一个文档(纸张模式)和白板(无边缘模式)视图。"
+        },
+        "description3": {
+            "part1": "计划您的任务",
+            "part2": "不再混乱地管理多个视图。",
+            "part3": "使用 Markdown 设置 TODO，并在看板中无缝地编辑它。",
+            "part4": "管理多维表格本应该就这么简单——现在的它就是这么简单。"
+        },
+        "description4": {
+            "part1": "隐私第一，合作无间，绝不妥协。",
+            "part2": "我们不喜欢被关起来，您也不应该。隐私是我们做任何事情的基础，但它不应该限制我们，这就是为什么我们决不妥协。",
+            "part3": "您的数据是您自己的，它总是安全的在本地存储并随时供您使用。您不需要任何云设置就可以享受协作功能，即时编辑和与他人共享。"
+        },
+        "BuildFor": "构建一个开放和语义化的未来",
+        "KeepUpdated": "持续更新在",
+        "Join": "加入我们的社区"
+    }
+}

apps/venus/src/app/index.tsx

@@ -7,12 +7,15 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import RedditIcon from '@mui/icons-material/Reddit';
 import TelegramIcon from '@mui/icons-material/Telegram';
 import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy';
+import Option from '@mui/joy/Option';
+import Select from '@mui/joy/Select';
 import { CssVarsProvider, styled } from '@mui/joy/styles';
 import { LogoIcon } from '@toeverything/components/icons';
 // eslint-disable-next-line no-restricted-imports
 import { useMediaQuery } from '@mui/material';
-
+import { useTranslation } from 'react-i18next';
 import CollaborationImage from './collaboration.png';
+import { options } from './i18n';
 import LogoImage from './logo.png';
 import PageImage from './page.png';
 import ShapeImage from './shape.png';
@@ -199,6 +202,7 @@ const AffineImage = styled('img')({
 
 const GitHub = (props: { center?: boolean; flat?: boolean }) => {
     const matches = useMediaQuery('(max-width: 1024px)');
+    const { t } = useTranslation();
 
     return (
         <Button
@@ -234,14 +238,14 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => {
             startIcon={<GitHubIcon />}
             size="lg"
         >
-            {props.center ? 'Check ' : ''}GitHub
+            {props.center ? t('Check GitHub') : t('GitHub')}
         </Button>
     );
 };
 
 const AFFiNEOnline = (props: { center?: boolean; flat?: boolean }) => {
     const matches = useMediaQuery('(max-width: 1024px)');
-
+    const { t } = useTranslation();
     return (
         <Button
             onClick={() => {
@@ -277,14 +281,18 @@ const AFFiNEOnline = (props: { center?: boolean; flat?: boolean }) => {
             startIcon={<LogoIcon />}
             size="lg"
         >
-            Try it Online
+            {t('Try it Online')}
         </Button>
     );
 };
 
 export function App() {
     const matches = useMediaQuery('(max-width: 1024px)');
+    const { t, i18n } = useTranslation();
 
+    const changeLanguage = (event: any) => {
+        i18n.changeLanguage(event);
+    };
     return (
         <CssVarsProvider>
             <VenusContainer
@@ -342,6 +350,13 @@ export function App() {
                         >
                             Blog
                         </Button>
+                        <Select defaultValue="en" onChange={changeLanguage}>
+                            {options.map(option => (
+                                <Option key={option.value} value={option.value}>
+                                    {option.text}
+                                </Option>
+                            ))}
+                        </Select>
                     </Grid>
                 </Grid>
                 <Grid
@@ -369,7 +384,7 @@ export function App() {
                                 },
                             }}
                         >
-                            Open Source,
+                            {t('Open Source')},
                         </Typography>
                         <Typography
                             fontSize="96px"
@@ -380,7 +395,7 @@ export function App() {
                                 },
                             }}
                         >
-                            Privacy First
+                            {t('Privacy First')}
                         </Typography>
                     </Box>
                 </Grid>
@@ -413,7 +428,7 @@ export function App() {
                                 },
                             }}
                         >
-                            Alternative
+                            {t('Alternative')}
                         </Typography>
                     </Box>
                 </Grid>
@@ -432,8 +447,7 @@ export function App() {
                             fontWeight={'400'}
                             sx={{ color: '#888' }}
                         >
-                            Affine is the next-generation collaborative
+                            {t('description1.part1')}
-                            knowledge base for professionals.
                         </Typography>
                     </Box>
                 </Grid>
@@ -488,8 +502,7 @@ export function App() {
                             level={matches ? 'h2' : 'h1'}
                             fontWeight={'bold'}
                         >
-                            It’s not just a collection of Docs, whiteboard, and
+                            {t('description1.part2')}
-                            tables.
                         </Typography>
                     </Box>
                 </Grid>
@@ -506,11 +519,10 @@ export function App() {
                         }}
                     >
                         <Typography fontSize="1.2em">
-                            Transform any building block as you like.
+                            {t('description1.part3')}
                         </Typography>
                         <Typography fontSize="1.2em">
-                            Say goodbye to redundancy. Store your data once, and
+                            {t('description1.part4')}
-                            keep your data as you like it.
                         </Typography>
                     </Box>
                 </Grid>
@@ -547,23 +559,19 @@ export function App() {
                                 fontWeight={'bold'}
                                 style={{ marginBottom: '0.5em' }}
                             >
-                                Shape Your Page
+                                {t('description2.part1')}
                             </Typography>
                             <Typography
                                 fontSize="1.2em"
                                 style={{ marginBottom: '0.25em' }}
                             >
-                                Docs, Kanbans, and Databases are all fully
+                                {t('description2.part2')}
-                                functional anywhere, anytime. A truly
-                                what-you-see-is-what-you-get environment for
-                                your data.
                             </Typography>
                             <Typography
                                 fontSize="1.2em"
                                 style={{ marginBottom: '0.25em' }}
                             >
-                                All pages come with a document (Paper Mode) and
+                                {t('description2.part3')}
-                                whiteboard (Edgeless Mode) view.
                             </Typography>
                         </Box>
                     </Grid>
@@ -625,27 +633,25 @@ export function App() {
                                 fontWeight={'bold'}
                                 style={{ marginBottom: '0.5em' }}
                             >
-                                Plan Your Task
+                                {t('description3.part1')}
                             </Typography>
                             <Typography
                                 fontSize="1.2em"
                                 style={{ marginBottom: '0.25em' }}
                             >
-                                No more chaos managing multiple views.
+                                {t('description3.part2')}
                             </Typography>
                             <Typography
                                 fontSize="1.2em"
                                 style={{ marginBottom: '0.25em' }}
                             >
-                                Set a TODO with Markdown, and seamlessly edit it
+                                {t('description3.part3')}
-                                within a Kanban.
                             </Typography>
                             <Typography
                                 fontSize="1.2em"
                                 style={{ marginBottom: '0.25em' }}
                             >
-                                Managing multi-dimensional tables should be this
+                                {t('description3.part4')}
-                                simple – and now it is.
                             </Typography>
                         </Box>
                     </Grid>
@@ -697,27 +703,19 @@ export function App() {
                             fontWeight={'bold'}
                             style={{ marginBottom: '0.5em' }}
                         >
-                            Privacy-first, and collaborative. No compromises
+                            {t('description4.part1')}
-                            whatsoever.
                         </Typography>
                         <Typography
                             fontSize="1.2em"
                             style={{ marginBottom: '0.25em' }}
                         >
-                            We don’t like being locked-in, and neither should
+                            {t('description4.part2')}
-                            you. Privacy is at the foundation of everything we
-                            do, but it should not limit us that’s+ why there are
-                            no compromises.
                         </Typography>
                         <Typography
                             fontSize="1.2em"
                             style={{ marginBottom: '0.25em' }}
                         >
-                            Your data is yours; it is always locally stored and
+                            {t('description4.part3')}
-                            secured - available to you always. While still being
-                            able to enjoy collaboration features such as
-                            real-time editing and sharing with others, without
-                            any cloud setup.
                         </Typography>
                     </Box>
                 </Grid>
@@ -762,7 +760,7 @@ export function App() {
                         }}
                     >
                         <Typography fontSize={'1.5em'}>
-                            Build for an open and semantic future
+                            {t('BuildFor')}
                         </Typography>
                     </Box>
                 </Grid>
@@ -778,7 +776,7 @@ export function App() {
                     >
                         <Typography level="h3" sx={{ display: 'flex' }}>
                             <span style={{ alignSelf: 'center' }}>
-                                Keep Updated on
+                                {t('KeepUpdated')}
                             </span>
                             <GitHub />
                         </Typography>
@@ -795,7 +793,7 @@ export function App() {
                         }}
                     >
                         <Typography level="h2" sx={{ display: 'flex' }}>
-                            Join Our Community
+                            {t('Join')}
                         </Typography>
                     </Box>
                 </Grid>

apps/venus/src/index.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import './app/i18n';
 
 import App from './app';
 

pnpm-lock.yaml

@@ -220,17 +220,21 @@ importers:
       '@emotion/react': ^11.10.0
       '@emotion/styled': ^11.10.0
       '@mui/joy': ^5.0.0-alpha.39
+      i18next: ^21.9.1
       image-minimizer-webpack-plugin: ^3.2.3
       imagemin: ^8.0.1
       imagemin-optipng: ^8.0.0
       lozad: ^1.16.0
       mini-css-extract-plugin: ^2.6.1
+      react-i18next: ^11.18.4
       webpack: ^5.74.0
     dependencies:
       '@emotion/react': 11.10.0
       '@emotion/styled': 11.10.0_@emotion+react@11.10.0
       '@mui/joy': 5.0.0-alpha.39_72v32ofbtgpmxm7mhvtx474vfu
+      i18next: 21.9.1
       lozad: 1.16.0
+      react-i18next: 11.18.4_i18next@21.9.1
     devDependencies:
       image-minimizer-webpack-plugin: 3.2.3_5emixpjl54fjyhdvj76qjbw4py
       imagemin: 8.0.1
@@ -9563,20 +9567,30 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
+      '@babel/runtime': 7.18.6
       '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      aria-query: 4.2.2
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
+      ast-types-flow: 0.0.7
+      axe-core: 4.4.2
+      axobject-query: 2.2.0
+      damerau-levenshtein: 1.0.8
       debug: 2.6.9
       doctrine: 2.1.0
+      emoji-regex: 9.2.2
       eslint: 8.19.0
       eslint-import-resolver-node: 0.3.6
       eslint-module-utils: 2.7.3_ea34krk32wbcqzxapvwr7rsjs4
       has: 1.0.3
       is-core-module: 2.9.0
       is-glob: 4.0.3
+      jsx-ast-utils: 3.3.1
+      language-tags: 1.0.5
       minimatch: 3.1.2
       object.values: 1.1.5
       resolve: 1.22.1
+      semver: 6.3.0
       tsconfig-paths: 3.14.1
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -11121,6 +11135,12 @@ packages:
       terser: 5.14.1
     dev: true
 
+  /html-parse-stringify/3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+    dependencies:
+      void-elements: 3.1.0
+    dev: false
+
   /html-webpack-plugin/5.5.0_webpack@5.74.0:
     resolution: {integrity: sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==}
     engines: {node: '>=10.13.0'}
@@ -11306,6 +11326,12 @@ packages:
     hasBin: true
     dev: true
 
+  /i18next/21.9.1:
+    resolution: {integrity: sha512-ITbDrAjbRR73spZAiu6+ex5WNlHRr1mY+acDi2ioTHuUiviJqSz269Le1xHAf0QaQ6GgIHResUhQNcxGwa/PhA==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: false
+
   /iconv-lite/0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -15149,7 +15175,7 @@ packages:
     dev: true
 
   /proxy-from-env/1.0.0:
-    resolution: {integrity: sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=}
+    resolution: {integrity: sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==}
     dev: true
 
   /prr/1.0.1:
@@ -15345,6 +15371,26 @@ packages:
       hotkeys-js: 3.9.3
     dev: false
 
+  /react-i18next/11.18.4_i18next@21.9.1:
+    resolution: {integrity: sha512-gK/AylAQC5DvCD5YLNCHW4PNzpCfrWIyVAXbSMl+/5QXzlDP8VdBoqE2s2niGHB+zIXwBV9hRXbDrVuupbgHcg==}
+    peerDependencies:
+      i18next: '>= 19.0.0'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      html-parse-stringify: 3.0.1
+      i18next: 21.9.1
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -17592,7 +17638,7 @@ packages:
     dev: true
 
   /verror/1.10.0:
-    resolution: {integrity: sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=}
+    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
     dependencies:
       assert-plus: 1.0.0
@@ -17600,6 +17646,11 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
+  /void-elements/3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     dependencies: