-
Notifications
You must be signed in to change notification settings - Fork 2
Localisation
The BreakOut website can be displayed in multiple languages. The language that is displayed is determined by the users preferred language set by its browser. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language for details on how the Accept-Language HTTP Header works.
In order to switch your language for development, it is recommended to use a browser plugin, such as Quick Language Switcher for Chrome.
Parts of the website, especially short strings used in forms, etc. are localised using language files located in resources/translations/translations.{language}.js.
The files are structured in the following format:
{
"NAME_OF_HANDLEBARS_FILE": {
"NAME_OF_KEY": "This will be filled in as the value"
}
}Note that the NAME_OF_HANDLEBARS_FILE is an upper case version of the filename, which is written in camel case (e.g. nameOfHandlebarsFile.handlebars)
In Handlebars those language files can be used with a handlebars helper like the following
In nameOfHandlebarsFile.handlebars:
<html>
...
<body>
...
{{__ 'NAME_OF_KEY'}}
...
</body>
</html>In React the translation can be access via the i18next framework. An i18next instance should be passed down to your component as a prop. It can then be used like the following
...
render()
const myLocalisedString = i18next.t('NAME_OF_HANDLEBARS_FILE.NAME_OF_KEY')
return <p>{myLocalisedString}</p>;
}
...Please not that NAME_OF_HANDLEBARS_FILE in this case is just an example to any 1st level key in the translations files. There is no need to have any file named in any corresponding way for this to work in React
When using contentful you can pass in the wanted user locale and the returned entries are localised (if available). Here is how to use it:
function (req, res, next) {
...
// Note that the users preferred locale is available as req.contentfulLocale and should be used
const data = yield contentful.getFieldsForContentType('privacyPolicy', req.contentfulLocale);
...
}