Sections

Sections

Files: src/content/sections/english/ (and french/), page content files · Skill level: Beginner to edit, light code to add or move

A section is one full-width block of a page: the hero, the services, the reviews, the FAQ. Each section is two files that share a name:

src/layouts/components/sections/ReviewsSection.astro   ← how it looks (component)
src/content/sections/english/reviews-section.md        ← what it says (content)
src/content/sections/french/reviews-section.md

How Homio Works explains the idea in full. This page is the practical reference: every section, its file, and the block name a page uses to change it.

Change A Section Everywhere

Edit its file in src/content/sections/english/ and the file with the same name in french/. The comments in each file list its options and the allowed values.

Section files have no schema, so npm run astro-check doesn’t catch a wrong value in them, such as a misspelled layout. Copy values from the comments, then check the page in the browser.

Hide A Section

• Everywhere: set enable: false at the top of its section file.

• On one page: add its block to that page’s content file with enable: false:

  questionsSection:
    enable: false

Change A Section On One Page

Add a named block to the page’s content file with only the keys you want to change. Homio merges the block over the section file:

• Objects merge key by key. A block only needs the fields it changes.
• Lists replace the whole list. Repeat every item you want to keep.
• An empty string ("") clears a value, for example image: "" hides a photo.

questionsSection:
  title: "Questions about prices" # replaces the title only
  options:
    layout: "grid" # the other options keep their section defaults

Copy block names exactly from the catalog below (they are the keys of sectionsSchema in src/sections.schema.ts). A block with a wrong name, for example faqSection: instead of questionsSection:, is ignored without an error.

In collections with a schema, npm run astro-check checks the values inside each block before the merge. Most fields are optional there, with these exceptions:

• contactSection needs title, description, imagePosition, and form. Copy them from src/content/sections/english/contact-section.md.
• A nested object keeps its own required fields: a button needs a label.
• ctaSection, contactSection, and clientsSection are off unless the block says enable: true. A ctaSection: block that changes only the title hides the call to action band on that page. Start these blocks with enable: true.

The contact collection (src/content/contact/) has no schema, so blocks in the contact page file are not checked. Open /contact/ after each change.

Blocks Each Page Reads

Every page also reads ctaSection (the call to action band above the footer) and, for inner pages, pageHeader. Paths are for English; French uses the same file names in french/.

The section order on each page is set in its route file in src/pages/[...lang]/. The demo homepages list their sections in order near the top of the route, for example in src/pages/[...lang]/home-cleaning.astro. See Homepages.

Section Catalog

Every section, its content file in src/content/sections/<language>/, and the block name a page uses to override it. Layout values are in Section Layouts.

Homepage And Marketing

Prices, Booking, And Services

The estimator, plans, add-ons, and included lists read their prices and tasks from src/content/pricing/ and src/content/services/, never from the section file. See Pricing & Estimator, Booking Request, Services & What’s Included, and Service Areas.

Company, Contact, And Blog

Two names don’t follow the pattern: the call to action is CallToAction / call-to-action.md / ctaSection, and the FAQ is QuestionsSection / questions-section.md / questionsSection. The trust strip’s block is trustStrip (no Section).

Two more files in src/content/sections/ belong to site-wide widgets: announcement-bar.md, the optional strip above the header (Header), and cookie-consent.md, the cookie banner (Cookies & Analytics).

Page-Only Blocks

These blocks have no section file. They exist only in page frontmatter:

Add A Section To A Page

This is a small code edit in the page’s route file in src/pages/[...lang]/.

On a demo homepage (home-cleaning.astro, home-commercial.astro, home-handyman.astro), add one line to the sections list. The order of the list is the order on the page, and tone gives the section a tinted panel (mint, sage, sand, and others listed in src/layouts/components/HomePage.astro):

const sections: HomeSection[] = [
  { block: "heroSection" },
  { block: "trustStrip", tone: "mint", flush: true },
  { block: "estimateSection" },
  // ...
];

Then add the block (for example estimateSection: with enable: true) to the homepage’s content file.

On any other page, import the component and place it inside <Base>:

---
import IncludedSection from "@/components/sections/IncludedSection.astro";
---
<IncludedSection content={page?.data.includedSection} />

The hero, services, steps, plans, reviews, and FAQ are written as <LayoutVariants section="faq" content={questionsSection} /> in the routes. Keep that wrapper when you move them: it renders the section exactly like a direct import, and lets the demo layout switcher preview it.

Building a brand-new section is a developer task. AGENTS.md and the “Add a new section” recipe in SKILLS.md explain the rules (one .astro component, one content file in each language, and a schema in src/sections.schema.ts), so an AI assistant can do it for you.

Do It With AI

On the page [URL], change the [SECTION] section only for that page: [CHANGES]. Find the page's
content file and the block name in docs or in sectionsSchema of src/sections.schema.ts, add a named
block with only the keys that change (lists must repeat every item I keep), and do the same in the
french/ file. Don't edit src/content/sections/. Then run npm run astro-check.

Add the [SECTION, e.g. estimate] section to [PAGE, e.g. /home-handyman/] after the [OTHER] section.
Follow SKILLS.md: for a demo homepage add it to the sections list in its route file, then add the
block with enable: true to the homepage content file in english/ and french/.