Content authoring
Pages, news, guides, snippets, and media
Read this reference before creating, migrating, or substantially restructuring Chobble Template content.
Use The Live Schema
The block reference is generated from full schemas and canonical
examples; /blocks/ is the live gallery. The schema modules under
src/_lib/utils/block-schema/ define accepted
fields. The template path recorded in the reference, usually under
src/_includes/design-system/, defines rendering. Before using a block:
- find its entry and canonical YAML example in the block reference
- confirm consequential fields in its schema and template
- include every required field
- build immediately after introducing a new block pattern
Unknown block types, unknown top-level block keys, malformed object-list entries, and missing required values fail the build. Nested object validation does not reject every unknown or mistyped child field, so compare nested entries with the schema and inspect rendered output. Treat validation errors as content corrections; do not weaken validation to accommodate invalid frontmatter.
Choose Blocks By Content Purpose
Prefer the smallest coherent set:
| Need | Default block |
|---|---|
| Page lead with one H1 and actions | hero |
| Section introduction | section-header |
| Long-form prose | markdown |
| Features or benefits | features |
| Image-led cards | image-cards |
| Key figures | stats |
| Advisory, note, or warning | callout |
| Strong closing action | cta or link-button |
| Text beside an image | split-image |
| In-page navigation for long content | table-of-contents |
| Image collection | gallery |
| Download list with file metadata | downloads |
| Reusable block composition | snippet |
| Collection listing | items, items-text-list, or link-columns |
Use full-bleed image, marquee, iframe, raw HTML, and include blocks only when the brief actually requires them. Do not use block variety as a substitute for information hierarchy.
Standard Page
Pages live in src/pages/ and contain all publishable content in frontmatter
blocks:
---
name: About
meta_title: About the organization
meta_description: A factual summary for search and social previews.
permalink: /about/
eleventyNavigation:
key: About
order: 2
blocks:
- type: hero
content: |
# About us
A concise, factual introduction.
- type: markdown
content: |
## What we do
Approved body copy goes here.
---
Do not add Markdown after the closing frontmatter delimiter. Use one clear H1, then a logical heading sequence. Write descriptive link labels rather than "click here".
News
News posts live in src/news/. Use a dated filename so the collection, feed,
and metadata share one date:
src/news/2026-08-28-service-update.md
---
name: Service update
subtitle: Optional short summary
author: Optional real author name
blocks:
- type: hero
content: |
# Service update
- type: news-meta
- type: markdown
content: |
## What changed
Approved update copy.
---
Do not fabricate authors or publish empty demo posts. Confirm whether a dated item is truly news rather than a permanent page.
Guides
A guide category lives in src/guide-categories/:
---
name: Getting Started
subtitle: Short category summary
icon: "hugeicons:book-02"
blocks:
- type: guide-header
- type: markdown
content: |
Category introduction.
- type: guide-pages-list
---
A guide page lives in src/guide-pages/ and links to the category slug:
---
name: First Steps
subtitle: Optional page summary
guide-category: getting-started
blocks:
- type: guide-header
- type: guide-navigation
- type: markdown
content: |
## First task
Guide content.
---
Keep procedural guides task-oriented. Use code-block, downloads, callouts,
and a table of contents only when they improve the instructions. Current guide
lists use Eleventy collection order and do not sort by a frontmatter order
field. If editorial ordering is required, implement and test an explicit
collection sort rather than assuming the CMS field controls display order.
FAQs
For CMS-managed page-level FAQs, declare faqs in frontmatter and render one
faqs block without items:
faqs:
- question: What does this service cost?
answer: The approved answer, with Markdown if needed.
blocks:
- type: faqs
Alternatively, put items directly on the block. Do not define both sources
unless there is a clear reason.
Snippets And Shared Regions
Snippet files live in src/snippets/ and may use either Markdown body content
or a blocks array. footer-content.md and right-content.md are named global
regions. Read src/snippets/README.md and layouts before changing
them; the generated compatibility table
lists column-safe block types for sidebars.
The snippet block references a reusable block composition by filename without
the .md extension:
blocks:
- type: snippet
reference: shared-contact-prompt
Create src/snippets/shared-contact-prompt.md before using that reference. A
missing snippet fails the build, and snippet blocks are validated like page
blocks. The generated PagesCMS snippet
form edits name and Markdown body; block-based snippet frontmatter currently
requires direct source editing.
Do not use snippets to hide one-off content or create indirection without reuse.
Images, Files, And Embeds
- Put source images in
src/images/and reference them with site-relative paths such as/images/team.jpg. - Write alt text for the image's purpose in context. Use empty alt text only for genuinely decorative images when the block supports it.
- Use
downloadsonly for files that exist undersrc/and are configured for passthrough copying. - Give every
iframe-embeda meaningfulname, plus either a height or aspect ratio. Confirm the third party and privacy implications with the user. - Never hotlink an image or embed user-tracking content without approval.
Content And Design Quality
- Use the organization's language, not generic marketing filler.
- Keep claims concrete and verifiable; preserve supplied wording where legal or policy meaning matters.
- Design around the content hierarchy. Avoid repetitive card grids, excessive gradients, unnecessary animation, and decorative icons on every heading.
- Check long names, narrow screens, empty collections, and pages with little content.
- Preserve existing redirects when moving routes. Add
redirect_fromwhenever a public URL changes; enable the CMS redirects feature as well when editors need to maintain those values through PagesCMS.