# Internationalization

## Internationalization

**Files:** `src/config/language.json`, `src/config/config.toml`, `src/i18n/`, `src/config/menu.<code>.json`, `english/` and `french/` content folders · **Skill level:** Beginner to intermediate

Taskly ships in **English** (default, at `/`) and **French** (at `/fr/`). Each language has:

- its own content folder inside every collection: `src/content/<collection>/english/` and `french/`
- its own interface text: `src/i18n/en.json` and `fr.json` (buttons, labels, form messages, the footer text, the tagline)
- its own menus: `src/config/menu.en.json` and `menu.fr.json` (breadcrumb labels come from the menu names, so they are translated too)

The language links are in the footer (and at the top of the auth screens).

### Settings
```toml
[settings.multilingual]
  enable               = true
  defaultLanguage      = "en"
  disableLanguages     = [""]   # for example ["fr"] to stop building French
  showDefaultLangInUrl = false  # true puts English at /en/ too
```

Restart `npm run dev` after any change here. The languages themselves are listed in `src/config/language.json`:

```json
[
  { "languageName": "En", "languageCode": "en", "contentDir": "english", "weight": 1 },
  { "languageName": "Fr", "languageCode": "fr", "contentDir": "french", "weight": 2 }
]
```

### Use English Only
**Quick and reversible:** set `enable = false` under `[settings.multilingual]`. The French files stay on disk but are not built, and the language links disappear.

**For good:** after setting `enable = false`, run `npm run dev` or `npm run astro-check` once (so the setting is converted), then:

```bash
npm run remove-multilingual
```

It deletes every `french/` folder, `menu.fr.json`, and `fr.json`, and rewrites `language.json`. It always keeps the English menu and interface text, so if you want to keep only another language, remove the other files by hand instead. Save a checkpoint first: this can't be undone without one.

### Replace French With Another Language
To ship English and, say, German instead of French, add German (below), check it, then remove French: add `"fr"` to `disableLanguages`, or delete the `french/` folders, `menu.fr.json`, `fr.json`, and its entry in `language.json`.

### Add A Language
This is the "Add or remove a language" recipe in `SKILLS.md`. Example: German, code `de`, folder `german`.

<Steps>

1. Copy every `english/` folder under `src/content/` (each collection has one) to a `german/` folder next to it.
2. Add the language to `src/config/language.json`:

   ```json
   { "languageName": "De", "languageCode": "de", "contentDir": "german", "weight": 3 }
   ```

3. Copy `src/config/menu.en.json` to `src/config/menu.de.json` and `src/i18n/en.json` to `src/i18n/de.json`.
4. Translate the copied content, menu, and interface text. An AI assistant does this well, one folder at a time.
5. On Netlify, add a `/de/*` 404 block to `netlify.toml` (copy the French one). Restart the dev server.

</Steps>

<Aside type="danger" title="Don't use generate-multilingual-content to add a language">
  `npm run generate-multilingual-content` only creates French (`fr`,
  `french/`). It copies the English files over the existing `french/` folders,
  `menu.fr.json`, and `src/i18n/fr.json`, replacing the French translations.
  Use it only to rebuild French from scratch from your English content.
</Aside>

### What To Translate
- Every content file, including `src/content/sections/<language>/` and `src/content/widgets/<language>/` (the dashboard sample data, the announcement bar, the cookie banner).
- `src/i18n/<code>.json`, including `site.tagline`, which is added to page titles.
- `src/config/menu.<code>.json`.

Keep the **file names** the same in every language: the language links open the same URL in the other language.

### Things To Know
- Right-to-left languages (Arabic, Hebrew) are not supported.
- Copy every file: a page whose content file is missing in a language folder can break or disappear in that language. Check each page in the new language after copying.
- Translated 404 pages: each language has one at `/<code>/404/`. Netlify needs the redirect block from step 5; other hosts show their own 404 or the default one.

### Do It With AI
```text
Follow the "Add or remove a language" skill in SKILLS.md to add Spanish (code "es", folder
"spanish"). Copy every english/ folder in src/content/ to spanish/, add the language to
src/config/language.json, create src/config/menu.es.json and src/i18n/es.json, and translate all
of it. Keep keys, file names, URLs, icon names, and layout values unchanged. Add the /es/* 404
block to netlify.toml. Do one collection at a time and tell me when each is done.
```