Using a headless CMS — Kalme Astro

Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and step-by-step guides for Sanity, Payload, Strapi and Directus are in Use a headless CMS with an Astro template. This page lists what is specific to Kalme.

Collections

src/content.config.ts defines them, src/content/schemas.ts checks every entry when the site builds, and pages read them through src/lib/content.ts. Mirror the schemas in the CMS:

Collection	Key fields
services	slug, number, title, images (two), description, tools (label and link), offer and benefits (bold start + text), plans (id, label, price, note, what’s included)
projects	slug, title, year, image, services (label and service slug), summary, industry, overview (text, image), process (text, two images), result (bullets, image)
posts	slug, title, excerpt, image, category, date, body
legal	slug, title, date, body
testimonials	slug, quote, name, company, service, rating, photo, logo
team	name, role, email, photo

• A project refers to its services by their slug — model them as references and return label and slug in your mapping.
• Keep the collection’s order in the CMS (a sort field) and return entries in that order — position preserves it (the home page shows the first five services, four projects and three posts).

Rich text

Posts and legal texts are blocks, not HTML:

{ type: "heading", text: "…", bold?: "…" }
{ type: "paragraph", text: "…", highlight?: "…" }       // highlight: a bold start
{ type: "list", ordered?: true, items: [[ …blocks ], [ …blocks ]] }   // each item is a list of blocks

Convert your CMS’s rich text to these blocks in your mapping (how).

Images

Upload images at least as large as the layout uses: 1920 px for project and service photos. Using a CMS’s images in the site: Images.