Explanations‐Translations

Translation / localization / i18n

Loom Demo

note: you will need the loom extension to see this

https://www.loom.com/share/31aadcd5556d44d59bf0a9cc6e3d31f8?sid=5ff9f944-958d-4c11-9f4d-12f013221321

Overview

For localization we use lingui.js. Lingui auto-generates source string files and writes them to the /locale folder.

Every time a commit is added to staging, a bot will automatically extract strings and sync with our remote translation platform, translation.io. This is where our community of translators do their work.

Every string has a string id, these are auto-generated by lingui. Developers need only wrap a string in a lingui tag!

import { t, Trans } from "@lingui/macro";

<MyComponent
  label={t`I am a tagged string, translate me`}
/>

<button>
  <Trans>I am a tagged string, translate me</Trans>
</button>

All staging, preview and local builds include a language called "Pseudo" which can be used more easily spot untranslated strings, or to identify the underlying string id. This is very useful if you have trouble finding a specific string tag in the codebase.

Why am I seeing string_ids in my preview build?

This is a common mistake. Run npm run extract-strings:dev from the repository root. This will update the en and pseudo strings for all packages. When you merge your work to staging, the bot will generate ids for the other locales.

Strings show a string_id fallback placeholder until a translation is added and synced from translation.io-- except for en and pseudo, which are auto-generated from the tags when you run the above command.