Translating your administrator

For large(r) projects, the need to be able to translate your administrator into multiple languages often arises. This is (relatively) easy in Monad.

Configuring angular-gettext

Monad internally uses angular-gettext to provide so-called "i18n" to your administrator. Generic texts like "please login" are provided by Monad in English and Dutch; it's up to you to mark and provide translations for your own components and/or other languages.

Monad contains the i18n.png sprite with "flags of the world". Refer to ./src/_sass/_flags.scss for the correct classname for your language. E.g. for the class .en the language string should be stored as "en", whereas Welsh uses .wales/"wales".

If you installed Monad via NPM (and have the dev dependencies) you'll already have a copy of angular-gettext available. Otherwise, follow the instructions for angular-gettext to set it up inside your project. The website contains clear instructions.

Generating or creating a .pot file

GNU-gettext uses "catalogs" stored in so-called .pot files. These are templates for your translations. Where you store it doens't really matter, but the convention is to create a ./Locale or ./po folder in the root of your project.

angular-gettext comes with tools to automatically extract strings from your templates. Please refer to their documentation. Alternatively, you can manually fill your .pot file. The angular-gettext documentation also contains hints on how to use a number of popular editors to edit and translate your templates; we personally use poedit but any one will do.

Translating strings

That's your job :) Some editors offer translation hints, but in the end it's going to require some manual work.

Linking object properties to human-readable text

In your templates, simply add the translate attribute to any element you want to translate. E.g., in a list template's table headings:

<mo-list-table>
    <table>
        <tr>
            <th property="id" translate>ID</th>
        </tr>
    </table>
</mo-list-table>

Just mark whatever you need translated. Usually this is either "nothing" or "everything" ;)

Compiling translations for use

Once you've generated a .pot template, translated all the strings and saved your various language files as .po files, run the Grunt task supplied by angular-gettext to compile to Javascript.

Do not add a module name. Imports get "hoisted", so if you try to use a custom module name it won't exist yet during inclusion. Just use the default ("gettext") which is guaranteed to exist and on which Monad itself already depends.

Importing translations in your admin

This is now as simple as:

// ES6
import '/path/to/i18n.js';
// Browserify
require('/path/to/i18n.js');

...or, if you're not using these, concatenate or copy/paste.