From 09711c9195a81ca76c54c7f394bfe83d8383a6cf Mon Sep 17 00:00:00 2001 From: WhiteMind Date: Tue, 12 Sep 2023 12:00:03 +0800 Subject: [PATCH] feat: improve i18n --- packages/app/i18next-parser.config.ts | 120 ++ packages/app/next-i18next.config.js | 1 + packages/app/package.json | 4 +- packages/app/public/locales/en/app.json | 3 + packages/app/public/locales/en/changelog.json | 3 +- packages/app/public/locales/en/common.json | 31 +- packages/app/public/locales/en/download.json | 3 +- .../app/public/locales/en/help_center.json | 8 +- packages/app/public/locales/en/home.json | 12 +- packages/app/public/locales/en/posts.json | 7 + packages/app/public/locales/zh/app.json | 3 + packages/app/public/locales/zh/changelog.json | 3 +- packages/app/public/locales/zh/common.json | 31 +- packages/app/public/locales/zh/download.json | 3 +- .../app/public/locales/zh/help_center.json | 8 +- packages/app/public/locales/zh/home.json | 12 +- packages/app/public/locales/zh/posts.json | 7 + packages/app/src/components/Footer/index.tsx | 28 +- packages/app/src/components/Header/index.tsx | 28 +- packages/app/src/pages/_app.page.tsx | 7 +- .../src/pages/changelog/[[...slug]].page.tsx | 16 +- .../app/src/pages/download/index.page.tsx | 14 +- .../app/src/pages/help-center/index.page.tsx | 8 +- packages/app/src/pages/home/index.page.tsx | 57 +- .../src/pages/posts/ClassifiedPosts/index.tsx | 4 +- .../HelpDocHeader/LanguageList/index.tsx | 4 +- .../src/pages/posts/HelpDocHeader/index.tsx | 11 +- .../app/src/pages/posts/Sidebar/index.tsx | 4 +- .../app/src/pages/posts/[...slug].page.tsx | 17 +- packages/app/src/utils/i18n.ts | 6 + packages/app/src/utils/posts.ts | 26 +- yarn.lock | 1233 ++++++++++++++++- 32 files changed, 1588 insertions(+), 134 deletions(-) create mode 100644 packages/app/i18next-parser.config.ts create mode 100644 packages/app/public/locales/en/app.json create mode 100644 packages/app/public/locales/en/posts.json create mode 100644 packages/app/public/locales/zh/app.json create mode 100644 packages/app/public/locales/zh/posts.json create mode 100644 packages/app/src/utils/i18n.ts diff --git a/packages/app/i18next-parser.config.ts b/packages/app/i18next-parser.config.ts new file mode 100644 index 00000000..7c9682b9 --- /dev/null +++ b/packages/app/i18next-parser.config.ts @@ -0,0 +1,120 @@ +import { UserConfig } from 'i18next-parser' + +const config: UserConfig = { + // Key separator used in your translation keys + contextSeparator: '_', + + // Save the \_old files + createOldCatalogs: false, + + // Default namespace used in your i18next config + defaultNamespace: 'translation', + + defaultValue(locale, namespace, key) { + return key ?? '' + }, + + // Indentation of the catalog files + indentation: 2, + + // Keep keys from the catalog that are no longer in code + // You may either specify a boolean to keep or discard all removed keys. + // You may also specify an array of patterns: the keys from the catalog that are no long in the code but match one of the patterns will be kept. + // The patterns are applied to the full key including the namespace, the parent keys and the separators. + keepRemoved: false, + + // Key separator used in your translation keys + // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance. + keySeparator: false, + + // see below for more details + lexers: { + hbs: ['HandlebarsLexer'], + handlebars: ['HandlebarsLexer'], + + htm: ['HTMLLexer'], + html: ['HTMLLexer'], + + mjs: ['JavascriptLexer'], + js: ['JavascriptLexer'], + ts: [ + { + lexer: 'JavascriptLexer', + functions: ['t', 'addI18nKey'], + namespaceFunctions: ['useTranslation', 'withTranslation', 'createI18nKeyAdder'], + }, + ], + jsx: ['JsxLexer'], + tsx: ['JsxLexer'], + + default: ['JavascriptLexer'], + }, + + // Control the line ending. See options at https://github.com/ryanve/eol + lineEnding: 'lf', + + // An array of the locales in your applications + locales: ['en', 'zh'], + + // Namespace separator used in your translation keys + // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance. + namespaceSeparator: false, + + // Supports $LOCALE and $NAMESPACE injection + // Supports JSON (.json) and YAML (.yml) file formats + // Where to write the locale files relative to process.cwd() + output: 'public/locales/$LOCALE/$NAMESPACE.json', + + // Plural separator used in your translation keys + // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys. + // If you don't want to generate keys for plurals (for example, in case you are using ICU format), set `pluralSeparator: false`. + pluralSeparator: '_', + + // An array of globs that describe where to look for source files + // relative to the location of the configuration file + input: ['src/**/*.{ts,tsx}'], + + // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters) + sort: true, + + // Display info about the parsing including some stats + verbose: false, + + // Exit with an exit code of 1 on warnings + failOnWarnings: false, + + // Exit with an exit code of 1 when translations are updated (for CI purpose) + failOnUpdate: false, + + // If you wish to customize the value output the value as an object, you can set your own format. + // ${defaultValue} is the default value you set in your translation function. + // Any other custom property will be automatically extracted. + // + // Example: + // { + // message: "${defaultValue}", + // description: "${maxLength}", // t('my-key', {maxLength: 150}) + // } + customValueTemplate: null, + + // The locale to compare with default values to determine whether a default value has been changed. + // If this is set and a default value differs from a translation in the specified locale, all entries + // for that key across locales are reset to the default value, and existing translations are moved to + // the `_old` file. + resetDefaultValueLocale: null, + + // If you wish to customize options in internally used i18next instance, you can define an object with any + // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options). + // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals. + i18nextOptions: null, + + // If you wish to customize options for yaml output, you can define an object here. + // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-). + // Example: + // { + // lineWidth: -1, + // } + yamlOptions: null, +} + +export default config diff --git a/packages/app/next-i18next.config.js b/packages/app/next-i18next.config.js index 54198124..f9aceeb6 100644 --- a/packages/app/next-i18next.config.js +++ b/packages/app/next-i18next.config.js @@ -14,6 +14,7 @@ module.exports = { locales: ['en', 'zh'], localeDetection: true, }, + fallbackNS: 'common', localePath: typeof window === 'undefined' ? path.resolve('./public/locales') : '/locales', reloadOnPrerender: process.env.NODE_ENV === 'development', diff --git a/packages/app/package.json b/packages/app/package.json index 829cb5d7..ff1a437c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -6,7 +6,8 @@ "build": "next build", "dev": "next dev", "lint": "next lint", - "start": "next start" + "start": "next start", + "update:locales": "i18next" }, "dependencies": { "@docsearch/css": "3", @@ -58,6 +59,7 @@ "eslint": "^8.41.0", "eslint-config-next": "^13.4.4", "eslint-config-prettier": "^8.8.0", + "i18next-parser": "^8.7.0", "postcss": "^8.4.24", "postcss-scss": "^4.0.6", "stylelint": "^15.6.2", diff --git a/packages/app/public/locales/en/app.json b/packages/app/public/locales/en/app.json new file mode 100644 index 00000000..d8ad0734 --- /dev/null +++ b/packages/app/public/locales/en/app.json @@ -0,0 +1,3 @@ +{ + "Neuron Troubleshooting": "Neuron Troubleshooting" +} diff --git a/packages/app/public/locales/en/changelog.json b/packages/app/public/locales/en/changelog.json index f34ebe2f..40eb0984 100644 --- a/packages/app/public/locales/en/changelog.json +++ b/packages/app/public/locales/en/changelog.json @@ -1,3 +1,4 @@ { - "changelog": "Changelog" + "Changelog": "Changelog", + "Neuron wallet new features and updates summary, join Github to learn more about the project progress.": "Neuron wallet new features and updates summary, join Github to learn more about the project progress." } diff --git a/packages/app/public/locales/en/common.json b/packages/app/public/locales/en/common.json index 0967ef42..a96e4de6 100644 --- a/packages/app/public/locales/en/common.json +++ b/packages/app/public/locales/en/common.json @@ -1 +1,30 @@ -{} +{ + "All services are online": "All services are online", + "Announcement": "Announcement", + "Axon Explorer": "Axon Explorer", + "Backup wallet": "Backup wallet", + "Beginner's Guide": "Beginner's Guide", + "Change log": "Change log", + "Changelog": "Changelog", + "CKB Explorer": "CKB Explorer", + "CKBNode": "CKBNode", + "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase All Rights Reserved.", + "Create wallet": "Create wallet", + "Develop guide": "Develop guide", + "Download Neuron": "Download Neuron", + "Foundation": "Foundation", + "Frequently Asked Questions": "Frequently Asked Questions", + "Godwoke Explorer": "Godwoke Explorer", + "Help Center": "Help Center", + "Home": "Home", + "Kuai": "Kuai", + "Language": "Language", + "Migration": "Migration", + "Nervos": "Nervos", + "Neuron Wallet": "Neuron Wallet", + "Public Node": "Public Node", + "Services": "Services", + "Sync": "Sync", + "Transaction": "Transaction", + "Transfer and receive": "Transfer and receive" +} diff --git a/packages/app/public/locales/en/download.json b/packages/app/public/locales/en/download.json index dee98849..9c53d55d 100644 --- a/packages/app/public/locales/en/download.json +++ b/packages/app/public/locales/en/download.json @@ -1,3 +1,4 @@ { - "download_neuron": "Download Neuron" + "Current Version": "Current Version", + "Download Neuron": "Download Neuron" } diff --git a/packages/app/public/locales/en/help_center.json b/packages/app/public/locales/en/help_center.json index 08b58a78..4a9c3966 100644 --- a/packages/app/public/locales/en/help_center.json +++ b/packages/app/public/locales/en/help_center.json @@ -1,3 +1,5 @@ -{ - "help_center": "Help Center" -} +{ + "Help Center": "Help Center", + "More": "More", + "Please enter keywords": "Please enter keywords" +} diff --git a/packages/app/public/locales/en/home.json b/packages/app/public/locales/en/home.json index 4c61ec4c..38cf1397 100644 --- a/packages/app/public/locales/en/home.json +++ b/packages/app/public/locales/en/home.json @@ -1,3 +1,13 @@ { - "hello_world": "Hello World" + "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.": "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.", + "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.": "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.", + "Download Neuron": "Download Neuron", + "Easy to use": "Easy to use", + "Get Neuron Now": "Get Neuron Now", + "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.": "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.", + "Private and Secure": "Private and Secure", + "Reliable Support": "Reliable Support", + "Secure and reliable, you can navigate the world of Nervos CKB": "Secure and reliable, you can navigate the world of Nervos CKB", + "Securely Manage Your CKB Assets with Ease": "Securely Manage Your CKB Assets with Ease", + "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data.": "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data." } diff --git a/packages/app/public/locales/en/posts.json b/packages/app/public/locales/en/posts.json new file mode 100644 index 00000000..c675396d --- /dev/null +++ b/packages/app/public/locales/en/posts.json @@ -0,0 +1,7 @@ +{ + "© 2023 by Magickbase.": "© 2023 by Magickbase.", + "Home": "Home", + "Language": "Language", + "Neuron Help Documents": "Neuron Help Documents", + "Please enter keywords": "Please enter keywords" +} diff --git a/packages/app/public/locales/zh/app.json b/packages/app/public/locales/zh/app.json new file mode 100644 index 00000000..4cb4c33e --- /dev/null +++ b/packages/app/public/locales/zh/app.json @@ -0,0 +1,3 @@ +{ + "Neuron Troubleshooting": "Neuron 帮助中心" +} diff --git a/packages/app/public/locales/zh/changelog.json b/packages/app/public/locales/zh/changelog.json index eea67a52..490c75b2 100644 --- a/packages/app/public/locales/zh/changelog.json +++ b/packages/app/public/locales/zh/changelog.json @@ -1,3 +1,4 @@ { - "changelog": "更新日志" + "Changelog": "更新日志", + "Neuron wallet new features and updates summary, join Github to learn more about the project progress.": "Neuron 钱包新功能和更新摘要，加入 Github 了解更多项目进展。" } diff --git a/packages/app/public/locales/zh/common.json b/packages/app/public/locales/zh/common.json index 0967ef42..02ea5797 100644 --- a/packages/app/public/locales/zh/common.json +++ b/packages/app/public/locales/zh/common.json @@ -1 +1,30 @@ -{} +{ + "All services are online": "所有服务均可用", + "Announcement": "公告", + "Axon Explorer": "Axon 区块浏览器", + "Backup wallet": "备份钱包", + "Beginner's Guide": "新手指南", + "Change log": "更新日志", + "Changelog": "更新日志", + "CKB Explorer": "CKB 区块浏览器", + "CKBNode": "CKB 节点", + "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase 版权所有", + "Create wallet": "创建钱包", + "Develop guide": "开发指南", + "Download Neuron": "下载 Neuron", + "Foundation": "基金会", + "Frequently Asked Questions": "常见问题", + "Godwoke Explorer": "Godwoke 区块浏览器", + "Help Center": "帮助中心", + "Home": "首页", + "Kuai": "Kuai", + "Language": "语言", + "Migration": "迁移", + "Nervos": "Nervos", + "Neuron Wallet": "Neuron 钱包", + "Public Node": "公共节点", + "Services": "服务", + "Sync": "同步", + "Transaction": "交易", + "Transfer and receive": "转账和接收" +} diff --git a/packages/app/public/locales/zh/download.json b/packages/app/public/locales/zh/download.json index daecaf86..e98e178c 100644 --- a/packages/app/public/locales/zh/download.json +++ b/packages/app/public/locales/zh/download.json @@ -1,3 +1,4 @@ { - "download_neuron": "下载 Neuron" + "Current Version": "当前版本", + "Download Neuron": "下载 Neuron" } diff --git a/packages/app/public/locales/zh/help_center.json b/packages/app/public/locales/zh/help_center.json index 1f6d5342..cc83768d 100644 --- a/packages/app/public/locales/zh/help_center.json +++ b/packages/app/public/locales/zh/help_center.json @@ -1,3 +1,5 @@ -{ - "help_center": "帮助中心" -} +{ + "Help Center": "帮助中心", + "More": "更多", + "Please enter keywords": "请输入关键词" +} diff --git a/packages/app/public/locales/zh/home.json b/packages/app/public/locales/zh/home.json index e22f0532..71799910 100644 --- a/packages/app/public/locales/zh/home.json +++ b/packages/app/public/locales/zh/home.json @@ -1,3 +1,13 @@ { - "hello_world": "你好世界" + "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.": "友好、简洁的用户界面，具备旨在帮助您使用钱包轻松参与 Nervos 网络活动的功能。", + "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.": "专为 Nervos CKB 区块链设计，允许用户安全地存储和管理其 CKB 资产，参与 Nervos 网络治理，并创建和管理 CKB 标准或锁定脚本。", + "Download Neuron": "下载 Neuron", + "Easy to use": "易于使用", + "Get Neuron Now": "立即获取 Neuron", + "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.": "由 Nervos 基金会提供支持，与 Nervos CKB 区块链密切合作，深度参与社区建设，积极支持新功能。", + "Private and Secure": "私密且安全", + "Reliable Support": "可靠的支持", + "Secure and reliable, you can navigate the world of Nervos CKB": "安全可靠，您可以畅游 Nervos CKB 的世界", + "Securely Manage Your CKB Assets with Ease": "轻松安全地管理您的 CKB 资产", + "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data.": "代码完全开源，无需注册和登录，只有您可以访问您的钱包，我们不收集任何个人数据。" } diff --git a/packages/app/public/locales/zh/posts.json b/packages/app/public/locales/zh/posts.json new file mode 100644 index 00000000..59cae27a --- /dev/null +++ b/packages/app/public/locales/zh/posts.json @@ -0,0 +1,7 @@ +{ + "© 2023 by Magickbase.": "© 2023 Magickbase.", + "Home": "首页", + "Language": "语言", + "Neuron Help Documents": "Neuron 帮助文档", + "Please enter keywords": "请输入关键词" +} diff --git a/packages/app/src/components/Footer/index.tsx b/packages/app/src/components/Footer/index.tsx index 1ad2263c..06a54b1e 100644 --- a/packages/app/src/components/Footer/index.tsx +++ b/packages/app/src/components/Footer/index.tsx @@ -1,6 +1,7 @@ import { ComponentProps, FC } from 'react' import clsx from 'clsx' import Link from 'next/link' +import { useTranslation } from 'react-i18next' import styles from './index.module.scss' import IconFullLogo from './full-logo.svg' import { Contacts } from '../Contacts' @@ -9,6 +10,7 @@ import { useIsMobile } from '../../hooks' export type FooterProps = ComponentProps<'div'> export const Footer: FC = props => { + const { t } = useTranslation('common') const isMobile = useIsMobile() return ( @@ -20,35 +22,37 @@ export const Footer: FC = props => {
{/* TODO: There is a need for API integration */}
- All services are online + {t('All services are online')}
- {!isMobile &&
Copyright © 2023 Magickbase All Rights Reserved.
} + {!isMobile &&
{t('Copyright © 2023 Magickbase All Rights Reserved.')}
}
-
Services
+
{t('Services')}
- Neuron Wallet - CKB Explorer - Godwoke Explorer - Axon Explorer - Kuai - Public Node + + {t('Neuron Wallet')} + + {t('CKB Explorer')} + {t('Godwoke Explorer')} + {t('Axon Explorer')} + {t('Kuai')} + {t('Public Node')}
-
Foundation
+
{t('Foundation')}
- Nervos + {t('Nervos')}
- {isMobile &&
Copyright © 2023 Magickbase All Rights Reserved.
} + {isMobile &&
{t('Copyright © 2023 Magickbase All Rights Reserved.')}
}
diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index c7b6e3b6..33d8bcdd 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -3,6 +3,7 @@ import { ComponentProps, FC } from 'react' import Link from 'next/link' import * as Dialog from '@radix-ui/react-dialog' import { useRouter } from 'next/router' +import { useTranslation } from 'react-i18next' import styles from './index.module.scss' import IconLogo from './logo.svg' import IconGithub from './github.svg' @@ -20,6 +21,8 @@ export const Header: FC = props => { } export const Header$Desktop: FC = props => { + const { t } = useTranslation('common') + return (
@@ -27,9 +30,9 @@ export const Header$Desktop: FC = props => { - Changelog - Help Center - Download Neuron + {t('Changelog')} + {t('Help Center')} + {t('Download Neuron')}
@@ -63,6 +66,7 @@ export const Header$Mobile: FC = props => { } const MenuDialog: FC = () => { + const { t } = useTranslation('common') const isMobile = useIsMobile() const router = useRouter() const { pathname, query } = router @@ -95,23 +99,23 @@ const MenuDialog: FC = () => {
- Home + {t('Home')} -
Services
+
{t('Services')}
- Neuron Wallet - CKB Explorer - Godwoke Explorer - Axon Explorer - Kuai + {t('Neuron Wallet')} + {t('CKB Explorer')} + {t('Godwoke Explorer')} + {t('Axon Explorer')} + {t('Kuai')}
- Public Node + {t('Public Node')} -
Language
+
{t('Language')}
{languages.map(language => ( { + const { t } = useTranslation('app') + useEffect(() => { document.body.classList.add(fontProximaNova.className) return () => document.body.classList.remove(fontProximaNova.className) @@ -25,7 +27,8 @@ const App: AppType = ({ Component, pageProps }) => { return ( - Neuron Troubleshooting + {/* TODO: i18n not working, needs fixing. */} + {t('Neuron Troubleshooting')} diff --git a/packages/app/src/pages/changelog/[[...slug]].page.tsx b/packages/app/src/pages/changelog/[[...slug]].page.tsx index 695acdef..bce74c00 100644 --- a/packages/app/src/pages/changelog/[[...slug]].page.tsx +++ b/packages/app/src/pages/changelog/[[...slug]].page.tsx @@ -1,5 +1,5 @@ import { GetStaticPaths, GetStaticProps, type NextPage } from 'next' -import { useTranslation } from 'next-i18next' +import { Trans, useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import ReactMarkdown from 'react-markdown' import Link from 'next/link' @@ -37,14 +37,16 @@ const Changelog: NextPage = ({ releases, page, maxPage }) => { Neuron
-
{t('changelog')}
+
{t('Changelog')}
- Neuron wallet new features and updates summary, join{' '} - - Github - {' '} - to learn more about the project progress. + , + }} + />
diff --git a/packages/app/src/pages/download/index.page.tsx b/packages/app/src/pages/download/index.page.tsx index 4e98d72b..dc261b76 100644 --- a/packages/app/src/pages/download/index.page.tsx +++ b/packages/app/src/pages/download/index.page.tsx @@ -30,9 +30,13 @@ const Download: NextPage = ({ release }) => { Neuron
-
{t('download_neuron')}
+
{t('Download Neuron')}
- {!isMobile &&
Current Version {release.tag_name}
} + {!isMobile && ( +
+ {t('Current Version')} {release.tag_name} +
+ )}
@@ -40,7 +44,11 @@ const Download: NextPage = ({ release }) => {
- {isMobile &&
Current Version {release.tag_name}
} + {isMobile && ( +
+ {t('Current Version')} {release.tag_name} +
+ )} diff --git a/packages/app/src/pages/help-center/index.page.tsx b/packages/app/src/pages/help-center/index.page.tsx index fb7fffff..e525e50a 100644 --- a/packages/app/src/pages/help-center/index.page.tsx +++ b/packages/app/src/pages/help-center/index.page.tsx @@ -28,14 +28,14 @@ const HelpCenter: NextPage = ({ menusWithPosts }) => { Neuron -
{t('help_center')}
+
{t('Help Center')}
{children}} /> @@ -51,11 +51,11 @@ const HelpCenter: NextPage = ({ menusWithPosts }) => { {menusWithPosts.map(menu => (
-
{menu.name}
+
{t(menu.name)}
{menu.posts?.[0] && (
- More + {t('More')}
)} diff --git a/packages/app/src/pages/home/index.page.tsx b/packages/app/src/pages/home/index.page.tsx index 06ae070a..38f16e7d 100644 --- a/packages/app/src/pages/home/index.page.tsx +++ b/packages/app/src/pages/home/index.page.tsx @@ -1,8 +1,8 @@ import { GetStaticProps, type NextPage } from 'next' -import { useTranslation } from 'next-i18next' +import { Trans, useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import Image, { StaticImageData } from 'next/image' -import { ComponentProps, FC, useEffect, useMemo, useState } from 'react' +import { ComponentProps, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react' import clsx from 'clsx' import Link from 'next/link' import { UAParser } from 'ua-parser-js' @@ -35,17 +35,19 @@ const Home: NextPage = ({ locale, release }) => {
- Securely Manage Your{' '} - - CKB Assets - - {' '} - with Ease + , + }} + />
- Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB - assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts. + {t( + 'Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.', + )}
@@ -67,10 +69,11 @@ const Home: NextPage = ({ locale, release }) => {
Easy CKB wallet concept map
-
Easy to use
+
{t('Easy to use')}
- A friendly and clean user interface, complete with features designed to help you easily participate in - Nervos network activities using your wallet. + {t( + 'A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.', + )}
@@ -78,10 +81,11 @@ const Home: NextPage = ({ locale, release }) => {
Shields with a sci-fi feel
-
Private and Secure
+
{t('Private and Secure')}
- The code is completely open source, no registration and login is required, only you can access your - wallet, we do not collect any personal data. + {t( + 'The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data.', + )}
@@ -89,10 +93,11 @@ const Home: NextPage = ({ locale, release }) => {
Frosted Glass Textured Statistical Statements
-
Reliable Support
+
{t('Reliable Support')}
- Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved - in building the community and getting a head start on supporting new features. + {t( + 'Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.', + )}
@@ -101,15 +106,23 @@ const Home: NextPage = ({ locale, release }) => {
Neuron Logo -
Get Neuron Now
-
Secure and reliable, you can navigate the world of Nervos CKB
+
{t('Get Neuron Now')}
+
{t('Secure and reliable, you can navigate the world of Nervos CKB')}
) } +const Emphasis: FC = ({ children }) => ( + + {children} + + +) + const DownloadButton: FC> & { release: Release }> = ({ release, ...linkProps }) => { + const { t } = useTranslation('home') const assets = useMemo(() => getAssetsFromNeuronRelease(release), [release]) const [asset, setAsset] = useState() @@ -133,7 +146,7 @@ const DownloadButton: FC> & { release: Relea return (