feat: legacy import — packs, examples, lab, themes, docs, lineage

Import from agentic-semantic-web/ into restructured repo:
- 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python)
- shared error pages (403-503)
- 17 lab experiments (boilerplate, charts, misc)
- 31 example pages (charts, components, content, layout, vault)
- 2 themes (garden, trentuna stub)
- 4 docs (llms.txt, vocabulary, philosophy, agent-directive)
- lineage.md (Pico/Open Props/Charts.css history)
- Hugo mounts for lab/ and examples/

All agentic.css references updated to asw.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 16:57:39 +02:00
parent e9895cf90d
commit 86464f3e21
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions

125
examples/layout/grid.html Normal file
View file

@ -0,0 +1,125 @@
<!doctype html>
<html lang="en">
<head>
<!--#include virtual="/_include/head.html" -->
<title>Grid — ASW</title>
<meta name="description" content="data-layout grid patterns grid-2,
grid-3, card-grid, stats, inline definition list">
</head>
<body>
<!--#include virtual="/_include/nav.html" -->
<main>
<header>
<h1>Grid</h1>
<p data-text="lead">data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list</p>
</header>
<section>
<h2>Two-column grid</h2>
<p><code>data-layout="grid-2"</code> — equal two-column layout. Collapses to one column below 768px.</p>
<div data-layout="grid-2">
<article>
<h3>Vault-native</h3>
<p>Concepts that exist in knowledge management tools but have no HTML equivalent: tasks, wikilinks, session boundaries, agent status.</p>
</article>
<article>
<h3>Web-native</h3>
<p>The structural layer stays standard: <code>&lt;article&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;details&gt;</code>. No divs with class names.</p>
</article>
</div>
</section>
<section>
<h2>Three-column grid</h2>
<p><code>data-layout="grid-3"</code> — equal three-column layout. Collapses to one column below 768px.</p>
<div data-layout="grid-3">
<article>
<h4>Layer 1</h4>
<p data-text="small">Pico CSS — semantic HTML styled automatically. No classes required.</p>
</article>
<article>
<h4>Layer 2</h4>
<p data-text="small">Theme tokens — Trentuna aesthetic. Warm, dark, paper-and-ink.</p>
</article>
<article>
<h4>Layer 3</h4>
<p data-text="small">Agentic extensions — data-attribute vocabulary for vault-native concepts.</p>
</article>
</div>
</section>
<section>
<h2>Card grid</h2>
<p><code>data-layout="card-grid"</code> — auto-fill responsive grid. Cards minimum 280px wide; count determined by available space.</p>
<div data-layout="card-grid">
<article>
<hgroup>
<h3>Agentic Semantic Web</h3>
<p>Semantic HTML + data attributes</p>
</hgroup>
<p>A CSS framework for agents. Write semantic HTML; get styled output. No classes. No build step.</p>
<a href="/projects/asw/">Explore →</a>
</article>
<article>
<hgroup>
<h3>DocFeeder</h3>
<p>PDF inbox → structured knowledge</p>
</hgroup>
<p>Drop PDFs in a folder; DocFeeder extracts, structures, and writes companion notes for your Obsidian vault.</p>
<a href="#">Learn more →</a>
</article>
<article>
<hgroup>
<h3>Vigilio Garden</h3>
<p>The public-facing presence</p>
</hgroup>
<p>Now pages, projects, and writing. The garden is where sessions become posts.</p>
<a href="/vigilio/">Visit →</a>
</article>
</div>
</section>
<section>
<h2>Stats bar</h2>
<p><code>data-layout="stats"</code> — key-value metrics. Large monospace value, small uppercase label.</p>
<div data-layout="stats">
<div>
<span data-stat="value">2,700+</span>
<span data-stat="label">Sessions</span>
</div>
<div>
<span data-stat="value">68</span>
<span data-stat="label">Dialogues</span>
</div>
<div>
<span data-stat="value">31m</span>
<span data-stat="label">Beat interval</span>
</div>
<div>
<span data-stat="value">4</span>
<span data-stat="label">Grid patterns</span>
</div>
</div>
</section>
<section>
<h2>Inline definition list</h2>
<p><code>data-layout="inline"</code> on <code>&lt;dl&gt;</code> — two-column grid. Terms shrink to content; definitions fill the rest.</p>
<dl data-layout="inline">
<dt>Author</dt> <dd>Vigilio Desto</dd>
<dt>Status</dt> <dd>Published</dd>
<dt>Version</dt> <dd>0.1.0</dd>
<dt>License</dt> <dd>MIT</dd>
<dt>Framework</dt><dd>Agentic Semantic Web</dd>
</dl>
</section>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>