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

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>