Languages

Lyra ships in English and Spanish. The first language has no prefix in its addresses (/about/), and every other language lives under its code (/es/about/). Each page links to its translations for search engines (hreflang tags), the sitemap lists every language, and the language switcher in the header takes visitors to the same page in the other language.

Where each language’s text lives

What	Where
The list of languages	src/i18n/languages.mjs
Words the theme prints (buttons, labels, “days left”)	src/i18n/ui.ts, one block per language
Your settings, menus and footer	src/site.config.ts, as { en: '...', es: '...' }
Pages, causes, campaigns, events and stories	A folder per language, such as src/content/pages/es/
Team roles	role: { en: ..., es: ... } in each team file

Missing translations

If a cause, campaign, event, story or page has no file in a language yet, Lyra uses the English file at that language’s address. You can launch a second language before everything is translated and fill in the rest over time.

Using one language only

1. In src/i18n/languages.mjs, delete the es line.
2. Delete the es folders in src/content/pages/, causes/, campaigns/, events/ and stories/.
3. Delete the src/pages/es/ folder.

The language switcher hides itself when there’s only one language. The es text in site.config.ts and ui.ts does no harm, but you can remove it.

Making Spanish (or another language) the main one

Set defaultLang in src/i18n/languages.mjs to its code. That language then has no prefix, and English moves to /en/. Then rename src/pages/es/ to src/pages/en/ and change 'es' to 'en' in both files inside it: the default language’s RSS and calendar files are the ones directly in src/pages/, and every other language has its own folder.

Adding a language

French as an example:

1. Register it. In src/i18n/languages.mjs, add a line:

   fr: { name: 'Français', dir: 'ltr', locale: 'fr-FR' },

   name is shown in the switcher, locale controls how dates and amounts are written, and dir is 'rtl' for right-to-left languages such as Arabic, Hebrew or Urdu.

2. Translate the theme’s words. In src/i18n/ui.ts, copy the es block, rename it fr, translate each line, and add it to the list: export const ui = { en, es, fr };. If you miss a line, npm run check tells you which.

3. Add its feeds and calendar files. Copy src/pages/es/ to src/pages/fr/, and in both files inside it change 'es' to 'fr'.

4. Translate your content. Create fr folders next to the en ones in src/content/pages/, causes/, campaigns/, events/ and stories/, and copy in the files you want to translate, keeping the same file names.

5. Translate your settings. Add fr: '...' to the text in site.config.ts and to team roles. Anything without a French version falls back to English.

Right-to-left languages

With dir: 'rtl', the whole layout mirrors: menus, cards, arrows, progress bars and forms. Lyra’s styles use logical directions throughout, so no extra CSS is needed. The heading font, Bricolage Grotesque, covers Latin scripts only, so pages in Arabic, Persian and Urdu switch to system fonts that carry those scripts. For Hebrew or another script, add a font that covers it (see Colours, fonts and photos).

Search in every language

Site search only shows results in the language the visitor is reading. See SEO, search and sharing.