Mira Astro documentation

Languages

Run your site in English and Odia, switch to one language, or add Hindi, Bengali, Spanish, Arabic or any other.

Mira ships in English and Odia. The first language has no prefix in its addresses (/about/), and every other language lives under its code (/or/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, “Open now”, the disclaimer) src/i18n/ui.ts, one block per language
Your settings, menus and footer src/site.config.ts, as { en: '...', or: '...' }
Pages, conditions, treatments, clinics, team and posts A folder per language, such as src/content/pages/or/

Missing translations

If a page, condition, treatment, clinic, therapist or post has no file in a language yet, Mira 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 or line.
  2. Delete the or folders in src/content/pages/, conditions/, treatments/, locations/, team/ and posts/.
  3. Delete the src/pages/or/ folder.

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

Making Odia (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/or/ to src/pages/en/ and change 'or' to 'en' in the file inside it: the default language’s RSS feed is the one directly in src/pages/, and every other language has its own folder.

Adding a language

Hindi as an example:

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

    hi: { name: 'हिन्दी', dir: 'ltr', locale: 'hi-IN' },

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

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

  3. Add its feed. Copy src/pages/or/ to src/pages/hi/, and in the file inside it change 'or' to 'hi'.

  4. Translate your content. Create hi folders next to the en ones in src/content/pages/, conditions/, treatments/, locations/, team/ and posts/, and copy in the files you want to translate, keeping the same file names. Copy search.md too, so the language has its own search page.

  5. Translate your settings. Add hi: '...' to the text in site.config.ts. Anything without a Hindi version falls back to English.

Indian and other scripts

The heading font, Lexend, covers Latin scripts only. Pages in Odia, Hindi, Bengali, Tamil and Telugu switch to the system fonts that phones, Windows and Macs already carry for those scripts (Noto Sans and Nirmala UI), with taller lines for the vowel signs. That adds nothing to page weight. The rules are at the end of src/styles/tokens/scale.css; add your language’s code there if it isn’t listed.

Right-to-left languages

With dir: 'rtl', the whole layout mirrors: menus, cards, arrows, hours tables and forms. Mira’s styles use logical directions throughout, so no extra CSS is needed. Pages in Arabic, Persian and Urdu use system fonts that carry those scripts.

Search in every language

Each language gets its own search index, built by npm run build, and visitors only see results in the language they’re reading.

Checking translations

The Odia in the demo is sample copy. Before you publish a language, have a native speaker read the pages and ui.ts.