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

- 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

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>