upstream-affine/packages/frontend/i18n

i18n

Usages

• Update missing translations into the base resources, a.k.a the src/resources/en.json
• Replace literal text with translation keys

import { useI18n, LOCALES } from '@affine/i18n';
// src/resources/en.json
// {
//     'Text': 'some text',
//     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
// };

const App = () => {
  const i18n = useI18n();
  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <div>{i18n['Workspace Settings']()}</div>
      <>
        {LOCALES.map(option => {
          return (
            <button
              key={option.name}
              onClick={() => {
                changeLanguage(option.tag);
              }}
            >
              {option.originalName}
            </button>
          );
        })}
      </>
    </div>
  );
};

How the i18n workflow works?

• When the src/resources/en.json(base language) updated and merged to the develop branch, will trigger the languages-sync action.
• The languages-sync action will check the base language and add missing translations to the Tolgee platform.
• This way, partners from the community can update the translations.

How to sync translations manually

• Set token as environment variable

export TOLGEE_API_KEY=tgpak_XXXXXXX

• Run the sync-languages:check to check all languages
• Run the sync-languages script to add new keys to the Tolgee platform
• Run the download-resources script to download the latest full-translation translation resources from the Tolgee platform

References

• AFFiNE | Tolgee
• Tolgee Documentation
• i18next
• react-i18next