Sections

Sections

Files: src/content/sections/english/ (and each other language folder), page content files, src/sections.schema.ts · Skill level: Beginner to edit, light code to add or move

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

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

How Margo 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/ and arabic/. 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:

  faqSection:
    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. Margo 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 description: "" removes the short line under a heading.

faqSection:
  title: "Questions about *prices*" # replaces the title only
  options:
    layout: "single" # 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 teamSection: instead of teamGridSection:, 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, 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.

The contact, faq, and pricing collections have no schema, so blocks in src/content/contact/, src/content/faq/, and src/content/pricing/ are not checked. Open the page after each change.

Blocks Each Page Reads

Every page also reads ctaSection (the call to action above the footer, where the page shows it), and inner pages read pageHeader. Paths are for English. The other languages use the same file names in french/ and arabic/.

Service pages are built from the fields of each service file (its process, related projects, and questions), not from section blocks. See Collections. Project pages are covered in Projects.

The section order on each page is set in its route file in src/pages/[...lang]/. See Homepages and Pages.

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.

Work And Story

Services And Prices

Proof

Contact, Journal, And Other Pages

Two names don’t follow the pattern: the call to action is CallToAction / call-to-action.md / ctaSection, and the team is TeamGridSection / team-grid-section.md / teamGridSection.

The experience and tools sections appear inside other sections, so edit their section files. Their blocks (experienceSection, toolsSection) work only on a page that shows the section on its own, which no page does as shipped.

Two more files in src/content/sections/ belong to site-wide parts: footer.md, the copy of every footer layout (Footer), and cookie-consent.md, the cookie banner (Cookies & Analytics).

Page-Only Blocks

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

A page’s frontmatter can also set headerLayout, footerLayout, and contactDock for that page only. See Header and Footer.

Add A Section To A Page

This is a small code edit in the page’s route file in src/pages/[...lang]/. On a homepage, add a <LayoutVariants section="..." content={...} /> line where you want the section: Homepages shows how. On any other page, import the component and place it inside <Base>:

---
import StatsSection from "@/components/sections/StatsSection.astro";
const { statsSection } = entry?.data ?? {};
---
<StatsSection content={statsSection} />

Then add the block (for example statsSection:) to the page’s content file in every language folder, or leave it out to use the section file as it is.

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 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 and arabic folders. Don't edit src/content/sections/. Then run npm run astro-check.

Add the [SECTION, e.g. quote] section to [PAGE, e.g. the main homepage] after the [OTHER]
section. Follow SKILLS.md: on a homepage, add a LayoutVariants line to the route file and take
the block from the content file; then add the block to the page's content file in every
language folder if it needs its own text.