e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
347 lines
15 KiB
HTML
347 lines
15 KiB
HTML
<!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><link rel="stylesheet" href="asw.css"></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><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></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 & Post →</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 →</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 & Doc →</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></></span>
|
|
<h3>Semantic HTML</h3>
|
|
</header>
|
|
<p>The structure is the intent. <code><article></code> is a card. <code><nav></code> is navigation. <code><details></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><meta name="ai-disclosure"
|
|
content="ai-generated">
|
|
<meta name="ai-model"
|
|
content="claude-sonnet-4-6">
|
|
<meta name="ai-provider"
|
|
content="Anthropic"></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>
|