i18n

i18n works with an home made module inspired by awesome Rubenv's angular-gettext : https://github.com/rubenv/angular-gettext

Adding i18n in your code

Text in source code must be in english. It will be the unique key that identifies translated texts. A separated process will crawl all the source code, extracts those texts, and will send them to our translation tool: transifex.

Once a day, a process will pull new translated text and create a pull request.

This system works pretty well for short and unformatted text. For longer texts, you may use an article (please contact [email protected] for this use case).

Include i18n in

Simply use v-translate directive :

<span v-translate>
    Hello world!
</span>

Note that node content can only be simple text. this won't work as expected :

<span v-translate>
    Hello <b>world</b>!
</span>

If you need to specify a translation context to translators, use translate-context attribute :

<span v-translate translate-context="Message to users">
    Hello world!
</span>

Include i18n in javascript files and <script> part in vue file...

... And also in template bindings, use $gettext method :

<template>
    <img :title="$gettext('Hello World')" :alt="altText">
</template>

<script>
    export defaults {
        computed: {
            altText() {
                return this.$gettext('Alternative hello');
            }
        }
    }
</script>

$gettext accepts a second argument : translation context :

const message = this.$gettext('Hello world!', 'Message to users')

As $gettext in binded to Vue model, you can't use it in a separated js file.

Include i18n in <style> part in vue file...

... is not possible.

Include i18n in messages from API

API messages are not explicitly present in c2c_ui source code. For this use case, add an hard-coded javascript comment :

<template>
    <!-- $gettext('an API message') -->
    <span></span>
</template>

<script>
    export defaults {
        computed: {
            altText() {
                // could be :
                // $gettext('message A')
                // $gettext('message B')
                return api.getMessage();
            }
        }
    }
</script>

More hidden details ...

... can be found in the discussion in this issue.

---

Workflow with transifex

We have migrated our CI to Github Actions and have automated the i18n workflow:

• Every time a commit is made on the master branch, the i18n keys are extracted from code and uploaded to Transifex.
• Once a day, a script checks whether changes were introduced in Transifex, and, if applies, creates or updates PR to merge changes into master branch.
• Users can then review changes and merge the PR as appropriate. Or even edit it if needed.