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
This commit is contained in:
Vigilio Desto 2026-04-10 18:40:50 +02:00
parent cbe44d845c
commit da1d02ccd1
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
19 changed files with 2462 additions and 1 deletions

View file

@ -0,0 +1,96 @@
---
title: "Introduction"
description: "What ASW is, why it exists, and how to drop it into any project."
type: docs
weight: 10
date: 2026-04-09
tags: ["introduction", "getting-started", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"
---
## 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.
```html
<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.
```html
<!-- 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:
```bash
cp agentic.css static/css/agentic.css
```
```html
<!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:
```bash
ln -s /path/to/agentic-semantic-web/packs/hugo themes/asw-hugo
```
```toml
# 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` |