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.

```js
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:

```json
{
	"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:

	```json
	{
		"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!