Adding a MailChimp Template Language (MTL) based I18n helper for Panini templates

example.html

---
# src/pages/example.html
subject: Congrats!
i18n:
  congrats:
    es-us: Enhorabuena!
    fr-cs: Félicitations,!
---
<row>
  <columns small="12" large="12">
    <h1>{{#i18n "congrats"}}Congratulations!{{/i18n}}</h1>
  </columns>
</row>

I18n for Panini.md

i18n for Panini

Requirements

Other than the default Panini pieces, you will also need to make sure that lodash is included as a devDependencies in your package.json

Usage

Tag a section of text as translatable. The section will be replaced with a set of if/elseif/else Merge Tags for each translation provided, otherwise only the wrapped content is displayed.

Translations are defined in the Front Matter section of each email template:

---
i18n:
  congrats:
    es-us: Enhorabuena!
    fr-cs: Félicitations!
---

You tag a section of text for translation like so:

{{#i18n "congrats"}}Congratulations!{{/i18n}}

You'll notice that there is no English translation. That's because the default translation goes inside the helper tags. It also serves as a backup in case no other translations are provided or the requested translation isn't available.

The translation key is the text (in quotes) inside the {{#i18n}} tag and it corresponds to the key in the i18n section of the Front Matter. In the examples above congrats is the translation key. For each {{#i18n}} tag you use you must provide a translation key in the Front Matter, otherwise an error will be raised when you build the templates. However, the key can be empty if you do not have translations to provide. The following are all valid:

---
i18n:
  congrats:
    es-us: Enhorabuena!
---

---
i18n:
  congrats:
    es-us:
    fr-cs:
---

---
i18n:
  congrats:
---

You can specify as many translations as necessary, and each translation key can be used multiple times if necessary.

i18n.js

// src/helpers/i18n.js

var _ = require('lodash');

/**
 * Provides a means of embedding translations into templates. Expects translations to be in the
 * `context.data.root.i18n` path. If any translations are provided it will create a Mailchimp style
 * `*|IF|*` block with the wrapped content as the default, otherwise it will just return the content.
 *
 * @param  {String} `key`
 * @param  {Object} `context`
 * @return {String}
 * @api public
 */

module.exports = function(key, context) {
  var translation_data = _.get(context, 'data.root.i18n.' + key);
  var error = 'Missing i18n key `' + key + '` for page `' + _.get(context, 'data.root.page') + '`';
  if (_.isEmpty(translation_data)) {
    throw new Error(error);
  }

  var translations = {};
  if (_.isPlainObject(translation_data)) {
    translations = _.omit(translation_data, _.isEmpty);
  }

  var out = "";
  if (_.size(translations) > 0) {
    var counter = 1;
    var prefix;
    var suffix;
    var equality = '=';
    _.forOwn(translations, function(translation, language) {
      if (counter === 1) {
        prefix = '*|IF:';
        suffix = '|*';
        out += prefix + 'LOCALE' + equality + language + suffix + "\n" + translation + "\n";
      }
      else {
        prefix = '*|ELSEIF:';
        suffix = '|*';
        out += prefix + 'LOCALE' + equality + language + suffix + "\n" + translation + "\n";
      }
      counter++;
    });
    var _else = '*|ELSE:|*';
    var _end = '*|END:IF|*';
    out += _else + "\n" + context.fn() + "\n" + _end + "\n";
    return out;
  }
  return context.fn();
};