Mozilla Webmaker's mission is to help enable a new generation of digital creators and webmakers, giving people the tools and skills they need to move from using the Web to actively making the Web.

Before you jump into the code you'll want to download, install, and configure the following:

• Node 0.12+ w/ ES6 ("harmony") features enabled
• NPM 2.6+

git clone https://github.com/mozilla/webmaker-browser
cd webmaker-browser
npm install

npm start

Deployment to staging and production servers is automated via Travis-CI.

develop – Deploys to https://webmaker-desktop-staging.herokuapp.com

master – Deploys to https://webmaker-desktop-production.herokuapp.com

In this project we're using React-Intl to localize our application and YAML for translation.

To localize a component or page you have to include IntlMixin in your class mixins, for example:

var React = require('react');

var Example = React.createClass({
  mixins: [require('react-intl').IntlMixin],
  render: function() {
    return (
      <div>
        <h1>{this.getIntlMessage('key_name_here')}
      </div>
    );
  }

});

If the strings include HTML, use the FormattedHTMLMessage element:

import { FormattedHTMLMessage, IntlMixin } from 'react-intl';

<FormattedHTMLMessage
  message={ this.getIntlMessage("key_name_here") }
/>

Once you add the mixin it will expose the getIntlMessage method to your component to get the localized message for the given key.

Because we are using YAML for our translation and React-Intl expects JSON, we need an extra build step to convert YAML to JSON. We are using yaml-intl-xml-json-converter to convert from YAML to JSON.

intl-config.json

{
  "supportedLocales": ["en-US", "de", "fr", "pt-BR", "es"],
  "dest": "locales",
  "src": "locales",
  "type": "json"
}

en-US.yaml

---
en-US:
  first: This is your first message
  second: This is your second message

You have to make sure you match your language code in your YAML file and the name of the file with what you include in your config file for the converting part otherwise it will fail.

i18n.js file exposes different methods to help with localization. These are the list of available methods when you required the module.

{
  intlData: {messages: {}, locales: {}},
  defaultLang: 'en-US',
  currentLanguage: locale,
  isSupportedLanguage: function(lang),
  intlDataFor: function(lang)
}

1. intlData This object consist of two properties. locales and messages. We use this object to pass it to React-Router in order for getIntlMessage to work properly.

2. defaultLang This will return default language of the application.

3. currentLanguage This will return current language of the client that visiting our site.

4. isSupportedLanguage This method expect a valid language code, and it's used to validate if we support that given language or not. The return value is boolean.

5. intlDataFor This method expect a valid language code, and it will return intlData for the given language.

To fully localized the app we need to make sure we update the resource file on Transifex. This step requires that you have the required credential to upload the resource file on the Transifex's Webmaker project.

If you do not have the credential please speak @alicoding on IRC or any of the coordinator of the project for Webmaker on Transifex.

NOTE: There should be a weekly cycle where we upload the file on Transifex to avoid any problem that could occur.

IRC: #webmaker on irc.mozilla.org

Forum: https://groups.google.com/forum/#!forum/mozilla.webmaker