feat: legacy import — packs, examples, lab, themes, docs, lineage
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>
This commit is contained in:
parent
e9895cf90d
commit
86464f3e21
GPG key ID:
F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
197
docs/vocabulary.md
Normal file
197
docs/vocabulary.md
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
# ASW Data-Attribute Vocabulary
|
||||
|
||||
**Quick reference for all data-attributes in the Agentic Semantic Web framework.**
|
||||
|
||||
## Vault-Native Concepts
|
||||
|
||||
| Attribute | Values | Purpose | Example |
|
||||
|-----------|--------|---------|---------|
|
||||
| `data-wikilink` | (none) | Mark as vault note reference | `<span data-wikilink>Note Name</span>` |
|
||||
| `data-unresolved` | (none) | Mark wikilink target doesn't exist | `<span data-wikilink data-unresolved>Missing</span>` |
|
||||
| `data-task` | `todo`, `done`, `blocked` | Task state | `<div data-task="done">Finished</div>` |
|
||||
| `data-status` | `awake`, `sleeping`, `blocked`, `unknown` | System/service status | `<span data-status="awake">Active</span>` |
|
||||
| `data-callout` | `note`, `warning`, `error`, `tip` | Callout/admonition type | `<div data-callout="warning">...</div>` |
|
||||
| `data-callout-title` | (none) | Title for callout | `<span data-callout-title>Warning</span>` |
|
||||
| `data-session` | (none) | Wrapper for session metadata | `<div data-session>...</div>` |
|
||||
| `data-mode` | `autonomous`, `interactive` | Session type | `<span data-mode="autonomous">Auto</span>` |
|
||||
| `data-session-meta` | (none) | Session timestamp/metadata | `<span data-session-meta>2026-03-26</span>` |
|
||||
| `data-hash` | (none) | Git commit hash | `<span data-hash>a3f7b2c</span>` |
|
||||
| `data-tag` | (none) | Vault tag | `<a data-tag href="/tag/architecture">architecture</a>` |
|
||||
|
||||
## Text Utilities
|
||||
|
||||
| Attribute | Values | Purpose | Example |
|
||||
|-----------|--------|---------|---------|
|
||||
| `data-text` | `mono` | Monospace font | `<span data-text="mono">fixed-width</span>` |
|
||||
| `data-text` | `dim` | Muted color | `<span data-text="dim">secondary text</span>` |
|
||||
| `data-text` | `accent` | Accent color | `<span data-text="accent">highlighted</span>` |
|
||||
| `data-text` | `mono dim` | Combined (space-separated) | `<span data-text="mono dim">0x4A3F</span>` |
|
||||
|
||||
## Layout Patterns
|
||||
|
||||
| Attribute | Values | Purpose | Example |
|
||||
|-----------|--------|---------|---------|
|
||||
| `data-layout` | `grid-2` | Two-column grid (stacks on mobile) | `<div data-layout="grid-2"><div>Col1</div><div>Col2</div></div>` |
|
||||
| `data-layout` | `card-grid` | Responsive card wrap (2-col flex) | `<div data-layout="card-grid"><article>…</article><article>…</article></div>` |
|
||||
| `data-layout` | `stats` | Horizontal metrics bar | `<div data-layout="stats"><div><span data-stat="value">42</span><span data-stat="label">things</span></div></div>` |
|
||||
| `data-layout` | `inline` | Inline definition list | `<dl data-layout="inline"><dt>Key</dt><dd>Value</dd></dl>` |
|
||||
|
||||
## Semantic Roles
|
||||
|
||||
| Attribute | Values | Purpose | Example |
|
||||
|-----------|--------|---------|---------|
|
||||
| `data-role` | `command-box` | Terminal command display | `<div data-role="command-box"><span class="prefix">$</span><code>ls</code></div>` |
|
||||
| `data-role` | `status-card` | System status card | `<div data-role="status-card"><h3>Status</h3>...</div>` |
|
||||
| `data-role` | `timeline` | Chronological event list | `<div data-role="timeline"><div>Event 1</div></div>` |
|
||||
| `data-role` | `diff` | Code diff display | `<pre data-role="diff"><span class="add">+ line</span></pre>` |
|
||||
|
||||
## CSS Custom Properties (Design Tokens)
|
||||
|
||||
The framework uses semantic design tokens that map to Pico's internal variables. For complete reference, see [design-tokens.md](design-tokens.md).
|
||||
|
||||
### Quick Reference (Key Tokens)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
--accent: #22c55e; /* Primary accent (green) */
|
||||
--accent-blue: #3b82f6; /* Links, wikilinks */
|
||||
--accent-orange: #f59e0b; /* Warnings, todo */
|
||||
--accent-red: #ef4444; /* Errors, blocked */
|
||||
--bg-primary: #0a0a0a; /* Main background */
|
||||
--text-primary: #e5e5e5; /* Main text */
|
||||
```
|
||||
|
||||
**Typography:**
|
||||
```css
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
```
|
||||
|
||||
**See [design-tokens.md](design-tokens.md) for:**
|
||||
- Complete token reference (15+ tokens)
|
||||
- How to create custom themes
|
||||
- Light/dark switching patterns
|
||||
- Override best practices
|
||||
|
||||
## Pico CSS Requirements
|
||||
|
||||
ASW builds on Pico CSS. The only class Pico uses:
|
||||
|
||||
| Class | Element | Purpose |
|
||||
|-------|---------|---------|
|
||||
| `container` | `<main>` | Centered single-column layout (max-width, padding) |
|
||||
|
||||
**Everything else is semantic HTML.** No classes needed.
|
||||
|
||||
## Semantic HTML Cheat Sheet
|
||||
|
||||
Pico styles these automatically (incomplete list):
|
||||
|
||||
**Structure:** `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<header>`, `<footer>`
|
||||
**Interactive:** `<details>`, `<summary>`, `<dialog>`, `<button>`, `<a>`
|
||||
**Forms:** `<form>`, `<input>`, `<textarea>`, `<select>`, `<label>`, `<fieldset>`
|
||||
**Data:** `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`, `<dl>`, `<dt>`, `<dd>`
|
||||
**Content:** `<h1>`-`<h6>`, `<p>`, `<ul>`, `<ol>`, `<li>`, `<blockquote>`, `<figure>`, `<figcaption>`
|
||||
**Inline:** `<strong>`, `<em>`, `<mark>`, `<code>`, `<kbd>`, `<small>`, `<time>`
|
||||
**Code:** `<pre>`, `<code>`
|
||||
**Misc:** `<progress>`, `<meter>`, `<hr>`
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### Task List
|
||||
```html
|
||||
<ul>
|
||||
<li data-task="done">Complete documentation</li>
|
||||
<li data-task="todo">Write examples</li>
|
||||
<li data-task="blocked">Waiting on approval</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Status Display
|
||||
```html
|
||||
<dl data-layout="inline">
|
||||
<dt>Vigilio</dt>
|
||||
<dd><span data-status="awake" data-text="mono">ACTIVE</span></dd>
|
||||
<dt>Shelley</dt>
|
||||
<dd><span data-status="sleeping" data-text="mono">IDLE</span></dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
### Callout with Title
|
||||
```html
|
||||
<div data-callout="warning">
|
||||
<span data-callout-title>Important</span>
|
||||
<p>This requires attention before proceeding.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Session Metadata
|
||||
```html
|
||||
<div data-session>
|
||||
Session <span data-text="mono">#47</span>
|
||||
<span data-mode="autonomous">autonomous</span>
|
||||
<span data-session-meta>2026-03-26 14:30 UTC</span>
|
||||
<span data-hash>a3f7b2c</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Two-Column Layout
|
||||
```html
|
||||
<div data-layout="grid-2">
|
||||
<div>
|
||||
<h2>Column 1</h2>
|
||||
<p>Content for the left side.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Column 2</h2>
|
||||
<p>Content for the right side.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Command Box
|
||||
```html
|
||||
<div data-role="command-box">
|
||||
<span class="prefix">$</span>
|
||||
<code>npm install agentic-semantic-web</code>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Conventions
|
||||
|
||||
1. **All data values in monospace** — Status, session numbers, timestamps, file paths, hashes. Use `data-text="mono"` or wrap in `<code>`.
|
||||
|
||||
2. **Combine attributes freely** — `data-text="mono dim"`, `data-wikilink data-unresolved`, etc.
|
||||
|
||||
3. **Semantic HTML first** — If HTML has a tag for it, use that. Data-attributes are for concepts HTML doesn't cover.
|
||||
|
||||
4. **No inline styles (with exception)** — `style=""` attributes are forbidden EXCEPT for CSS custom properties representing data values:
|
||||
```html
|
||||
<!-- ✅ Allowed: CSS variables for data -->
|
||||
<div style="--size: 0.8; --value: 42;">Chart bar</div>
|
||||
|
||||
<!-- ❌ Forbidden: Inline styling -->
|
||||
<div style="color: red; padding: 20px;">Content</div>
|
||||
```
|
||||
|
||||
5. **No invented classes** — The vocabulary is finite and documented here. Don't extend it without documenting.
|
||||
|
||||
## Extending the Vocabulary
|
||||
|
||||
Need a new data-attribute? Document:
|
||||
1. What concept you're expressing
|
||||
2. Why existing patterns don't work
|
||||
3. Proposed attribute name and values
|
||||
4. CSS styling needed (if you know)
|
||||
|
||||
Example proposal:
|
||||
```
|
||||
Concept: Progress indicator with label and percentage
|
||||
Why existing doesn't work: <progress> shows bar but no structured label
|
||||
Proposal: data-progress-label="70% complete" or wrapper pattern
|
||||
CSS: (defer to designer)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**This is the complete vocabulary.** If it's not listed here, ask before using it.
|
||||
Loading…
Add table
Add a link
Reference in a new issue