feat: site restructure — layouts gallery, docs sections with inline demos

Navigation: Docs, Layouts, Lab (simplified from 6 items)

Layouts gallery: card grid showing all available page layouts
with live links to demo pages.

Docs restructure: 8 auto-generated sidebar sections
(Getting Started, Typography, Core, Content, Components,
Reference, Vault, Packs) with 20 new stub pages.
Each stub has inline HTML demos that ASW styles directly.

New Hugo layout template for layouts/ section.
Decap CMS nav updated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 18:24:27 +02:00
parent c0426ea746
commit 502b2e8266
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
28 changed files with 595 additions and 19 deletions

View file

@ -0,0 +1,22 @@
---
title: "Buttons"
description: "Button styles in ASW — primary, secondary, and danger variants."
type: docs
weight: 33
date: 2026-04-11
tags: ["components", "buttons", "forms"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`<button>` elements are styled by default. Use `data-variant` to select secondary or danger appearances without adding utility classes.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
<button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="danger">Danger</button>
<button disabled>Disabled</button>
</div>

View file

@ -0,0 +1,22 @@
---
title: "Callouts"
description: "Attention-drawing callout blocks using the data-callout attribute."
type: docs
weight: 35
date: 2026-04-11
tags: ["components", "callouts", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Add `data-callout="<type>"` to any block element to style it as a callout. Four types are available: `note`, `tip`, `warning`, and `error`. No extra classes needed.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
<div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
<div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
<div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
<div data-callout="error"><strong>Error</strong> — A critical issue or destructive action.</div>
</div>

View file

@ -0,0 +1,28 @@
---
title: "Dialog"
description: "Native HTML dialog element styled by ASW."
type: docs
weight: 36
date: 2026-04-11
tags: ["components", "dialog", "modal"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
ASW styles the native `<dialog>` element — no JavaScript modal libraries required. Call `dialog.showModal()` to open it. The `::backdrop` pseudo-element receives a semi-transparent overlay automatically.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
<dialog id="demo-dialog">
<article>
<header><h3>Dialog title</h3></header>
<p>This is a native <code>&lt;dialog&gt;</code> element. ASW styles the backdrop and container automatically.</p>
<footer>
<button onclick="document.getElementById('demo-dialog').close()">Close</button>
</footer>
</article>
</dialog>
</div>

View file

@ -0,0 +1,37 @@
---
title: "Forms"
description: "Form element styling in ASW — inputs, selects, textareas, and labels."
type: docs
weight: 34
date: 2026-04-11
tags: ["components", "forms", "inputs"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
All standard form elements are styled out of the box. Labels, inputs, selects, and textareas share consistent sizing and focus rings that respect the accent token.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
<label>
Name
<input type="text" placeholder="Jane Smith">
</label>
<label>
Role
<select>
<option>Agent</option>
<option>Human</option>
<option>Both</option>
</select>
</label>
<label>
Notes
<textarea rows="3" placeholder="Optional notes…"></textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>

View file

@ -0,0 +1,4 @@
---
title: "Content"
weight: 25
---

View file

@ -0,0 +1,22 @@
---
title: "Blockquotes"
description: "Styled blockquotes in ASW — left-border accent, muted text, optional citation."
type: docs
weight: 26
date: 2026-04-11
tags: ["content", "blockquote", "typography"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`<blockquote>` receives a left-border in the accent colour, slight indent, and reduced opacity. A `<footer>` inside the blockquote renders as a citation line.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
<footer>— Leonardo da Vinci</footer>
</blockquote>
</div>

View file

@ -0,0 +1,24 @@
---
title: "Figures"
description: "figure and figcaption styling in ASW."
type: docs
weight: 28
date: 2026-04-11
tags: ["content", "figure", "media"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`<figure>` is a block wrapper for images, diagrams, or code samples. `<figcaption>` inside it renders as a muted, centred caption below the content.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<figure>
<div style="background:var(--surface-2,#f0f0f0);height:120px;display:flex;align-items:center;justify-content:center;border-radius:4px">
<span data-text="dim">[ image placeholder ]</span>
</div>
<figcaption>Figure 1 — ASW renders figcaption below the content with muted styling.</figcaption>
</figure>
</div>

View file

@ -0,0 +1,29 @@
---
title: "Tables"
description: "Striped, bordered tables with no class names required."
type: docs
weight: 27
date: 2026-04-11
tags: ["content", "tables"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`<table>` elements are styled with alternating row stripes, a header row background, and a subtle border. Overflow is handled with horizontal scroll on narrow viewports.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
<table>
<thead>
<tr><th>Element</th><th>Role</th><th>Class needed?</th></tr>
</thead>
<tbody>
<tr><td><code>&lt;nav&gt;</code></td><td>Site navigation</td><td>No</td></tr>
<tr><td><code>&lt;article&gt;</code></td><td>Card / content block</td><td>No</td></tr>
<tr><td><code>&lt;aside&gt;</code></td><td>Sidebar</td><td>No</td></tr>
<tr><td><code>&lt;figure&gt;</code></td><td>Media + caption</td><td>No</td></tr>
</tbody>
</table>
</div>

View file

@ -0,0 +1,29 @@
---
title: "Quick Start"
description: "Get ASW running in five minutes: one CSS file, semantic HTML, no build step."
type: docs
weight: 12
date: 2026-04-11
tags: ["getting-started", "installation"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Drop `asw.css` into your project, add one `<link>` tag, and write semantic HTML. No npm, no build pipeline, no configuration files required.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<nav style="margin-bottom:1rem">
<a href="#">Home</a> ·
<a href="#">Docs</a> ·
<a href="#">About</a>
</nav>
<main>
<article>
<header><h2>Page title</h2></header>
<p>This is an <code>&lt;article&gt;</code> inside <code>&lt;main&gt;</code>, next to a <code>&lt;nav&gt;</code>. ASW styles all three with no classes.</p>
</article>
</main>
</div>

View file

@ -0,0 +1,4 @@
---
title: "Packs"
weight: 50
---

View file

@ -0,0 +1,29 @@
---
title: "Hugo Pack"
description: "Using ASW with Hugo — the theme, shortcodes, and configuration."
type: docs
weight: 52
date: 2026-04-11
tags: ["packs", "hugo"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
The Hugo pack (`packs/hugo/`) is a complete Hugo theme built on ASW. It maps Hugo's Markdown pipeline to semantic HTML that ASW styles automatically. This documentation site is built with it.
## Setup
Symlink or copy `packs/hugo/` into your Hugo project's `themes/` directory, then set `theme = "asw-hugo"` in `hugo.toml`. Enable unsafe HTML rendering so that raw HTML blocks in Markdown pass through:
```toml
[markup.goldmark.renderer]
unsafe = true
[markup.tableOfContents]
startLevel = 2
endLevel = 3
ordered = false
```
The pack provides layouts for `docs`, `blog`, and default page types. No additional configuration is required for basic use.

View file

@ -0,0 +1,17 @@
---
title: "nginx Pack"
description: "Serving ASW sites with nginx — config snippets and recommended settings."
type: docs
weight: 53
date: 2026-04-11
tags: ["packs", "nginx", "deploy"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
The nginx pack (`packs/nginx/`) provides ready-to-use server block snippets for static sites built with ASW. The snippets handle correct MIME types for `.css` files, cache headers, and clean URL rewrites so that `page/` serves `page/index.html` without explicit extensions.
Drop the relevant snippet into your nginx `conf.d/` directory and adjust the `root` path to point at your built site. No changes to ASW itself are required — the pack is purely a deployment convenience.
Stub — full configuration reference and examples will be added here.

View file

@ -0,0 +1,17 @@
---
title: "Packs Overview"
description: "What ASW packs are, how they extend the core stylesheet, and when to use them."
type: docs
weight: 51
date: 2026-04-11
tags: ["packs", "overview"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Packs are thin integration layers that connect ASW to a specific tool or pipeline. They do not add new CSS — they configure the tool so that its output maps to the semantic HTML that ASW already styles.
The core `asw.css` works with any HTML. Packs handle the glue: Hugo shortcodes, nginx config snippets, Pandoc templates, and so on. Use a pack when you want zero-configuration output from a supported tool, and skip it if you are generating HTML yourself.
Available packs: **Hugo**, **nginx**, **Pandoc**. Each pack lives in `packs/<name>/` in the ASW repository.

View file

@ -0,0 +1,17 @@
---
title: "Pandoc Pack"
description: "Converting documents to ASW-styled HTML with Pandoc templates."
type: docs
weight: 54
date: 2026-04-11
tags: ["packs", "pandoc"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
The Pandoc pack (`packs/pandoc/`) contains an HTML5 template that wraps Pandoc output in the document structure ASW expects. Run Pandoc with `--template asw.html5` and the resulting file is styled by `asw.css` with no further changes.
This is particularly useful for converting Markdown, DOCX, or LaTeX source to a consistently styled HTML output — for example, generating agent reports, documentation pages, or meeting notes from plain-text inputs.
Stub — template reference and usage examples will be added here.

View file

@ -0,0 +1,22 @@
---
title: "Utilities"
description: "Utility data-attributes in ASW for text variants, spacing, and display."
type: docs
weight: 43
date: 2026-04-11
tags: ["reference", "utilities", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
ASW provides a small set of utility attributes for inline adjustments. Rather than class names, these use `data-*` attributes to stay in the semantic-HTML spirit of the framework.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
<p><span data-text="mono">data-text="mono"</span> — monospace font</p>
<p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
<p><span data-text="accent">data-text="accent"</span> — accent colour</p>
<p><span data-text="small">data-text="small"</span> — smaller font size</p>
</div>

View file

@ -0,0 +1,32 @@
---
title: "Vocabulary"
description: "Full reference of all data-* attributes understood by ASW."
type: docs
weight: 44
date: 2026-04-11
tags: ["reference", "vocabulary", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Every `data-*` attribute that ASW recognises is listed here. This is the authoritative vocabulary — anything not on this list has no built-in style effect.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
<table>
<thead>
<tr><th>Attribute</th><th>Values</th><th>Effect</th></tr>
</thead>
<tbody>
<tr><td><code>data-layout</code></td><td>docs, prose, wide</td><td>Page layout variant</td></tr>
<tr><td><code>data-callout</code></td><td>note, tip, warning, error</td><td>Callout block style</td></tr>
<tr><td><code>data-task</code></td><td>done, todo, wip, blocked</td><td>Task list item state</td></tr>
<tr><td><code>data-status</code></td><td>active, sleeping, blocked</td><td>Status badge</td></tr>
<tr><td><code>data-text</code></td><td>mono, dim, accent, small</td><td>Inline text variant</td></tr>
<tr><td><code>data-variant</code></td><td>secondary, danger</td><td>Button style variant</td></tr>
<tr><td><code>data-wikilink</code></td><td>(any)</td><td>Internal wiki link styling</td></tr>
</tbody>
</table>
</div>

View file

@ -0,0 +1,4 @@
---
title: "Typography"
weight: 15
---

View file

@ -0,0 +1,29 @@
---
title: "Code"
description: "Inline code and fenced code blocks in ASW."
type: docs
weight: 18
date: 2026-04-11
tags: ["typography", "code", "pre"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Inline `<code>` uses a monospace font with a subtle background tint. Block-level `<pre><code>` gets a full-width container with padding and horizontal scroll for long lines.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
<pre><code>/* Minimal ASW page */
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="asw.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;&lt;article&gt;Hello, ASW.&lt;/article&gt;&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

View file

@ -0,0 +1,24 @@
---
title: "Headings"
description: "ASW styles all six heading levels with a consistent typographic scale."
type: docs
weight: 16
date: 2026-04-11
tags: ["typography", "headings"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Headings `h1` through `h6` are sized using a fluid scale derived from the token system. No classes are needed — the element name is the selector.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</div>

View file

@ -0,0 +1,28 @@
---
title: "Prose"
description: "Body text, unordered lists, ordered lists, and blockquotes in ASW."
type: docs
weight: 17
date: 2026-04-11
tags: ["typography", "prose", "lists", "blockquote"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
ASW sets comfortable line-height, paragraph spacing, and list markers on prose elements automatically. Write plain HTML and the reading experience takes care of itself.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
<ul>
<li>First item in an unordered list</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<blockquote>
<p>Good design is as little design as possible.</p>
<footer>— Dieter Rams</footer>
</blockquote>
</div>

View file

@ -0,0 +1,4 @@
---
title: "Vault"
weight: 45
---

View file

@ -0,0 +1,21 @@
---
title: "Status"
description: "data-status attribute for inline status badges in ASW."
type: docs
weight: 48
date: 2026-04-11
tags: ["vault", "status", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`data-status` renders a small coloured badge inline with text. It is designed for project indexes, agent dashboards, and task boards where a glanceable status signal is needed without a full callout block.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
<p><span data-status="active">active</span> — currently running or in use</p>
<p><span data-status="sleeping">sleeping</span> — paused or idle</p>
<p><span data-status="blocked">blocked</span> — waiting on a dependency</p>
</div>

View file

@ -0,0 +1,25 @@
---
title: "Tasks"
description: "data-task attribute for styled task lists in ASW."
type: docs
weight: 47
date: 2026-04-11
tags: ["vault", "tasks", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Add `data-task="<state>"` to a `<li>` element to render it as a task item with a state indicator. Four states are supported: `done`, `todo`, `wip` (work in progress), and `blocked`.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<ul style="list-style:none;padding-left:0">
<li data-task="done">Write the ASW reset layer</li>
<li data-task="done">Publish initial token system</li>
<li data-task="wip">Document all data-* attributes</li>
<li data-task="todo">Add animation tokens</li>
<li data-task="blocked">Finalize pack API — waiting on Pandoc template review</li>
</ul>
</div>

View file

@ -0,0 +1,23 @@
---
title: "Wikilinks"
description: "data-wikilink attribute for styling internal knowledge-base links."
type: docs
weight: 46
date: 2026-04-11
tags: ["vault", "wikilinks", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
`data-wikilink` marks an anchor as an internal wiki-style link — the kind generated by `[[Page Name]]` syntax in Obsidian, Quartz, or similar vault tools. ASW styles these distinctly from regular hyperlinks to indicate their intra-vault nature.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<p>
See the <a href="#" data-wikilink>Getting Started</a> page, or cross-reference
<a href="#" data-wikilink>Core Concepts</a> and <a href="#" data-wikilink>Token System</a>.
</p>
<p>Regular <a href="#">external link</a> for comparison.</p>
</div>

View file

@ -0,0 +1,52 @@
---
title: "Layouts"
description: "Available page layouts in ASW. Each card links to a live page using that layout."
---
## Available Layouts
<section data-layout="grid-2">
<article>
<header><h3>Docs</h3></header>
<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
<p><code>data-layout="docs"</code></p>
<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
</article>
<article>
<header><h3>Essay</h3></header>
<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
<p><code>type: essay</code></p>
<p><a href="/essays/on-semantic-html/">See it live →</a></p>
</article>
<article>
<header><h3>Console</h3></header>
<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
<p><code>data-layout="console"</code></p>
<p><em>Prototype — demo coming</em></p>
</article>
<article>
<header><h3>Grid</h3></header>
<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
<p><em>This page uses grid-2 for these cards</em></p>
</article>
<article>
<header><h3>Prose</h3></header>
<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
<p><code>data-layout="prose"</code></p>
<p><a href="/examples/layout/prose.html">See it live →</a></p>
</article>
<article>
<header><h3>Report</h3></header>
<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
<p><code>data-layout="report"</code></p>
<p><a href="/examples/layout/report.html">See it live →</a></p>
</article>
</section>

View file

@ -1,24 +1,10 @@
items:
- name: Home
url: /
weight: 1
- name: Docs
url: /docs/
weight: 1
- name: Layouts
url: /layouts/
weight: 2
- name: Notes
url: /notes/
- name: Lab
url: /lab/
weight: 3
- name: Essays
url: /essays/
weight: 4
- name: Articles
url: /articles/
weight: 5
- name: Tags
url: /tags/
weight: 6

View file

@ -15,17 +15,23 @@
"dl",
"dt",
"em",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hgroup",
"hr",
"html",
"input",
"label",
"li",
"link",
"main",
@ -33,10 +39,12 @@
"meta",
"nav",
"ol",
"option",
"p",
"pre",
"script",
"section",
"select",
"small",
"span",
"strong",
@ -45,6 +53,7 @@
"table",
"tbody",
"td",
"textarea",
"th",
"thead",
"time",
@ -73,6 +82,7 @@
"aside",
"asw-data-attribute-vocabulary",
"attributes",
"available-layouts",
"axis-labels",
"badge",
"bar-chart",
@ -143,6 +153,7 @@
"hugo--chroma",
"hugo-integration",
"inline-definition-list",
"inline-demo",
"inline-diffs",
"inline-elements",
"install-pill",

View file

@ -0,0 +1,14 @@
{{ define "header" }}
<header>
<hgroup>
<h1>{{ .Title }}</h1>
{{ with .Description }}<p>{{ . }}</p>{{ end }}
</hgroup>
</header>
{{ end }}
{{ define "content" }}
<main>
{{ .Content }}
</main>
{{ end }}