Ludo
15a6db9c0e
- vault → notes (PKM-exported content) - posts → articles (short-form, no TOC) - papers → essays (long-form, with TOC) - type: post → type: article (posts are just short articles) - layouts/paper → layouts/essay - 08a-paper.css → 08a-essay.css - CSS: fix redundant li resets, remove role="main" from article, replace <small> prev/next labels, add console layout - Update hugo.toml menus, internal URLs, front matter throughout - Add docs/context.md, docs/css-refactor-plan.md
74 lines
2 KiB
Markdown
74 lines
2 KiB
Markdown
---
|
|
title: "ASW Data-Attribute Vocabulary"
|
|
description: "The data-* attributes emitted by the ASW-Hugo pack."
|
|
date: 2026-04-08
|
|
tags: [asw, html, reference]
|
|
ai-disclosure: "generated"
|
|
ai-model: "claude-sonnet-4-5"
|
|
ai-provider: "Anthropic"
|
|
|
|
---
|
|
|
|
# ASW Data-Attribute Vocabulary
|
|
|
|
The ASW-Hugo pack emits these `data-*` attributes in its HTML output.
|
|
|
|
| Attribute | Element | Meaning |
|
|
|-----------|---------|---------|
|
|
| `data-callout="note"` | `<aside>` | Note callout block |
|
|
| `data-callout="warning"` | `<aside>` | Warning callout |
|
|
| `data-callout="tip"` | `<aside>` | Tip callout |
|
|
| `data-callout="info"` | `<aside>` | Info callout |
|
|
| `data-wikilink` | `<a>` | Internal vault-style link |
|
|
| `data-role="tag-cloud"` | `<nav>` | Tag navigation |
|
|
| `data-layout="grid"` | `<section>` | Grid layout for list pages |
|
|
| `data-tag` | `<a>` | Tag label on links |
|
|
|
|
All styling comes from `asw.css` targeting these attributes — no CSS classes required.
|
|
|
|
## Example: Full Page Skeleton
|
|
|
|
A complete ASW page emitted by the Hugo pack looks like this:
|
|
|
|
```html
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Session Log · Vault</title>
|
|
<link rel="stylesheet" href="/css/asw.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul><li><strong>Vault</strong></li></ul>
|
|
<ul>
|
|
<li><a href="/articles/">Posts</a></li>
|
|
<li><a href="/notes/">Vault</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<div data-layout="docs">
|
|
<aside>
|
|
<nav aria-label="Vault documentation" data-nav="sidebar">
|
|
<ul>
|
|
<li><a href="/notes/tasks/" aria-current="page">Tasks</a></li>
|
|
<li><a href="/notes/wikilinks/">Wikilinks</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<article>
|
|
<hgroup>
|
|
<h1>Tasks</h1>
|
|
<p>Render task lists with semantic state.</p>
|
|
</hgroup>
|
|
<!-- page content -->
|
|
</article>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Notice: no `class` attributes anywhere. The layout, sidebar, and navigation styles are all driven by element semantics and `data-*` attributes.
|