Blog
Renders a list of blog posts from a specified content folder. Posts are automatically sorted by date and can be filtered, limited, and displayed in different layouts.
Basic usage
Point the folder attribute at a content directory containing your blog posts.
{% blog folder="/blog" %}
{% /blog %}<section data-field="content-section" data-rune="blog" typeof="Blog" data-rune-fields="{"folder":"/blog","sort":"date-desc","filter":"","limit":"","layout":"list"}">
<div data-name="posts"></div>
</section>What's New in 0.9.0
Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.
What's New in 0.8.0
Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.
What's New in 0.7.0
Eight official rune packages and new tooling for package authors.
What's New in 0.6.0
A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.
What's New in 0.5.0
Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.
What's New in 0.4.0
New packages, seven new runes, theme restructuring, syntax highlighting, and more.
<section data-field="content-section" typeof="Blog" class="rf-blog rf-blog--list" data-layout="list" data-sort="date-desc" data-filter="" data-limit="" data-folder="/blog" data-rune="blog" data-density="full">
<div data-name="content" class="rf-blog__content" data-section="body">
<div data-name="posts" class="rf-blog__posts">
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-9">What's New in 0.9.0</a>
</h3>
<time datetime="2026-03-30">2026-03-30</time>
<p>Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-8">What's New in 0.8.0</a>
</h3>
<time datetime="2026-03-10">2026-03-10</time>
<p>Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-7">What's New in 0.7.0</a>
</h3>
<time datetime="2026-03-03">2026-03-03</time>
<p>Eight official rune packages and new tooling for package authors.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-6">What's New in 0.6.0</a>
</h3>
<time datetime="2026-03-02">2026-03-02</time>
<p>A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-5">What's New in 0.5.0</a>
</h3>
<time datetime="2026-02-23">2026-02-23</time>
<p>Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-4">What's New in 0.4.0</a>
</h3>
<time datetime="2026-02-16">2026-02-16</time>
<p>New packages, seven new runes, theme restructuring, syntax highlighting, and more.</p>
</article>
</div>
</div>
</section>Grid layout
Use the layout attribute to switch between list, grid, and compact display modes.
{% blog folder="/blog" layout="grid" %}
{% /blog %}<section data-field="content-section" data-rune="blog" typeof="Blog" data-rune-fields="{"folder":"/blog","sort":"date-desc","filter":"","limit":"","layout":"grid"}">
<div data-name="posts"></div>
</section>What's New in 0.9.0
Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.
What's New in 0.8.0
Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.
What's New in 0.7.0
Eight official rune packages and new tooling for package authors.
What's New in 0.6.0
A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.
What's New in 0.5.0
Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.
What's New in 0.4.0
New packages, seven new runes, theme restructuring, syntax highlighting, and more.
<section data-field="content-section" typeof="Blog" class="rf-blog rf-blog--grid" data-layout="grid" data-sort="date-desc" data-filter="" data-limit="" data-folder="/blog" data-rune="blog" data-density="full">
<div data-name="content" class="rf-blog__content" data-section="body">
<div data-name="posts" class="rf-blog__posts">
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-9">What's New in 0.9.0</a>
</h3>
<time datetime="2026-03-30">2026-03-30</time>
<p>Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-8">What's New in 0.8.0</a>
</h3>
<time datetime="2026-03-10">2026-03-10</time>
<p>Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-7">What's New in 0.7.0</a>
</h3>
<time datetime="2026-03-03">2026-03-03</time>
<p>Eight official rune packages and new tooling for package authors.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-6">What's New in 0.6.0</a>
</h3>
<time datetime="2026-03-02">2026-03-02</time>
<p>A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-5">What's New in 0.5.0</a>
</h3>
<time datetime="2026-02-23">2026-02-23</time>
<p>Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-4">What's New in 0.4.0</a>
</h3>
<time datetime="2026-02-16">2026-02-16</time>
<p>New packages, seven new runes, theme restructuring, syntax highlighting, and more.</p>
</article>
</div>
</div>
</section>Section header
Blog supports an optional headline and blurb above the post list. See Page sections for the full syntax.
{% blog folder="/blog" layout="grid" %}
# Latest Posts
Stay up to date with the newest updates and tutorials.
{% /blog %}<section data-field="content-section" data-rune="blog" typeof="Blog" data-rune-fields="{"folder":"/blog","sort":"date-desc","filter":"","limit":"","layout":"grid"}">
<header>
<h1 id="latest-posts" data-name="headline">Latest Posts</h1>
<p data-name="blurb">Stay up to date with the newest updates and tutorials.</p>
</header>
<div data-name="posts"></div>
</section>Latest Posts
Stay up to date with the newest updates and tutorials.
What's New in 0.9.0
Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.
What's New in 0.8.0
Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.
What's New in 0.7.0
Eight official rune packages and new tooling for package authors.
What's New in 0.6.0
A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.
What's New in 0.5.0
Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.
What's New in 0.4.0
New packages, seven new runes, theme restructuring, syntax highlighting, and more.
<section data-field="content-section" typeof="Blog" class="rf-blog rf-blog--grid" data-layout="grid" data-sort="date-desc" data-filter="" data-limit="" data-folder="/blog" data-rune="blog" data-density="full">
<div data-name="content" class="rf-blog__content" data-section="body">
<header data-name="preamble" class="rf-blog__preamble" data-section="preamble">
<h1 id="latest-posts" data-name="headline" class="rf-blog__headline" data-section="title">Latest Posts</h1>
<p data-name="blurb" class="rf-blog__blurb" data-section="description">Stay up to date with the newest updates and tutorials.</p>
</header>
<div data-name="posts" class="rf-blog__posts">
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-9">What's New in 0.9.0</a>
</h3>
<time datetime="2026-03-30">2026-03-30</time>
<p>Metadata dimensions, universal theming, rune output standards, the plan package, Markdoc partials, and a Lumina design refresh.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-8">What's New in 0.8.0</a>
</h3>
<time datetime="2026-03-10">2026-03-10</time>
<p>Declarative content models, a cross-page pipeline, media runes with streaming, and identity transform improvements.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-7">What's New in 0.7.0</a>
</h3>
<time datetime="2026-03-03">2026-03-03</time>
<p>Eight official rune packages and new tooling for package authors.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-6">What's New in 0.6.0</a>
</h3>
<time datetime="2026-03-02">2026-03-02</time>
<p>A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-5">What's New in 0.5.0</a>
</h3>
<time datetime="2026-02-23">2026-02-23</time>
<p>Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-4">What's New in 0.4.0</a>
</h3>
<time datetime="2026-02-16">2026-02-16</time>
<p>New packages, seven new runes, theme restructuring, syntax highlighting, and more.</p>
</article>
</div>
</div>
</section>Filtering and sorting
Use filter to match against frontmatter fields and sort to control ordering. Limit the number of displayed posts with limit.
{% blog folder="/blog" sort="title-asc" limit=3 %}
{% /blog %}<section data-field="content-section" data-rune="blog" typeof="Blog" data-rune-fields="{"folder":"/blog","sort":"title-asc","filter":"","limit":"3","layout":"list"}">
<div data-name="posts"></div>
</section>What's New in 0.4.0
New packages, seven new runes, theme restructuring, syntax highlighting, and more.
What's New in 0.5.0
Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.
What's New in 0.6.0
A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.
<section data-field="content-section" typeof="Blog" class="rf-blog rf-blog--list" data-layout="list" data-sort="title-asc" data-filter="" data-limit="3" data-folder="/blog" data-rune="blog" data-density="full">
<div data-name="content" class="rf-blog__content" data-section="body">
<div data-name="posts" class="rf-blog__posts">
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-4">What's New in 0.4.0</a>
</h3>
<time datetime="2026-02-16">2026-02-16</time>
<p>New packages, seven new runes, theme restructuring, syntax highlighting, and more.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-5">What's New in 0.5.0</a>
</h3>
<time datetime="2026-02-23">2026-02-23</time>
<p>Theme development toolkit, behaviors library, six new runes, VS Code language server, and a major architecture shift toward framework-agnostic rendering.</p>
</article>
<article data-name="post" class="rf-blog__post">
<h3>
<a href="/blog/whats-new-in-0-6">What's New in 0.6.0</a>
</h3>
<time datetime="2026-03-02">2026-03-02</time>
<p>A full WYSIWYG editor, framework-neutral web components, layout transform engine, AI-powered theme designer, and a Python extraction pipeline.</p>
</article>
</div>
</div>
</section>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
folder | string | ✓ | Content folder path to list blog posts from (e.g. "/blog") |
sort | "date-desc" | "date-asc" | "title-asc" | "title-desc" | — | Sort order: date-desc, date-asc, title-asc, title-desc |
filter | string | — | Filter expression to match against frontmatter fields (e.g. "tag:javascript" or "draft:false") |
limit | number | — | Maximum number of posts to display |
layout | "list" | "grid" | "compact" | — | Display layout: list, grid, or compact |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
dropcap
Per-instance drop-cap opt-in (SPEC-108).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise. |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
prominence
Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
prominence | "quiet" | "normal" | "prominent" | "display" | — | Section-header emphasis (only on page-section-header family runes) |
reading
Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.
| Attribute | Type | Required | Description |
|---|---|---|---|
reading | "fine" | "ui" | "prose" | — | Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment. |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |