Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-13 16:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Feat/multi language support for venus
This commit is contained in:
DarkSky
2022-08-19 23:41:58 +08:00
committed by GitHub
parent 01339fc77d 6846f23e7d
commit 3d961fd951
7 changed files with 191 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/venus/package.json
+5 -3
View File
@@ -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
+25
View File
@@ -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
+34
View File
@@ -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
+34
View File
@@ -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
+39 -41
View File
@@ -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
knowledge base for professionals.
{t('description1.part1')}
</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
tables.
{t('description1.part2')}
</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
keep your data as you like it.
{t('description1.part4')}
</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
functional anywhere, anytime. A truly
what-you-see-is-what-you-get environment for
your data.
{t('description2.part2')}
</Typography>
<Typography
fontSize="1.2em"
style={{ marginBottom: '0.25em' }}
>
All pages come with a document (Paper Mode) and
whiteboard (Edgeless Mode) view.
{t('description2.part3')}
</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
within a Kanban.
{t('description3.part3')}
</Typography>
<Typography
fontSize="1.2em"
style={{ marginBottom: '0.25em' }}
>
Managing multi-dimensional tables should be this
simple – and now it is.
{t('description3.part4')}
</Typography>
</Box>
</Grid>
@@ -697,27 +703,19 @@ export function App() {
fontWeight={'bold'}
style={{ marginBottom: '0.5em' }}
>
Privacy-first, and collaborative. No compromises
whatsoever.
{t('description4.part1')}
</Typography>
<Typography
fontSize="1.2em"
style={{ marginBottom: '0.25em' }}
>
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.
{t('description4.part2')}
</Typography>
<Typography
fontSize="1.2em"
style={{ marginBottom: '0.25em' }}
>
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.
{t('description4.part3')}
</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
View File
@@ -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
Generated
+53 -2
View File
@@ -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: