Internationalisation (i18n)

This project makes use of jsLingui with a dash of custom logic to make dynamic content a bit easier. It’s recommended to familiaise yourself with its available components to help implementation.

All text displayed to the end-user should be passed through this translation layer. See below for a few examples.

i18n IDs

All translated strings should be given an explicit ID, to help keep things consistent. This project formats i18n IDs using the syntax: [job].[module].[thing]

As an example, for a Red Mage you might end up with the key rdm.gauge.white-mana. These keys should be somewhat descriptive to make it clear for translators what exactly they’re editing.

Examples

Analyser titles

If your module has output, it should also be given a translated title. This title will be shown above its output, as well as used for the link in the sidebar.

import {t} from '@lingui/macro'
import {Analyser} from 'parser/core/Analyser'

export default class MyModule extends Analyser {
	// ...
	static title = t('my-job.my-module.title')`My Module`
	// ...
}

JSX content

In most cases, you can skip the peculiar syntax shown above, and use the Trans JSX tag, which automates a lot of the hard yards for you. This is commonly seen in use in module output and suggestions, among other things. There’s a number of other utility tags besides Trans, such as Plural - see the lingui documentation for more info.

import {Trans, Plural} from '@lingui/react'
import {Suggestion, SEVERITY} from 'parser/core/modules/Suggestions'

// ...

const supportedLanguages = 6
this.suggestions.add(new Suggestion({
	icon: this.data.actions.RAISE.icon,
	severity: SEVERITY.MORBID,
	content: <Trans id="my-job.my-module.suggestions.my-suggestion.content">
		You should <strong>really</strong> use localization.
	</Trans>,
	why: <Trans id="my-job.my-module.suggestions.my-suggestion.why">
		Localisation is important, we support
		<Plural
			value={supportedLanguages}
			one="# language"
			other="# languages"
		/>
	</Trans>,
}))

Markdown

Sometimes, you really gotta put a lot of content in - it’s cases like this that markdown comes in handy. We use a slightly extended syntax based on CommonMark.

Key differences:

• [~action/ACTION_KEY] will automatically turn into an ActionLink with icon, tooltip, and similar.
• [~status/STATUS_KEY] will likewise automatically turn into a StatusLink.
• Don’t use code blocks (`...`). Just… don’t. Please. It breaks everything.

import {t} from '@lingui/macro'
import TransMarkdown from 'components/ui/TransMarkdown'

const description = t('your-job.about.description')`
This is an _example_ of using **markdown** in conjunction with the TransMarkdown component.

I am also [contractually](https://some-url.com/) obliged to remind you to [~action/RUIN_III] everything.
`
const rendered = <TransMarkdown source={description}/>