The project uses i18next, a library on top of the standard i18n features. To integrate it with react we use i18n-react integration
i18n is configured here following this spec.
Set the i18n_DEBUG .env variable to true to see logs in console
The source file, and its translations are located at the locales folder, served by HTTP and managed by backend-plugin.
To handle translations we use Crowdin. It uses a GitHub bot to detect changes in the source files and creates a PR to update the translations once the editors review them.
Developers don't need to update the translations for each language directly, only the source/[namespace].json files.
i18n-parser script syncs the code and the translations extracting the keys to the source/translations.json file. It's configured here. Tu execute it, run:
yarn i18n:parseri18n-parser doesn't identify dynamic keys, to fix it use this workaround. (e.g. InfoField and InfoFieldHistory component with API vessel.flag or vessel.shipname dynamic responses)
There are external data that has to be translated as well, like country names, dataset information, etc... this is archieved with i18next namespaces to separate translations into multiple files, (e.g. flags.json used for the country names).
To consume translations from a namespace different than the default one, add it as a prefix (e.g. flags:ESP in I18nFlag component).
## Helper components