Customizing your site

Paths on this page are inside the app you build — apps/astro-theme or apps/tanstack. Both apps read the same files in the same shape.

Content — markdown files, no code

Everything editorial lives in src/content/:

• pages/ — each file becomes a page at its own URL (travel.md → /travel). Frontmatter nav: header or nav: footer adds it to the navigation.
• faq/ — one question per file; the body is the answer.
• news/ — dated posts, listed newest first at /news.
• features/ — the three-up cards on the home page.
• highlights/ — the alternating image/text splits, each with an optional CTA button.

Event data — edited on Cloomba, not in the repo

Agenda, speakers and their photos, sponsors and their logos, ticket tiers, coupons, the cover image, and the organizing team all come from your Cloomba event. Edit them in the event admin, rebuild, done — the site picks up everything, including speaker portraits replacing the initial-letter placeholders automatically.

Look — tokens in the config

Colors, fonts, and corner radius are config values, with separate light and dark palettes. Components only ever use semantic tokens, so a palette change restyles the whole site consistently — there is no per-component color to chase. Set just a primary and the grays, button text and accent derive from it in the same hue.

Language — one file of labels

Your own writing (markdown pages, and everything from your Cloomba event) is already in whatever language you wrote it. What's left is the template's own furniture — Agenda, Register,All stages, Sold out — 84 short labels, all listed in one file:strings.en.json.

You override them in strings.ts, which ships empty and is already wired into the config — so translating never means editing site.config.ts. What you put there is merged over the English, so you translate what matters and leave the rest:

// strings.ts
export default {
    'nav.sponsors': 'Sponzori',
    'common.register': 'Registrovať sa',
    'agenda.all_stages': 'Všetky pódiá',
} satisfies StringOverrides

That satisfies is what makes your editor autocomplete all 84 keys and underline a misspelled one before you ever run a build. A plain .json file works just as well if you're handing the file to a translator — you lose only the editor checking.

Counted phrases like 2 days are plural families. English needs only .one and.other; Slovak and Czech add .few, Ukrainian adds .many, and the right form is chosen for the number at hand. Anything you don't supply falls back to .other.

A key you misspell, leave empty, or give a non-string value is ignored with a build warning and the English word is used instead. Nothing about wording can stop your site from deploying — a mislabeled page beats a failed deploy.

Set language too ('sk', 'uk', …). That one doesn't change any words — it drives <html lang> plus the dates, times, and prices, which are formatted by the browser's own locale data and so already read correctly in every language.

Images inside markdown pages

Drop the image next to the markdown file and reference it relatively —![The venue](./venue.jpg). The build optimizes it automatically: converted to WebP, content-hashed for caching, and emitted with its real dimensions so the page never shifts while loading. Images from public/ (![Map](/images/map.png)) and remote URLs also work, served exactly as-is — use the relative form when you can.

In the TanStack Start app, put images under public/ and reference them from the root (![The venue](/images/venue.jpg)), or use a remote URL.

Images shipped with the site

• public/logo.svg — the header/footer mark; public/favicon.svg — the browser tab.
• public/placeholders/ — the hero scene and the split illustrations; replace them with your own photos or art (any format, same paths — or new paths referenced from the highlight files).

Going further

It's your repository — every section is a small component under src/components/sections/ (.astro files in the Astro app, .tsx in the TanStack one), and the home page is a list mapping config names to them. Add a section type by writing a component and one map entry. The repo's AGENTS.mdcarries the few layout rules that keep everything aligned (one page width, semantic tokens only) — they apply to humans and AI assistants alike.

Next: configuration · deployment