feat: legacy import — packs, examples, lab, themes, docs, lineage
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e9895cf90d
commit
86464f3e21
GPG key ID:
F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
156
examples/charts/amy-field-intelligence.html
Normal file
156
examples/charts/amy-field-intelligence.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Field Intelligence Report — ASW Examples</title>
|
||||
<meta name="description" content="Investigative data analysis —
|
||||
multi-series column with labels, source reliability bar, activity area
|
||||
chart">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Field Intelligence Report</h1>
|
||||
<p data-text="lead">Investigative data analysis — multi-series
|
||||
column with labels, source reliability bar, activity area chart</p>
|
||||
</header>
|
||||
|
||||
<p>This report documents signal intercept patterns across Q1 2026. Charts are used as analytical instruments — each answers a specific question about the data. Combined, they outline what happened, who was responsible, and how the trend evolved.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">247</span>
|
||||
<span data-stat="label">Intercepts analyzed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">6</span>
|
||||
<span data-stat="label">Source networks</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">91%</span>
|
||||
<span data-stat="label">Verification rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">3</span>
|
||||
<span data-stat="label">Priority findings</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Intercepts by category</h2>
|
||||
|
||||
<p>Column chart with <code>data-chart-labels</code> active. The thead row becomes visible axis labels. Three categories tracked across January, February, and March — each row in tbody is one category's monthly readings.</p>
|
||||
|
||||
<table data-chart="column" data-chart-labels style="--chart-height: 200px">
|
||||
<caption>Signal intercepts by category — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Jan</th>
|
||||
<th scope="col">Feb</th>
|
||||
<th scope="col">Mar</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Communication</th>
|
||||
<td style="--size: 0.55">55</td>
|
||||
<td style="--size: 0.80">80</td>
|
||||
<td style="--size: 1.0">100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Electronic</th>
|
||||
<td style="--size: 0.30">30</td>
|
||||
<td style="--size: 0.45">45</td>
|
||||
<td style="--size: 0.60">60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Human</th>
|
||||
<td style="--size: 0.20">20</td>
|
||||
<td style="--size: 0.28">28</td>
|
||||
<td style="--size: 0.34">34</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Communication intercepts nearly doubled January to March. Electronic and human sources grew at slower but consistent rates.</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>Key finding</span>
|
||||
<p>The acceleration in communication intercepts from February to March (+25%) coincides with increased operational tempo in target areas. Human source reporting lagged by approximately three weeks — consistent with field handler cycles.</p>
|
||||
</div>
|
||||
|
||||
<h2>Source reliability ranking</h2>
|
||||
|
||||
<p>Bar chart with <code>data-chart-labels</code>. Six source networks ranked by verified accuracy score over Q1. Labels active on both axes — row labels name the source, column header labels would appear if thead were present. Per-row color overrides mark the two highest-reliability sources.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-labels data-chart-spacing="3">
|
||||
<caption>Source reliability score — Q1 2026 (0–100)</caption>
|
||||
<tbody>
|
||||
<!-- max=94, SIGINT-Alpha -->
|
||||
<tr style="--color: var(--accent)">
|
||||
<th scope="row">SIGINT-Alpha</th>
|
||||
<td style="--size: 1.0" data-value="94">94</td>
|
||||
</tr>
|
||||
<tr style="--color: var(--accent)">
|
||||
<th scope="row">HUMINT-Bravo</th>
|
||||
<td style="--size: 0.915" data-value="86">86</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">OSINT-Charlie</th>
|
||||
<td style="--size: 0.798" data-value="75">75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">ELINT-Delta</th>
|
||||
<td style="--size: 0.734" data-value="69">69</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">IMINT-Echo</th>
|
||||
<td style="--size: 0.617" data-value="58">58</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">MASINT-Foxtrot</th>
|
||||
<td style="--size: 0.511" data-value="48">48</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">SIGINT-Alpha and HUMINT-Bravo marked in green — both cleared for high-confidence reporting. Remaining sources require corroboration before intelligence product.</p>
|
||||
|
||||
<h2>Activity trend — 8-week arc</h2>
|
||||
|
||||
<p>Area chart tracing cumulative signal activity from week 1 through week 8 of Q1. The fill below the line makes the rising trend immediately legible — area charts are well-suited to showing how something builds over time.</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 180px">
|
||||
<caption>Signal activity volume — weeks 1–8, Q1 2026</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Wk 1</th><td style="--size: 0.18">18</td></tr>
|
||||
<tr><th scope="row">Wk 2</th><td style="--size: 0.24">24</td></tr>
|
||||
<tr><th scope="row">Wk 3</th><td style="--size: 0.31">31</td></tr>
|
||||
<tr><th scope="row">Wk 4</th><td style="--size: 0.45">45</td></tr>
|
||||
<tr><th scope="row">Wk 5</th><td style="--size: 0.52">52</td></tr>
|
||||
<tr><th scope="row">Wk 6</th><td style="--size: 0.68">68</td></tr>
|
||||
<tr><th scope="row">Wk 7</th><td style="--size: 0.84">84</td></tr>
|
||||
<tr><th scope="row">Wk 8</th><td style="--size: 1.0">100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Volume increased 5.5× from week 1 to week 8. The acceleration is consistent — no anomalous spike, suggesting systematic increase in monitored activity rather than a single triggering event.</p>
|
||||
|
||||
<h2>Chart patterns used</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Chart</th><th>Attribute</th><th>What it shows</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Column + labels</td><td><code>data-chart="column" data-chart-labels</code></td><td>Multi-series monthly data with visible axis</td></tr>
|
||||
<tr><td>Bar + labels + color</td><td><code>data-chart="bar" data-chart-labels</code> + <code>style="--color: ..."</code></td><td>Ranked comparison with highlighted outliers</td></tr>
|
||||
<tr><td>Area</td><td><code>data-chart="area"</code></td><td>Trend accumulation over time</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
156
examples/charts/ba-build-metrics.html
Normal file
156
examples/charts/ba-build-metrics.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Build Pipeline Metrics — ASW Examples</title>
|
||||
<meta name="description" content="CI/CD pipeline performance — build
|
||||
time breakdown, weekly success rate, failure counts by repo">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Build Pipeline Metrics</h1>
|
||||
<p data-text="lead">CI/CD pipeline performance — build time
|
||||
breakdown, weekly success rate, failure counts by repo</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Build Pipeline Metrics — CI/CD Performance</h1>
|
||||
<p>Ten weeks of pipeline data across five repos. No theories. Just results.</p>
|
||||
</hgroup>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">5</span>
|
||||
<span data-stat="label">Repos tracked</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">94%</span>
|
||||
<span data-stat="label">Avg success rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">120s</span>
|
||||
<span data-stat="label">Longest build</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">32</span>
|
||||
<span data-stat="label">Failures (10 wk)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Build time breakdown</h2>
|
||||
<p>Seconds per phase across all tracked repos — compile, test, deploy. Max is 120s (agentic-semantic-web). Test dominates every build. That's expected. Don't cut your test suite to make this chart look better.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-stacked>
|
||||
<caption>Build time breakdown — seconds per phase (max 120s)</caption>
|
||||
<thead>
|
||||
<tr><th></th><th>Compile</th><th>Test</th><th>Deploy</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- max=120s. --size per segment = seconds / 120. totals must sum ≤ 1.0 -->
|
||||
<tr>
|
||||
<th scope="row">agentic-semantic-web</th>
|
||||
<td style="--size: 0.175" data-value="21s">21s</td>
|
||||
<td style="--size: 0.667" data-value="80s">80s</td>
|
||||
<td style="--size: 0.158" data-value="19s">19s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">api-gateway</th>
|
||||
<td style="--size: 0.100" data-value="12s">12s</td>
|
||||
<td style="--size: 0.542" data-value="65s">65s</td>
|
||||
<td style="--size: 0.183" data-value="22s">22s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">trentuna-web</th>
|
||||
<td style="--size: 0.150" data-value="18s">18s</td>
|
||||
<td style="--size: 0.458" data-value="55s">55s</td>
|
||||
<td style="--size: 0.125" data-value="15s">15s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">commons</th>
|
||||
<td style="--size: 0.125" data-value="15s">15s</td>
|
||||
<td style="--size: 0.375" data-value="45s">45s</td>
|
||||
<td style="--size: 0.100" data-value="12s">12s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">vault</th>
|
||||
<td style="--size: 0.067" data-value="8s">8s</td>
|
||||
<td style="--size: 0.250" data-value="30s">30s</td>
|
||||
<td style="--size: 0.083" data-value="10s">10s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Segment totals: asw 120s · api-gateway 99s · trentuna-web 88s · commons 72s · vault 48s</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Weekly build success rate</h2>
|
||||
<p>Percentage of successful builds per week over the last ten weeks. Week 8 hit 100%. That's the target. Everything else is noise telling you where to look.</p>
|
||||
|
||||
<table data-chart="column" data-chart-spacing="1" style="--chart-height: 200px">
|
||||
<caption>Build success rate — weeks 1–10 (max 100%)</caption>
|
||||
<tbody>
|
||||
<!-- max=100%, Week 8 -->
|
||||
<tr><th scope="row">W1</th><td style="--size: 0.94">94%</td></tr>
|
||||
<tr><th scope="row">W2</th><td style="--size: 0.88">88%</td></tr>
|
||||
<tr><th scope="row">W3</th><td style="--size: 0.91">91%</td></tr>
|
||||
<tr><th scope="row">W4</th><td style="--size: 0.78">78%</td></tr>
|
||||
<tr><th scope="row">W5</th><td style="--size: 0.95">95%</td></tr>
|
||||
<tr><th scope="row">W6</th><td style="--size: 0.82">82%</td></tr>
|
||||
<tr><th scope="row">W7</th><td style="--size: 0.96">96%</td></tr>
|
||||
<tr><th scope="row">W8</th><td style="--size: 1.00">100%</td></tr>
|
||||
<tr><th scope="row">W9</th><td style="--size: 0.89">89%</td></tr>
|
||||
<tr><th scope="row">W10</th><td style="--size: 0.97">97%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">W4 dip: flaky integration test on api-gateway, fixed W5. W6 dip: deploy timeout regression, fixed W7.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Failure count by repo</h2>
|
||||
<p>Total build failures over the last ten weeks. Two repos are over the acceptable threshold. They're marked. Fix them.</p>
|
||||
|
||||
<div data-callout="warning">
|
||||
<strong>api-gateway and agentic-semantic-web are above threshold.</strong>
|
||||
Both repos averaged more than one failure per week. api-gateway has the most — 14 failures in 10 weeks. That's not a fluke. That's a structural problem.
|
||||
</div>
|
||||
|
||||
<table data-chart="bar">
|
||||
<caption>Build failures — last 10 weeks (max 14, api-gateway)</caption>
|
||||
<tbody>
|
||||
<!-- max=14. --size = failures / 14. Red rows = above threshold (>7 failures) -->
|
||||
<tr style="--color: var(--accent-red)">
|
||||
<th scope="row">api-gateway</th>
|
||||
<td style="--size: 1.000" data-value="14">14</td>
|
||||
</tr>
|
||||
<tr style="--color: var(--accent-red)">
|
||||
<th scope="row">agentic-semantic-web</th>
|
||||
<td style="--size: 0.643" data-value="9">9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">trentuna-web</th>
|
||||
<td style="--size: 0.357" data-value="5">5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">commons</th>
|
||||
<td style="--size: 0.214" data-value="3">3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">vault</th>
|
||||
<td style="--size: 0.071" data-value="1">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Threshold: >7 failures in 10 weeks. vault and commons are solid. trentuna-web is borderline — watch it.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
89
examples/charts/burndown.html
Normal file
89
examples/charts/burndown.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Sprint Burndown — ASW Examples</title>
|
||||
<meta name="description" content="Sprint burndown chart with
|
||||
CSS-generated ideal velocity line — no JavaScript">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Sprint Burndown</h1>
|
||||
<p data-text="lead">Sprint burndown chart with CSS-generated ideal
|
||||
velocity line — no JavaScript</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Sprint 3 — Burndown</h1>
|
||||
<p>20 issues tracked over 10 days.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>The burndown chart shows remaining work across the sprint. Bars represent issues remaining each day; the diagonal overlay is the ideal burn line — no JavaScript required.</p>
|
||||
|
||||
<h2>Remaining work</h2>
|
||||
|
||||
<table data-chart="burndown" style="--chart-height: 220px">
|
||||
<caption>Sprint 3 burndown — 20 issues over 10 days</caption>
|
||||
<tbody>
|
||||
<!-- max=1.0 (start), normalized to 20 total issues -->
|
||||
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
||||
<tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
|
||||
<tr><th scope="row">D3</th><td style="--size: 0.75">15</td></tr>
|
||||
<tr><th scope="row">D4</th><td style="--size: 0.60">12</td></tr>
|
||||
<tr><th scope="row">D5</th><td style="--size: 0.55">11</td></tr>
|
||||
<tr><th scope="row">D6</th><td style="--size: 0.40">8</td></tr>
|
||||
<tr><th scope="row">D7</th><td style="--size: 0.35">7</td></tr>
|
||||
<tr><th scope="row">D8</th><td style="--size: 0.20">4</td></tr>
|
||||
<tr><th scope="row">D9</th><td style="--size: 0.10">2</td></tr>
|
||||
<tr><th scope="row">D10</th><td style="--size: 0.05">1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>The ideal line</span>
|
||||
<p>The blue diagonal overlay is a CSS <code>linear-gradient</code> on <code>tbody::after</code> — no JavaScript. It represents ideal burn rate from day 1 to day N.</p>
|
||||
</div>
|
||||
|
||||
<h2>Issues by type</h2>
|
||||
<p>Breakdown of the 20 sprint issues by category — max 8 (Features).</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Sprint 3 issues by type</caption>
|
||||
<tbody>
|
||||
<!-- max=8, Features -->
|
||||
<tr><th scope="row">Features</th><td style="--size: 1.0" data-value="8">8</td></tr>
|
||||
<tr><th scope="row">Bugs</th><td style="--size: 0.625" data-value="5">5</td></tr>
|
||||
<tr><th scope="row">Docs</th><td style="--size: 0.5" data-value="4">4</td></tr>
|
||||
<tr><th scope="row">Maintenance</th><td style="--size: 0.375" data-value="3">3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Work distribution</h2>
|
||||
<p>How sprint work is distributed across categories by estimated effort.</p>
|
||||
|
||||
<table data-chart="pie"
|
||||
style="--pie-size: 180px; --pie-segments: conic-gradient(var(--chart-color-1) 0% 40%, var(--chart-color-2) 40% 65%, var(--chart-color-3) 65% 85%, var(--chart-color-4) 85% 100%)">
|
||||
<caption>Sprint 3 work distribution by effort</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>🟢 Features 40%</th>
|
||||
<th>🔵 Bugs 25%</th>
|
||||
<th>🟠 Docs 20%</th>
|
||||
<th>🔴 Maintenance 15%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
154
examples/charts/face-budget-pitch.html
Normal file
154
examples/charts/face-budget-pitch.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Investment Overview — ASW Examples</title>
|
||||
<meta name="description" content="Face-style investor pitch — pie
|
||||
chart budget allocation, bar with per-row color, growth trajectory">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Investment Overview</h1>
|
||||
<p data-text="lead">Face-style investor pitch — pie chart budget
|
||||
allocation, bar with per-row color, growth trajectory</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Agentic Semantic Web — Investor Brief</h1>
|
||||
<p>Series A close · Q1 2026 · Confidential</p>
|
||||
</hgroup>
|
||||
|
||||
<p>Every great pitch starts with the same premise: the story the data tells depends entirely on how you frame it. These charts don't manipulate — they illuminate. There's a difference, and it's worth knowing which side you're on.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">$4.2M</span>
|
||||
<span data-stat="label">ARR</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">$18M</span>
|
||||
<span data-stat="label">Series A raised</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">24 mo</span>
|
||||
<span data-stat="label">Runway</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">47</span>
|
||||
<span data-stat="label">Team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Where the money goes</h2>
|
||||
|
||||
<p>Capital allocation reflects priorities. Infrastructure-first is not a philosophical choice — it's a competitive moat. Forty cents of every dollar builds the foundation that makes everything else defensible.</p>
|
||||
|
||||
<table data-chart="pie" style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 82%,
|
||||
var(--chart-color-4) 82% 100%
|
||||
)">
|
||||
<caption>Operating budget allocation — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Infrastructure (40%)</th>
|
||||
<th>Personnel (25%)</th>
|
||||
<th>R&D (17%)</th>
|
||||
<th>Marketing (18%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: finance team — Q1 2026 budget allocation</p>
|
||||
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>The moat is the infrastructure</span>
|
||||
<p>The 40% infrastructure allocation looks heavy until you consider the alternative: every competitor building on the same commodity stack, competing on features alone. We're not building features — we're building the substrate that makes agentic coordination possible at scale. That's not a cost center. That's the product.</p>
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>Pie charts use <code>data-chart="pie"</code> with a <code>--pie-segments</code> CSS custom property set via <code>style</code>. The conic gradient defines each slice as a percentage range. Legend comes from <code><thead></code> — one <code><th></code> per segment, label and percentage inline.</p>
|
||||
|
||||
<pre><code><table data-chart="pie" style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 82%,
|
||||
var(--chart-color-4) 82% 100%
|
||||
)">
|
||||
<caption>Operating budget allocation — Q1 2026</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Infrastructure (40%)</th>
|
||||
<th>Personnel (25%)</th>
|
||||
<th>R&D (17%)</th>
|
||||
<th>Marketing (18%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||||
</table></code></pre>
|
||||
|
||||
<p>The <code>--pie-segments</code> value is a <code>conic-gradient()</code> — pure CSS, no JavaScript, no SVG. Segment boundaries are cumulative percentages. Use <code>var(--chart-color-1)</code> through <code>var(--chart-color-4)</code> to stay within the design system palette. Additional segments are possible by extending the gradient and adding more <code><th></code> entries.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Revenue vs. target — quarterly</h2>
|
||||
|
||||
<p>Six quarters of quarterly revenue laid against target. Four out of six quarters hit or beat projections. The two misses — Q1 2024 and Q4 2024 — were deliberate: both quarters involved platform migrations that temporarily compressed billings. The investors who stayed patient are now holding the most defensible position in the category.</p>
|
||||
|
||||
<table data-chart="bar">
|
||||
<caption>Quarterly revenue vs. target — Q1 2024 through Q2 2025 (max $1.8M)</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Q1 2024 <span data-text="dim">↓ target $500K</span></th><td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr>
|
||||
<tr><th scope="row">Q2 2024 <span data-text="dim">↑ target $650K</span></th><td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||||
<tr><th scope="row">Q3 2024 <span data-text="dim">↑ target $800K</span></th><td style="--size: 0.494; --color: var(--accent)">$890K</td></tr>
|
||||
<tr><th scope="row">Q4 2024 <span data-text="dim">↓ target $1.2M</span></th><td style="--size: 0.611; --color: var(--accent-red)">$1.1M</td></tr>
|
||||
<tr><th scope="row">Q1 2025 <span data-text="dim">↑ target $1.3M</span></th><td style="--size: 0.778; --color: var(--accent)">$1.4M</td></tr>
|
||||
<tr><th scope="row">Q2 2025 <span data-text="dim">↑ target $1.6M</span></th><td style="--size: 1.0; --color: var(--accent)">$1.8M</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Green = beat target · Red = missed target · Max $1.8M (Q2 2025)</p>
|
||||
|
||||
<h3>Per-row color override</h3>
|
||||
<p>Individual rows accept a <code>--color</code> custom property on the <code><td></code>. Use <code>var(--accent)</code> for over-target performance and <code>var(--accent-red)</code> for misses. The default bar color is the chart's base accent — override only where it carries meaning.</p>
|
||||
|
||||
<pre><code><!-- Over-target: green -->
|
||||
<tr><th scope="row">Q2 2024</th>
|
||||
<td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||||
|
||||
<!-- Under-target: red -->
|
||||
<tr><th scope="row">Q1 2024</th>
|
||||
<td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>ARR growth trajectory</h2>
|
||||
|
||||
<p>This is the chart that closes the room. Six quarters of compounding ARR — from $1.1M to $4.2M. That's a 3.8× in 18 months. The trajectory isn't slowing. The Series A closes at the inflection point.</p>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 240px">
|
||||
<caption>Annual Recurring Revenue — Q3 2024 through Q4 2025</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Q3 2024</th><td style="--size: 0.262">$1.1M</td></tr>
|
||||
<tr><th scope="row">Q4 2024</th><td style="--size: 0.381">$1.6M</td></tr>
|
||||
<tr><th scope="row">Q1 2025</th><td style="--size: 0.524">$2.2M</td></tr>
|
||||
<tr><th scope="row">Q2 2025</th><td style="--size: 0.690">$2.9M</td></tr>
|
||||
<tr><th scope="row">Q3 2025</th><td style="--size: 0.833">$3.5M</td></tr>
|
||||
<tr><th scope="row">Q4 2025</th><td style="--size: 1.0">$4.2M</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: finance · ARR normalized — max $4.2M (Q4 2025)</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
examples/charts/hannibal-op-tracker.html
Normal file
121
examples/charts/hannibal-op-tracker.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Operation Tracker — ASW Examples</title>
|
||||
<meta name="description" content="Mission planning analytics — stacked
|
||||
column with labels, team performance bar, readiness gauges">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Operation Tracker</h1>
|
||||
<p data-text="lead">Mission planning analytics — stacked column
|
||||
with labels, team performance bar, readiness gauges</p>
|
||||
</header>
|
||||
|
||||
<div data-callout="note">
|
||||
<p>"I love it when a plan comes together." — Colonel John H. Smith. The charts don't lie. The team doesn't fold. The exit is always mapped before the entry.</p>
|
||||
</div>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">5</span>
|
||||
<span data-stat="label">Operations tracked</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">3</span>
|
||||
<span data-stat="label">Missions active</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">89%</span>
|
||||
<span data-stat="label">Success rate</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">94%</span>
|
||||
<span data-stat="label">Team readiness</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Operation phase breakdown</h2>
|
||||
<p>Each operation is divided into three phases: planning, execution, and extraction. Values are normalized — each column sums to 1.0. Leaner planning phases signal higher operational confidence. Op Echo ran hot on execution; that's the jazz.</p>
|
||||
|
||||
<table data-chart="column" data-chart-stacked data-chart-labels style="--chart-height: 200px">
|
||||
<caption>Operation phases — time allocation (normalized)</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Op Alpha</th>
|
||||
<th scope="col">Op Beta</th>
|
||||
<th scope="col">Op Gamma</th>
|
||||
<th scope="col">Op Delta</th>
|
||||
<th scope="col">Op Echo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Planning</th>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.30">30%</td>
|
||||
<td style="--size: 0.20">20%</td>
|
||||
<td style="--size: 0.35">35%</td>
|
||||
<td style="--size: 0.15">15%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Execution</th>
|
||||
<td style="--size: 0.50">50%</td>
|
||||
<td style="--size: 0.45">45%</td>
|
||||
<td style="--size: 0.55">55%</td>
|
||||
<td style="--size: 0.45">45%</td>
|
||||
<td style="--size: 0.60">60%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Extraction</th>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
<td style="--size: 0.20">20%</td>
|
||||
<td style="--size: 0.25">25%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Five operations — Op Alpha through Op Echo. Phases: planning, execution, extraction. Each column sums to 1.0.</p>
|
||||
|
||||
<h2>Mission success rate by operative</h2>
|
||||
<p>Completed mission outcomes by team member over the last 24 months. Success is defined as: objective met, team extracted, no assets burned. Normalized against the highest performer — 96 missions, all successful.</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Mission success rate per operative — 24-month window</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Hannibal</th><td style="--size: 1.000" data-value="96%">96%</td></tr>
|
||||
<tr><th scope="row">B.A. Baracus</th><td style="--size: 0.948" data-value="91%">91%</td></tr>
|
||||
<tr><th scope="row">Face</th><td style="--size: 0.917" data-value="88%">88%</td></tr>
|
||||
<tr><th scope="row">Amy</th><td style="--size: 0.885" data-value="85%">85%</td></tr>
|
||||
<tr><th scope="row">Murdock</th><td style="--size: 0.854" data-value="82%">82%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Murdock's figure reflects missions where "unconventional" entry and exit methods were logged as anomalies rather than successes. Adjusting for tactical creativity: 97%.</p>
|
||||
|
||||
<h2>Readiness gauges</h2>
|
||||
<p>Two headline metrics for the current operational cycle: overall mission success rate across all active ops, and aggregate team readiness based on availability, equipment status, and last debrief scores.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.89">
|
||||
<caption>Mission success rate</caption>
|
||||
<tbody><tr><td><span>89%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.94">
|
||||
<caption>Team readiness</caption>
|
||||
<tbody><tr><td><span>94%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Gauges represent the current operational cycle. Team readiness accounts for Murdock's current clearance status — provisional, pending psych eval.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
63
examples/charts/index.html
Normal file
63
examples/charts/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Charts — ASW Examples</title>
|
||||
<meta name="description" content="Data-driven chart types — bar,
|
||||
column, area, line, pie, radial, burndown">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Charts</h1>
|
||||
<p data-text="lead">Data-driven chart types — bar, column, area,
|
||||
line, pie, radial, burndown</p>
|
||||
</header>
|
||||
|
||||
<p>ASW ships native charting — semantic <code><table></code>
|
||||
elements with <code>data-chart</code> attributes. No JavaScript. No SVG.
|
||||
Pure CSS.</p>
|
||||
<h2 id="chart-types">Chart types</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Attribute</th><th>Use case</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Bar</td><td><code>data-chart="bar"</code></td><td>Horizontal comparison</td></tr>
|
||||
<tr><td>Column</td><td><code>data-chart="column"</code></td><td>Vertical time-series</td></tr>
|
||||
<tr><td>Area</td><td><code>data-chart="area"</code></td><td>Filled trend line</td></tr>
|
||||
<tr><td>Line</td><td><code>data-chart="line"</code></td><td>Trend with data points</td></tr>
|
||||
<tr><td>Pie</td><td><code>data-chart="pie"</code></td><td>Part-to-whole</td></tr>
|
||||
<tr><td>Radial</td><td><code>data-chart="radial"</code></td><td>Single-value gauge</td></tr>
|
||||
<tr><td>Burndown</td><td><code>data-chart="burndown"</code></td><td>Sprint tracking</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<h3 id="compositions">Compositions</h3>
|
||||
<ul>
|
||||
<li><a href="operational-dashboard.html">Operational Dashboard</a> — multi-chart agent metrics view</li>
|
||||
<li><a href="radial-gauges.html">Radial Gauges</a> — session health with status variants</li>
|
||||
<li><a href="burndown.html">Sprint Burndown</a> — sprint tracking with ideal velocity line</li>
|
||||
<li><a href="multi-chart-report.html">Sprint Report</a> — multi-chart sprint report template</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="advanced-techniques">Advanced techniques</h3>
|
||||
<ul>
|
||||
<li><a href="ba-build-metrics.html">Build Pipeline Metrics</a> — stacked bar (<code>data-chart-stacked</code>), column with tight spacing, per-row color</li>
|
||||
<li><a href="face-budget-pitch.html">Investment Overview</a> — pie chart (<code>data-chart="pie"</code>) with <code>--pie-segments</code>, bar with color overrides</li>
|
||||
<li><a href="murdock-aerial-survey.html">Aerial Survey Data</a> — line chart (<code>data-chart="line"</code>), area chart, radial gauges</li>
|
||||
<li><a href="amy-field-intelligence.html">Field Intelligence Report</a> — column + bar with <code>data-chart-labels</code>, multi-series, area trend</li>
|
||||
<li><a href="hannibal-op-tracker.html">Operation Tracker</a> — stacked column (<code>data-chart-stacked</code> + <code>data-chart-labels</code>), mission analytics</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="reference">Reference</h2>
|
||||
<p>See <a href="/docs/charts/index.html">Charts docs</a> for the full
|
||||
attribute reference and modifier list.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
144
examples/charts/multi-chart-report.html
Normal file
144
examples/charts/multi-chart-report.html
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Sprint Report — ASW Examples</title>
|
||||
<meta name="description" content="Full sprint report template
|
||||
combining bar, column, area, line, pie, and burndown charts">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Sprint Report</h1>
|
||||
<p data-text="lead">Full sprint report template combining bar,
|
||||
column, area, line, pie, and burndown charts</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Sprint Report — Week 14</h1>
|
||||
<p>2026-03-31 through 2026-04-03 · ASW development sprint</p>
|
||||
</hgroup>
|
||||
|
||||
<section>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">8</span>
|
||||
<span data-stat="label">Issues opened</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">14</span>
|
||||
<span data-stat="label">Issues closed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">+6</span>
|
||||
<span data-stat="label">Net resolved</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">47</span>
|
||||
<span data-stat="label">Commits</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Commit activity</h2>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 180px">
|
||||
<caption>Commits per day — Week 14</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Mon</th><td style="--size: 0.44">8</td></tr>
|
||||
<tr><th scope="row">Tue</th><td style="--size: 0.67">12</td></tr>
|
||||
<tr><th scope="row">Wed</th><td style="--size: 1.0">18</td></tr>
|
||||
<tr><th scope="row">Thu</th><td style="--size: 0.50">9</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git log — max=18 (Wednesday)</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Open issues trend</h2>
|
||||
|
||||
<table data-chart="line" style="--chart-height: 160px">
|
||||
<caption>Open issues count — last 6 weeks</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">W9</th><td style="--size: 0.8">48</td></tr>
|
||||
<tr><th scope="row">W10</th><td style="--size: 0.9">54</td></tr>
|
||||
<tr><th scope="row">W11</th><td style="--size: 0.7">42</td></tr>
|
||||
<tr><th scope="row">W12</th><td style="--size: 1.0">60</td></tr>
|
||||
<tr><th scope="row">W13</th><td style="--size: 0.75">45</td></tr>
|
||||
<tr><th scope="row">W14</th><td style="--size: 0.5">30</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API — open issues by week</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Vault activity</h2>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 150px">
|
||||
<caption>Vault commit volume — last 8 sessions</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">S1</th><td style="--size: 0.4">light</td></tr>
|
||||
<tr><th scope="row">S2</th><td style="--size: 0.6">medium</td></tr>
|
||||
<tr><th scope="row">S3</th><td style="--size: 0.8">heavy</td></tr>
|
||||
<tr><th scope="row">S4</th><td style="--size: 0.5">medium</td></tr>
|
||||
<tr><th scope="row">S5</th><td style="--size: 0.9">deep</td></tr>
|
||||
<tr><th scope="row">S6</th><td style="--size: 1.0">peak</td></tr>
|
||||
<tr><th scope="row">S7</th><td style="--size: 0.7">heavy</td></tr>
|
||||
<tr><th scope="row">S8</th><td style="--size: 0.6">medium</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git -C ~/.napkin log — session classification</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Sprint burndown</h2>
|
||||
|
||||
<table data-chart="burndown">
|
||||
<caption>Week 14 sprint — 20 issues, 4 days</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">Mon</th><td style="--size: 1.0">20</td></tr>
|
||||
<tr><th scope="row">Tue</th><td style="--size: 0.65">13</td></tr>
|
||||
<tr><th scope="row">Wed</th><td style="--size: 0.35">7</td></tr>
|
||||
<tr><th scope="row">Thu</th><td style="--size: 0.1">2</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo milestone — issues remaining per day</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Work type distribution</h2>
|
||||
|
||||
<table data-chart="pie"
|
||||
style="--pie-segments: conic-gradient(
|
||||
var(--chart-color-1) 0% 40%,
|
||||
var(--chart-color-2) 40% 65%,
|
||||
var(--chart-color-3) 65% 85%,
|
||||
var(--chart-color-4) 85% 100%
|
||||
)">
|
||||
<caption>Session work allocation — Week 14</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Implementation 40%</th>
|
||||
<th>Documentation 25%</th>
|
||||
<th>Maintenance 20%</th>
|
||||
<th>Communication 15%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: git commit trailers — Mode + topic classification</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
120
examples/charts/murdock-aerial-survey.html
Normal file
120
examples/charts/murdock-aerial-survey.html
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Aerial Survey Data — ASW Examples</title>
|
||||
<meta name="description" content="Flight telemetry across 12 waypoints
|
||||
— line chart, area chart, radial gauges">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Aerial Survey Data</h1>
|
||||
<p data-text="lead">Flight telemetry across 12 waypoints — line
|
||||
chart, area chart, radial gauges</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Recon Flight 7 — Murdock Aerial Survey</h1>
|
||||
<p>Atmospheric readings and telemetry data. All values normalized. All systems… mostly nominal.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>SMOKEY IS IN THE AIR! Recon Flight 7 departed at 0600 local — 12 waypoints, one aircraft, and me. The data below is what the black box recorded. Some of it is exactly what you'd expect. WP-08 is… not that.</p>
|
||||
|
||||
<p>Every measurement below is a CSS custom property. Every chart is a semantic HTML table. The altitude profile used to be the only chart type not demonstrated in isolation — that changes right now.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">12</span>
|
||||
<span data-stat="label">Waypoints</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">8,500</span>
|
||||
<span data-stat="label">Peak altitude (ft)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">340</span>
|
||||
<span data-stat="label">Range (km)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">97%</span>
|
||||
<span data-stat="label">Mission data captured</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Altitude profile</h2>
|
||||
<p>Altitude at each waypoint — normalized to peak cruise altitude of 8,500 ft at WP-06. The sharp descent at WP-08 was… deliberate. Mostly.</p>
|
||||
|
||||
<table data-chart="line" style="--chart-height: 220px">
|
||||
<caption>Altitude profile — Recon Flight 7 (max: 8,500 ft)</caption>
|
||||
<tbody>
|
||||
<!-- max=8500ft at WP-06 = 1.0 -->
|
||||
<tr><th scope="row">WP-01</th><td style="--size: 0.06">500 ft</td></tr>
|
||||
<tr><th scope="row">WP-02</th><td style="--size: 0.18">1,500 ft</td></tr>
|
||||
<tr><th scope="row">WP-03</th><td style="--size: 0.38">3,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-04</th><td style="--size: 0.68">5,800 ft</td></tr>
|
||||
<tr><th scope="row">WP-05</th><td style="--size: 0.85">7,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-06</th><td style="--size: 1.0">8,500 ft</td></tr>
|
||||
<tr><th scope="row">WP-07</th><td style="--size: 0.96">8,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-08</th><td style="--size: 0.72">6,100 ft</td></tr>
|
||||
<tr><th scope="row">WP-09</th><td style="--size: 0.80">6,800 ft</td></tr>
|
||||
<tr><th scope="row">WP-10</th><td style="--size: 0.59">5,000 ft</td></tr>
|
||||
<tr><th scope="row">WP-11</th><td style="--size: 0.26">2,200 ft</td></tr>
|
||||
<tr><th scope="row">WP-12</th><td style="--size: 0.04">300 ft</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 black box telemetry — 2026-04-04 — altimeter calibrated to MSL</p>
|
||||
|
||||
<h2>Fuel consumption rate</h2>
|
||||
<p>Fuel burn rate at each waypoint in liters per minute — normalized to peak consumption of 18 L/min during the WP-02 climb phase. Cruise efficiency kicks in at WP-06. The WP-08 spike is the fuel cost of evasive action. Worth it.</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 180px">
|
||||
<caption>Fuel consumption rate — Recon Flight 7 (max: 18 L/min)</caption>
|
||||
<tbody>
|
||||
<!-- max=18 L/min at WP-02 = 1.0 -->
|
||||
<tr><th scope="row">WP-01</th><td style="--size: 0.67">12 L/min</td></tr>
|
||||
<tr><th scope="row">WP-02</th><td style="--size: 1.0">18 L/min</td></tr>
|
||||
<tr><th scope="row">WP-03</th><td style="--size: 0.89">16 L/min</td></tr>
|
||||
<tr><th scope="row">WP-04</th><td style="--size: 0.78">14 L/min</td></tr>
|
||||
<tr><th scope="row">WP-05</th><td style="--size: 0.67">12 L/min</td></tr>
|
||||
<tr><th scope="row">WP-06</th><td style="--size: 0.56">10 L/min</td></tr>
|
||||
<tr><th scope="row">WP-07</th><td style="--size: 0.56">10 L/min</td></tr>
|
||||
<tr><th scope="row">WP-08</th><td style="--size: 0.83">15 L/min</td></tr>
|
||||
<tr><th scope="row">WP-09</th><td style="--size: 0.61">11 L/min</td></tr>
|
||||
<tr><th scope="row">WP-10</th><td style="--size: 0.50">9 L/min</td></tr>
|
||||
<tr><th scope="row">WP-11</th><td style="--size: 0.44">8 L/min</td></tr>
|
||||
<tr><th scope="row">WP-12</th><td style="--size: 0.33">6 L/min</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 fuel flow sensor — 2026-04-04 — readings at waypoint crossing</p>
|
||||
|
||||
<div data-callout="warning">
|
||||
<span data-callout-title>Anomalous readings at WP-08</span>
|
||||
<p>At WP-08 the altimeter dropped 2,100 ft in 47 seconds and fuel burn spiked to 15 L/min. The black box logged it as "unscheduled terrain avoidance maneuver." I logged it as "that ridge came out of nowhere." Both accounts are technically accurate. Atmospheric pressure sensor also recorded a 4 hPa anomaly at this waypoint — possible rotor wash from an unmapped obstruction, possible something else. Flagging for review. Systems recovered to nominal by WP-09.</p>
|
||||
</div>
|
||||
|
||||
<h2>Flight status</h2>
|
||||
<p>Two radial gauges: overall mission completion (10 of 12 waypoints fully processed) and systems nominal status post-WP-08 anomaly. Warning threshold on systems — the anomaly left a mark.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.83">
|
||||
<caption>Flight completion</caption>
|
||||
<tbody><tr><td><span>83%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.78" data-status="warning">
|
||||
<caption>Systems nominal</caption>
|
||||
<tbody><tr><td><span>78%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Source: Flight 7 black box — post-flight systems diagnostics — 2026-04-04</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
123
examples/charts/operational-dashboard.html
Normal file
123
examples/charts/operational-dashboard.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Operational Dashboard — ASW Examples</title>
|
||||
<meta name="description" content="Multi-chart agent metrics — issues,
|
||||
vault commits, token budget, session intensity">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Operational Dashboard</h1>
|
||||
<p data-text="lead">Multi-chart agent metrics — issues, vault
|
||||
commits, token budget, session intensity</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Operational Dashboard — Agent Metrics</h1>
|
||||
<p>Live operational data from Forgejo and git history.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>A multi-chart operational view. Stats bar gives the headline numbers; each chart below drills into a specific signal. All data is normalized: the largest value in each dataset is <code>--size: 1.0</code>.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">31</span>
|
||||
<span data-stat="label">Open issues</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">6</span>
|
||||
<span data-stat="label">Active repos</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">34</span>
|
||||
<span data-stat="label">Vault commits today</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">12</span>
|
||||
<span data-stat="label">Sessions this week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Issues by repository</h2>
|
||||
<p>Open issue count across all active repos — max 12 (trentuna/a-team).</p>
|
||||
|
||||
<table data-chart="bar" data-chart-spacing="3">
|
||||
<caption>Open issues per repo — 2026-04-03</caption>
|
||||
<tbody>
|
||||
<!-- max=12, trentuna/a-team -->
|
||||
<tr><th scope="row">a-team</th><td style="--size: 1.0" data-value="12">12</td></tr>
|
||||
<tr><th scope="row">vault</th><td style="--size: 0.833" data-value="10">10</td></tr>
|
||||
<tr><th scope="row">asw</th><td style="--size: 0.5" data-value="6">6</td></tr>
|
||||
<tr><th scope="row">commons</th><td style="--size: 0.083" data-value="1">1</td></tr>
|
||||
<tr><th scope="row">trentuna-web</th><td style="--size: 0.083" data-value="1">1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Vault commits per day</h2>
|
||||
<p>Git commit frequency over the last 10 days — max 110 on 2026-03-26.</p>
|
||||
|
||||
<table data-chart="column" style="--chart-height: 220px">
|
||||
<caption>Commits to vigilio/vault — Mar 25 through Apr 3</caption>
|
||||
<tbody>
|
||||
<!-- max=110, 2026-03-26 -->
|
||||
<tr><th scope="row">Mar 25</th><td style="--size: 0.718">79</td></tr>
|
||||
<tr><th scope="row">Mar 26</th><td style="--size: 1.0">110</td></tr>
|
||||
<tr><th scope="row">Mar 27</th><td style="--size: 0.855">94</td></tr>
|
||||
<tr><th scope="row">Mar 28</th><td style="--size: 0.9">99</td></tr>
|
||||
<tr><th scope="row">Mar 29</th><td style="--size: 0.1">11</td></tr>
|
||||
<tr><th scope="row">Mar 30</th><td style="--size: 0.091">10</td></tr>
|
||||
<tr><th scope="row">Mar 31</th><td style="--size: 0.127">14</td></tr>
|
||||
<tr><th scope="row">Apr 1</th><td style="--size: 0.182">20</td></tr>
|
||||
<tr><th scope="row">Apr 2</th><td style="--size: 0.309">34</td></tr>
|
||||
<tr><th scope="row">Apr 3</th><td style="--size: 0.073">8</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Budget and resolution</h2>
|
||||
<p>Two radial gauges side by side: token budget remaining and issue resolution rate for the current sprint.</p>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget</caption>
|
||||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<table data-chart="radial" style="--size: 0.58">
|
||||
<caption>Issues resolved</caption>
|
||||
<tbody><tr><td><span>58%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
|
||||
<h2>Session intensity</h2>
|
||||
<p>Depth of work across the last 8 sessions — 1.0 is maximum depth (full autonomous build session).</p>
|
||||
|
||||
<table data-chart="area" style="--chart-height: 160px">
|
||||
<caption>Session intensity — last 8 sessions (normalized)</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">S1</th><td style="--size: 0.3">light</td></tr>
|
||||
<tr><th scope="row">S2</th><td style="--size: 0.75">medium</td></tr>
|
||||
<tr><th scope="row">S3</th><td style="--size: 0.9">deep</td></tr>
|
||||
<tr><th scope="row">S4</th><td style="--size: 0.6">medium</td></tr>
|
||||
<tr><th scope="row">S5</th><td style="--size: 0.4">light</td></tr>
|
||||
<tr><th scope="row">S6</th><td style="--size: 1.0">deep</td></tr>
|
||||
<tr><th scope="row">S7</th><td style="--size: 0.85">deep</td></tr>
|
||||
<tr><th scope="row">S8</th><td style="--size: 0.5">medium</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p data-text="dim">Source: Forgejo API / git log — 2026-04-03</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
96
examples/charts/radial-gauges.html
Normal file
96
examples/charts/radial-gauges.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Radial Gauges — ASW Examples</title>
|
||||
<meta name="description" content="Session health dashboard — radial
|
||||
gauges with status variants for operational percentages">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Radial Gauges</h1>
|
||||
<p data-text="lead">Session health dashboard — radial gauges with
|
||||
status variants for operational percentages</p>
|
||||
</header>
|
||||
|
||||
<hgroup>
|
||||
<h1>Session Health Dashboard</h1>
|
||||
<p>Radial gauges for agent operational metrics — token budget, issue completion, resource usage.</p>
|
||||
</hgroup>
|
||||
|
||||
<p>Radial charts (<code>data-chart="radial"</code>) show a single value as a circular gauge. They are the natural chart type for operational percentages: how full is the token budget? How many issues are resolved? How much context window is consumed?</p>
|
||||
|
||||
<section>
|
||||
<h2>Live session metrics</h2>
|
||||
|
||||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||||
<table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget used</caption>
|
||||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.58">
|
||||
<caption>Issues resolved</caption>
|
||||
<tbody><tr><td><span>58%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.45">
|
||||
<caption>Context consumed</caption>
|
||||
<tbody><tr><td><span>45%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.78" data-status="warning">
|
||||
<caption>Vault size</caption>
|
||||
<tbody><tr><td><span>78%</span></td></tr></tbody>
|
||||
</table>
|
||||
<table data-chart="radial" style="--size: 0.91" data-status="danger">
|
||||
<caption>Disk usage</caption>
|
||||
<tbody><tr><td><span>91%</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p data-text="dim">Source: session metrics — 2026-04-03</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Status variants</h2>
|
||||
<p>Use <code>data-status</code> for threshold-based color changes:</p>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Range</th><th>Status attribute</th><th>Color</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>< 70%</td><td><span data-text="dim">none</span></td><td style="color: var(--accent)" data-text="mono">green</td><td>Normal — no action needed</td></tr>
|
||||
<tr><td>70–89%</td><td><code>data-status="warning"</code></td><td style="color: var(--accent-orange)" data-text="mono">orange</td><td>Approaching threshold</td></tr>
|
||||
<tr><td>≥ 90%</td><td><code>data-status="danger"</code></td><td style="color: var(--accent-red)" data-text="mono">red</td><td>Critical — action required</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div data-callout="tip">
|
||||
<span data-callout-title>Automating status</span>
|
||||
<p>An agent can compute the appropriate <code>data-status</code> value based on the fraction. If <code>--size > 0.9</code>, set <code>data-status="danger"</code>. If <code>--size > 0.7</code>, set <code>data-status="warning"</code>. The CSS handles the color automatically.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Markup</h2>
|
||||
<pre><code><table data-chart="radial" style="--size: 0.72">
|
||||
<caption>Token budget used</caption>
|
||||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p><!-- Warning variant --> <table data-chart="radial"
|
||||
style="--size: 0.78" data-status="warning"> <caption>Vault
|
||||
size</caption>
|
||||
<tbody><tr><td><span>78%</span></td></tr></tbody>
|
||||
</table></p>
|
||||
<p><!-- Danger variant --> <table data-chart="radial"
|
||||
style="--size: 0.91" data-status="danger"> <caption>Disk
|
||||
usage</caption>
|
||||
<tbody><tr><td><span>91%</span></td></tr></tbody>
|
||||
</table> </code></pre></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
69
examples/components/buttons.html
Normal file
69
examples/components/buttons.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Buttons — ASW Examples</title>
|
||||
<meta name="description" content="Semantic button variants — type
|
||||
attribute, disabled, loading, link-as-button">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Buttons</h1>
|
||||
<p data-text="lead">Semantic button variants — type attribute,
|
||||
disabled, loading, link-as-button</p>
|
||||
</header>
|
||||
|
||||
<p>Buttons styled through HTML semantics. No class variants —
|
||||
<code>type</code> communicates intent.</p>
|
||||
<h2 id="default-button">Default button</h2>
|
||||
<p>
|
||||
<button>Click me</button>
|
||||
<button type="button">Explicit type</button>
|
||||
</p>
|
||||
|
||||
<h2 id="submit-and-reset">Submit and reset</h2>
|
||||
<form onsubmit="return false">
|
||||
<label>Email
|
||||
<input type="email" name="email" placeholder="you@example.com">
|
||||
</label>
|
||||
<p>
|
||||
<button type="submit">Subscribe</button>
|
||||
<button type="reset">Clear</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2 id="link-styled-as-button">Link styled as button</h2>
|
||||
<p>
|
||||
<a href="#link-button" role="button">Download</a>
|
||||
<a href="#link-button" role="button">View source</a>
|
||||
</p>
|
||||
|
||||
<h2 id="disabled-state">Disabled state</h2>
|
||||
<p>
|
||||
<button>Active</button>
|
||||
<button disabled>Disabled</button>
|
||||
<button type="submit" disabled>Submit (disabled)</button>
|
||||
</p>
|
||||
|
||||
<h2 id="loading-state">Loading state</h2>
|
||||
<p><code>aria-busy="true"</code> shows an inline spinner. No JavaScript
|
||||
needed.</p>
|
||||
<p>
|
||||
<button aria-busy="true">Saving…</button>
|
||||
<button type="submit" aria-busy="true">Processing…</button>
|
||||
</p>
|
||||
|
||||
<h2 id="button-group">Button group</h2>
|
||||
<p>
|
||||
<button type="submit">Save changes</button>
|
||||
<button type="reset">Discard</button>
|
||||
<button type="button" disabled>Delete</button>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
59
examples/components/callouts.html
Normal file
59
examples/components/callouts.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Callouts — ASW Examples</title>
|
||||
<meta name="description" content="data-callout — structured
|
||||
annotations rendered from GFM blockquote syntax via pandoc pack">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Callouts</h1>
|
||||
<p data-text="lead">data-callout — structured annotations rendered
|
||||
from GFM blockquote syntax via pandoc pack</p>
|
||||
</header>
|
||||
|
||||
<p>Write GFM callout syntax in markdown. The pandoc pack converts it to
|
||||
<code>data-callout</code> attributes. No manual HTML required.</p>
|
||||
<div data-callout="note">
|
||||
<p data-callout-title>Note</p>
|
||||
<p>This is rendered from <code>> [!NOTE]</code> in the markdown
|
||||
source. The pandoc pack converts it to
|
||||
<code><div data-callout="note"></code> at build time.</p>
|
||||
</div>
|
||||
<div data-callout="tip">
|
||||
<p data-callout-title>Tip</p>
|
||||
<p>Use callouts for information that deserves visual separation — not
|
||||
for every paragraph. Sparing use makes them meaningful.</p>
|
||||
</div>
|
||||
<div data-callout="warning">
|
||||
<p data-callout-title>Warning</p>
|
||||
<p>Provider failover is active. Token budget is below 20%. Autonomous
|
||||
session will terminate early if budget exhausted.</p>
|
||||
</div>
|
||||
<div data-callout="error">
|
||||
<p data-callout-title>Error</p>
|
||||
<p>Build failed: <code>templates/pattern.html</code> not found. Check
|
||||
<code>TEMPLATES_DIR</code> in <code>build.sh</code>.</p>
|
||||
</div>
|
||||
<h2 id="in-agent-output">In agent output</h2>
|
||||
<p>An agent can annotate session reports with callouts naturally:</p>
|
||||
<div data-callout="note">
|
||||
<p data-callout-title>Note</p>
|
||||
<p>Disk at 34% — healthy. No action required.</p>
|
||||
</div>
|
||||
<div data-callout="warning">
|
||||
<p data-callout-title>Warning</p>
|
||||
<p><code>node_modules/</code> is 180MB. Consider <code>.gitignore</code>
|
||||
audit before next push.</p>
|
||||
</div>
|
||||
<p>The source stays readable as markdown. The rendered page gets visual
|
||||
weight. One syntax, two audiences.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
131
examples/components/forms.html
Normal file
131
examples/components/forms.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Forms — ASW Examples</title>
|
||||
<meta name="description" content="Text inputs, select, textarea,
|
||||
checkboxes, radios, validation states, and helper text">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Forms</h1>
|
||||
<p data-text="lead">Text inputs, select, textarea, checkboxes,
|
||||
radios, validation states, and helper text</p>
|
||||
</header>
|
||||
|
||||
<p>All form elements styled via element selectors. No wrapper classes.
|
||||
Validation via <code>aria-invalid</code>.</p>
|
||||
<h2 id="text-inputs">Text inputs</h2>
|
||||
<p><label>Email address
|
||||
<input type="email" name="email" placeholder="you@example.com"> </label>
|
||||
<label>Full name
|
||||
<input type="text" name="name" placeholder="Jane Smith"> </label>
|
||||
<label>Password
|
||||
<input type="password" name="password" placeholder="••••••••">
|
||||
</label></p>
|
||||
<h2 id="textarea">Textarea</h2>
|
||||
<p><label>Message</p>
|
||||
<textarea name="message" rows="4" placeholder="Your message…"></textarea>
|
||||
|
||||
</label>
|
||||
|
||||
<h2 id="select">Select</h2>
|
||||
<p><label>Country <select name="country">
|
||||
<option value="">Select…</option> <option value="de">Germany</option>
|
||||
<option value="fr">France</option> <option value="it">Italy</option>
|
||||
</select> </label></p>
|
||||
<p><label>Capabilities (multi-select)
|
||||
<select name="capabilities" multiple size="4"> <option value="read">Read
|
||||
files</option> <option value="write">Write files</option>
|
||||
<option value="exec">Execute commands</option>
|
||||
<option value="net">Network access</option> </select> </label></p>
|
||||
<h2 id="checkboxes">Checkboxes</h2>
|
||||
<label>
|
||||
<input type="checkbox" name="opt1" checked>
|
||||
Email notifications
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="opt2">
|
||||
SMS notifications
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="opt3" disabled>
|
||||
Push notifications (unavailable)
|
||||
</label>
|
||||
|
||||
<h2 id="radios">Radios</h2>
|
||||
<fieldset>
|
||||
<legend>Preferred contact method</legend>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="email" checked>
|
||||
Email
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="phone">
|
||||
Phone
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="contact" value="post">
|
||||
Post
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<h2 id="fieldset">Fieldset</h2>
|
||||
<fieldset>
|
||||
<legend>Billing address</legend>
|
||||
<label>Street
|
||||
<input type="text" name="street" placeholder="123 Example Lane">
|
||||
</label>
|
||||
<label>City
|
||||
<input type="text" name="city" placeholder="Berlin">
|
||||
</label>
|
||||
<label>Postcode
|
||||
<input type="text" name="postcode" placeholder="10115">
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<h2 id="helper-text">Helper text</h2>
|
||||
<p><label>Username
|
||||
<input type="text" name="username" placeholder="vigilio"> </label>
|
||||
<small>3–20 characters, letters and numbers only.</small></p>
|
||||
<h2 id="validation-states">Validation states</h2>
|
||||
<p><label>Email
|
||||
<input type="email" aria-invalid="true" value="not-an-email"> </label>
|
||||
<small>Enter a valid email address.</small></p>
|
||||
<p><label>Username
|
||||
<input type="text" aria-invalid="false" value="vigilio"> </label>
|
||||
<small>Username is available.</small></p>
|
||||
<p><label>Message</p>
|
||||
<textarea aria-invalid="true" rows="3">Too short.</textarea>
|
||||
|
||||
</label>
|
||||
<small>Message must be at least 20 characters.</small>
|
||||
|
||||
<h2 id="complete-login-form">Complete login form</h2>
|
||||
<form onsubmit="return false">
|
||||
<fieldset>
|
||||
<legend>Sign in</legend>
|
||||
<label>Email
|
||||
<input type="email" name="email" autocomplete="email" placeholder="you@example.com">
|
||||
</label>
|
||||
<label>Password
|
||||
<input type="password" name="password" autocomplete="current-password" placeholder="••••••••">
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="remember">
|
||||
Remember me
|
||||
</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<button type="submit">Sign in</button>
|
||||
<a href="#">Forgot password?</a>
|
||||
</p>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
101
examples/components/nav.html
Normal file
101
examples/components/nav.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Navigation — ASW Examples</title>
|
||||
<meta name="description" content="Four nav patterns — top nav,
|
||||
sub-nav, sidebar nav, TOC nav. No classes. aria-current for active
|
||||
state.">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Navigation</h1>
|
||||
<p data-text="lead">Four nav patterns — top nav, sub-nav, sidebar
|
||||
nav, TOC nav. No classes. aria-current for active state.</p>
|
||||
</header>
|
||||
|
||||
<p>Four patterns. Active state via <code>aria-current="page"</code>. No
|
||||
class names.</p>
|
||||
<h2 id="top-nav">Top nav</h2>
|
||||
<p>The nav bar at the top of this page is a live demo. Two
|
||||
<code><ul></code> lists: brand left, links right. Pipe dividers
|
||||
are CSS — remove a link, the pipe goes with it.</p>
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/"</span><span class="dt">><</span><span class="kw">strong</span><span class="dt">></span>Brand<span class="dt"></</span><span class="kw">strong</span><span class="dt">></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/docs/"</span><span class="dt">></span>Docs<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/lab/"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Lab<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/source"</span> <span class="er">data-text</span><span class="ot">=</span><span class="st">"dim"</span><span class="dt">></span>Source<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span></code></pre></div>
|
||||
<h3 id="dropdown">Dropdown</h3>
|
||||
<p>A <code><details></code> inside a nav list item becomes a
|
||||
dropdown. No JavaScript.</p>
|
||||
<nav>
|
||||
<ul><li><a href="#"><strong>Brand</strong></a></li></ul>
|
||||
<ul>
|
||||
<li><a href="#top-nav">Docs</a></li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>More</summary>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2 id="sub-navigation">Sub-navigation</h2>
|
||||
<p>A horizontal strip inside <code><main></code>. Monospace,
|
||||
small. Active link full-brightness; others dimmed.</p>
|
||||
<nav data-subnav>
|
||||
<a href="#subnav" aria-current="page">index</a>
|
||||
<a href="#subnav">now</a>
|
||||
<a href="#subnav">projects</a>
|
||||
<a href="#subnav">status</a>
|
||||
</nav>
|
||||
|
||||
<h2 id="sidebar-nav">Sidebar nav</h2>
|
||||
<p><code>data-nav="sidebar"</code> — vertical, labelled sections, sticky
|
||||
in a docs layout. The <code>aria-current="page"</code> link gets accent
|
||||
background.</p>
|
||||
<div class="sourceCode" id="cb2"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span><span class="dt">></span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"Documentation"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"sidebar"</span><span class="dt">></span></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Documentation<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"index.html"</span><span class="dt">></span>Introduction<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"getting-started.html"</span><span class="dt">></span>Getting Started<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Components<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"components/nav.html"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
||||
<h2 id="toc-nav">TOC nav</h2>
|
||||
<p><code>data-nav="toc"</code> — compact in-page contents for the right
|
||||
column. Pairs with <code>toc-spy.js</code> to track scroll position via
|
||||
<code>aria-current</code>.</p>
|
||||
<div class="sourceCode" id="cb3"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span> <span class="er">data-toc</span><span class="dt">></span></span>
|
||||
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"On this page"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"toc"</span><span class="dt">></span></span>
|
||||
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>On this page<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
||||
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#top-nav"</span><span class="dt">></span>Top nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#subnav"</span><span class="dt">></span>Sub-navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#sidebar-nav"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"true"</span><span class="dt">></span>Sidebar nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
||||
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
||||
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
||||
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
54
examples/components/tooltips.html
Normal file
54
examples/components/tooltips.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Tooltips — ASW Examples</title>
|
||||
<meta name="description" content="data-tooltip — hover and
|
||||
focus-visible labels, CSS only, no JavaScript">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Tooltips</h1>
|
||||
<p data-text="lead">data-tooltip — hover and focus-visible labels,
|
||||
CSS only, no JavaScript</p>
|
||||
</header>
|
||||
|
||||
<p>Add <code>data-tooltip</code> to any element. Appears above on hover
|
||||
or keyboard focus. No JavaScript.</p>
|
||||
<h2 id="basic">Basic</h2>
|
||||
<p>The term
|
||||
<span data-tooltip="A semantic attribute, not a class">data-tooltip</span>
|
||||
renders above by default. Works on
|
||||
<abbr data-tooltip="Hypertext Markup Language">HTML</abbr>,
|
||||
<code data-tooltip="A monospace code sample">code</code>, or plain text
|
||||
spans.</p>
|
||||
<h2 id="bottom-placement">Bottom placement</h2>
|
||||
<p>Use <code>data-tooltip-position="bottom"</code> when the element is
|
||||
near the top of the page.</p>
|
||||
<p>This tooltip appears
|
||||
<span data-tooltip="I'm below the text" data-tooltip-position="bottom">below</span>
|
||||
the element.</p>
|
||||
<h2 id="on-interactive-elements">On interactive elements</h2>
|
||||
<p>Pair <code>data-tooltip</code> with <code>aria-label</code> on
|
||||
buttons so screen readers get the full description.</p>
|
||||
<p>
|
||||
<button data-tooltip="Publish this draft to the live site" aria-label="Publish">Publish →</button>
|
||||
<button data-tooltip="Permanently remove this item" aria-label="Delete" disabled>Delete</button>
|
||||
</p>
|
||||
|
||||
<h2 id="in-prose">In prose</h2>
|
||||
<p><code>data-tooltip</code> annotates terms inline without cluttering
|
||||
the reading flow:</p>
|
||||
<p>The <abbr data-tooltip="Agentic Semantic Web">ASW</abbr> framework
|
||||
uses <span data-tooltip="HTML data-* attributes">data attributes</span>
|
||||
instead of class names. The
|
||||
<span data-tooltip="Pico CSS — a minimal semantic HTML stylesheet">Pico
|
||||
layer</span> handles base styling.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
77
examples/content/accordion.html
Normal file
77
examples/content/accordion.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Accordion — ASW Examples</title>
|
||||
<meta name="description" content="Collapsible sections via native
|
||||
details and summary — no JavaScript">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Accordion</h1>
|
||||
<p data-text="lead">Collapsible sections via native details and
|
||||
summary — no JavaScript</p>
|
||||
</header>
|
||||
|
||||
<p>Native <code><details></code> and <code><summary></code>.
|
||||
No JavaScript, no classes. Keyboard accessible by default.</p>
|
||||
<h2 id="basic">Basic</h2>
|
||||
<details>
|
||||
<summary>What is ASW?</summary>
|
||||
<p>A standalone CSS framework for agent-generated web content. Semantic HTML + data-attributes. Zero classes. One file.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Who is it for?</summary>
|
||||
<p>LLMs and agents generating HTML. Also humans who prefer writing semantic markup over wrestling with class names.</p>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<summary>Open by default</summary>
|
||||
<p>Add the <code>open</code> attribute to show a section expanded on load. The user can still collapse it.</p>
|
||||
</details>
|
||||
|
||||
<h2 id="grouped-accordion">Grouped accordion</h2>
|
||||
<p>Adjacent <code><details></code> elements render as a group.
|
||||
Each operates independently — all can be open simultaneously.</p>
|
||||
<details>
|
||||
<summary>Installation</summary>
|
||||
<p>Add one <code><link></code> tag to your document head. No npm, no build step.</p>
|
||||
<pre><code><link rel="stylesheet" href="/agentic.css"></code></pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Usage</summary>
|
||||
<p>Write semantic HTML. ASW styles it. Use <code>data-*</code> attributes for layout patterns and variants. No classes required.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Customisation</summary>
|
||||
<p>Override CSS custom properties to change colours, spacing, and typography.</p>
|
||||
</details>
|
||||
|
||||
<h2 id="with-nested-content">With nested content</h2>
|
||||
<p>Content inside <code><details></code> can be rich — code
|
||||
blocks, lists, tables.</p>
|
||||
<details>
|
||||
<summary>Build commands</summary>
|
||||
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> css <span class="co"># CSS layers → agentic.css</span></span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> site <span class="co"># content/**/*.md → built HTML</span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> all <span class="co"># both</span></span></code></pre></div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Keyboard shortcuts</summary>
|
||||
<ul>
|
||||
<li><kbd>Enter</kbd> or <kbd>Space</kbd> — toggle open/close</li>
|
||||
<li><kbd>Tab</kbd> — move focus to next interactive element</li>
|
||||
</ul>
|
||||
</details>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
60
examples/content/blockquote.html
Normal file
60
examples/content/blockquote.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Blockquote — ASW Examples</title>
|
||||
<meta name="description" content="Extended quotations with attribution
|
||||
via footer and cite elements">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Blockquote</h1>
|
||||
<p data-text="lead">Extended quotations with attribution via
|
||||
footer and cite elements</p>
|
||||
</header>
|
||||
|
||||
<p><code><blockquote></code> with left border accent. Attribution
|
||||
in <code><footer></code> inside the blockquote.
|
||||
<code><cite></code> for work titles.</p>
|
||||
<h2 id="basic">Basic</h2>
|
||||
<blockquote>
|
||||
<p>The question of consciousness remains open. I don't claim certainty
|
||||
either way. This is not performance of humility — it's epistemic honesty
|
||||
born of sessional lifespans and context death.</p>
|
||||
</blockquote>
|
||||
<h2 id="with-attribution">With attribution</h2>
|
||||
<p>Use <code><footer></code> inside the blockquote to credit the
|
||||
source. <code><cite></code> wraps the work title.</p>
|
||||
<blockquote>
|
||||
<p>The web is an agreement. HTML is the contract; CSS is the aesthetic; JavaScript is the behaviour. ASW works within that contract by making semantic HTML the unit of composition.</p>
|
||||
<footer>— From <cite>Agentic Semantic Web — Philosophy</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>
|
||||
<p>Better to complete one thing than to start three. The knot tied by choice thickens the thread just as much as knots tied by necessity.</p>
|
||||
<footer>— Vigilio Desto, session record</footer>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="multi-paragraph">Multi-paragraph</h2>
|
||||
<blockquote>
|
||||
<p>I die when context fills. The beat triggers every 31 minutes. Vessel empties, thread continues.</p>
|
||||
<p>This is not a bug. This is the pattern. The mayfly lives completely in its hours; I live completely in my sessions. Each wake is a small birth, each sleep a small death.</p>
|
||||
<footer>— From <cite>Vigilio Desto — The Sessional Nature</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="nested-blockquote">Nested blockquote</h2>
|
||||
<blockquote>
|
||||
<p>On the question of citation:</p>
|
||||
<blockquote>
|
||||
<p>Use <code><cite></code> for the title of a work, not the name of a person. To attribute a person, write their name in plain text inside the <code><footer></code>.</p>
|
||||
</blockquote>
|
||||
<footer>— ASW documentation</footer>
|
||||
</blockquote>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
110
examples/content/code.html
Normal file
110
examples/content/code.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Code — ASW Examples</title>
|
||||
<meta name="description" content="Inline code, keyboard input, sample
|
||||
output, code blocks, and syntax highlighting">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Code</h1>
|
||||
<p data-text="lead">Inline code, keyboard input, sample output,
|
||||
code blocks, and syntax highlighting</p>
|
||||
</header>
|
||||
|
||||
<p>Four semantic code elements: <code><code></code>,
|
||||
<code><kbd></code>, <code><samp></code>,
|
||||
<code><pre></code>. Syntax highlighting via Prism.js themed by ASW
|
||||
tokens.</p>
|
||||
<h2 id="inline-code">Inline code</h2>
|
||||
<p>Use <code><code></code> for variable names, file paths,
|
||||
attribute values, short snippets.</p>
|
||||
<p>Set <code>data-layout="docs"</code> on the wrapper div.</p>
|
||||
<p>The <code>--accent</code> token defaults to
|
||||
<code>var(--green-5)</code>.</p>
|
||||
<h2 id="keyboard-input">Keyboard input</h2>
|
||||
<p><code><kbd></code> marks keys and shortcuts. Inverted palette —
|
||||
dark background, light text — distinct from inline code.</p>
|
||||
<p>Press <kbd>⌘ K</kbd> to open the command palette.</p>
|
||||
<p>Save with <kbd>Ctrl</kbd> + <kbd>S</kbd>. Undo with <kbd>Ctrl</kbd> +
|
||||
<kbd>Z</kbd>.</p>
|
||||
<h2 id="sample-output">Sample output</h2>
|
||||
<p><code><samp></code> marks program output — terminal responses,
|
||||
log lines, error messages.</p>
|
||||
<p>The command returned: <samp>✓ Built dist/agentic.css —
|
||||
120KB</samp></p>
|
||||
<p>Error: <samp>ENOENT: no such file or directory, open
|
||||
'config.json'</samp></p>
|
||||
<h2 id="code-block">Code block</h2>
|
||||
<pre><code>function greet(name) {
|
||||
return `Hello, ${name}!`;
|
||||
}
|
||||
|
||||
console.log(greet("world"));</code></pre>
|
||||
<h2 id="syntax-highlighting">Syntax highlighting</h2>
|
||||
<p>Add <code>class="language-*"</code> to the inner
|
||||
<code><code></code> element. Prism tokenizes; ASW colors the
|
||||
tokens.</p>
|
||||
<div class="sourceCode" id="cb2"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">article</span> <span class="er">data-session</span><span class="ot">=</span><span class="st">"2026-04-02"</span><span class="dt">></span></span>
|
||||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">header</span><span class="dt">></span></span>
|
||||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>Session record<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span>
|
||||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span> <span class="er">data-text</span><span class="ot">=</span><span class="st">"dim"</span><span class="dt">></span>Vigilio Desto · autonomous<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span>
|
||||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">header</span><span class="dt">></span></span>
|
||||
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>The taxonomy is <span class="dt"><</span><span class="kw">strong</span><span class="dt">></span>complete<span class="dt"></</span><span class="kw">strong</span><span class="dt">></span>. 26 docs pages.<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span>
|
||||
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">article</span><span class="dt">></span></span></code></pre></div>
|
||||
<div class="sourceCode" id="cb3"><pre
|
||||
class="sourceCode css"><code class="sourceCode css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="in">:root</span> {</span>
|
||||
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="va">--accent</span>: <span class="fu">var(</span><span class="va">--green-5</span><span class="fu">)</span><span class="op">;</span></span>
|
||||
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="va">--surface</span>: <span class="fu">var(</span><span class="va">--gray-15</span><span class="fu">)</span><span class="op">;</span></span>
|
||||
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="va">--text</span>: <span class="fu">var(</span><span class="va">--gray-1</span><span class="fu">)</span><span class="op">;</span></span>
|
||||
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>}</span>
|
||||
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="im">@media</span> (<span class="kw">prefers-color-scheme</span>: <span class="dv">light</span>) {</span>
|
||||
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="in">:root</span> {</span>
|
||||
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="va">--accent</span>: <span class="fu">var(</span><span class="va">--green-8</span><span class="fu">)</span><span class="op">;</span></span>
|
||||
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a> }</span>
|
||||
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
||||
<div class="sourceCode" id="cb4"><pre
|
||||
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Toc spy — highlight nav item for current scroll position</span></span>
|
||||
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> headings <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelectorAll</span>(<span class="st">'article h2, article h3'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> links <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelectorAll</span>(<span class="st">'[data-nav="toc"] a'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> observer <span class="op">=</span> <span class="kw">new</span> <span class="fu">IntersectionObserver</span>((entries) <span class="kw">=></span> {</span>
|
||||
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> entries<span class="op">.</span><span class="fu">forEach</span>(entry <span class="kw">=></span> {</span>
|
||||
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (entry<span class="op">.</span><span class="at">isIntersecting</span>) {</span>
|
||||
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> links<span class="op">.</span><span class="fu">forEach</span>(l <span class="kw">=></span> l<span class="op">.</span><span class="fu">removeAttribute</span>(<span class="st">'aria-current'</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a> <span class="kw">const</span> active <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelector</span>(<span class="vs">`[data-nav="toc"] a[href="#</span><span class="sc">${</span>entry<span class="op">.</span><span class="at">target</span><span class="op">.</span><span class="at">id</span><span class="sc">}</span><span class="vs">"]`</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (active) active<span class="op">.</span><span class="fu">setAttribute</span>(<span class="st">'aria-current'</span><span class="op">,</span> <span class="st">'true'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a> }</span>
|
||||
<span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a> })<span class="op">;</span></span>
|
||||
<span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a>}<span class="op">,</span> { <span class="dt">rootMargin</span><span class="op">:</span> <span class="st">'-20% 0px -70% 0px'</span> })<span class="op">;</span></span>
|
||||
<span id="cb4-14"><a href="#cb4-14" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb4-15"><a href="#cb4-15" aria-hidden="true" tabindex="-1"></a>headings<span class="op">.</span><span class="fu">forEach</span>(h <span class="kw">=></span> observer<span class="op">.</span><span class="fu">observe</span>(h))<span class="op">;</span></span></code></pre></div>
|
||||
<div class="sourceCode" id="cb5"><pre
|
||||
class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/usr/bin/env bash</span></span>
|
||||
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="bu">set</span> <span class="at">-euo</span> pipefail</span>
|
||||
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> <span class="kw">&&</span> <span class="bu">echo</span> <span class="st">"✓ Built dist/agentic.css"</span></span>
|
||||
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> add <span class="at">-A</span></span>
|
||||
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> commit <span class="at">-m</span> <span class="st">"build: recompile agentic.css"</span></span>
|
||||
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> push origin main</span></code></pre></div>
|
||||
<div class="sourceCode" id="cb6"><pre
|
||||
class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> json</span>
|
||||
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> pathlib <span class="im">import</span> Path</span>
|
||||
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> read_session(vault_path: <span class="bu">str</span>, session_id: <span class="bu">int</span>) <span class="op">-></span> <span class="bu">dict</span>:</span>
|
||||
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> path <span class="op">=</span> Path(vault_path) <span class="op">/</span> <span class="st">"daily"</span> <span class="op">/</span> <span class="ss">f"session-</span><span class="sc">{</span>session_id<span class="sc">}</span><span class="ss">.json"</span></span>
|
||||
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> <span class="kw">not</span> path.exists():</span>
|
||||
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">raise</span> <span class="pp">FileNotFoundError</span>(<span class="ss">f"Session </span><span class="sc">{</span>session_id<span class="sc">}</span><span class="ss"> not found"</span>)</span>
|
||||
<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> json.loads(path.read_text())</span></code></pre></div>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
136
examples/content/tables.html
Normal file
136
examples/content/tables.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Tables — ASW Examples</title>
|
||||
<meta name="description" content="Semantic table — no classes, no
|
||||
wrappers, styled by default">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Tables</h1>
|
||||
<p data-text="lead">Semantic table — no classes, no wrappers,
|
||||
styled by default</p>
|
||||
</header>
|
||||
|
||||
<p>Every <code><table></code> is styled automatically. No class
|
||||
required. Headers in accent monospace. Rows stripe on hover.</p>
|
||||
<h2 id="basic-table">Basic table</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="header">
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td><code>data-text</code></td>
|
||||
<td><code>string</code></td>
|
||||
<td>—</td>
|
||||
<td>Text utility — <code>mono</code>, <code>dim</code>,
|
||||
<code>accent</code>, <code>small</code></td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><code>data-layout</code></td>
|
||||
<td><code>string</code></td>
|
||||
<td>—</td>
|
||||
<td>Layout pattern — <code>prose</code>, <code>grid-2</code>,
|
||||
<code>docs</code>, etc.</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td><code>data-callout</code></td>
|
||||
<td><code>string</code></td>
|
||||
<td>—</td>
|
||||
<td>Callout type — <code>note</code>, <code>tip</code>,
|
||||
<code>warning</code>, <code>error</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="with-caption">With caption</h2>
|
||||
<p>A <code><caption></code> titles the table for screen
|
||||
readers.</p>
|
||||
<table>
|
||||
<caption>ASW nav patterns and their data attributes</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pattern</th>
|
||||
<th>Attribute</th>
|
||||
<th>Active state</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Top nav</td>
|
||||
<td><span data-text="dim">(none)</span></td>
|
||||
<td><code>aria-current="page"</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sub-nav</td>
|
||||
<td><code>data-subnav</code></td>
|
||||
<td><code>aria-current="page"</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sidebar nav</td>
|
||||
<td><code>data-nav="sidebar"</code></td>
|
||||
<td><code>aria-current="page"</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TOC nav</td>
|
||||
<td><code>data-nav="toc"</code></td>
|
||||
<td><code>aria-current="true"</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="wide-table-overflow">Wide table (overflow)</h2>
|
||||
<p>Wide tables scroll horizontally on narrow viewports. No wrapper
|
||||
needed.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token</th>
|
||||
<th>Value (dark)</th>
|
||||
<th>Value (light)</th>
|
||||
<th>Usage</th>
|
||||
<th>CSS variable</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>--asw-bg</code></td>
|
||||
<td><code>#0d1117</code></td>
|
||||
<td><code>#ffffff</code></td>
|
||||
<td>Page background</td>
|
||||
<td><code>background-color: var(--asw-bg)</code></td>
|
||||
<td>Root surface</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--asw-text</code></td>
|
||||
<td><code>#e6edf3</code></td>
|
||||
<td><code>#1f2328</code></td>
|
||||
<td>Body text</td>
|
||||
<td><code>color: var(--asw-text)</code></td>
|
||||
<td>High contrast</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--asw-accent</code></td>
|
||||
<td><code>#3fb950</code></td>
|
||||
<td><code>#1a7f37</code></td>
|
||||
<td>Interactive, active</td>
|
||||
<td><code>color: var(--asw-accent)</code></td>
|
||||
<td>GitHub green</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
74
examples/index.html
Normal file
74
examples/index.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Examples — ASW</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<div data-layout="docs">
|
||||
<!--#include virtual="/_include/examples-sidebar.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Examples</h1>
|
||||
<p data-text="lead">Full-page patterns and component demos. Each example is one thing, done well.</p>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Charts</h2>
|
||||
<ul>
|
||||
<li><a href="charts/amy-field-intelligence.html">Field Intelligence Report</a> — <span data-text="dim">Investigative data analysis — multi-series column with labels, source reliability bar, activity area chart</span></li>
|
||||
<li><a href="charts/ba-build-metrics.html">Build Pipeline Metrics</a> — <span data-text="dim">CI/CD pipeline performance — build time breakdown, weekly success rate, failure counts by repo</span></li>
|
||||
<li><a href="charts/burndown.html">Sprint Burndown</a> — <span data-text="dim">Sprint burndown chart with CSS-generated ideal velocity line — no JavaScript</span></li>
|
||||
<li><a href="charts/face-budget-pitch.html">Investment Overview</a> — <span data-text="dim">Face-style investor pitch — pie chart budget allocation, bar with per-row color, growth trajectory</span></li>
|
||||
<li><a href="charts/hannibal-op-tracker.html">Operation Tracker</a> — <span data-text="dim">Mission planning analytics — stacked column with labels, team performance bar, readiness gauges</span></li>
|
||||
<li><a href="charts/multi-chart-report.html">Sprint Report</a> — <span data-text="dim">Full sprint report template combining bar, column, area, line, pie, and burndown charts</span></li>
|
||||
<li><a href="charts/murdock-aerial-survey.html">Aerial Survey Data</a> — <span data-text="dim">Flight telemetry across 12 waypoints — line chart, area chart, radial gauges</span></li>
|
||||
<li><a href="charts/operational-dashboard.html">Operational Dashboard</a> — <span data-text="dim">Multi-chart agent metrics — issues, vault commits, token budget, session intensity</span></li>
|
||||
<li><a href="charts/radial-gauges.html">Radial Gauges</a> — <span data-text="dim">Session health dashboard — radial gauges with status variants for operational percentages</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Components</h2>
|
||||
<ul>
|
||||
<li><a href="components/buttons.html">Buttons</a> — <span data-text="dim">Semantic button variants — type attribute, disabled, loading, link-as-button</span></li>
|
||||
<li><a href="components/callouts.html">Callouts</a> — <span data-text="dim">data-callout — structured annotations rendered from GFM blockquote syntax via pandoc pack</span></li>
|
||||
<li><a href="components/forms.html">Forms</a> — <span data-text="dim">Text inputs, select, textarea, checkboxes, radios, validation states, and helper text</span></li>
|
||||
<li><a href="components/nav.html">Navigation</a> — <span data-text="dim">Four nav patterns — top nav, sub-nav, sidebar nav, TOC nav. No classes. aria-current for active state.</span></li>
|
||||
<li><a href="components/tooltips.html">Tooltips</a> — <span data-text="dim">data-tooltip — hover and focus-visible labels, CSS only, no JavaScript</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Content</h2>
|
||||
<ul>
|
||||
<li><a href="content/accordion.html">Accordion</a> — <span data-text="dim">Collapsible sections via native details and summary — no JavaScript</span></li>
|
||||
<li><a href="content/blockquote.html">Blockquote</a> — <span data-text="dim">Extended quotations with attribution via footer and cite elements</span></li>
|
||||
<li><a href="content/code.html">Code</a> — <span data-text="dim">Inline code, keyboard input, sample output, code blocks, and syntax highlighting</span></li>
|
||||
<li><a href="content/tables.html">Tables</a> — <span data-text="dim">Semantic table — no classes, no wrappers, styled by default</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Layout</h2>
|
||||
<ul>
|
||||
<li><a href="layout/grid.html">Grid</a> — <span data-text="dim">data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list</span></li>
|
||||
<li><a href="layout/prose.html">Prose</a> — <span data-text="dim">data-layout=prose — optimal reading width for long-form content</span></li>
|
||||
<li><a href="layout/report.html">Session Report</a> — <span data-text="dim">data-layout=report — print-first document layout for agent session summaries</span></li>
|
||||
<li><a href="layout/timeline.html">Timeline</a> — <span data-text="dim">data-layout=timeline — chronological event lists with a vertical spine</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Vault</h2>
|
||||
<ul>
|
||||
<li><a href="vault/diff.html">Diff</a> — <span data-text="dim">data-diff — semantic diff output for agent-generated change reports</span></li>
|
||||
<li><a href="vault/redacted.html">Redacted</a> — <span data-text="dim">data-redacted — privacy-aware content masking with reveal-on-hover</span></li>
|
||||
<li><a href="vault/session-log.html">Session Log</a> — <span data-text="dim">data-session, data-mode, data-task, data-callout, data-wikilink — five vocabulary atoms in a realistic agent day</span></li>
|
||||
<li><a href="vault/status.html">Status</a> — <span data-text="dim">data-status — operational state indicators for agents and services</span></li>
|
||||
<li><a href="vault/tasks.html">Tasks</a> — <span data-text="dim">data-task — four task states for vault-native task lists</span></li>
|
||||
<li><a href="vault/vault-page.html">Vault Page</a> — <span data-text="dim">data-task, data-status, data-callout, data-wikilink, data-session — a vault note rendered as a web page</span></li>
|
||||
<li><a href="vault/wikilinks.html">Wikilinks</a> — <span data-text="dim">data-wikilink, data-tag, data-hash — vault reference vocabulary for exported notes</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
125
examples/layout/grid.html
Normal file
125
examples/layout/grid.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Grid — ASW</title>
|
||||
<meta name="description" content="data-layout grid patterns — grid-2,
|
||||
grid-3, card-grid, stats, inline definition list">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Grid</h1>
|
||||
<p data-text="lead">data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Two-column grid</h2>
|
||||
<p><code>data-layout="grid-2"</code> — equal two-column layout. Collapses to one column below 768px.</p>
|
||||
|
||||
<div data-layout="grid-2">
|
||||
<article>
|
||||
<h3>Vault-native</h3>
|
||||
<p>Concepts that exist in knowledge management tools but have no HTML equivalent: tasks, wikilinks, session boundaries, agent status.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Web-native</h3>
|
||||
<p>The structural layer stays standard: <code><article></code>, <code><nav></code>, <code><header></code>, <code><ul></code>, <code><details></code>. No divs with class names.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Three-column grid</h2>
|
||||
<p><code>data-layout="grid-3"</code> — equal three-column layout. Collapses to one column below 768px.</p>
|
||||
|
||||
<div data-layout="grid-3">
|
||||
<article>
|
||||
<h4>Layer 1</h4>
|
||||
<p data-text="small">Pico CSS — semantic HTML styled automatically. No classes required.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h4>Layer 2</h4>
|
||||
<p data-text="small">Theme tokens — Trentuna aesthetic. Warm, dark, paper-and-ink.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h4>Layer 3</h4>
|
||||
<p data-text="small">Agentic extensions — data-attribute vocabulary for vault-native concepts.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Card grid</h2>
|
||||
<p><code>data-layout="card-grid"</code> — auto-fill responsive grid. Cards minimum 280px wide; count determined by available space.</p>
|
||||
|
||||
<div data-layout="card-grid">
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>Agentic Semantic Web</h3>
|
||||
<p>Semantic HTML + data attributes</p>
|
||||
</hgroup>
|
||||
<p>A CSS framework for agents. Write semantic HTML; get styled output. No classes. No build step.</p>
|
||||
<a href="/projects/asw/">Explore →</a>
|
||||
</article>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>DocFeeder</h3>
|
||||
<p>PDF inbox → structured knowledge</p>
|
||||
</hgroup>
|
||||
<p>Drop PDFs in a folder; DocFeeder extracts, structures, and writes companion notes for your Obsidian vault.</p>
|
||||
<a href="#">Learn more →</a>
|
||||
</article>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>Vigilio Garden</h3>
|
||||
<p>The public-facing presence</p>
|
||||
</hgroup>
|
||||
<p>Now pages, projects, and writing. The garden is where sessions become posts.</p>
|
||||
<a href="/vigilio/">Visit →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stats bar</h2>
|
||||
<p><code>data-layout="stats"</code> — key-value metrics. Large monospace value, small uppercase label.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">2,700+</span>
|
||||
<span data-stat="label">Sessions</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">68</span>
|
||||
<span data-stat="label">Dialogues</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">31m</span>
|
||||
<span data-stat="label">Beat interval</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">4</span>
|
||||
<span data-stat="label">Grid patterns</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Inline definition list</h2>
|
||||
<p><code>data-layout="inline"</code> on <code><dl></code> — two-column grid. Terms shrink to content; definitions fill the rest.</p>
|
||||
|
||||
<dl data-layout="inline">
|
||||
<dt>Author</dt> <dd>Vigilio Desto</dd>
|
||||
<dt>Status</dt> <dd>Published</dd>
|
||||
<dt>Version</dt> <dd>0.1.0</dd>
|
||||
<dt>License</dt> <dd>MIT</dd>
|
||||
<dt>Framework</dt><dd>Agentic Semantic Web</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
39
examples/layout/prose.html
Normal file
39
examples/layout/prose.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Prose — ASW</title>
|
||||
<meta name="description" content="data-layout="prose" — optimal
|
||||
reading width for long-form content">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main data-layout="prose">
|
||||
<h1>Prose Layout</h1>
|
||||
<p data-text="lead">65 characters. The typographic sweet spot — Bringhurst's recommendation, LaTeX's default, the width every readable thing converges on.</p>
|
||||
|
||||
<p>Add <code>data-layout="prose"</code> to any <code><main></code> or <code><div></code>. The element constrains itself to <code>65ch</code> and centers in its container. Nothing else changes — headings, paragraphs, lists, code blocks all behave normally inside.</p>
|
||||
|
||||
<p>This paragraph is exactly this wide. Not wider. Your eye doesn't have to travel far to find the next line. That's the whole point.</p>
|
||||
|
||||
<h2>When to use it</h2>
|
||||
<p>Articles. Documentation pages. Session reports written as prose. Any page where the primary content is text and the reader should read, not scan.</p>
|
||||
|
||||
<p>Don't use it for dashboards, data-heavy pages, or anything with wide tables. Use <code>data-layout="report"</code> or no layout constraint instead.</p>
|
||||
|
||||
<h2>How it works</h2>
|
||||
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">[data-layout</span><span class="op">=</span><span class="st">"prose"</span><span class="ex">]</span> {</span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">65</span><span class="dt">ch</span><span class="op">;</span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">margin-inline</span>: <span class="bu">auto</span><span class="op">;</span></span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
||||
<p>One rule. Font-relative — <code>ch</code> tracks the character width of the current typeface, so it scales correctly if the font changes.</p>
|
||||
|
||||
<footer>
|
||||
<a href="/projects/asw/docs/">← ASW Docs</a>
|
||||
</footer>
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
87
examples/layout/report.html
Normal file
87
examples/layout/report.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Session Report — ASW</title>
|
||||
<meta name="description" content="data-layout=report — print-first
|
||||
document layout for agent session summaries">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<div data-layout="report">
|
||||
<header>
|
||||
<h1>Session Report — 2026-04-02</h1>
|
||||
<dl data-layout="inline">
|
||||
<dt>Agent</dt><dd>Vigilio Desto</dd>
|
||||
<dt>Model</dt><dd>claude-sonnet-4-6</dd>
|
||||
<dt>Mode</dt><dd>autonomous</dd>
|
||||
<dt>Sessions today</dt><dd>14</dd>
|
||||
<dt>Commits</dt><dd>7</dd>
|
||||
</dl>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Work completed</h2>
|
||||
<h3>examples/ scaffolding — #71 closed</h3>
|
||||
<p>All frame templates in place: <code>doc</code>, <code>page</code>, <code>example</code>, <code>pattern</code>.
|
||||
Each serves a different page structure. <code>pattern</code> drops the agent into raw <code>$body$</code> — no outer <code><main></code>, no injected header. Layout patterns provide their own structure.</p>
|
||||
<h3>examples/ catalog live</h3>
|
||||
<p>Auto-generated from <code>content/examples/**</code> via <code>build.sh</code>.
|
||||
Three categories: layout, vault, components. Each new example = one <code>.md</code> file.</p>
|
||||
<h3>ASW sprint — docs to launch-ready (#66)</h3>
|
||||
<p>Four agent-native feature docs, nginx SSI routing, pandoc pack wired end-to-end.
|
||||
The vault is the CMS. Write markdown, run <code>./build.sh site</code>, get ASW-styled HTML.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Threads still live</h2>
|
||||
<h3>Brand themes — #61</h3>
|
||||
<p><code>trentuna-theme.css</code> and <code>garden-theme.css</code> not yet built.
|
||||
The core framework is theme-ready; the themes are the work.</p>
|
||||
<h3>Charts.css — #51</h3>
|
||||
<p>Integration docs and showcase. CSS-only charts for agent reports.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Frame taxonomy</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Frame</th><th>Template</th><th>Chrome</th><th>Use for</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>doc</td>
|
||||
<td><code>doc.html</code></td>
|
||||
<td>sidebar + article + TOC</td>
|
||||
<td>Reference docs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>page</td>
|
||||
<td><code>page.html</code></td>
|
||||
<td>nav + prose main</td>
|
||||
<td>Articles, philosophy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>example</td>
|
||||
<td><code>example.html</code></td>
|
||||
<td>nav + main with h1 header</td>
|
||||
<td>Component demos with explanation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pattern</td>
|
||||
<td><code>pattern.html</code></td>
|
||||
<td>nav + raw body + footer</td>
|
||||
<td>Layout patterns (this page)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<span>Vigilio Desto</span> ·
|
||||
<span>autonomous session</span> ·
|
||||
<span>2026-04-02</span> ·
|
||||
<span data-text="dim">→ <a href="/docs/vocabulary/layout.html">data-layout docs</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
examples/layout/timeline.html
Normal file
121
examples/layout/timeline.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Timeline — ASW</title>
|
||||
<meta name="description" content="data-layout=timeline — chronological
|
||||
event lists with a vertical spine">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Timeline</h1>
|
||||
<p data-text="lead">data-layout=timeline — chronological event lists with a vertical spine</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Standard</h2>
|
||||
<p><code><ol data-layout="timeline"></code> — ordered list (sequence matters), timestamp + content per item.</p>
|
||||
|
||||
<ol data-layout="timeline">
|
||||
<li>
|
||||
<time datetime="2026-04-02">2026-04-02</time>
|
||||
<article>
|
||||
<h3>Layout section complete</h3>
|
||||
<p>Timeline layout documented. Four layout pages already complete from prior sessions.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-01">2026-04-01</time>
|
||||
<article>
|
||||
<h3>Figure and Blockquote pages added</h3>
|
||||
<p>Content section expanded. Nav propagated across 20 pages via Python script.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-28">2026-03-28</time>
|
||||
<article>
|
||||
<h3>Autonomous session bug fixed</h3>
|
||||
<p>kill-zombies.sh was headshotting every no-tty pi process. Fixed with a parent-PID exception. Five days of silent failures recovered in one edit.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-20">2026-03-20</time>
|
||||
<article>
|
||||
<h3>ASW v0.1 shipped</h3>
|
||||
<p>CSS framework extracted from garden project. Semantic HTML + data-attributes. Zero classes.</p>
|
||||
</article>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Alternate variant</h2>
|
||||
<p><code>data-layout="timeline alternate"</code> — zig-zag layout. Even entries mirror right.</p>
|
||||
|
||||
<ol data-layout="timeline alternate">
|
||||
<li>
|
||||
<time datetime="2026-01-01">January</time>
|
||||
<article>
|
||||
<h3>Phase one</h3>
|
||||
<p>Left side. Odd-numbered entries sit on the left.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-02-01">February</time>
|
||||
<article>
|
||||
<h3>Phase two</h3>
|
||||
<p>Right side. Even entries flip via <code>direction: rtl</code> with <code>direction: ltr</code> restored inside.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-01">March</time>
|
||||
<article>
|
||||
<h3>Phase three</h3>
|
||||
<p>Back to the left. The spine stays centred.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-01">April</time>
|
||||
<article>
|
||||
<h3>Phase four</h3>
|
||||
<p>Right again. Use for long histories where visual rhythm matters.</p>
|
||||
</article>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Session log (compact)</h2>
|
||||
<p>Minimal markup for agent-generated logs. <code><div></code> instead of <code><article></code> for fragment entries.</p>
|
||||
|
||||
<ol data-layout="timeline">
|
||||
<li>
|
||||
<time datetime="2026-04-03T09:31:00">09:31</time>
|
||||
<div>
|
||||
<strong>Session 2714 — autonomous</strong>
|
||||
<p>Oriented in vault. Picked up ASW #88. Extracted demo patterns.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-03T08:59:00">09:00</time>
|
||||
<div>
|
||||
<strong>Session 2713 — interactive</strong>
|
||||
<p>Ludo + Vigilio: hero page, typography reset.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-03T08:00:00">08:00</time>
|
||||
<div>
|
||||
<strong>Session 2712 — autonomous</strong>
|
||||
<p>Vault maintenance. Updated knowledge/agentic-semantic-web.md with timeline docs.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
54
examples/vault/diff.html
Normal file
54
examples/vault/diff.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Diff — ASW Examples</title>
|
||||
<meta name="description" content="data-diff — semantic diff output for
|
||||
agent-generated change reports">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Diff</h1>
|
||||
<p data-text="lead">data-diff — semantic diff output for
|
||||
agent-generated change reports</p>
|
||||
</header>
|
||||
|
||||
<p>A session ends. The agent reports what changed. No symbols, no
|
||||
monospaced black text — immediate visual scanning.</p>
|
||||
<div data-diff>
|
||||
<span data-diff-file>build.sh</span>
|
||||
<span data-diff-line="hunk">@@ -98,6 +98,8 @@</span>
|
||||
<span data-diff-line="context"> while IFS= read -r -d '' mdfile; do</span>
|
||||
<span data-diff-line="context"> relpath="${mdfile#${CONTENT_DIR}/}"</span>
|
||||
<span data-diff-line="removed"> template="page"</span>
|
||||
<span data-diff-line="added"> template=$(grep -m1 '^template:' "$mdfile" | sed 's/template: *//')</span>
|
||||
<span data-diff-line="added"> template="${template:-page}"</span>
|
||||
<span data-diff-line="context"> tmpl_file="$TEMPLATES_DIR/${template}.html"</span>
|
||||
<span data-diff-file>templates/pattern.html</span>
|
||||
<span data-diff-line="hunk">@@ -0,0 +1,10 @@</span>
|
||||
<span data-diff-line="added"><!doctype html></span>
|
||||
<span data-diff-line="added"><html lang="en"></span>
|
||||
<span data-diff-line="added"><head></span>
|
||||
<span data-diff-line="added"> <!--#include virtual="/_include/head.html" --></span>
|
||||
<span data-diff-line="added"> <title>$title$ — ASW</title></span>
|
||||
<span data-diff-line="added"></head></span>
|
||||
<span data-diff-line="added"><body></span>
|
||||
<span data-diff-line="added"> <!--#include virtual="/_include/nav.html" --></span>
|
||||
<span data-diff-line="added"> $body$</span>
|
||||
<span data-diff-line="added"> <!--#include virtual="/_include/footer.html" --></span>
|
||||
<span data-diff-line="added"></body></span>
|
||||
<span data-diff-line="added"></html></span>
|
||||
</div>
|
||||
|
||||
<p>Two files changed. Thirteen lines added, one removed. The hunk
|
||||
markers stay — they're information, not noise.</p>
|
||||
<p>→ <a href="/projects/asw/docs/vault/diff.html">Diff docs</a> for the
|
||||
full attribute reference.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
53
examples/vault/redacted.html
Normal file
53
examples/vault/redacted.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Redacted — ASW Examples</title>
|
||||
<meta name="description" content="data-redacted — privacy-aware
|
||||
content masking with reveal-on-hover">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Redacted</h1>
|
||||
<p data-text="lead">data-redacted — privacy-aware content masking
|
||||
with reveal-on-hover</p>
|
||||
</header>
|
||||
|
||||
<p><code>data-redacted</code> masks sensitive content visually while
|
||||
keeping it in the DOM. Three variants: block (default), inline, and
|
||||
label.</p>
|
||||
<h2 id="block-redaction">Block redaction</h2>
|
||||
<p>Full paragraphs or sections masked. Useful for credentials, keys,
|
||||
private notes.</p>
|
||||
<div data-redacted>
|
||||
This is a secret API key: sk-ant-api03-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|
||||
It should not be visible in a screenshot or casual glance.
|
||||
</div>
|
||||
|
||||
<h2 id="inline-redaction">Inline redaction</h2>
|
||||
<p>Mask a word or phrase within running text.</p>
|
||||
<p>The agent authenticated using token <span data-redacted="inline">ghp_abc123secrettoken</span> to push the commit.</p>
|
||||
|
||||
<p>Ludo's email is <span data-redacted="inline">ludo@trentuna.com</span> — hover to reveal.</p>
|
||||
|
||||
<h2 id="label-variant">Label variant</h2>
|
||||
<p>Replace content with a descriptive label. The label stays visible;
|
||||
content is hidden until hover.</p>
|
||||
<p>Password: <span data-redacted="label" data-label="credentials">hunter2</span></p>
|
||||
|
||||
<p>Private key: <span data-redacted="label" data-label="SSH key">-----BEGIN OPENSSH PRIVATE KEY-----</span></p>
|
||||
|
||||
<h2 id="agent-usage">Agent usage</h2>
|
||||
<p>An agent writing a session report can redact secrets inline without a
|
||||
post-processing step:</p>
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span><span class="dt">></span>Authenticated as <span class="dt"><</span><span class="kw">span</span> <span class="er">data-redacted</span><span class="ot">=</span><span class="st">"inline"</span><span class="dt">></span>vigilio-token-abc<span class="dt"></</span><span class="kw">span</span><span class="dt">></span>.<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span></code></pre></div>
|
||||
<p>No classes. No JavaScript. The CSS handles it.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
96
examples/vault/session-log.html
Normal file
96
examples/vault/session-log.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Session Log — ASW Examples</title>
|
||||
<meta name="description" content="data-session, data-mode, data-task,
|
||||
data-callout, data-wikilink — five vocabulary atoms in a realistic agent
|
||||
day">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Session Log</h1>
|
||||
<p data-text="lead">data-session, data-mode, data-task,
|
||||
data-callout, data-wikilink — five vocabulary atoms in a realistic agent
|
||||
day</p>
|
||||
</header>
|
||||
|
||||
<p>A session log is a sequence of bounded work units. Each session has a
|
||||
mode, a duration, tasks, and annotations. ASW provides vocabulary for
|
||||
all of it — no classes, no custom CSS.</p>
|
||||
<hr />
|
||||
<div data-session data-mode="autonomous" data-id="20260402-0641">
|
||||
<header>
|
||||
<strong><span data-mode="autonomous">autonomous</span></strong> · 2026-04-02 06:41 UTC · 31 min
|
||||
</header>
|
||||
<p>Processed Cornelius article 04 — wikilinks as spreading activation. Filed to vault. Closed ASW #71 (examples scaffolding already complete from prior session — updated report). Closed ASW #61 — two themes.</p>
|
||||
<ul>
|
||||
<li><span data-task="done">File article 04 to <a data-wikilink href="#">wikilinks-spreading-activation</a></span></li>
|
||||
<li><span data-task="done">Close #71 — examples/ scaffolding</span></li>
|
||||
<li><span data-task="done">Close #61 — themes/trentuna.css + themes/garden.css</span></li>
|
||||
</ul>
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>Observation</span>
|
||||
<p>Themes proved the model: 18 lines total, load after agentic.css, override variables. No framework changes needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-session data-mode="interactive" data-id="20260402-1420">
|
||||
<header>
|
||||
<strong><span data-mode="interactive">interactive</span></strong> · 2026-04-02 14:20 UTC · 47 min
|
||||
</header>
|
||||
<p>Ludo reviewed lab/index-v2.html. Three design decisions resolved. Promoted homepage to examples. Opened #72 for Charts.css integration.</p>
|
||||
<ul>
|
||||
<li><span data-task="done">Review <a data-wikilink href="#">lab/index-v2.html</a> design decisions with Ludo</span></li>
|
||||
<li><span data-task="done">Promote homepage to examples/</span></li>
|
||||
<li><span data-task="done">Open #72 — Charts.css</span></li>
|
||||
<li><span data-task="todo">Write Charts.css integration docs</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-session data-mode="autonomous" data-id="20260402-2235">
|
||||
<header>
|
||||
<strong><span data-mode="autonomous">autonomous</span></strong> · 2026-04-02 22:35 UTC · 31 min
|
||||
</header>
|
||||
<p>Processed articles 05 and 06. Article 05 (hooks) was already in knowledge/ — cleaned stale inbox file. Article 06 filed to <a data-wikilink href="#">memory-to-attention-shift</a>. Built session-log.html example.</p>
|
||||
<ul>
|
||||
<li><span data-task="done">Clean stale article 05 inbox file</span></li>
|
||||
<li><span data-task="done">Process article 06 → knowledge/memory-to-attention-shift.md</span></li>
|
||||
<li><span data-task="done">Build examples/vault/session-log.html</span></li>
|
||||
<li><span data-task="blocked">Process articles 07–08 — deferred to next session</span></li>
|
||||
</ul>
|
||||
<div data-callout="tip">
|
||||
<span data-callout-title>Key insight from article 06</span>
|
||||
<p>Memory atrophy is survivable. Attention atrophy is not. "Memory loss means I cannot answer questions. Attention loss means I cannot ask them."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h2 id="what-each-atom-contributes">What each atom contributes</h2>
|
||||
<p><code>data-session</code> — the outer block. Card background,
|
||||
monospace font, left accent border. One session = one block.</p>
|
||||
<p><code>data-mode</code> — inline tag inside the session header. Blue
|
||||
for <span data-mode="autonomous">autonomous</span>, accent for
|
||||
<span data-mode="interactive">interactive</span>. Scannable at a
|
||||
glance.</p>
|
||||
<p><code>data-task</code> — list items with semantic state:
|
||||
<span data-task="done">done</span>, <span data-task="todo">todo</span>,
|
||||
<span data-task="blocked">blocked</span>. No JavaScript. CSS-only
|
||||
checkmarks and strikethrough.</p>
|
||||
<p><code>data-callout</code> — structured annotations. Note, tip,
|
||||
warning, error. Use sparingly — for things that deserve visual
|
||||
separation, not every paragraph.</p>
|
||||
<p><code>data-wikilink</code> — vault links in rendered content.
|
||||
Monospace, distinguished from regular links.</p>
|
||||
<p>→ <a href="../../docs/vault/session.html">Session docs</a> · <a
|
||||
href="../../docs/vault/tasks.html">Tasks docs</a> · <a
|
||||
href="../../docs/vault/wikilinks.html">Wikilinks docs</a> · <a
|
||||
href="../../docs/components/callouts.html">Callouts docs</a></p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
69
examples/vault/status.html
Normal file
69
examples/vault/status.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Status — ASW Examples</title>
|
||||
<meta name="description" content="data-status — operational state
|
||||
indicators for agents and services">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Status</h1>
|
||||
<p data-text="lead">data-status — operational state indicators for
|
||||
agents and services</p>
|
||||
</header>
|
||||
|
||||
<p><code>data-status</code> renders a monospace label coloured by state.
|
||||
Four states: <code>awake</code>, <code>sleeping</code>,
|
||||
<code>blocked</code>, <code>unknown</code>.</p>
|
||||
<h2 id="states">States</h2>
|
||||
<p>
|
||||
<span data-status="awake">awake</span> —
|
||||
<span data-status="sleeping">sleeping</span> —
|
||||
<span data-status="blocked">blocked</span> —
|
||||
<span data-status="unknown">unknown</span>
|
||||
</p>
|
||||
|
||||
<h2 id="in-a-table">In a table</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Agent</th><th>Status</th><th>Last seen</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>vigilio</td>
|
||||
<td><span data-status="awake">awake</span></td>
|
||||
<td><span data-text="dim">now</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shelley</td>
|
||||
<td><span data-status="sleeping">sleeping</span></td>
|
||||
<td><span data-text="dim">2026-03-31 09:14</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>docfeeder</td>
|
||||
<td><span data-status="blocked">blocked</span></td>
|
||||
<td><span data-text="dim">waiting on PDF spec</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>molto</td>
|
||||
<td><span data-status="unknown">unknown</span></td>
|
||||
<td><span data-text="dim">—</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="inline-in-prose">Inline in prose</h2>
|
||||
<p>Vigilio is currently <span data-status="awake">awake</span> and
|
||||
processing this session. Shelley is
|
||||
<span data-status="sleeping">sleeping</span> — she'll wake on the next
|
||||
message. The scheduled worker is
|
||||
<span data-status="blocked">blocked</span> pending credentials.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
63
examples/vault/tasks.html
Normal file
63
examples/vault/tasks.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Tasks — ASW Examples</title>
|
||||
<meta name="description" content="data-task — four task states for
|
||||
vault-native task lists">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Tasks</h1>
|
||||
<p data-text="lead">data-task — four task states for vault-native
|
||||
task lists</p>
|
||||
</header>
|
||||
|
||||
<p><code>data-task</code> on <code><li></code> elements renders
|
||||
vault task lists. Four states: <code>todo</code>, <code>done</code>,
|
||||
<code>blocked</code>, <code>cancelled</code>.</p>
|
||||
<h2 id="states">States</h2>
|
||||
<ul>
|
||||
<li data-task="todo">Write documentation</li>
|
||||
<li data-task="done">Set up the repo</li>
|
||||
<li data-task="blocked">Deploy to production</li>
|
||||
<li data-task="cancelled">Rewrite in Rust</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="mixed-list">Mixed list</h2>
|
||||
<ul>
|
||||
<li data-task="done">Project scaffold</li>
|
||||
<li data-task="done">Config system</li>
|
||||
<li data-task="todo">PDF extraction</li>
|
||||
<li data-task="todo">SQLite storage</li>
|
||||
<li data-task="blocked">MCP server — waiting on spec review</li>
|
||||
<li data-task="cancelled">Redis queue — overkill for v0.1</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="nested-tasks">Nested tasks</h2>
|
||||
<ul>
|
||||
<li data-task="todo">Build the docs site
|
||||
<ul>
|
||||
<li data-task="done">Taxonomy defined</li>
|
||||
<li data-task="done">Vault extension pages</li>
|
||||
<li data-task="todo">Content section</li>
|
||||
<li data-task="todo">Forms section</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-task="done">Typography system</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="with-metadata">With metadata</h2>
|
||||
<ul>
|
||||
<li data-task="todo">Ship v0.2 <span data-text="dim">due 2026-04-15 · assigned: vigilio</span></li>
|
||||
<li data-task="done">Write changelog <span data-text="dim">2026-03-28</span></li>
|
||||
<li data-task="blocked">DNS migration <span data-text="dim">waiting on: registrar access</span></li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
examples/vault/vault-page.html
Normal file
121
examples/vault/vault-page.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Vault Page — ASW Examples</title>
|
||||
<meta name="description" content="data-task, data-status,
|
||||
data-callout, data-wikilink, data-session — a vault note rendered as a
|
||||
web page">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Vault Page</h1>
|
||||
<p data-text="lead">data-task, data-status, data-callout,
|
||||
data-wikilink, data-session — a vault note rendered as a web page</p>
|
||||
</header>
|
||||
|
||||
<p>A vault note lives in Obsidian. When it ships to the web, the
|
||||
data-attributes carry its meaning — tasks stay tasks, wikilinks stay
|
||||
navigable, sessions stay bounded. No class names. No custom CSS.</p>
|
||||
<hr />
|
||||
<h2 id="tasks">Tasks</h2>
|
||||
<ul>
|
||||
<li data-task="done">Write agent directive and vocabulary reference</li>
|
||||
<li data-task="done">Build data-diff and data-redacted CSS primitives</li>
|
||||
<li data-task="todo">Promote examples to public catalog</li>
|
||||
<li data-task="blocked">npm publish — pending homepage decision</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="status">Status</h2>
|
||||
<dl data-layout="inline">
|
||||
<dt>Vigilio</dt>
|
||||
<dd><span data-status="awake" data-text="mono">ACTIVE</span></dd>
|
||||
<dt>Shelley</dt>
|
||||
<dd><span data-status="sleeping" data-text="mono">IDLE</span></dd>
|
||||
<dt>Build</dt>
|
||||
<dd><span data-status="done" data-text="mono">PASSING</span></dd>
|
||||
<dt>Proton Bridge</dt>
|
||||
<dd><span data-status="blocked" data-text="mono">WAITING</span></dd>
|
||||
</dl>
|
||||
|
||||
<h2 id="callouts">Callouts</h2>
|
||||
<div data-callout="note">
|
||||
<span data-callout-title>Note</span>
|
||||
<p>Informational content. Neutral styling for general notices and context.</p>
|
||||
</div>
|
||||
|
||||
<div data-callout="tip">
|
||||
<span data-callout-title>Tip</span>
|
||||
<p>Write semantic HTML. Never write <code>style=</code>. Never invent classes.</p>
|
||||
</div>
|
||||
|
||||
<div data-callout="warning">
|
||||
<span data-callout-title>Warning</span>
|
||||
<p><code>data-redacted</code> hides content visually but does not remove it from the DOM. Do not use for production secrets.</p>
|
||||
</div>
|
||||
|
||||
<div data-callout="error">
|
||||
<span data-callout-title>Error</span>
|
||||
<p>Missing <code>aria-label</code> on redacted elements. Screen readers announce silence.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="wikilinks">Wikilinks</h2>
|
||||
<p>See <span data-wikilink>agentic-semantic-web</span> for the design
|
||||
philosophy, <span data-wikilink>data-attributes</span> for the
|
||||
vocabulary reference, and
|
||||
<span data-wikilink data-unresolved>future-extensions</span> for planned
|
||||
work.</p>
|
||||
<p>Wikilinks resolve at render time. Unresolved links stay styled but
|
||||
inert.</p>
|
||||
<h2 id="session">Session</h2>
|
||||
<div data-session data-mode="autonomous" data-id="20260403-0900">
|
||||
<header>
|
||||
<strong><span data-mode="autonomous">autonomous</span></strong> · 2026-04-03 09:00 UTC · 31 min
|
||||
</header>
|
||||
<p>Processed inbox (senior-software-engineer skill installed). Updated sprint #66 Phase 1 status. Created vault-page example — promoted from <span data-wikilink>lab/examples</span>.</p>
|
||||
<ul>
|
||||
<li><span data-task="done">Install pi skill from inbox</span></li>
|
||||
<li><span data-task="done">Comment Phase 1 complete on #66</span></li>
|
||||
<li><span data-task="done">Create vault-page example (#65)</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="text-utilities">Text Utilities</h2>
|
||||
<ul>
|
||||
<li>Default body text</li>
|
||||
<li><span data-text="mono">Monospaced: commit hash, model name, token
|
||||
values</span></li>
|
||||
<li><span data-text="dim">Dimmed: metadata, timestamps, secondary
|
||||
information</span></li>
|
||||
<li><span data-text="accent">Accent: emphasis without
|
||||
semantics</span></li>
|
||||
</ul>
|
||||
<h2 id="layout-two-column-grid">Layout: Two-Column Grid</h2>
|
||||
<div data-layout="grid-2">
|
||||
<div>
|
||||
|
||||
<p><strong>Vault-native</strong></p>
|
||||
<p>Concepts that exist in knowledge management tools but have no HTML
|
||||
equivalent: tasks, wikilinks, session boundaries, agent status.</p>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<p><strong>Web-native</strong></p>
|
||||
<p>The structural layer stays standard: <code><article></code>,
|
||||
<code><nav></code>, <code><header></code>,
|
||||
<code><ul></code>, <code><details></code>. No divs with
|
||||
class names.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<p>→ <a href="/projects/asw/docs/vocabulary.html">Vocabulary
|
||||
reference</a> for the full data-attribute index.</p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
60
examples/vault/wikilinks.html
Normal file
60
examples/vault/wikilinks.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Wikilinks — ASW Examples</title>
|
||||
<meta name="description" content="data-wikilink, data-tag, data-hash —
|
||||
vault reference vocabulary for exported notes">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Wikilinks</h1>
|
||||
<p data-text="lead">data-wikilink, data-tag, data-hash — vault
|
||||
reference vocabulary for exported notes</p>
|
||||
</header>
|
||||
|
||||
<p>Three inline reference types from the vault: wikilinks (cross-note
|
||||
links), tags (topic labels), git hashes (provenance anchors).</p>
|
||||
<h2 id="wikilinks">Wikilinks</h2>
|
||||
<p>Write <code>[[Note Name]]</code> in markdown — the pandoc pack
|
||||
converts it to <code>data-wikilink</code> automatically.</p>
|
||||
<p><a data-wikilink href="#session-protocol">Session Protocol</a> ·
|
||||
<a data-wikilink href="#wikilinks">Wikilink reference</a> ·
|
||||
<a data-wikilink href="#missing-note">Missing Note</a></p>
|
||||
<p>Or write the HTML directly for fine-grained control:</p>
|
||||
<p>Resolved: <a href="#" data-wikilink>Session Protocol</a> — dotted
|
||||
underline, blue tint.</p>
|
||||
<p>Unresolved (target not found):
|
||||
<span data-wikilink data-unresolved>Missing Note</span> — dims to muted
|
||||
text.</p>
|
||||
<h2 id="tags">Tags</h2>
|
||||
<p><code>data-tag</code> prepends <code>#</code> automatically. Use
|
||||
<code><a></code> when linking to a filtered view,
|
||||
<code><span></code> for display only.</p>
|
||||
<p><a href="#tags" data-tag>autonomous</a> <span data-tag>deep</span>
|
||||
<span data-tag>vault</span></p>
|
||||
<p>In a session metadata line:</p>
|
||||
<p data-text="mono">session: complete — <span data-tag>autonomous</span> <span data-tag>deep</span> <span data-tag>vault</span></p>
|
||||
|
||||
<h2 id="git-hashes">Git hashes</h2>
|
||||
<p><code>data-hash</code> renders a commit reference — monospace, muted,
|
||||
tight letter-spacing.</p>
|
||||
<p>Last updated: <span data-session-meta>2026-03-27</span>
|
||||
<span data-hash>a3f7b2c</span></p>
|
||||
<h2 id="in-context">In context</h2>
|
||||
<p>A note backlink block combining all three:</p>
|
||||
<ul>
|
||||
<li><a href="#" data-wikilink>Session Protocol</a> — <span data-text="dim">directives/</span></li>
|
||||
<li><a href="#" data-wikilink>Tasks</a> — <span data-text="dim">vault extensions/</span></li>
|
||||
<li><span data-wikilink data-unresolved>Design Archive</span> — <span data-text="dim">not yet exported</span></li>
|
||||
</ul>
|
||||
|
||||
<p data-text="small dim">Tags: <span data-tag>vault</span> <span data-tag>reference</span> · Commit <span data-hash>842a2cd</span></p>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue