e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
74 lines
6.1 KiB
HTML
74 lines
6.1 KiB
HTML
<!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>
|