Skip to content

Commit

Permalink
docs(i18n): updated i18n docs in README
Browse files Browse the repository at this point in the history
  • Loading branch information
Fredx87 committed Jan 3, 2025
1 parent 73ff7ce commit 55c63b0
Showing 1 changed file with 29 additions and 12 deletions.
41 changes: 29 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -178,11 +178,11 @@ function MyComponent() {
Providing the default English value in the code makes it possible to use it as a fallback value when strings are not yet translated and to extract the strings from the source code to the translations YAML file.

#### Plurals
When using [plurals](https://www.i18next.com/translation-function/plurals), we need to provide default values for the `zero`, `one`, and `other` values, as requested by our translation system. This can be done by passing the default values in the [options](https://www.i18next.com/translation-function/essentials#overview-options) of the `t` function.
When using [plurals](https://www.i18next.com/translation-function/plurals), you need to provide default values for at least the `one` and `other` forms. You can also pass a default value for the `zero` form, if you want it to be different from the `other` form. This can be done by passing the default values in the [options](https://www.i18next.com/translation-function/essentials#overview-options) of the `t` function.

```ts
t("my-key", {
"defaultValue.zero": "{{count}} items",
"defaultValue.zero": "No items",
"defaultValue.one": "{{count}} item",
"defaultValue.other": "{{count}} items",
count: ...
Expand All @@ -191,23 +191,40 @@ t("my-key", {

#### String extraction

The `bin/extract-strings.mjs` script can be used to extract translation strings from the source code and put them in the YAML file that is picked up by our internal translation system. The usage of the script is documented in the script itself.
The `bin/extract-strings.mjs` script can be used to extract translation strings from the source code and put them in the YAML file that is picked up by our internal translation system.

The script wraps the `i18next-parser` tool and converts its output to the YAML format used internally. It is possible to use a similar approach in a custom theme, either using the standard `i18next-parser` output as the source for translations or implementing a custom transformer.
To extract the strings for all the modules, run:

#### Updating translation files
```bash
yarn i18n:extract
```

Use the `bin/update-modules-translations.mjs` to download the latest translations for all the modules. All files are then bundled by the build process in a single `[MODULE]-translations-bundle.js` file.
To extract the strings for a specific module, run:

The first time that translations are added to a module, you need to add a mapping between the module folder and the package name on the translations systems to the `MODULE` variable in the script. For example, if a module is located in `src/modules/my-module` and the package name is `cph-theme-my-module`, you need to add:
```bash
yarn i18n:extract --module=module-name
```

```js
const MODULES = {
...,
"my-module": "cph-theme-my-module"
}
You can also pass the `--mark-obsolete` flag to mark removed strings as obsolete:

```bash
yarn i18n:extract --mark-obsolete
```

If you are adding a new module, you need first to create the initial `src/modules/[MODULE]/translations/en-us.yml` file with the header containing the title and package name:

```yaml
title: "My Module"
packages:
- "package-name"
```
The script wraps the `i18next-parser` tool and converts its output to the YAML format used internally. It is possible to use a similar approach in a custom theme, either using the standard `i18next-parser` output as the source for translations or implementing a custom transformer.

#### Updating translation files

Use the `bin/update-modules-translations.mjs` to download the latest translations for all the modules. All files are then bundled by the build process in a single `[MODULE]-translations-bundle.js` file.

# Accessibility testing

We use a custom node script that runs [lighthouse](https://github.com/GoogleChrome/lighthouse) for automated accessibility testing.
Expand Down

0 comments on commit 55c63b0

Please sign in to comment.