Translations

The translations are coming from the CMS and local JSON files. The CMS contains translations that affect the content of the page. Local JSON files are more used to translate small keywords that are part of the system.

The only part of the brandplatform that is not translated is the component library. Because this is temporarily based off the folder structure of the templates. We recommend using English as a default language here. Try not to mix the language up, because that creates more confusion to be honest.

config

Within the config of the project the languages can be set and added. By default the system supports:

• English
• Dutch
• French

If your language is not in here, I'm very sorry. But don't worry, one day we will even start supporting Chinese! But the good thing is that you can add this language yourself and create your own translations!

Within the config file you can find these options in the app object:

• language: the default language the system needs to fallback to
• languages: the available languages within the brandplatform.

module.exports = {
    /**
     * General info
     * -------------------------------------------------------------------------
     */
    app: {
        language: "en",
        languages: [
            "en",
            "nl",
            "fr",
        ],
    },

CMS

Translations that affect the content of the brandplatform like the content on the home, brand and resource page are all coming from the headless API and should be adjusted there.

Project

Translations for the project are placed within json-files. These files need to be placed within the config/translations folder. The file needs to be the same name as language defined within the language array in the config of the app.

So this means that if you have a language added in the languages array called en, then your file needs to be named en.json and placed within the folder config/translations.

The contents of the file must contain the structure equal to the structure we have defined in our default language files. To overwrite them simply add the correct structure and their keys and fill in the ones you want to replace. Remove the keys that are empty because otherwise you will overwrite them.

These are the available keys within a json format:

{
    "generic": {
        "previous": "",
        "next": ""
    },
    "navigation": {
        "home": "",
        "brand": "",
        "resources": "",
        "library": ""
    },
    "footer": {
        "text": ""
    },
    "home": {
        "cta": {
            "brand": {
                "title": "",
                "link": ""
            },
            "resources": {
                "title": "",
                "link": ""
            },
            "library": {
                "title": "",
                "link": ""
            }
        },
        "changelog": {
            "title": "",
            "link": ""
        },
        "projects": {
            "title": "",
            "fallback": ""
        }
    },
    "brand": {
        "search": {
            "placeholder": ""
        },
        "restricted": {
            "title": "",
            "description": ""
        },
        "fallback": {
            "description": ""
        }
    },
    "resources": {
        "search": {
            "placeholder": ""
        },
        "restricted": {
            "title": "",
            "description": ""
        },
        "fallback": {
            "description": ""
        }
    }
}

Adding and changing translations

At the moment we only support a certain set of languages. But if your language is not in there, you can always add it yourself.

For example: you want to add Italian, but we don't support it.

• Go to the config file within config/index.js. Within the app object add the key, if it's not there, languages and add "it" as a string.

• Create the translations file. Go into the folder config/translations and add the file it.json.

• Open up the file and add the structure explained above.

• Fill up the json file with your translations and remove the keys that are still empty to make sure you don't overwrite any copy that does not need to get overwritten. For example:

    {
        "generic": {
            "previous": "precedente",
            "next": "Il prossimo"
        }
    }

• Start the brandplatform with npm run start, select your language and see the magic happen. Your language will be available and applied to the items where we have defined the keys for. If this does not happen, then some evil dark magic is spreading and you must let us know so we can command our front-end wizards to do their job properly and drive off this crude evil!