refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/docs. Install with npm install @refrakt-md/docs and add "@refrakt-md/docs" to the packages array in your refrakt.config.json.

Changelog

Version history and release notes. Headings with a v1.0.0 - date pattern are automatically converted into release entries.

Heading-based changelog

Headings are parsed into version and date parts, with list items below becoming the release notes.

{% changelog %}
## v1.2.0 - January 2025

- Added timeline and changelog runes
- Added breadcrumb navigation rune
- Fixed grid column spanning on mobile

## v1.1.0 - December 2024

- Added testimonial and compare runes
- Improved pricing tier card styling
- Fixed tab panel content not rendering
{% /changelog %}
<section data-field="content-section" data-rune="changelog">
  <meta content="" data-field="project">
  <div data-name="releases">
    <section data-field="release" data-rune="changelog-release">
      <h3 data-name="version">1.2.0</h3>
      <time data-field="date">January 2025</time>
      <div data-name="body">
        <ul>
          <li>Added timeline and changelog runes</li>
          <li>Added breadcrumb navigation rune</li>
          <li>Fixed grid column spanning on mobile</li>
        </ul>
      </div>
    </section>
    <section data-field="release" data-rune="changelog-release">
      <h3 data-name="version">1.1.0</h3>
      <time data-field="date">December 2024</time>
      <div data-name="body">
        <ul>
          <li>Added testimonial and compare runes</li>
          <li>Improved pricing tier card styling</li>
          <li>Fixed tab panel content not rendering</li>
        </ul>
      </div>
    </section>
  </div>
</section>

1.2.0

  • Added timeline and changelog runes
  • Added breadcrumb navigation rune
  • Fixed grid column spanning on mobile

1.1.0

  • Added testimonial and compare runes
  • Improved pricing tier card styling
  • Fixed tab panel content not rendering
<section data-field="content-section" class="rf-changelog" data-rune="changelog" data-density="full">
  <meta content="" data-field="project" />
  <div data-name="releases" class="rf-changelog__releases">
    <section data-field="release" class="rf-changelog-release" data-rune="changelog-release" data-density="full">
      <h3 data-name="version" class="rf-changelog-release__version">1.2.0</h3>
      <time data-field="date">January 2025</time>
      <div data-name="body" class="rf-changelog-release__body">
        <ul>
          <li>Added timeline and changelog runes</li>
          <li>Added breadcrumb navigation rune</li>
          <li>Fixed grid column spanning on mobile</li>
        </ul>
      </div>
    </section>
    <section data-field="release" class="rf-changelog-release" data-rune="changelog-release" data-density="full">
      <h3 data-name="version" class="rf-changelog-release__version">1.1.0</h3>
      <time data-field="date">December 2024</time>
      <div data-name="body" class="rf-changelog-release__body">
        <ul>
          <li>Added testimonial and compare runes</li>
          <li>Improved pricing tier card styling</li>
          <li>Fixed tab panel content not rendering</li>
        </ul>
      </div>
    </section>
  </div>
</section>

Explicit releases

Use {% changelog-release %} tags for more control over version and date values.

{% changelog %}
{% changelog-release version="2.0.0" date="March 2025" %}
- Complete rewrite of the rendering engine
- New plugin API for custom runes
{% /changelog-release %}

{% changelog-release version="1.0.0" date="January 2025" %}
- Initial stable release
{% /changelog-release %}
{% /changelog %}
<section data-field="content-section" data-rune="changelog">
  <meta content="" data-field="project">
  <div data-name="releases">
    <section data-field="release" data-rune="changelog-release">
      <h3 data-name="version">2.0.0</h3>
      <time data-field="date">March 2025</time>
      <div data-name="body">
        <ul>
          <li>Complete rewrite of the rendering engine</li>
          <li>New plugin API for custom runes</li>
        </ul>
      </div>
    </section>
    <section data-field="release" data-rune="changelog-release">
      <h3 data-name="version">1.0.0</h3>
      <time data-field="date">January 2025</time>
      <div data-name="body">
        <ul>
          <li>Initial stable release</li>
        </ul>
      </div>
    </section>
  </div>
</section>

2.0.0

  • Complete rewrite of the rendering engine
  • New plugin API for custom runes

1.0.0

  • Initial stable release
<section data-field="content-section" class="rf-changelog" data-rune="changelog" data-density="full">
  <meta content="" data-field="project" />
  <div data-name="releases" class="rf-changelog__releases">
    <section data-field="release" class="rf-changelog-release" data-rune="changelog-release" data-density="full">
      <h3 data-name="version" class="rf-changelog-release__version">2.0.0</h3>
      <time data-field="date">March 2025</time>
      <div data-name="body" class="rf-changelog-release__body">
        <ul>
          <li>Complete rewrite of the rendering engine</li>
          <li>New plugin API for custom runes</li>
        </ul>
      </div>
    </section>
    <section data-field="release" class="rf-changelog-release" data-rune="changelog-release" data-density="full">
      <h3 data-name="version" class="rf-changelog-release__version">1.0.0</h3>
      <time data-field="date">January 2025</time>
      <div data-name="body" class="rf-changelog-release__body">
        <ul>
          <li>Initial stable release</li>
        </ul>
      </div>
    </section>
  </div>
</section>

Attributes

AttributeTypeDefaultDescription
projectstring—Project name

Release attributes

AttributeTypeDefaultDescription
versionstring—Version number
datestring—Release date

Section header

Changelog supports an optional eyebrow, headline, and blurb above the section above entries. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.

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