Translations
Documenting how we handle translations in the code
Last updated
Documenting how we handle translations in the code
Last updated
We use to manage our translations. They are extracted from the code to src/lang/${locale}.json
files using the npm run build:langs
command (CI will notify you if the translation files are outdated). Don't translate the strings directly in the files, we use to manage our translatations.
Example
defaultMessage
string breakdown:
action
variable name
select
keyword
delete
and archive
possible values
other
all other values will use this key
An exception to this rule: very common enums or the ones with many possible values should be implemented as a separate file listing all values because:
Re-usability
A map of translations is easier to read than a long select string with tons of options
The order of the words may change from a language to another. For this reason we must always pass the values to be replaced in values
so their order can later be changed.
Example
In some parts of the code we translate links like this:
This is bad because we're creating two strings and translators loose the context when they translate one. You should do this instead:
The FormattedMessage
component is the main way to translate strings. To use it, you just need to add the following import:
Then you just add the component with an unique id
and a defaultMessage
.
For VSCode users, you can use the following snippet to make your life easier:
Language is ready for translation!
To activate a language on the website, we usually wait to have a correct translated ratio (20-30%).
You will need to:
Copy paste the last line in frontend/scripts/translate.js
(replace it
with your locale code)
Add the locale in src/components/Footer.js
for the languages
object
See as an example.
Go to , click on Target languages
pick the language and click Update