Localization

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

This does:

• 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 https://kazupon.github.io/vue-i18n/ library for replacing localized string.

• This checks the https://github.com/w3champions/website/blob/master/src/locales/data.ts for valid strings, if it finds none for that language, it defaults to english.

• This file governs which languages are active: https://github.com/w3champions/website/blob/master/src/constants.ts#L4, and which will appear in the language dropdown.

• The localization flags are saved here: https://github.com/w3champions/website/tree/master/src/assets/localeFlags

Adding a new string on the site

• Visit https://docs.google.com/spreadsheets/d/1V5f4zguWDmk9nbnoXSJm9g-ZxImo83NJpSY17EUkzOc/edit#gid=0 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:

• Add the string to this file https://github.com/w3champions/website/blob/master/src/locales/data.ts 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: https://docs.google.com/spreadsheets/d/1V5f4zguWDmk9nbnoXSJm9g-ZxImo83NJpSY17EUkzOc/edit#gid=0

• Add the language to the active languages array in the constants file: https://github.com/w3champions/website/blob/master/src/constants.ts#L4

• Add the flag for the localization in the localeFlags folder: https://github.com/w3champions/website/tree/master/src/assets/localeFlags

• We use the flags from this resource: https://github.com/HatScripts/circle-flags

• Rebuild & Deploy!