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:
parent
c0426ea746
commit
502b2e8266
28 changed files with 595 additions and 19 deletions
22
site/content/docs/components/buttons.md
Normal file
22
site/content/docs/components/buttons.md
Normal 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>
|
||||
22
site/content/docs/components/callouts.md
Normal file
22
site/content/docs/components/callouts.md
Normal 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>
|
||||
28
site/content/docs/components/dialog.md
Normal file
28
site/content/docs/components/dialog.md
Normal 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><dialog></code> element. ASW styles the backdrop and container automatically.</p>
|
||||
<footer>
|
||||
<button onclick="document.getElementById('demo-dialog').close()">Close</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</div>
|
||||
37
site/content/docs/components/forms.md
Normal file
37
site/content/docs/components/forms.md
Normal 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>
|
||||
4
site/content/docs/content/_index.md
Normal file
4
site/content/docs/content/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Content"
|
||||
weight: 25
|
||||
---
|
||||
22
site/content/docs/content/blockquotes.md
Normal file
22
site/content/docs/content/blockquotes.md
Normal 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>
|
||||
24
site/content/docs/content/figures.md
Normal file
24
site/content/docs/content/figures.md
Normal 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>
|
||||
29
site/content/docs/content/tables.md
Normal file
29
site/content/docs/content/tables.md
Normal 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><nav></code></td><td>Site navigation</td><td>No</td></tr>
|
||||
<tr><td><code><article></code></td><td>Card / content block</td><td>No</td></tr>
|
||||
<tr><td><code><aside></code></td><td>Sidebar</td><td>No</td></tr>
|
||||
<tr><td><code><figure></code></td><td>Media + caption</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
29
site/content/docs/getting-started/getting-started.md
Normal file
29
site/content/docs/getting-started/getting-started.md
Normal 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><article></code> inside <code><main></code>, next to a <code><nav></code>. ASW styles all three with no classes.</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
4
site/content/docs/packs/_index.md
Normal file
4
site/content/docs/packs/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Packs"
|
||||
weight: 50
|
||||
---
|
||||
29
site/content/docs/packs/hugo.md
Normal file
29
site/content/docs/packs/hugo.md
Normal 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.
|
||||
17
site/content/docs/packs/nginx.md
Normal file
17
site/content/docs/packs/nginx.md
Normal 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.
|
||||
17
site/content/docs/packs/overview.md
Normal file
17
site/content/docs/packs/overview.md
Normal 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.
|
||||
17
site/content/docs/packs/pandoc.md
Normal file
17
site/content/docs/packs/pandoc.md
Normal 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.
|
||||
22
site/content/docs/reference/utilities.md
Normal file
22
site/content/docs/reference/utilities.md
Normal 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>
|
||||
32
site/content/docs/reference/vocabulary.md
Normal file
32
site/content/docs/reference/vocabulary.md
Normal 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>
|
||||
4
site/content/docs/typography/_index.md
Normal file
4
site/content/docs/typography/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Typography"
|
||||
weight: 15
|
||||
---
|
||||
29
site/content/docs/typography/code.md
Normal file
29
site/content/docs/typography/code.md
Normal 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 */
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="asw.css">
|
||||
</head>
|
||||
<body>
|
||||
<main><article>Hello, ASW.</article></main>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
</div>
|
||||
24
site/content/docs/typography/headings.md
Normal file
24
site/content/docs/typography/headings.md
Normal 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>
|
||||
28
site/content/docs/typography/prose.md
Normal file
28
site/content/docs/typography/prose.md
Normal 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>
|
||||
4
site/content/docs/vault/_index.md
Normal file
4
site/content/docs/vault/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Vault"
|
||||
weight: 45
|
||||
---
|
||||
21
site/content/docs/vault/status.md
Normal file
21
site/content/docs/vault/status.md
Normal 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>
|
||||
25
site/content/docs/vault/tasks.md
Normal file
25
site/content/docs/vault/tasks.md
Normal 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>
|
||||
23
site/content/docs/vault/wikilinks.md
Normal file
23
site/content/docs/vault/wikilinks.md
Normal 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>
|
||||
52
site/content/layouts/_index.md
Normal file
52
site/content/layouts/_index.md
Normal 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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
14
site/layouts/layouts/list.html
Normal file
14
site/layouts/layouts/list.html
Normal 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 }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue