Skip to content
Sign inJoin waitlist

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

Collections

Section titled “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, title, summary, image, about (title, text, four facts: value and label), benefits (title, four items: title and description), lanes (title, text, items: the slugs of its lanes)
lanes slug, title, departure, arrival, transit, average, frequency, description, image
posts slug, title, excerpt, image, category, date, body (rich text)
testimonials slug, title, quote, name, role, company, photo, rating (out of 5)
clients slug, name, logo
legal slug, title, updated, body (rich text)
  • A service lists its lanes by their slug (lanes.items), in the order its page shows them. Model them as references and return the slugs in your mapping; a slug that matches no lane is skipped.
  • Keep the collection’s order in the CMS (a sort field) and return entries in that order; position preserves it. Home shows every service (numbered in that order), the first lane and the first four client names in the hero, every client and testimonial, and the first three posts. “Other Posts” at the end of a post shows up to three posts of the same category, and the Blog shows six posts at a time.
  • Services, posts and legal pages have their own pages (/services/<slug>, /blog/<slug>, /legal/<slug>); lanes, testimonials and clients don’t.
  • A post’s date and a legal page’s updated are ISO dates ("2026-08-26").
  • The footer’s Services column and the quote form’s shipping methods are lists in src/content/site.json, not collections: a service added in the CMS doesn’t appear there by itself.

Rich text

Section titled “Rich text”

Post bodies and the legal pages are blocks, not HTML:

{ type: "heading", text: "…", level?: 2 | 3 }                      // level 3: a smaller heading
{ 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

Section titled “Images”

Upload images at least as large as the layout uses: 2400 px wide for service and post photos, 800 px for lane photos, 800 × 800 for testimonial portraits. Client logos are SVG or PNG files, shown 16 px tall. Using a CMS’s images in the site: Images.

A CMS can give full image URLs: every image in the template takes either a /images/<file> path or a URL (isRemote() and imageUrl() in src/design-system/utils/image.ts). Allow the CMS’s image host in astro.config.mjs (image.domains) so Astro resizes its photos too.