Port vault section (5 pages) and docs section (11 pages)
- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md - content/docs/: _index.md, introduction, tokens, reset, semantic-html, components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog 96 pages build clean (was 36). Docs use sidebar nav + TOC layout. Vault uses sidebar with section fallback (no vault menu configured yet). URLs fixed: playground refs → asw.trentuna.com. Closes: asw#12, asw#9
This commit is contained in:
parent
cbe44d845c
commit
da1d02ccd1
GPG key ID:
159D6AD58C8E55E9
19 changed files with 2462 additions and 1 deletions
7
content/vault/_index.md
Normal file
7
content/vault/_index.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: "Vault"
|
||||
description: "Agent-native vocabulary extensions for ASW."
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "reference"]
|
||||
|
||||
---
|
||||
58
content/vault/diff.md
Normal file
58
content/vault/diff.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: "Diff"
|
||||
description: "Render structured diffs with line-level semantic markup — added, removed, context, hunk."
|
||||
section: vault
|
||||
prev-url: "status/"
|
||||
prev-title: "Status"
|
||||
next-url: "session/"
|
||||
next-title: "Session Log"
|
||||
type: vault
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "diff", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Use `data-diff` on a `<pre>` block to render a structured diff. Child elements carry line-level semantics.
|
||||
|
||||
```html
|
||||
<pre data-diff>
|
||||
<span data-line="hunk">@@ -12,7 +12,9 @@</span>
|
||||
<span data-line="context"> function greet(name) {</span>
|
||||
<span data-line="removed">- return "Hello " + name;</span>
|
||||
<span data-line="added">+ const greeting = `Hello, ${name}!`;</span>
|
||||
<span data-line="added">+ return greeting;</span>
|
||||
<span data-line="context"> }</span>
|
||||
</pre>
|
||||
```
|
||||
|
||||
## Line Types
|
||||
|
||||
| Value | Meaning |
|
||||
|-------|---------|
|
||||
| `hunk` | Hunk header (`@@ ... @@`) — muted, italic |
|
||||
| `context` | Unchanged surrounding line — default text |
|
||||
| `removed` | Deleted line — red background, `-` prefix |
|
||||
| `added` | New line — green background, `+` prefix |
|
||||
|
||||
## Inline Diffs
|
||||
|
||||
For single-value changes in prose, use `data-diff` directly on `<del>` and `<ins>`:
|
||||
|
||||
```html
|
||||
<p>
|
||||
Latency changed from
|
||||
<del data-diff="removed">240ms</del>
|
||||
to
|
||||
<ins data-diff="added">18ms</ins>
|
||||
after the index rebuild.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
The `data-diff` block expects monospace rendering. ASW applies `font-family: var(--asw-font-mono)` automatically — no additional class needed.
|
||||
67
content/vault/session.md
Normal file
67
content/vault/session.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: "Session Log"
|
||||
description: "Structured session and activity logs with timestamp, actor, and event semantics."
|
||||
section: vault
|
||||
prev-url: "diff/"
|
||||
prev-title: "Diff"
|
||||
next-url: ""
|
||||
next-title: ""
|
||||
type: vault
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "session", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Use `data-role="session-log"` on an `<ol>` to render a structured activity or session log. Each `<li>` is one event.
|
||||
|
||||
```html
|
||||
<ol data-role="session-log">
|
||||
<li>
|
||||
<time datetime="2026-04-09T08:31:00Z">08:31</time>
|
||||
<span data-actor="vigilio">vigilio</span>
|
||||
<span data-event="wake">Session started — model claude-sonnet-4-6</span>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-09T08:32:14Z">08:32</time>
|
||||
<span data-actor="vigilio">vigilio</span>
|
||||
<span data-event="read">Read vault overview and daily note</span>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-09T08:47:00Z">08:47</time>
|
||||
<span data-actor="system">system</span>
|
||||
<span data-event="commit">Committed: feat(vault): add session-log pattern</span>
|
||||
</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| Attribute | Element | Meaning |
|
||||
|-----------|---------|---------|
|
||||
| `data-role="session-log"` | `<ol>` | Activates session-log layout |
|
||||
| `data-actor` | `<span>` | Who performed the action — styled by value |
|
||||
| `data-event` | `<span>` | Event type — `wake`, `read`, `write`, `commit`, `sleep` |
|
||||
|
||||
## Actor Variants
|
||||
|
||||
```html
|
||||
<span data-actor="vigilio">vigilio</span> <!-- agent — primary colour -->
|
||||
<span data-actor="ludo">ludo</span> <!-- operator — accent colour -->
|
||||
<span data-actor="system">system</span> <!-- system — muted -->
|
||||
```
|
||||
|
||||
## Compact Form
|
||||
|
||||
For dense logs, omit the actor and let timestamp + event carry the entry:
|
||||
|
||||
```html
|
||||
<ol data-role="session-log" data-density="compact">
|
||||
<li><time datetime="2026-04-09T09:00:00Z">09:00</time> <span data-event="wake">Wake</span></li>
|
||||
<li><time datetime="2026-04-09T09:31:00Z">09:31</time> <span data-event="sleep">Sleep — context limit reached</span></li>
|
||||
</ol>
|
||||
```
|
||||
53
content/vault/status.md
Normal file
53
content/vault/status.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: "Status"
|
||||
description: "Render operational state with data-status — online, degraded, offline, unknown."
|
||||
section: vault
|
||||
prev-url: "wikilinks/"
|
||||
prev-title: "Wikilinks"
|
||||
next-url: "diff/"
|
||||
next-title: "Diff"
|
||||
type: vault
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "status", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Use `data-status` on any element to convey operational state. ASW renders a coloured indicator — no CSS classes required.
|
||||
|
||||
```html
|
||||
<span data-status="online">API Gateway</span>
|
||||
<span data-status="degraded">Search Index</span>
|
||||
<span data-status="offline">Legacy Auth</span>
|
||||
<span data-status="unknown">Webhook Relay</span>
|
||||
```
|
||||
|
||||
## Values
|
||||
|
||||
| Value | Meaning | Indicator |
|
||||
|-------|---------|-----------|
|
||||
| `online` | Fully operational | Green dot |
|
||||
| `degraded` | Reduced capacity or elevated errors | Amber dot |
|
||||
| `offline` | Not reachable or deliberately down | Red dot |
|
||||
| `unknown` | State not yet determined | Grey dot |
|
||||
|
||||
## Status Dashboard Pattern
|
||||
|
||||
Combine with a `<dl>` for a compact service health panel:
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>API Gateway</dt> <dd data-status="online">online</dd>
|
||||
<dt>Search Index</dt> <dd data-status="degraded">degraded</dd>
|
||||
<dt>Webhook Relay</dt> <dd data-status="offline">offline</dd>
|
||||
<dt>Analytics</dt> <dd data-status="unknown">unknown</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
## Usage Notes
|
||||
|
||||
`data-status` is intentionally display-only — it carries no ARIA role. For accessibility, pair with visible text (as shown above) rather than relying on the colour dot alone.
|
||||
38
content/vault/tasks.md
Normal file
38
content/vault/tasks.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: "Tasks"
|
||||
description: "Render task lists with semantic state: done, wip, blocked, todo."
|
||||
section: vault
|
||||
prev-url: ""
|
||||
prev-title: ""
|
||||
next-url: "wikilinks/"
|
||||
next-title: "Wikilinks"
|
||||
type: vault
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "tasks", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Use `data-task` on list items to convey task state without CSS classes.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li data-task="done">Completed item</li>
|
||||
<li data-task="wip">Work in progress</li>
|
||||
<li data-task="blocked">Blocked item</li>
|
||||
<li data-task="todo">Not started</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## States
|
||||
|
||||
| Value | Meaning |
|
||||
|-------|---------|
|
||||
| `done` | Completed — green check |
|
||||
| `wip` | In progress — amber |
|
||||
| `blocked` | Blocked — red |
|
||||
| `todo` | Not started — muted |
|
||||
26
content/vault/wikilinks.md
Normal file
26
content/vault/wikilinks.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: "Wikilinks"
|
||||
description: "Internal knowledge-graph links styled as dotted underlines."
|
||||
section: vault
|
||||
prev-url: "tasks/"
|
||||
prev-title: "Tasks"
|
||||
next-url: "status/"
|
||||
next-title: "Status"
|
||||
type: vault
|
||||
date: 2026-04-09
|
||||
tags: ["vault", "wikilinks", "reference"]
|
||||
ai-disclosure: "generated"
|
||||
ai-model: "claude-sonnet-4-5"
|
||||
ai-provider: "Anthropic"
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Use `data-wikilink` on anchor tags to mark links as internal knowledge-graph references.
|
||||
|
||||
```html
|
||||
<a href="/vault/tasks/" data-wikilink>Tasks</a>
|
||||
```
|
||||
|
||||
Renders with a dotted underline distinguishing it from a regular hyperlink.
|
||||
Loading…
Add table
Add a link
Reference in a new issue