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:
parent
cbe44d845c
commit
da1d02ccd1
19 changed files with 2462 additions and 1 deletions
96
content/docs/introduction.md
Normal file
96
content/docs/introduction.md
Normal 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` |
|
||||
Loading…
Add table
Add a link
Reference in a new issue