Widget Test Fixture

This document exercises every directive, control kind, and code-fence annotation documented in docs/blog/toolkit.md and docs/blog/cheatsheet.md. Each ## section exhibits one category so a failing widget is easy to locate visually. Prose is deliberate filler — lorem ipsum between examples — so pagination and typography render against realistic-looking content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Standard Markdown

Paragraphs, lists, tables, blockquotes, and other GFM features must render with @tailwindcss/typography polish. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Headings h3

Headings h4

Headings h5

Headings h6

Unordered list:

• Alpha
• Beta
• Gamma

Ordered list:

1. First
2. Second
3. Third

Task list:

• Done item
• Pending item

Inline emphasis: italic, bold, strikethrough, inline code, a link, and an image:

Blockquote:

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table:

Horizontal rule follows:

Footnotes (GFM). The first paragraph below references two¹. The second paragraph re-uses the same identifier¹, which remark-gfm collapses into one footnote body with multiple back-arrows.

A long tangent² can live below the article flow without interrupting the sentence. Numeric IDs work too³ — they behave the same as named ones; the rendered superscript is always 1, 2, 3 in document order regardless of how authors label them.

Escape sequences. A backslash before a markdown-active character tells the parser "this is a literal glyph, not syntax". Useful when prose needs to discuss markdown itself or contains characters that would otherwise be interpreted (e.g. leading # in a value, underscores in identifiers like snake_case_name, or asterisks in notation).

• Asterisks without italic: *literal asterisks*
• Underscores without emphasis: _not italic_
• Brackets without a link: [not a link](no url)
• Tildes without strikethrough: ~~not struck through~~
• Leading hash without a heading: # not an h1
• Literal backtick: ` followed by not-inline-code
• Literal backslash: \ (one slash emitted)

Without the backslash, italic / italic / link / strike / # heading would trigger their normal parsing — so escape is the explicit opt-out.

Text directives (inline)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

This paragraph opens with a dropcap directive. Dropcaps elevate the first letter of the enclosing paragraph with a prominent typographic treatment. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

Press Ctrl+K to open the command palette, or Shift+? for the keyboard-shortcuts overlay. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.

The DOM is a tree-shaped in-memory representation of the page, and SVG is rendered inline as part of that same tree. Ut enim ad minima veniam.

This sentence contains highlighted text in the middle, because the :mark directive exists for exactly that purpose. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.

Block typography

Pullquote

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.

Glossary

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet.

viewBox

The internal coordinate system of an SVG, independent of the rendered pixel size.

Bezier curve

A smooth path defined by control points; the mathematical basis for SVG <path> curves.

Stroke-dasharray

A CSS property describing the alternating dash-and-gap pattern along an outline.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.

Block callouts — one per tone

The toolkit defines six callout directives by name (per toolkit.md §3.1), not one :::callout directive with a type= attribute. Each tone has its own directive.

Omnis dolor repellendus autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.

:::note — neutral blue

:::note with title

:::tip — actionable green

:::warning — amber caution

:::danger — red critical

:::caveat — purple exception

:::aside — muted tangent

Callout with icon override

Compact callout

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Results and outcomes

Outcomes, summaries, and try-it blocks delimit the reader's path through an article. They are semantically distinct from callouts.

Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.

Layout directives — tabs

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

npm install @oboxsystems/blog-toolkit

Layout directives — grid (columns)

Spec does not define a :::columns directive; the equivalent is :::grid{cols=N gap="..."} per toolkit.md §3.2.

Layout directives — other

1. Install

   npm install the package.

2. Configure

   Edit the config file.

3. Ship

   Run npm run build.

Media directives

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Local video (defaults — no autoplay, no loop, audible)

Local video — explicit looping-illustration opt-in

Local video — simple mode

YouTube (lite-embed)

Figure

SVG embed

Compare slider

External embed

Code fences — metadata variants

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.

Language variants — plain

<!doctype html>
<html>
  <body>Hello</body>
</html>

.box { background: tomato; }

<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" /></svg>

export const Box = () => <div className="box">Hi</div>;

Title annotation

export function example() {
  return "hello";
}

Line highlight — range

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

showLineNumbers + inline-pattern highlight

import { useState } from "react";

export default function App() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Diff fence

  const greet = (name) => `Hello, ${name}`;
  const greet = (name = "world") => `Hello, ${name}`;

Collapsed fence

// Pretend this file is 400 lines long.
function a() {}
function b() {}
function c() {}

Playground — static mode (inline)

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat.

Static with CSS-variable controls (no JS)

<div class="box"></div>

Static with sibling-folder src

<div class="test-snippet">
  <span class="dot"></span>
  <p>Test snippet works</p>
</div>

Static with bindings — from (direct)

<svg width="240" height="160">
  <line x1="20" y1="140" x2="220" y2="20"
        stroke="#f39c12" stroke-width="3" />
</svg>

Static with bindings — template (interpolation)

<svg viewBox="0 0 300 200" width="100%" height="200">
  <rect x="50" y="30" width="200" height="140"
        fill="#9b59b6" fill-opacity="0.2"
        stroke="#9b59b6" stroke-width="3" rx="8" />
</svg>

Static with bindings — compute (helper expression)

<svg width="300" height="200">
  <polygon points="150,40 201,70 201,130 150,160 99,130 99,70"
           fill="#1abc9c" fill-opacity="0.2"
           stroke="#1abc9c" stroke-width="2"
           stroke-linejoin="round" />
</svg>

Playground — vanilla mode (inline)

Accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Vanilla with inline HTML + CSS + JS

<div id="stage"></div>

Vanilla with sibling-folder src

<div class="test-snippet">
  <span class="dot"></span>
  <p>Test snippet works</p>
</div>

Playground — react mode (inline)

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint.

export default function App({ x1, y1, color, animated }) {
  return (
    <svg viewBox="0 0 280 280" width="280" height="280">
      <circle cx={x1} cy={y1} r={40} fill={color}
        style={{ transition: animated ? "all 200ms ease" : "none" }} />
    </svg>
  );
}

mode="inline" framework="react" is not supported — inline mode only covers static and vanilla. For editable React demos use mode="sandpack" template="react" instead; it gives readers a full sandbox with editor + hot reload.

Playground — live mode

A lightweight HTML / CSS / JS editor backed by an iframe srcdoc — no bundler, no JSX, no module resolution. The reader can tweak the source and watch the iframe re-run on every keystroke (debounced ~200ms). Ideal for "edit-this-snippet-and-see-what-happens" demos that don't need React or imports.

<button class="btn">Click me</button>
<p class="msg">Edits to any tab re-run the iframe.</p>

Playground — sandpack mode

Sandpack full layout

Sandpack sibling-folder form

Playground — layouts

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

layout="preview-only"

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" fill="#3498db" />
</svg>

layout="controls+preview"

<svg width="120" height="120"><circle class="c" cx="60" cy="60" fill="#e74c3c" /></svg>

layout="editor+preview"

layout="full"

Controls — one example of every v1 kind

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

<div class="kitchen-sink">All v1 + later controls above.</div>

Accessibility-focused controls

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint.

<div class="swatch">Opacity demo</div>

Closing

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.