Project structure

You’ll spend almost all your time in src/site.config.ts and src/content/. Everything else is the theme itself.

mira-astro/
├── astro.config.mjs          Your domain, languages and heading font
├── wrangler.jsonc            Settings for Cloudflare Workers (ignore it on other hosts)
├── public/                   Files served as they are, such as the favicon
├── scripts/
│   ├── placeholders.mjs      Draws stand-ins for missing demo photos
│   ├── palette.mjs           Rebuilds the colour scales and both presets
│   ├── art-conditions.mjs    Redraws the eight condition illustrations
│   └── check-links.mjs       Finds broken links in the built site
└── src/
    ├── site.config.ts        Your clinic, booking, palette, menus, footer and form settings
    ├── content.config.ts     The rules each content file is checked against
    ├── content/
    │   ├── pages/<lang>/     One file per page, built from blocks
    │   ├── conditions/<lang>/ Conditions you treat, at /conditions/<file-name>/
    │   ├── treatments/<lang>/ Treatments with length and price, at /treatments/<file-name>/
    │   ├── locations/<lang>/ Your clinics, with opening hours, at /locations/<file-name>/
    │   ├── team/<lang>/      Therapist profiles, at /team/<file-name>/
    │   └── posts/<lang>/     Health tips and news, at /blog/<file-name>/
    ├── assets/
    │   ├── images/           Your photos, referred to by file name
    │   └── art/              The illustrations, referred to with art: name
    ├── blocks/               Every block, its rules and the /blocks/ examples
    ├── components/           Header, footer, booking buttons, hours, profiles and small parts
    ├── i18n/                 Languages, and every word the theme itself prints
    ├── layouts/              The page shell: head tags, header and footer
    ├── lib/                  Helpers for content, opening hours and RSS
    ├── pages/                Routes. You rarely need to touch these.
    └── styles/               Design tokens, base styles and one CSS file per block

<lang> is a folder per language: en/ and or/ in the demo.

How a page is made

Every page file in src/content/pages/ has a sections: list. Each item is a block, such as a hero, a booking panel or a list of conditions, and Mira draws them in order. The file name is the address: about.md is published at /about/, and index.md is the home page.

Conditions, treatments, therapists, clinics and blog posts don’t need a page file. Mira builds a page for each one from the files in their folders, made of the same blocks: a page header, the text of the file, and related blocks such as “Treatments that can help” and a booking strip.

Content files are checked

src/content.config.ts and src/blocks/schema.ts describe every field. If a page has a typo, such as varient: instead of variant:, or a missing title, npm run dev shows an error naming the file and the field, rather than building a broken page.

One common YAML slip is caught too: in a short { … } list, a comma ends the value, so { value: 12,000+ } would become “12”. Mira stops the build and tells you which text to put in “quotes”.

Demo-only pages

• /blocks/ (the block library) and /style-guide/ show every block, token and illustration. They’re left out of the sitemap and search. Keep them while you build, then delete src/pages/blocks.astro and src/pages/style-guide.astro if you don’t want them online.
• /demo-booking/ is a pretend booking calendar for the demo. Delete src/pages/demo-booking.astro once you’ve set your own booking page.