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/andfrench/ - its own interface text:
src/i18n/en.jsonandfr.json(buttons, labels, form messages, the footer text, the tagline) - its own menus:
src/config/menu.en.jsonandmenu.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/ tooRestart 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:
npm run remove-multilingualIt 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.
-
Copy every
english/folder undersrc/content/(each collection has one) to agerman/folder next to it. -
Add the language to
src/config/language.json:{ "languageName": "De", "languageCode": "de", "contentDir": "german", "weight": 3 } -
Copy
src/config/menu.en.jsontosrc/config/menu.de.jsonandsrc/i18n/en.jsontosrc/i18n/de.json. -
Translate the copied content, menu, and interface text. An AI assistant does this well, one folder at a time.
-
On Netlify, add a
/de/*404 block tonetlify.toml(copy the French one). Restart the dev server.
What To Translate
- Every content file, including
src/content/sections/<language>/andsrc/content/widgets/<language>/(the dashboard sample data, the announcement bar, the cookie banner). src/i18n/<code>.json, includingsite.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 tosrc/config/language.json, create src/config/menu.es.json and src/i18n/es.json, and translate allof it. Keep keys, file names, URLs, icon names, and layout values unchanged. Add the /es/* 404block to netlify.toml. Do one collection at a time and tell me when each is done.