refrakt.md

Docs Runes Plan Blog Changelog

Compare

Side-by-side code comparison. Each fenced code block becomes a labeled panel. Labels default to the code block's language.

Basic usage

Panels are automatically labeled by their code block language.

{% compare %}
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```
{% /compare %}
<div data-rune="compare">
  <meta content="side-by-side" data-field="layout">
  <div data-panels data-name="panels">
    <div data-panel>
      <span data-label>javascript</span>
      <div class="rf-codeblock">
        <pre data-language="javascript">
          <code data-language="javascript">function greet(name) {
  return `Hello, ${name}!`;
}
</code>
        </pre>
      </div>
    </div>
    <div data-panel>
      <span data-label>typescript</span>
      <div class="rf-codeblock">
        <pre data-language="typescript">
          <code data-language="typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}
</code>
        </pre>
      </div>
    </div>
  </div>
</div>
javascript
function greet(name) {
  return `Hello, ${name}!`;
}
typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}

<div class="rf-compare rf-compare--side-by-side" data-layout="side-by-side" data-rune="compare" data-density="full">
  <div data-panels data-name="panels" class="rf-compare__panels">
    <div data-panel>
      <span data-label>javascript</span>
      <div class="rf-codeblock">
        <pre data-language="javascript"><code data-language="javascript">function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>
      </div>
    </div>
    <div data-panel>
      <span data-label>typescript</span>
      <div class="rf-codeblock">
        <pre data-language="typescript"><code data-language="typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}
</code></pre>
      </div>
    </div>
  </div>
</div>

Custom labels

Use the labels attribute to override the default language-based labels.

{% compare labels="Before, After" %}
```javascript
const data = fetch('/api').then(r => r.json());
```

```javascript
const data = await fetch('/api').then(r => r.json());
```
{% /compare %}
<div data-rune="compare">
  <meta content="side-by-side" data-field="layout">
  <div data-panels data-name="panels">
    <div data-panel>
      <span data-label>Before</span>
      <div class="rf-codeblock">
        <pre data-language="javascript">
          <code data-language="javascript">const data = fetch('/api').then(r =&gt; r.json());
</code>
        </pre>
      </div>
    </div>
    <div data-panel>
      <span data-label>After</span>
      <div class="rf-codeblock">
        <pre data-language="javascript">
          <code data-language="javascript">const data = await fetch('/api').then(r =&gt; r.json());
</code>
        </pre>
      </div>
    </div>
  </div>
</div>
Before
const data = fetch('/api').then(r => r.json());
After
const data = await fetch('/api').then(r => r.json());

<div class="rf-compare rf-compare--side-by-side" data-layout="side-by-side" data-rune="compare" data-density="full">
  <div data-panels data-name="panels" class="rf-compare__panels">
    <div data-panel>
      <span data-label>Before</span>
      <div class="rf-codeblock">
        <pre data-language="javascript"><code data-language="javascript">const data = fetch('/api').then(r =&gt; r.json());
</code></pre>
      </div>
    </div>
    <div data-panel>
      <span data-label>After</span>
      <div class="rf-codeblock">
        <pre data-language="javascript"><code data-language="javascript">const data = await fetch('/api').then(r =&gt; r.json());
</code></pre>
      </div>
    </div>
  </div>
</div>

Attributes

AttributeTypeDefaultDescription
layoutstringside-by-sideDisplay layout: side-by-side or stacked
labelsstring—Comma-separated custom labels for each panel

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