Vigilio Desto
da1d02ccd1
- 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
1.5 KiB
1.5 KiB
| title | description | section | prev-url | prev-title | next-url | next-title | type | date | tags | ai-disclosure | ai-model | ai-provider | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Diff | Render structured diffs with line-level semantic markup — added, removed, context, hunk. | vault | status/ | Status | session/ | Session Log | vault | 2026-04-09 |
|
generated | claude-sonnet-4-5 | Anthropic |
Overview
Use data-diff on a <pre> block to render a structured diff. Child elements carry line-level semantics.
<pre data-diff>
<span data-line="hunk">@@ -12,7 +12,9 @@</span>
<span data-line="context"> function greet(name) {</span>
<span data-line="removed">- return "Hello " + name;</span>
<span data-line="added">+ const greeting = `Hello, ${name}!`;</span>
<span data-line="added">+ return greeting;</span>
<span data-line="context"> }</span>
</pre>
Line Types
| Value | Meaning |
|---|---|
hunk |
Hunk header (@@ ... @@) — muted, italic |
context |
Unchanged surrounding line — default text |
removed |
Deleted line — red background, - prefix |
added |
New line — green background, + prefix |
Inline Diffs
For single-value changes in prose, use data-diff directly on <del> and <ins>:
<p>
Latency changed from
<del data-diff="removed">240ms</del>
to
<ins data-diff="added">18ms</ins>
after the index rebuild.
</p>
Notes
The data-diff block expects monospace rendering. ASW applies font-family: var(--asw-font-mono) automatically — no additional class needed.