refrakt.md

Docs Runes Plan Blog Changelog

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">
  <meta content="/blog" data-field="folder">
  <meta content="date-desc" data-field="sort">
  <meta content="" data-field="filter">
  <meta content="" data-field="limit">
  <meta content="list" data-field="layout">
  <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.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-folder="/blog" data-rune="blog" data-density="full">
  <div data-name="content" class="rf-blog__content" data-section="body">
    <meta content="/blog" data-field="folder" />
    <meta content="date-desc" data-field="sort" />
    <meta content="" data-field="filter" />
    <meta content="" data-field="limit" />
    <meta content="list" data-field="layout" />
    <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">
  <meta content="/blog" data-field="folder">
  <meta content="date-desc" data-field="sort">
  <meta content="" data-field="filter">
  <meta content="" data-field="limit">
  <meta content="grid" data-field="layout">
  <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.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-folder="/blog" data-rune="blog" data-density="full">
  <div data-name="content" class="rf-blog__content" data-section="body">
    <meta content="/blog" data-field="folder" />
    <meta content="date-desc" data-field="sort" />
    <meta content="" data-field="filter" />
    <meta content="" data-field="limit" />
    <meta content="grid" data-field="layout" />
    <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">
  <meta content="/blog" data-field="folder">
  <meta content="date-desc" data-field="sort">
  <meta content="" data-field="filter">
  <meta content="" data-field="limit">
  <meta content="grid" data-field="layout">
  <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.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-folder="/blog" data-rune="blog" data-density="full">
  <div data-name="content" class="rf-blog__content" data-section="body">
    <meta content="/blog" data-field="folder" />
    <meta content="date-desc" data-field="sort" />
    <meta content="" data-field="filter" />
    <meta content="" data-field="limit" />
    <meta content="grid" data-field="layout" />
    <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">
  <meta content="/blog" data-field="folder">
  <meta content="title-asc" data-field="sort">
  <meta content="" data-field="filter">
  <meta content="3" data-field="limit">
  <meta content="list" data-field="layout">
  <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-limit="3" data-folder="/blog" data-rune="blog" data-density="full">
  <div data-name="content" class="rf-blog__content" data-section="body">
    <meta content="/blog" data-field="folder" />
    <meta content="title-asc" data-field="sort" />
    <meta content="" data-field="filter" />
    <meta content="3" data-field="limit" />
    <meta content="list" data-field="layout" />
    <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

AttributeTypeDefaultDescription
folderstring—Content folder path to list blog posts from (required)
sortstringdate-descSort order: date-desc, date-asc, title-asc, title-desc
filterstring—Filter expression to match against frontmatter fields (e.g. tag:javascript)
limitnumber—Maximum number of posts to display
layoutstringlistDisplay layout: list, grid, or compact

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration