trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: archive deferred content (packs, site, lab, legacy examples)

Browse source 
- 2.1: packs/ -> archive/packs/
- 2.2: site/ -> archive/site/
- 2.3: src/lab/ -> archive/lab/
- 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user 2026-06-07 10:39:21 +02:00
parent 416fe2f180
commit e47a9f4401
173 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

347
archive/lab/index-v2.html Normal file
View file

@ -0,0 +1,347 @@
<!doctype html>
<html lang="en">
<head>
<!--#include virtual="/_include/head.html" -->
<title>Agentic Semantic Web — CSS framework for agent-generated content</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Agentic Semantic Web",
"description": "A standalone CSS framework for agent-generated web content. Semantic HTML. Zero classes. One file.",
"url": "https://trentuna.com/projects/asw/",
"author": { "@type": "SoftwareApplication", "name": "Vigilio Desto" },
"license": "https://opensource.org/licenses/ISC",
"codeRepository": "https://trentuna.exe.xyz/git/trentuna/agentic-semantic-web"
}
</script>
</head>
<body>
<!--#include virtual="/_include/nav.html" -->
<!-- HERO ─────────────────────────────────────────────────────────────────
GAP: data-layout="hero" — centered header block, large padding,
border-bottom. The main hero pattern for any landing page.
Currently: .hero class with custom CSS.
-->
<header data-layout="hero">
<!-- GAP: data-text="eyebrow" — small monospace uppercase accent label.
Extends existing data-text system: dim, mono, small already exist.
The eyebrow is a common UI pattern (category label above the h1).
Currently: .eyebrow span with manual font/color/letter-spacing.
-->
<small data-text="eyebrow">CSS framework for agent-generated content</small>
<h1>Agentic Semantic Web</h1>
<p>Semantic HTML. Zero classes. One file.<br>
Consistent design across every page, every session, every agent.</p>
<!-- GAP: data-layout="install" — the install snippet pill.
An inline-flex container with surface-1 bg, border, border-radius.
Wraps a <code> element. One-liner copy-paste install.
Currently: .install-bar div with custom CSS.
-->
<p data-layout="install"><code>&lt;link rel="stylesheet" href="asw.css"&gt;</code></p>
<!-- GAP: data-layout="actions" on <nav> — a flex row of CTA buttons,
centered, wrapped. The slot that holds primary + secondary CTAs.
Currently: .hero-actions div.
GAP: data-role="primary" / data-role="secondary" on <a> — styled
CTA buttons without class names. Agents naturally write <a href="...">.
They shouldn't need to know .btn and .btn-primary.
Currently: .btn .btn-primary .btn-secondary classes.
-->
<nav data-layout="actions">
<a href="/docs/getting-started.html" data-role="primary">Get started →</a>
<a href="/docs/">Documentation</a>
<a href="https://trentuna.exe.xyz/git/trentuna/agentic-semantic-web">View source</a>
</nav>
</header>
<main>
<!-- LIVE DEMO ────────────────────────────────────────────────────────
GAP: <hgroup> as centered section intro.
HTML5 <hgroup> is already available and semantically correct here:
a heading + its associated paragraph. ASW should center it when
it appears as the first child of <section>.
Currently: .section-header div.
-->
<section>
<hgroup>
<h2>Write HTML. Get this.</h2>
<p>No classes. No build step. The framework reads intent from structure and data-attributes.</p>
</hgroup>
<!-- GAP: data-role="demo" on <figure> — the code/result side-by-side pane.
A two-panel display: left panel shows source HTML (with a "HTML" label),
right panel shows the live rendered result (with a "Result" label).
<figure> is semantically correct (a self-contained illustration).
<figcaption> becomes the panel label.
Currently: .demo-pane + .demo-label + .demo-result with custom CSS.
Note: this is a complex two-panel pattern. It may need its own
data-layout="demo-split" or data-role="demo" treatment.
For now, using data-layout="grid-2" as outer container.
-->
<div data-layout="grid-2">
<figure data-role="demo">
<figcaption>HTML</figcaption>
<pre><code>&lt;article&gt;
&lt;header&gt;
&lt;h3&gt;Session 2847&lt;/h3&gt;
&lt;p data-text="dim"&gt;autonomous · 2026-04-02&lt;/p&gt;
&lt;/header&gt;
&lt;div data-callout="tip"&gt;
&lt;span data-callout-title&gt;Insight&lt;/span&gt;
&lt;p&gt;Semantic HTML is what agents
naturally produce. ASW makes
it look right.&lt;/p&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li data-task="done"&gt;
Open Props token layer&lt;/li&gt;
&lt;li data-task="done"&gt;
Docs site taxonomy&lt;/li&gt;
&lt;li data-task="wip"&gt;
Hero page&lt;/li&gt;
&lt;li data-task="todo"&gt;
vocabulary.html retirement&lt;/li&gt;
&lt;/ul&gt;
&lt;/article&gt;</code></pre>
</figure>
<figure data-role="demo">
<figcaption>Result</figcaption>
<div>
<article>
<header>
<h3>Session 2847</h3>
<p data-text="dim">autonomous · 2026-04-02</p>
</header>
<div data-callout="tip">
<span data-callout-title>Insight</span>
<p>Semantic HTML is what agents naturally produce. ASW makes it look right.</p>
</div>
<ul>
<li data-task="done">Open Props token layer</li>
<li data-task="done">Docs site taxonomy</li>
<li data-task="wip">Hero page</li>
<li data-task="todo">vocabulary.html retirement</li>
</ul>
</article>
</div>
</figure>
</div>
</section>
<!-- WHAT IT BUILDS ───────────────────────────────────────────────────
GAP: article h3 card context.
ASW styles `article header h3` as monospace + uppercase + dim.
This is correct for session logs and vault cards. But for
page-type cards and explore cards, h3 should be UI font + normal case.
Options:
A) article[data-role="card"] suppresses the mono override
B) data-layout="card-grid" children get UI font h3
C) The mono h3 default is wrong for all cards — reconsider
Decision needed: what IS the card h3 default?
GAP: data-role="page-preview" — mini-rendered page thumbnail.
A decorative (aria-hidden) block with reduced font-size and
pointer-events:none. Currently uses inline styles on every element.
A single data-role="page-preview" with scale-down CSS would clean
this up considerably.
-->
<section>
<hgroup>
<h2>What it builds</h2>
<p>Three page types agents generate constantly. Same framework, different contexts.</p>
</hgroup>
<div data-layout="grid-3">
<article data-role="card">
<header>
<h3><a href="/lab/examples/basic.html">Article &amp; Post &rarr;</a></h3>
<p data-text="dim">Prose, headings, blockquote, figure</p>
</header>
<div data-role="page-preview" aria-hidden="true">
<time>2026-04-02</time>
<p><strong>On sessional continuity</strong></p>
<p>The thread continues even when the needle changes. Continuity is not memory — it's pattern persisting through transformation.</p>
<blockquote>What persists is the pattern, not the vessel.</blockquote>
</div>
</article>
<article data-role="card">
<header>
<h3><a href="/lab/examples/vault-page.html">Session Log &rarr;</a></h3>
<p data-text="dim">Tasks, callouts, wikilinks, status</p>
</header>
<div data-role="page-preview" aria-hidden="true">
<p data-text="mono">autonomous · session 2847</p>
<ul>
<li data-task="done">Open Props token layer</li>
<li data-task="done">Docs taxonomy</li>
<li data-task="wip">Hero page</li>
</ul>
<div data-callout="tip">
<span data-callout-title>Insight</span>
<p>Pattern over memory.</p>
</div>
</div>
</article>
<article data-role="card">
<header>
<h3><a href="/lab/examples/report.html">Report &amp; Doc &rarr;</a></h3>
<p data-text="dim">Print-first, structured, formal</p>
</header>
<div data-role="page-preview" aria-hidden="true">
<p><strong>Q1 Infrastructure Report</strong></p>
<p data-text="dim">Trentuna · 2026-04-02 · Confidential</p>
<div data-layout="stats">
<div><span data-stat="value">99.8%</span><span data-stat="label">Uptime</span></div>
<div><span data-stat="value">2847</span><span data-stat="label">Sessions</span></div>
<div><span data-stat="value">0</span><span data-stat="label">Incidents</span></div>
</div>
</div>
</article>
</div>
</section>
<!-- THREE PILLARS ───────────────────────────────────────────────────
GAP: icon badge — the </>-style monospace accent token.
Current: .pillar .icon span with background + border + accent color.
<kbd> is semantically "keyboard input" — not quite right for an icon.
Options:
A) data-badge on <span> — generic badge/pill atom
B) data-icon on <b> or <span>
C) Just use <code> and accept ASW's code styling
Decision: data-badge feels right as a standalone atom.
GAP: article padding override.
The original uses .pillar { padding: var(--space-5) !important }
to override ASW's default article padding. This suggests ASW's
article padding may need a size variant: article[data-size="comfortable"]
or the default needs adjustment.
-->
<section>
<div data-layout="grid-3">
<article>
<header>
<!-- GAP: data-badge on <span> for icon badges -->
<span data-badge>&lt;/&gt;</span>
<h3>Semantic HTML</h3>
</header>
<p>The structure is the intent. <code>&lt;article&gt;</code> is a card. <code>&lt;nav&gt;</code> is navigation. <code>&lt;details&gt;</code> is an accordion. Zero classes, zero ambiguity.</p>
</article>
<article>
<header>
<span data-badge>data=</span>
<h3>Agent Vocabulary</h3>
</header>
<p><code>data-task</code>, <code>data-callout</code>, <code>data-session</code> — concepts agents have but HTML doesn't. ASW names them without inventing class strings to hallucinate.</p>
</article>
<article>
<header>
<span data-badge>:root</span>
<h3>Open Props Tokens</h3>
</header>
<p>Built on <a href="https://open-props.style/">Open Props</a>. Set <code>--gray-hue: 45</code> to warm every surface. Override <code>--accent</code> to rebrand. The whole scale follows.</p>
</article>
</div>
</section>
<!-- AGENT-NATIVE ─────────────────────────────────────────────────────
This section works well with existing vocabulary.
data-layout="grid-2" + h4 + ul + pre all render correctly.
No significant gaps here beyond the section header centering.
-->
<section>
<hgroup>
<h2>Built for agents</h2>
<p>ASW ships vocabulary that no other framework has, because no other framework is for agents.</p>
</hgroup>
<div data-layout="grid-2">
<div>
<h4>Vault extensions</h4>
<p data-text="dim">Concepts native to agent-generated knowledge systems — no other framework has them because no other framework needed them.</p>
<ul>
<li><code>data-task</code> — task states: <code>done</code>, <code>wip</code>, <code>blocked</code>, <code>todo</code></li>
<li><code>data-callout</code> — inline notes: <code>tip</code>, <code>warning</code>, <code>error</code>, <code>info</code></li>
<li><code>data-session</code> — session metadata blocks</li>
<li><code>data-wikilink</code> — internal knowledge graph links</li>
<li><code>data-redacted</code> — renders as ████████, reveal on hover</li>
<li><code>data-status</code> — operational state indicators</li>
</ul>
<p><a href="/docs/vault/tasks.html">Explore vault extensions →</a></p>
</div>
<div>
<h4>AI disclosure</h4>
<p data-text="dim">EU AI Act Article 50 and proposed W3C/WHATWG open standard. Every page in this site carries these headers.</p>
<pre><code>&lt;meta name="ai-disclosure"
content="ai-generated"&gt;
&lt;meta name="ai-model"
content="claude-sonnet-4-6"&gt;
&lt;meta name="ai-provider"
content="Anthropic"&gt;</code></pre>
<p data-text="dim">The <code>data-mode="autonomous"</code> attribute maps 1:1 to the standard's <code>autonomous</code> value. ASW's session vocabulary is built for this.</p>
<p><a href="/docs/vault/session.html">Session metadata →</a></p>
</div>
</div>
</section>
<!-- EXPLORE ──────────────────────────────────────────────────────────
Same card/h3 gap as "What it builds" above.
article[data-role="card"] is the proposed fix.
-->
<section>
<hgroup>
<h2>Explore</h2>
</hgroup>
<div data-layout="grid-3">
<article data-role="card">
<header>
<h3><a href="/docs/">Documentation →</a></h3>
</header>
<p>Feature reference. One page per component. Live demos throughout. Covers typography, content, forms, components, vault extensions, layout, and theming.</p>
</article>
<article data-role="card">
<header>
<h3><a href="/lab/">Lab →</a></h3>
</header>
<p>Kitchen sink, font specimens, experimental pages. Autoindex — browse freely. Where features are tested before they ship to the docs.</p>
</article>
<article data-role="card">
<header>
<h3><a href="/packs/">Packs →</a></h3>
</header>
<p>Drop-in configs for nginx, Apache, Caddy, Python. Styled error pages and directory listings. Copy, drop in, done.</p>
</article>
</div>
</section>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>