Localization

During the build process for the website, we run this script: https://github.com/w3champions/website/blob/master/scripts/generate-locales.ts

This:

• Connects to this google sheet: https://docs.google.com/spreadsheets/d/1V5f4zguWDmk9nbnoXSJm9g-ZxImo83NJpSY17EUkzOc/edit#gid=0

• Reads all the data from the first sheet

• Deepmerges it with the JSON in this file: https://github.com/w3champions/website/blob/master/src/locales/data.ts

• Saves to disk

How it works

• We use the library for replacing localized string.

• This checks the for valid strings, if it finds none for that language, it defaults to english.

• This file governs which languages are active: , and which will appear in the language dropdown.

• The localization flags are saved here:

Adding a new string on the site

• Visit and add a new row for your string, taking note to follow the conventions of “location” (which you can think of as a namespace) and “id” for the specific one.

  • @John Graves can share access to this.

• In the component, use the %t function of i18n to call the translation, e.g. $t("views_home.join_button") - this is the translation for the button on the home page:

Open

Open

• Add the string to this file for testing if required. This can be left in or deleted when you’re finished, either way the entry will be overwritten during build.

Adding a new language to the site

• Once the translator has completed all the cells on the translation tables:

• Add the language to the active languages array in the constants file:

• Add the flag for the localization in the localeFlags folder:

  • We use the flags from this resource:

• Rebuild & Deploy!