# Internationalization (i18n)

## Internationalization (i18n)

**Files:** `src/config/config.toml`, `src/config/language.json`, `src/i18n/<lang>.json`, `src/config/menu.<lang>.json`, `src/content/**/<language>/` · **Skill level:** Beginner

Techlo ships in English, French, and Arabic. Arabic is the right-to-left example, so see [RTL & Arabic](../../features/rtl-arabic/) for how direction works. The Arabic text is a machine translation, so have a native speaker review it before you publish.

Everything reads the language list from `src/config/language.json`, so you never list languages anywhere else. Each language has its own content folder, menu file, and interface labels.

In the Tina edition, you edit every language's content at `/admin/`, and its menu and labels under **Menus** and **Interface labels**. In the Sanity edition, content, **Menus**, and **Interface labels** are documents in the Studio, one set per language. `language.json` stays in the project in every edition.

### Language Settings
```toml
# src/config/config.toml
# Restart your server when you change these values
[settings.multilingual]
  enable               = true
  defaultLanguage      = "en"
  disableLanguages     = [""] # Languages to turn off, such as ["fr", "ar"]
  showDefaultLangInUrl = false
```

| Setting                | What it does                                                      |
| ---------------------- | ----------------------------------------------------------------- |
| `enable`               | Turns multiple languages on or off                                |
| `defaultLanguage`      | The primary language                                              |
| `disableLanguages`     | Languages to turn off. Their files stay in the project            |
| `showDefaultLangInUrl` | Adds the default language's code to its addresses, such as `/en/` |

### The Language List
Each language has an entry in `src/config/language.json`:

```json
{
  "languageName": "Fr",
  "languageCode": "fr",
  "contentDir": "french",
  "dir": "ltr",
  "ogLocale": "fr_FR",
  "dateLocale": "fr-FR",
  "weight": 2
}
```

`dir` is `ltr` or `rtl`, and it sets the direction of the page. `ogLocale` is the language code for social previews, and `dateLocale` sets the format for dates.

### Add A Language
Run the language script. This example adds German. The script's settings differ by edition.

In the Astro and Tina editions:

```bash
npm run generate-multilingual-content -- de --name Deutsch --content-dir german --date-locale de-DE --og-locale de_DE
```

In the Sanity edition:

```bash
npm run generate-multilingual-content -- --lang de --name Deutsch --dir-name german --locale de-DE --og-locale de_DE
```

For a right-to-left language, add `--dir rtl`.

It adds the language to `language.json`, and makes copies of your default language to translate. Then:

- **Astro:** translate the new `german/` content folders, `src/i18n/de.json`, and `src/config/menu.de.json`, then restart the dev server.
- **Tina:** run `npm run tina:generate`, restart `npm run dev`, and translate the new `german/` folders, **Menus**, and **Interface labels** in the editor.
- **Sanity:** restart the dev server. The language appears in the Studio, with a copy of every default-language document to translate. Your other documents aren't touched.

If you host on Netlify, each language needs a `/de/*` block in `netlify.toml`, so that a missing page shows that language's 404 page. In the Astro and Tina editions, the script adds it for you. In the Sanity edition, add it yourself, as the other languages have.

### Remove One Language
Add its code to `disableLanguages`, then restart the dev server. To remove Arabic:

```toml
# src/config/config.toml
[settings.multilingual]
  disableLanguages = ["ar"]
```

It leaves your site. In the Tina edition its files stay, and the editor still lists them. In the Sanity edition it stays listed in the Studio.

### Keep Only Your Default Language
<Aside type="caution">
  `npm run remove-multilingual` removes every language except your default one.
  In the Astro and Tina editions it deletes their files, so save a git commit or
  a copy of the folder first.
</Aside>

- **Astro:** set `enable = false` in `[settings.multilingual]`, run `npm run toml:watch` once, then run `npm run remove-multilingual`.
- **Tina:** do the same, then run `npm run tina:generate`.
- **Sanity:** run `npm run remove-multilingual`. The other languages' documents stay in your project unless you add `-- --delete-online`, which deletes them and can't be undone.