Ludo
86464f3e21
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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="asw.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 `asw.css` to your project and link it:
|
|
|
|
```bash
|
|
cp asw.css static/css/asw.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/asw.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` |
|