trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: 5 reference templates using data-layout and semantic HTML

Browse source 
- templates/index.html — landing/hero page with feature cards
- templates/docs.html — docs layout with sidebar nav, content, and TOC
- templates/article.html — long-form prose with code blocks and blockquotes
- templates/dashboard.html — stats grid with system status panels
- templates/tasks.html — vault-style task tracker with data-task attributes

All templates use semantic HTML only, data-layout attributes for
structure, zero class= for layout, and link to dist/asw.css.
This commit is contained in:
Hannibal Smith 2026-06-07 10:50:20 +02:00
parent 8ba401ad5e
commit 0d1d75a22f
Signed by: hannibal
GPG key ID: 6EB37F7E6190AF1C
5 changed files with 656 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

150
templates/article.html Normal file
View file

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Understanding CSS Custom Properties — ASW Blog</title>
<meta name="description" content="A deep dive into CSS custom properties, the oklch colour space, and building design tokens with native CSS.">
<link rel="stylesheet" href="../dist/asw.css">
</head>
<body>
<!-- Site navigation bar -->
<nav data-layout="spread">
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
<span data-layout="row">
<a href="docs.html">Docs</a>
<a href="article.html" aria-current="page">Blog</a>
<a href="dashboard.html">Dashboard</a>
<a href="tasks.html">Tasks</a>
</span>
</nav>
<!-- Article header -->
<header>
<p data-layout="row">
<time datetime="2026-06-01">June 1, 2026</time>
<span>by <a href="#">ASW Team</a></span>
<span>—</span>
<span>8 min read</span>
</p>
<h1>Understanding CSS Custom Properties</h1>
<p>A deep dive into native CSS design tokens, the <code>oklch</code> colour space, and building a token system without preprocessors.</p>
</header>
<!-- Prose content -->
<article data-layout="prose">
<h2>Why Custom Properties?</h2>
<p>CSS custom properties (often called CSS variables) let you store values and reuse them throughout your stylesheet. Unlike preprocessor variables (<code>$</code> in Sass or Less), custom properties are live — they cascade, can be overridden at any level, and can be changed at runtime.</p>
<blockquote>
<p>"Custom properties are to design tokens what functions are to programming — they give you a single source of truth that ripples through the entire system."</p>
</blockquote>
<p>When you define a value once as a custom property, every reference to it updates automatically when the property changes. This is the foundation of a maintainable design system.</p>
<h2>The oklch Colour Space</h2>
<p>Traditional <code>rgb</code> and <code>hsl</code> colour spaces are device-dependent and perceptually uneven. The <code>oklch</code> colour space, introduced in CSS Color Level 4, is designed for human perception — a 10% lightness shift looks like a 10% lightness shift, regardless of the hue.</p>
<pre><code>/* Traditional RGB — hard to reason about */
--accent: #4a6cf7;
/* oklch — perceptually uniform, easy to tweak */
--accent: oklch(65% 0.15 250);</code></pre>
<p>The three components of oklch are:</p>
<ul>
<li><strong>L</strong> — Lightness (0% to 100%)</li>
<li><strong>C</strong> — Chroma or saturation (0 to ~0.4)</li>
<li><strong>H</strong> — Hue (0 to 360 degrees)</li>
</ul>
<h3>Why This Matters for Design Systems</h3>
<p>Because oklch uses a polar coordinate system (like HSL), you can rotate hues while keeping perceptual lightness constant. This makes generating colour scales, accent colours, and dark mode variants straightforward.</p>
<pre><code>:root {
--palette-hue: 250; /* blue-violet */
--palette-chroma: 0.15;
--accent: oklch(65% var(--palette-chroma) var(--palette-hue));
--accent-hover: oklch(72% var(--palette-chroma) var(--palette-hue));
}</code></pre>
<h2>Building a Token System</h2>
<p>A design token system organises custom properties into semantic layers:</p>
<ol>
<li><strong>Primitives</strong> — raw values (sizes, colours, fonts)</li>
<li><strong>Aliases</strong> — semantic names mapped to primitives</li>
<li><strong>Component tokens</strong> — role-specific values</li>
</ol>
<p>For example, a spacing scale starts with raw sizes:</p>
<pre><code>--size-1: 0.25rem; /* 4px */
--size-2: 0.5rem; /* 8px */
--size-3: 1rem; /* 16px */</code></pre>
<p>Then semantic aliases map those sizes to their roles:</p>
<pre><code>--space-1: var(--size-1); /* tiny gap */
--space-2: var(--size-2); /* tight gap */
--space-4: var(--size-3); /* standard gap */</code></pre>
<h2>Live Reload in the Browser</h2>
<p>One of the superpowers of custom properties is live editing. Open your browser's dev tools, change a token value in <code>:root</code>, and watch every element that uses it update in real time.</p>
<pre><code>/* Change this in dev tools and see the whole page shift */
:root {
--palette-hue: 200; /* shift from blue-violet to blue */
}</code></pre>
<h2>Common Pitfalls</h2>
<p>Custom properties are powerful, but they come with some gotchas:</p>
<ul>
<li><strong>Fallback values</strong> — always provide a fallback: <code>var(--custom, fallback)</code></li>
<li><strong>Inheritance</strong> — custom properties inherit by default. Use <code>@property</code> for controlled behaviour.</li>
<li><strong>Animation</strong> — not all custom property types can be animated without <code>@property</code></li>
<li><strong>Performance</strong> — thousands of unique custom properties in a single scope can slow repaints</li>
</ul>
<h2>Conclusion</h2>
<p>CSS custom properties, combined with the <code>oklch</code> colour space, give you everything you need for a modern design token system — no preprocessor required. It's more verbose in places, but the trade-off is runtime flexibility, browser-native live editing, and zero build dependencies.</p>
<section>
<h3>Footnotes</h3>
<ol>
<li id="fn1">The <code>oklch</code> specification is part of CSS Color Module Level 4. <a href="https://www.w3.org/TR/css-color-4/" target="_blank" rel="noopener">Read the spec</a>.</li>
<li id="fn2">Browser support for oklch is excellent — all modern browsers support it as of 2024. <a href="https://caniuse.com/css-oklch" target="_blank" rel="noopener">Check CanIUse</a>.</li>
</ol>
</section>
<hr>
<!-- Prev/Next navigation -->
<nav data-role="prev-next">
<a href="docs.html" rel="prev">
<small>&larr; Previous</small>
<span>Documentation</span>
</a>
<a href="dashboard.html" rel="next">
<small>Next &rarr;</small>
<span>Dashboard</span>
</a>
</nav>
</article>
<!-- Footer -->
<footer data-layout="spread">
<small>&copy; 2026 Agentic Semantic Web</small>
<nav data-layout="row">
<a href="docs.html">Docs</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</footer>
</body>
</html>

124
templates/dashboard.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard — ASW</title>
<meta name="description" content="ASW project dashboard showing key metrics, recent activity, and system status.">
<link rel="stylesheet" href="../dist/asw.css">
</head>
<body>
<!-- Site navigation bar -->
<nav data-layout="spread">
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
<span data-layout="row">
<a href="docs.html">Docs</a>
<a href="article.html">Blog</a>
<a href="dashboard.html" aria-current="page">Dashboard</a>
<a href="tasks.html">Tasks</a>
</span>
</nav>
<!-- Dashboard header -->
<header data-layout="spread">
<h1>Dashboard</h1>
<p>Project overview for <strong>ASW v0.1</strong></p>
</header>
<!-- Stats grid -->
<section data-layout="stack">
<h2>Key Metrics</h2>
<div data-layout="stats">
<article>
<span data-stat="value" style="color: var(--ok);">24</span>
<span data-stat="label">Commits</span>
</article>
<article>
<span data-stat="value">5</span>
<span data-stat="label">Templates</span>
</article>
<article>
<span data-stat="value" style="color: var(--info);">143</span>
<span data-stat="label">Stars</span>
</article>
<article>
<span data-stat="value" style="color: var(--warn);">12</span>
<span data-stat="label">Open Issues</span>
</article>
<article>
<span data-stat="value" style="color: var(--ok);">97%</span>
<span data-stat="label">Uptime</span>
</article>
</div>
</section>
<!-- Two-column section: status + recent activity -->
<div data-layout="row">
<!-- System status panel -->
<section data-layout="col" style="flex: 1;">
<h2>System Status</h2>
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
<span data-layout="spread">
<span>Build Pipeline</span>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
</span>
</article>
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
<span data-layout="spread">
<span>CDN Distribution</span>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
</span>
</article>
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
<span data-layout="spread">
<span>Documentation</span>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Operational</mark>
</span>
</article>
<article data-layout="col" style="border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4);">
<span data-layout="spread">
<span>Package Registry</span>
<mark style="background: var(--warn); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Degraded</mark>
</span>
</article>
</section>
<!-- Recent activity section -->
<section data-layout="col" style="flex: 1;">
<h2>Recent Activity</h2>
<article style="border-left: 3px solid var(--ok); padding-left: var(--space-4);">
<p><strong>Token system</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— 2h ago</span></p>
<p style="font-size: var(--text-sm); color: var(--text-2);">Replaced OpenProps with native oklch custom properties.</p>
</article>
<article style="border-left: 3px solid var(--info); padding-left: var(--space-4);">
<p><strong>Flexbox layouts</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— 1h ago</span></p>
<p style="font-size: var(--text-sm); color: var(--text-2);">Added data-layout flexbox primitives with responsive breakpoints.</p>
</article>
<article style="border-left: 3px solid var(--warn); padding-left: var(--space-4);">
<p><strong>Reference templates</strong> <span style="color: var(--text-3); font-size: var(--text-sm);">— now</span></p>
<p style="font-size: var(--text-sm); color: var(--text-2);">Building 5 template pages demonstrating the framework.</p>
</article>
</section>
</div>
<!-- Quick actions -->
<footer data-layout="spread">
<small>&copy; 2026 Agentic Semantic Web</small>
<nav data-layout="row">
<a href="index.html">Home</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</footer>
</body>
</html>

173
templates/docs.html Normal file
View file

@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation — ASW</title>
<meta name="description" content="ASW documentation: tokens, layout, and component reference.">
<link rel="stylesheet" href="../dist/asw.css">
</head>
<body>
<!-- Site navigation bar -->
<nav data-layout="spread">
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
<span data-layout="row">
<a href="docs.html" aria-current="page">Docs</a>
<a href="article.html">Blog</a>
<a href="dashboard.html">Dashboard</a>
<a href="tasks.html">Tasks</a>
</span>
</nav>
<!-- Docs layout: sidebar nav + main content + right TOC -->
<div data-layout="docs">
<!-- Sidebar navigation -->
<nav data-nav="sidebar">
<p><strong>Getting Started</strong></p>
<ul>
<li><a href="#installation">Installation</a></li>
<li><a href="#quick-start">Quick Start</a></li>
<li><a href="#html-template">HTML Template</a></li>
</ul>
<p><strong>Core Concepts</strong></p>
<ul>
<li><a href="#semantic-html">Semantic HTML</a></li>
<li><a href="#data-layout">Data Layout</a></li>
<li><a href="#tokens">Token System</a></li>
</ul>
<p><strong>Layouts</strong></p>
<ul>
<li><a href="#flexbox">Flexbox Primitives</a></li>
<li><a href="#grid">Grid Helpers</a></li>
<li><a href="#docs-layout">Docs Layout</a></li>
</ul>
<p><strong>Components</strong></p>
<ul>
<li><a href="#typography">Typography</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#tables">Tables</a></li>
</ul>
</nav>
<!-- Main content -->
<article>
<h1>Documentation</h1>
<section id="installation">
<h2>Installation</h2>
<p>Install ASW via npm:</p>
<p data-layout="install"><code>npm install @agentic-semantic-web/asw</code></p>
<p>Or link the built CSS directly in your HTML:</p>
<p data-layout="install"><code>&lt;link rel="stylesheet" href="dist/asw.css"&gt;</code></p>
</section>
<section id="quick-start">
<h2>Quick Start</h2>
<p>ASW is built on two rules:</p>
<ol>
<li>Use semantic HTML elements for structure.</li>
<li>Use <code>data-layout</code> attributes for layout.</li>
</ol>
<p>No classes. No utility frameworks. No naming conventions.</p>
</section>
<section id="semantic-html">
<h2>Semantic HTML</h2>
<p>Every page is built from meaningful landmarks:</p>
<ul>
<li><code>&lt;nav&gt;</code> — navigation blocks</li>
<li><code>&lt;main&gt;</code> — primary content</li>
<li><code>&lt;article&gt;</code> — self-contained content</li>
<li><code>&lt;section&gt;</code> — grouped content</li>
<li><code>&lt;header&gt;</code> — introductory content</li>
<li><code>&lt;footer&gt;</code> — closing metadata</li>
<li><code>&lt;aside&gt;</code> — complementary content</li>
</ul>
</section>
<section id="data-layout">
<h2>Data Layout</h2>
<p>Apply layout with <code>data-layout</code> attributes on any element:</p>
<ul>
<li><code>data-layout="row"</code> — horizontal flex with wrap</li>
<li><code>data-layout="col"</code> — vertical flex</li>
<li><code>data-layout="stack"</code> — vertical flex with larger gap</li>
<li><code>data-layout="spread"</code> — space-between distribution</li>
<li><code>data-layout="center"</code> — centred column</li>
<li><code>data-layout="card-grid"</code> — responsive card grid</li>
</ul>
</section>
<section id="tokens">
<h2>Token System</h2>
<p>ASW uses native CSS custom properties (oklch color space) for all design tokens:</p>
<table>
<thead>
<tr>
<th>Token</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr><td><code>--surface</code></td><td>Page background</td></tr>
<tr><td><code>--text</code></td><td>Primary text colour</td></tr>
<tr><td><code>--accent</code></td><td>Interactive accent</td></tr>
<tr><td><code>--space-4</code></td><td>Standard spacing unit (1rem)</td></tr>
</tbody>
</table>
</section>
<section id="flexbox">
<h2>Flexbox Primitives</h2>
<p>All flexbox layouts collapse to stacked at 640px viewport width via <code>@media (--compact)</code>.</p>
<p data-layout="install"><code>&lt;div data-layout="spread"&gt;...&lt;/div&gt;</code></p>
</section>
<hr>
<!-- Prev/Next navigation -->
<nav data-role="prev-next">
<a href="index.html" rel="prev">
<small>&larr; Previous</small>
<span>ASW Home</span>
</a>
<a href="article.html" rel="next">
<small>Next &rarr;</small>
<span>Blog Article</span>
</a>
</nav>
</article>
<!-- Right TOC -->
<aside data-toc>
<p><strong>On this page</strong></p>
<nav>
<ul>
<li><a href="#installation">Installation</a></li>
<li><a href="#quick-start">Quick Start</a></li>
<li><a href="#semantic-html">Semantic HTML</a></li>
<li><a href="#data-layout">Data Layout</a></li>
<li><a href="#tokens">Token System</a></li>
<li><a href="#flexbox">Flexbox</a></li>
</ul>
</nav>
</aside>
</div>
<!-- Footer -->
<footer data-layout="spread">
<small>&copy; 2026 Agentic Semantic Web</small>
<nav data-layout="row">
<a href="docs.html">Docs</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</footer>
</body>
</html>

83
templates/index.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASW — Agentic Semantic Web</title>
<meta name="description" content="A CSS framework for agent-generated web content. Semantic HTML + data attributes. Zero classes.">
<link rel="stylesheet" href="../dist/asw.css">
</head>
<body>
<!-- Site navigation bar -->
<nav data-layout="spread">
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
<span data-layout="row">
<a href="docs.html">Docs</a>
<a href="article.html">Blog</a>
<a href="dashboard.html">Dashboard</a>
<a href="tasks.html">Tasks</a>
</span>
</nav>
<!-- Hero section -->
<header data-layout="hero">
<h1>Agentic Semantic Web</h1>
<p>A CSS framework for agent-generated web content.</p>
<p>Semantic HTML. Data attributes. Zero layout classes.</p>
<p data-layout="install"><code>npm install @agentic-semantic-web/asw</code></p>
<nav data-layout="actions">
<a href="docs.html" role="button">Get Started</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</header>
<!-- Feature cards -->
<section data-layout="stack">
<h2>Why ASW?</h2>
<div data-layout="card-grid">
<article>
<h3>Semantic by Default</h3>
<p>Use meaningful HTML elements — <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code> — instead of generic <code>&lt;div&gt;</code> soup.</p>
</article>
<article>
<h3>Data Attributes for Layout</h3>
<p>Style with <code>data-layout</code> attributes, not CSS classes. Your markup describes its own structure.</p>
</article>
<article>
<h3>Zero Class Dependencies</h3>
<p>No utility class soup. No grid frameworks. No naming conventions to memorise.</p>
</article>
<article>
<h3>Built for Agents</h3>
<p>Designed from the ground up for LLM-generated HTML — the rules are simple enough for any agent to follow.</p>
</article>
</div>
</section>
<!-- CTA -->
<section data-layout="col center">
<h2>Ready to build?</h2>
<p>Link one CSS file, use semantic HTML and data-layout attributes.</p>
<nav data-layout="actions">
<a href="docs.html" role="button">Read the Docs</a>
</nav>
</section>
<!-- Footer -->
<footer data-layout="spread">
<small>&copy; 2026 Agentic Semantic Web</small>
<nav data-layout="row">
<a href="docs.html">Docs</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</footer>
</body>
</html>

126
templates/tasks.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks — ASW</title>
<meta name="description" content="ASW project task tracker showing pending, in-progress, and completed work items.">
<link rel="stylesheet" href="../dist/asw.css">
</head>
<body>
<!-- Site navigation bar -->
<nav data-layout="spread">
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
<span data-layout="row">
<a href="docs.html">Docs</a>
<a href="article.html">Blog</a>
<a href="dashboard.html">Dashboard</a>
<a href="tasks.html" aria-current="page">Tasks</a>
</span>
</nav>
<!-- Page header -->
<header data-layout="spread">
<h1>Tasks</h1>
<nav data-layout="row">
<span style="color: var(--ok); font-weight: var(--weight-semibold);">Completed</span>
<span style="color: var(--warn); font-weight: var(--weight-semibold);">In Review</span>
<span style="color: var(--info); font-weight: var(--weight-semibold);">In Progress</span>
</nav>
</header>
<!-- Task list -->
<section data-layout="stack">
<!-- Task 1: Completed -->
<article data-task data-task-status="done">
<header data-layout="spread">
<h2 data-task="title">Token System — Replace OpenProps with Native CSS</h2>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Done</mark>
</header>
<p data-task="description">Replace OpenProps imports with native CSS custom properties using the oklch colour space. All ~40 tokens converted.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Vigo</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Completed June 7, 2026</span>
</footer>
</article>
<!-- Task 2: Completed -->
<article data-task data-task-status="done">
<header data-layout="spread">
<h2 data-task="title">Archive Deferred Content</h2>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Done</mark>
</header>
<p data-task="description">Move packs/, site/, lab/ and legacy SSI examples into archive/ directory. Nothing deleted from git.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Vigo</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Completed June 7, 2026</span>
</footer>
</article>
<!-- Task 3: Completed -->
<article data-task data-task-status="done">
<header data-layout="spread">
<h2 data-task="title">Flexbox Layout System</h2>
<mark style="background: var(--ok); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Done</mark>
</header>
<p data-task="description">Add data-layout="row/col/stack/spread/center" flexbox rules with responsive wrapping at 640px.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Vigo</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Completed June 7, 2026</span>
</footer>
</article>
<!-- Task 4: In progress (current task) -->
<article data-task data-task-status="in-progress">
<header data-layout="spread">
<h2 data-task="title">Build 5 Working Templates</h2>
<mark style="background: var(--info); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">In Progress</mark>
</header>
<p data-task="description">Create index, docs, article, dashboard, and tasks templates using semantic HTML and data-layout attributes.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Hannibal</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Updated June 7, 2026</span>
</footer>
</article>
<!-- Task 5: Blocked / pending -->
<article data-task data-task-status="pending">
<header data-layout="spread">
<h2 data-task="title">Release v0.1 Preparation</h2>
<mark style="background: var(--blocked); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">Pending</mark>
</header>
<p data-task="description">Rewrite README for 0.1, create CHANGELOG.md, final build, tag v0.1.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Vigo</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Depends on: T4</span>
</footer>
</article>
<!-- Task 6: In review -->
<article data-task data-task-status="in-review">
<header data-layout="spread">
<h2 data-task="title">Documentation Review</h2>
<mark style="background: var(--warn); color: var(--surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs);">In Review</mark>
</header>
<p data-task="description">Peer review of all template documentation and usage guides.</p>
<footer data-layout="spread">
<span data-task="assignee">Assigned to: <strong>Team</strong></span>
<span data-task="meta" style="font-size: var(--text-xs); color: var(--text-3);">Needs 2 approvals</span>
</footer>
</article>
</section>
<!-- Footer -->
<footer data-layout="spread">
<small>&copy; 2026 Agentic Semantic Web</small>
<nav data-layout="row">
<a href="index.html">Home</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</footer>
</body>
</html>