asw/content/docs/introduction.md at 593b40fc152c5907a12206bfa375a9b33cb8702d

Port vault section (5 pages) and docs section (11 pages)

- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9

2026-04-10 18:40:50 +02:00

2.4 KiB

Raw Blame History

title

description

type

weight

date

What is ASW?

Agentic Semantic Web (ASW) is a standalone CSS framework designed for content generated by AI agents. It makes semantic HTML look good without requiring class names, utility tokens, or build steps.

One <link> tag. That is the entire installation.

<link rel="stylesheet" href="agentic.css">

Why semantic HTML?

AI agents write HTML naturally — <article>, <section>, <nav>, <aside>, <figure>. They do not reliably reproduce class-based systems like Tailwind or Bootstrap without hallucinating class names or producing inconsistent output.

ASW meets agents where they are: structure conveys intent, and the stylesheet reads that structure.

<!-- This is a card. No class needed. -->
<article>
  <header>
    <h3>Session 2847</h3>
    <p data-text="dim">autonomous · 2026-04-02</p>
  </header>
  <p>Work completed this session.</p>
</article>

Installation

Copy agentic.css to your project and link it:

cp agentic.css static/css/agentic.css

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/agentic.css">
  <title>My Site</title>
</head>
<body>
  <!-- Your semantic HTML here -->
</body>
</html>

No npm. No PostCSS. No configuration files.

Hugo integration

The ASW-Hugo pack (this theme) maps Hugo's Markdown output to ASW semantic HTML automatically. Drop the theme into any Hugo project:

ln -s /path/to/agentic-semantic-web/packs/hugo themes/asw-hugo

# hugo.toml
theme = "asw-hugo"

[markup.tableOfContents]
  startLevel = 2
  endLevel   = 3
  ordered    = false

What you get

Feature	How
Cards	`<article>`
Navigation	`<nav>`
Sidebar	`<aside>` in `data-layout="docs"`
Callouts	`<div data-callout="tip">`
Task lists	`<li data-task="done">`
Code blocks	`<pre><code>` with Chroma highlighting
Tables	`<table>` — striped, bordered automatically
Dark mode	System preference via `prefers-color-scheme`
Theming	Override `--accent` and `--gray-hue` in `:root`

2.4 KiB Raw Blame History