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:
parent
8ba401ad5e
commit
0d1d75a22f
5 changed files with 656 additions and 0 deletions
126
templates/tasks.html
Normal file
126
templates/tasks.html
Normal 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>© 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue