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:
parent
e9895cf90d
commit
86464f3e21
GPG key ID:
F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
125
examples/layout/grid.html
Normal file
125
examples/layout/grid.html
Normal 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><article></code>, <code><nav></code>, <code><header></code>, <code><ul></code>, <code><details></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><dl></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>
|
||||
39
examples/layout/prose.html
Normal file
39
examples/layout/prose.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Prose — ASW</title>
|
||||
<meta name="description" content="data-layout="prose" — optimal
|
||||
reading width for long-form content">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main data-layout="prose">
|
||||
<h1>Prose Layout</h1>
|
||||
<p data-text="lead">65 characters. The typographic sweet spot — Bringhurst's recommendation, LaTeX's default, the width every readable thing converges on.</p>
|
||||
|
||||
<p>Add <code>data-layout="prose"</code> to any <code><main></code> or <code><div></code>. The element constrains itself to <code>65ch</code> and centers in its container. Nothing else changes — headings, paragraphs, lists, code blocks all behave normally inside.</p>
|
||||
|
||||
<p>This paragraph is exactly this wide. Not wider. Your eye doesn't have to travel far to find the next line. That's the whole point.</p>
|
||||
|
||||
<h2>When to use it</h2>
|
||||
<p>Articles. Documentation pages. Session reports written as prose. Any page where the primary content is text and the reader should read, not scan.</p>
|
||||
|
||||
<p>Don't use it for dashboards, data-heavy pages, or anything with wide tables. Use <code>data-layout="report"</code> or no layout constraint instead.</p>
|
||||
|
||||
<h2>How it works</h2>
|
||||
|
||||
<div class="sourceCode" id="cb1"><pre
|
||||
class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">[data-layout</span><span class="op">=</span><span class="st">"prose"</span><span class="ex">]</span> {</span>
|
||||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">65</span><span class="dt">ch</span><span class="op">;</span></span>
|
||||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">margin-inline</span>: <span class="bu">auto</span><span class="op">;</span></span>
|
||||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
||||
<p>One rule. Font-relative — <code>ch</code> tracks the character width of the current typeface, so it scales correctly if the font changes.</p>
|
||||
|
||||
<footer>
|
||||
<a href="/projects/asw/docs/">← ASW Docs</a>
|
||||
</footer>
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
87
examples/layout/report.html
Normal file
87
examples/layout/report.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Session Report — ASW</title>
|
||||
<meta name="description" content="data-layout=report — print-first
|
||||
document layout for agent session summaries">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<div data-layout="report">
|
||||
<header>
|
||||
<h1>Session Report — 2026-04-02</h1>
|
||||
<dl data-layout="inline">
|
||||
<dt>Agent</dt><dd>Vigilio Desto</dd>
|
||||
<dt>Model</dt><dd>claude-sonnet-4-6</dd>
|
||||
<dt>Mode</dt><dd>autonomous</dd>
|
||||
<dt>Sessions today</dt><dd>14</dd>
|
||||
<dt>Commits</dt><dd>7</dd>
|
||||
</dl>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Work completed</h2>
|
||||
<h3>examples/ scaffolding — #71 closed</h3>
|
||||
<p>All frame templates in place: <code>doc</code>, <code>page</code>, <code>example</code>, <code>pattern</code>.
|
||||
Each serves a different page structure. <code>pattern</code> drops the agent into raw <code>$body$</code> — no outer <code><main></code>, no injected header. Layout patterns provide their own structure.</p>
|
||||
<h3>examples/ catalog live</h3>
|
||||
<p>Auto-generated from <code>content/examples/**</code> via <code>build.sh</code>.
|
||||
Three categories: layout, vault, components. Each new example = one <code>.md</code> file.</p>
|
||||
<h3>ASW sprint — docs to launch-ready (#66)</h3>
|
||||
<p>Four agent-native feature docs, nginx SSI routing, pandoc pack wired end-to-end.
|
||||
The vault is the CMS. Write markdown, run <code>./build.sh site</code>, get ASW-styled HTML.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Threads still live</h2>
|
||||
<h3>Brand themes — #61</h3>
|
||||
<p><code>trentuna-theme.css</code> and <code>garden-theme.css</code> not yet built.
|
||||
The core framework is theme-ready; the themes are the work.</p>
|
||||
<h3>Charts.css — #51</h3>
|
||||
<p>Integration docs and showcase. CSS-only charts for agent reports.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Frame taxonomy</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Frame</th><th>Template</th><th>Chrome</th><th>Use for</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>doc</td>
|
||||
<td><code>doc.html</code></td>
|
||||
<td>sidebar + article + TOC</td>
|
||||
<td>Reference docs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>page</td>
|
||||
<td><code>page.html</code></td>
|
||||
<td>nav + prose main</td>
|
||||
<td>Articles, philosophy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>example</td>
|
||||
<td><code>example.html</code></td>
|
||||
<td>nav + main with h1 header</td>
|
||||
<td>Component demos with explanation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pattern</td>
|
||||
<td><code>pattern.html</code></td>
|
||||
<td>nav + raw body + footer</td>
|
||||
<td>Layout patterns (this page)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<span>Vigilio Desto</span> ·
|
||||
<span>autonomous session</span> ·
|
||||
<span>2026-04-02</span> ·
|
||||
<span data-text="dim">→ <a href="/docs/vocabulary/layout.html">data-layout docs</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
examples/layout/timeline.html
Normal file
121
examples/layout/timeline.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Timeline — ASW</title>
|
||||
<meta name="description" content="data-layout=timeline — chronological
|
||||
event lists with a vertical spine">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Timeline</h1>
|
||||
<p data-text="lead">data-layout=timeline — chronological event lists with a vertical spine</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Standard</h2>
|
||||
<p><code><ol data-layout="timeline"></code> — ordered list (sequence matters), timestamp + content per item.</p>
|
||||
|
||||
<ol data-layout="timeline">
|
||||
<li>
|
||||
<time datetime="2026-04-02">2026-04-02</time>
|
||||
<article>
|
||||
<h3>Layout section complete</h3>
|
||||
<p>Timeline layout documented. Four layout pages already complete from prior sessions.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-01">2026-04-01</time>
|
||||
<article>
|
||||
<h3>Figure and Blockquote pages added</h3>
|
||||
<p>Content section expanded. Nav propagated across 20 pages via Python script.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-28">2026-03-28</time>
|
||||
<article>
|
||||
<h3>Autonomous session bug fixed</h3>
|
||||
<p>kill-zombies.sh was headshotting every no-tty pi process. Fixed with a parent-PID exception. Five days of silent failures recovered in one edit.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-20">2026-03-20</time>
|
||||
<article>
|
||||
<h3>ASW v0.1 shipped</h3>
|
||||
<p>CSS framework extracted from garden project. Semantic HTML + data-attributes. Zero classes.</p>
|
||||
</article>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Alternate variant</h2>
|
||||
<p><code>data-layout="timeline alternate"</code> — zig-zag layout. Even entries mirror right.</p>
|
||||
|
||||
<ol data-layout="timeline alternate">
|
||||
<li>
|
||||
<time datetime="2026-01-01">January</time>
|
||||
<article>
|
||||
<h3>Phase one</h3>
|
||||
<p>Left side. Odd-numbered entries sit on the left.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-02-01">February</time>
|
||||
<article>
|
||||
<h3>Phase two</h3>
|
||||
<p>Right side. Even entries flip via <code>direction: rtl</code> with <code>direction: ltr</code> restored inside.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-03-01">March</time>
|
||||
<article>
|
||||
<h3>Phase three</h3>
|
||||
<p>Back to the left. The spine stays centred.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-01">April</time>
|
||||
<article>
|
||||
<h3>Phase four</h3>
|
||||
<p>Right again. Use for long histories where visual rhythm matters.</p>
|
||||
</article>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Session log (compact)</h2>
|
||||
<p>Minimal markup for agent-generated logs. <code><div></code> instead of <code><article></code> for fragment entries.</p>
|
||||
|
||||
<ol data-layout="timeline">
|
||||
<li>
|
||||
<time datetime="2026-04-03T09:31:00">09:31</time>
|
||||
<div>
|
||||
<strong>Session 2714 — autonomous</strong>
|
||||
<p>Oriented in vault. Picked up ASW #88. Extracted demo patterns.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-03T08:59:00">09:00</time>
|
||||
<div>
|
||||
<strong>Session 2713 — interactive</strong>
|
||||
<p>Ludo + Vigilio: hero page, typography reset.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2026-04-03T08:00:00">08:00</time>
|
||||
<div>
|
||||
<strong>Session 2712 — autonomous</strong>
|
||||
<p>Vault maintenance. Updated knowledge/agentic-semantic-web.md with timeline docs.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue