Skip to content

Feat: Add full chinese translation  #360

@ajnart

Description

@ajnart

Based on commit 1cfb8cd631115e7675732cd7c7b8b610bfd1a6b4 and the following open PR : #339 or the changes on branch : feature/simple-i18n-not-annoying and the following info :

- Added Simplified Chinese ('cn') to the i18n configuration with appropriate labels and HTML language settings.
- Introduced a locale dropdown in the navigation for language selection.
- Wrapped the home hero description in a Translate component for localization support.
- Updated the serve command in package.json to prevent automatic opening of the browser.

## Usage
To translate a message, you only need to wrap the string with <Translate /> , so 
```tsx
    <Translate>
              A sleek, modern dashboard that puts all of your apps and services at your fingertips.
              Control everything in one convenient location. Seamlessly integrates with the
              apps you've added, providing you with valuable information.
    </Translate>

just works ! Then it generates a key corresponding to it :

  "A sleek, modern dashboard that puts all of your apps and services at your fingertips. Control everything in one convenient location. Seamlessly integrates with the apps you've added, providing you with valuable information.": {
    "message": "光滑的现代仪表板,将所有应用程序和服务触手可及。在一个方便的位置控制所有内容。与您添加的应用程序无缝集成,为您提供有价值的信息。(Google translate)"
  },

Notes

  • To see the locale in dev mode you need to do pnpm run dev --locale cn
  • We could add this to the same crowdin account and share the "translation memory" to make it faster to translate.
  • I don't think translation in another language than Chinese is necessary, such proposal should be rejected

Note

The translation keys are AUTOMATICALLY GENERATED using pnpm write-translations --locale cn making it pain-free to create the json to translate. But it might be annoying for the person translating when we change the string (because the key will change) but we should ignore this.

Thoughts

We could utilize the AI-translate feature with the context of the project on Crowdin to generate translations that are close to the final result, then leverage the frustrated Chinese users seeing wrong translations to ask them to translate

Preview

CleanShot 2025-07-23 at 11 42 31

This is how we translate : 

import Translate from '@docusaurus/Translate';

export default function HomeHero() {
return (
<header className={clsx('hero hero--primary', styles.heroBanner, styles.hero)}>



A simple, yet
powerful dashboard
for your
server.


<p className={'lg:text-2xl text-base'}>

A sleek, modern dashboard that puts all of your apps and services at your fingertips.
Control everything in one convenient location. Seamlessly integrates with the
apps you've added, providing you with valuable information.


then `code.json` (in documentation/i18n/cn/code.json) will have

"A sleek, modern dashboard that puts all of your apps and services at your fingertips. Control everything in one convenient location. Seamlessly integrates with the apps you've added, providing you with valuable information.": {
"message": "光滑的现代仪表板,将所有应用程序和服务触手可及。在一个方便的位置控制所有内容。与您添加的应用程序无缝集成,为您提供有价值的信息。"
},


The translated string with the proper key 


You must add translation to all of the strings in the markdown of our main docs (in the ./docs folder) 

This repo uses Tailwind for styling and Docusaurus for the documentation. 
You only task is to wrap the plaintext strings in the markdown files with a <Translate /> component and then execute `pnpm write-translations --locale cn` in order to create the chinese translations. If you can, create an initial translation for all of the keys resulting in the chinese json with the keys extracted from the main markdown documents. 
You MUST start from the feature/simple-i18n-not-annoying branch and continue on it 

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions