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: "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>