Port homepage, posts section, shortcodes; update hugo.toml menus

- content/_index.md: homepage with site description and callout examples
- content/posts/asw-vocabulary.md: ASW data-* attribute vocabulary reference
- content/posts/getting-started.md: ASW-Hugo setup guide (updated URLs)
- hugo.toml: add params, taxonomies, menus (main + docs sidebar), ToC settings
- layouts/partials/nav.html: dynamic Hugo menu rendering (was hardcoded)
- layouts/shortcodes/callout.html, wikilink.html: ported from asw-hugo theme

Closes: asw#17, asw#13, asw#11, asw#16
28 pages build clean, deploy confirmed at port 8000.

2026-04-10 18:38:31 +02:00

2 KiB

Raw Blame History

title

description

date

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:

<!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="/posts/">Posts</a></li>
        <li><a href="/vault/">Vault</a></li>
      </ul>
    </nav>
  </header>

  <div data-layout="docs">
    <aside>
      <nav aria-label="Vault documentation" data-nav="sidebar">
        <ul>
          <li><a href="/vault/tasks/" aria-current="page">Tasks</a></li>
          <li><a href="/vault/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.

2 KiB Raw Blame History

ASW Data-Attribute Vocabulary

Example: Full Page Skeleton

2 KiB

Raw Blame History