doc: update doc for how to add new language support (#10734)

* doc: update doc for how to add new language support

* chore: minor fix

* address comments
This commit is contained in:
Sachin Chaurasiya 2023-03-25 13:08:17 +05:30 committed by GitHub
parent 5bbac9185c
commit 0f3e929b75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 64 deletions

View File

@ -24,39 +24,15 @@ touch fr-fr.json
## Sync the Language File with the Primary Language
Since we use `en-us` as our primary language, if you have added a new language file, you need to sync the newly added language file with the primary language. You can use the `i18n` script to achieve this.
To ensure consistency with our primary language, which is `en-us`, it is necessary to synchronize any newly added language files. This can be done by copying the content from the `en-us.json` file and translating it accordingly.
```shell
yarn run i18n
```
To copy the contents of en-us.json and add it to your translation JSON file, follow these steps:
## Update the `i18nextUtil.ts`
- Go to [en-us.json](https://github.com/open-metadata/OpenMetadata/blob/main/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json)
- Copy the content of file
- Open your translation JSON file.
- Paste the copied text into your translation JSON file.
Now add the newly added language in `i18nextUtil.ts` , so that `i18next` can have the translation resource available.
You can refer to the image below for a visual guide:
```diff
import { InitOptions } from 'i18next';
import { map } from 'lodash';
import enUS from '../../locale/languages/en-us.json';
+ import frFR from '../../locale/languages/fr-fr.json';
export const getInitOptions = (): InitOptions => {
return {
+ supportedLngs: ['en-US', 'fr-FR'],
resources: {
'en-US': { translation: enUS },
+ 'fr-FR': { translation: frFR },
},
fallbackLng: ['en-US'],
```
## Test the language translation
To check the language translation functionality, please follow the steps outlined below:
1. Click on the language selection dropdown, and a list of available languages will appear.
2. Choose the language you wish to test, and the translation will be applied.
Please refer to the image below for assistance:
<Image alt="language-support" src="/images/how-to-guides/language-support.png"/>
<Image alt="copy-en-us" src="/images/how-to-guides/language-support.png"/>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 KiB

After

Width:  |  Height:  |  Size: 507 KiB

View File

@ -72,39 +72,15 @@ touch fr-fr.json
### Sync the Language File with the Primary Language
Since we use `en-us` as our primary language, if you have added a new language file, you need to sync the newly added language file with the primary language. You can use the `i18n` script to achieve this.
To ensure consistency with our primary language, which is `en-us`, it is necessary to synchronize any newly added language files. This can be done by copying the content from the `en-us.json` file and translating it accordingly.
```shell
yarn run i18n
```
To copy the contents of en-us.json and add it to your translation JSON file, follow these steps:
### Update the `i18nextUtil.ts`
- Go to [en-us.json](https://github.com/open-metadata/OpenMetadata/blob/main/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json)
- Copy the content of file
- Open your translation JSON file.
- Paste the copied text into your translation JSON file.
Now add the newly added language in `i18nextUtil.ts` , so that `i18next` can have the translation resource available.
You can refer to the image below for a visual guide:
```diff
import { InitOptions } from 'i18next';
import { map } from 'lodash';
import enUS from '../../locale/languages/en-us.json';
+ import frFR from '../../locale/languages/fr-fr.json';
export const getInitOptions = (): InitOptions => {
return {
+ supportedLngs: ['en-US', 'fr-FR'],
resources: {
'en-US': { translation: enUS },
+ 'fr-FR': { translation: frFR },
},
fallbackLng: ['en-US'],
```
### Test the language translation
To check the language translation functionality, please follow the steps outlined below:
1. Click on the language selection dropdown, and a list of available languages will appear.
2. Choose the language you wish to test, and the translation will be applied.
Please refer to the image below for assistance:
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/59080942/222646947-7ec6422e-4669-4db1-92c1-c6aec596dfdd.png">
![image](https://user-images.githubusercontent.com/59080942/227428589-5770b06e-f88d-4a8c-8c45-35ed12f0c4d2.png)