Skip to content
New: Customize your theme with an AI assistant. Read the guide

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

[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:

[
{ "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:

Terminal window
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.

  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:

    { "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.

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

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.
Type something to search...