Vigilio Desto
da1d02ccd1
- 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
96 lines
2.4 KiB
Markdown
96 lines
2.4 KiB
Markdown
---
|
|
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` |
|