Blocks are reusable HTML/Mustache templates stored in the CMS. They can be embedded in any Markdown page using the [block slug="name"] shortcode. Use blocks to create consistent UI patterns — cards, callouts, feature grids, CTAs — without repeating HTML across pages.

1. Navigate to Admin → Blocks → New Block
2. Set a block name and slug
3. Write the HTML template — Mustache syntax is fully supported
4. Templates have access to: site config variables and any collection entries
5. Save — the block is immediately available in all pages via shortcode

Blocks use Mustache ({{}}) for interpolation:

<div class="callout callout-{{type}}">
    <h3>{{title}}</h3>
    <p>{{body}}</p>
</div>

Available variables:

• {{site.title}} — Site title from config
• {{site.tagline}} — Site tagline
• {{page.title}} — Current page title (if in page context)
• {{year}} — Current year

Conditional sections:

{{#showCta}}<a href="{{ctaUrl}}">{{ctaText}}</a>{{/showCta}}

Loops:

{{#items}}<li>{{name}}</li>{{/items}}

Inverted sections (falsy / empty):

{{^items}}<p>No items found.</p>{{/items}}

Embed a block in any Markdown page using the [block] shortcode:

[block slug="callout"]
[block slug="cta-banner" title="Get Started" ctaUrl="/getting-started" ctaText="Start Now"]
[block slug="feature-grid"]

• Parameters after slug= are passed as Mustache variables to the template
• Blocks are rendered server-side before the page is served
• Block changes propagate to all pages on the next request

Running npm run seed installs these 5 starter blocks:

• callout — Info/warning/success/danger callout box with icon and message
• cta-banner — Full-width call-to-action banner with heading, subtext, and button
• feature-grid — 3-column feature showcase with icons, titles, and descriptions
• social-links — Social media icon link row (Twitter/X, GitHub, LinkedIn, YouTube)
• newsletter-signup — Email signup widget with input and submit button

Example 1 — Alert Block

<!-- slug: alert -->
<div class="alert alert-{{type|default:info}}">
    <span data-icon="{{icon|default:info-circle}}"></span>
    <strong>{{title}}</strong>
    {{#message}}<p>{{message}}</p>{{/message}}
</div>

Used as: [block slug="alert" type="warning" title="Note" message="This feature requires Pro mode."]

Example 2 — Stats Block

<!-- slug: stats -->
<div class="grid grid-cols-3 gap-4 text-center">
    {{#stats}}
    <div>
        <div class="text-3xl font-bold text-primary">{{value}}</div>
        <div class="text-sm text-muted">{{label}}</div>
    </div>
    {{/stats}}
</div>

Example 3 — Profile Card Block

<!-- slug: profile-card -->
<div class="card text-center p-4">
    <img src="{{avatar}}" alt="{{name}}" class="rounded-full w-20 h-20 mx-auto mb-3">
    <h3 class="font-semibold">{{name}}</h3>
    <p class="text-muted text-sm">{{role}}</p>
    {{#bio}}<p class="mt-2">{{bio}}</p>{{/bio}}
</div>