Skip to content

Latest commit

 

History

History
56 lines (45 loc) · 3.35 KB

LANGUAGES.md

File metadata and controls

56 lines (45 loc) · 3.35 KB
Raw

Registry Console localization

How does it work

  • Library React Intl
  • API
  • Localization files
  • Scripts

Library

App uses React Intl library to manage support of multi languages.

API

Locale API located in locale.js file:

Scripts

There are 2 scripts which work with localisation:

  • npm build:locale - watching /locales/ folder and generates files for the app to public/_translations folder
  • npm mock:locales - creates mock localisation files from en.json to ar-mock.json and en-mock.json. Good to use mock files to check if all key:value pares for English were added and that app works good with other languages too.

Localization files

There are 2 places in the app with localization: /locales/ and /public/_translations/.

  • /locales/ - you should work with localization files only here (creating/removing/editing files). You can use markdown there and it will be translated to HTML automatically
  • /public/_translations/ - App uses these files. They will be generated automatically after you launch npm build:locale command.

Usually, you should launch npm build:locale command after you started the project in the DEV mode - it works in a watch mode and will updated localisation files in public folder every time you change something.

How to add new language

To add new language you should do several things:

  1. Create new valid JSON file with appropriate name (e.g. ru.json for Russian language, because ISO code of language is ru) in /locales/ folder
  2. Add localisation data (key:value pairs)
  3. Add new language to the component responsible for language selection by user:
    • open the file
    • find array languages in the constructor
    • add new object to the array with fields:
      • key - should be the same as file name without extension
      • code - language code (usually, the same as key)
      • name - language name which will be displayed to the user (usually in the same language, not in English)
  4. Add an import of required localisation for React Intl at the top of App.js.
  5. Set it as a member of an array for method addLocaleData. Library will use it to localize dates, numbers, date pickers, etc.
  6. Launch npm build:locale if it has not been launched before
  7. Check the result - if everything was done right, you would found new file in /public/_translations/ folder with the same name
  8. Check that you can see added language in the language dropdown in browser

Country, area and island codes (ISO 3166)

To update these codes based on the values in the GBIF Registry, use:

curl -fSs https://api.gbif.org/v1/enumeration/country | jq '.[] | {("country."+.iso2): .title}' | grep country | sort

and replace the values in /locales/en.json.