I18n

Up to: Tech WG, Mastodon/Docs

Rather than hardcoding strings, Mastodon uses an i18n system to replace strings with versions in different languages.

Usage

An example of how this works would be eg. in the favourite modal:

import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';

const messages = defineMessages({
  favorite: { 
    id: 'status.favorite', 
    defaultMessage: 'Favorite' 
  },
});

// some time later..
<Button 
  text={intl.formatMessage(messages.favourite)} 
  onClick={this.handleFavourite} 
  ref={this.setRef} 
/>

Or to use a specific FormattedMessage component:

<FormattedMessage 
  id='favourite_modal.combo' 
  defaultMessage='You can press {combo} to skip this next time' 
  values={{ combo: <span>Shift + <Icon id='star' /></span> }} 
/>

Translations

Each of these keys like 'status.favorite' is defined in a set of JSON files in

• mastodon/app/javascript/flavours/glitch/locales
• mastodon/app/javascript/mastodon/locales

These translations can be contributed to using Crowdin:

https://crowdin.com/project/mastodon

CI actions

CI uses formatjs to check the localization files.

This extracts all the messages that are defined in-place using defineMessages and exports them to the en.json locale.