I already posted a Task Request calling for translators for the Utopian.io landingpage and I shared my German translation, so this report is a bit late but since I want to live from contributions on Utopian.io some day, I maybe need to share my work more regularly.

The language switcher is already live on the preview page on GitHub:
https://utopian-io.github.io/utopian-io-landingpage/

The implementation is quite easy. Translations are stored as JSON files in the translations directory.

Languages are handled by Javascript (VueJS, I won't go into the details of VueJS in this post.) so that there is no need to reload the page, when switching the language. It will happen instantaneously. In the HTML all translatable texts are referenced by a unique key that refers to a key in the translation file.

<a class="nav-link smoothscroll" href="#rewards">{{ trans('messages.nav.rewards') }}</a>

^{Jump to GitHub}

...where messages.nav.rewards means...

# translations/de.json
{
    "nav": {
        "rewards": "Bezahlung",
        ...

The trans() method then takes this unique key and replaces it with the related localized text from the JSON file.

trans: function (id) {
    let path = id.replace('messages.', '').split('.'); // get rid of prefix
    if (path.length && this.messages.hasOwnProperty(path[0])) { // cycle through the parts and go down the JSON hierarchy
        let message = this.messages[path[0]];
        for (let i = 1; i < path.length; i++) {
            if (typeof message === 'object' && message.hasOwnProperty([path[i]])) {
                message = message[path[i]];
            }
        }
        return message; // localized text
    }
}

^{Jump to GitHub}

The translations are stored in the Vue instance in a property called messages. This property is populated by the getMessages() method which actually loads the JSON file for the requested language.

let app = new Vue({
    el: '#app',
    data: {
        ....
        messages: {}, // <-- contains all the localized texts
    }

^{Jump to GitHub}

getMessages: function (lang) {
    $.getJSON('translations/' + lang.code + '.json', (messages) => {
        this.messages = messages;
        this.currentLanguage = lang;
    });
},

^{Jump to GitHub}

This method simply loads the translation file and replaces this.messages with its content.

It is called upon initial page load...

created: function () {
    this.currentLanguage = this.languages[0];
    this.getMessages(this.currentLanguage);
    ....

^{Jump to GitHub}

...and whenever the language changes.

<a class="dropdown-item" @click="getMessages(lang)" v-for="lang in languages">
    <img :src="lang.flag" width="20" />
    {{ lang.label }}
</a>

^{Jump to GitHub}

Since VueJS handles the DOM, this is all what is needed for the language switcher. To sum it up:

• Texts are variables in Javascript that are bound to an HTML element on the page, that displays this text.
• When these texts/variables get updated in Javascript, the page updates automatically (Thanks to VueJS!).
• The texts live in simple JSON files for each language.
• Switching the language basically means switching the JSON file.

---

^{Related Commits:
https://github.com/utopian-io/utopian-io-landingpage/commit/5f07070c0d78978203c045a7c53855d9c0697df1
https://github.com/utopian-io/utopian-io-landingpage/commit/a228d161a0a3a65001ca342e841dc326694bacd1
https://github.com/utopian-io/utopian-io-landingpage/commit/79ad810f3ae431257c5c8d0bfb5cafdae1fd08ee
https://github.com/utopian-io/utopian-io-landingpage/commit/3cad0f1676114c283c48f29dcce0dcda9dfd0166
https://github.com/utopian-io/utopian-io-landingpage/commit/6f5a68349b1df3b13bdacce81c16072bd2409150
https://github.com/utopian-io/utopian-io-landingpage/commit/7652b36b1c48e65735ae968d24a7a9460791959b
https://github.com/utopian-io/utopian-io-landingpage/commit/9512be3144f6eba9c38c8e0e39b7c4a9455fa3bb}

---

I'm really happy that the first translations are ready to be published, so the language switcher can go live on join.utopian.io very soon! ;)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---