Using a headless CMS — Titen 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 Titen.

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
categories	slug, title
projects	slug, title, location, year, category (a category’s slug), image, summary, intro (text, portrait image, three gallery images), story (image, text, wide image), details (two texts, three gallery images), closing (one or two parts: text and image)
services	slug, number, title, overview, image, points (five key points), about, included (rich text)
posts	slug, title, excerpt, image, category, author, date, body (rich text)
testimonials	slug, quote, name, photo, rating (optional)

• A category’s slug is a top-level URL (/residential): keep it clear of the other pages’ paths.
• A project refers to its category by its slug. Model it as a reference and return the slug in your mapping.
• Keep the collection’s order in the CMS (a sort field) and return entries in that order; position preserves it. Home shows the first seven projects, four services, three posts and five testimonials.

Rich text

Post bodies and a service’s “What’s included” are blocks, not HTML:

{ type: "heading", text: "…" }
{ 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 wide project photos and posts. Using a CMS’s images in the site: Images.