Ludo
910b0e42a6
Separate framework source from website: - src/layers/ + src/main.css: CSS framework source (was assets/css/) - site/: Hugo website (content/, layouts/, hugo.toml) - dist/: built output (asw.css, asw.min.css) - vendor/open-props/: vendored dependency with version tracking - Hugo module mounts: dist/ → static, site runs from site/ Build: hugo --source site/ passes (105 pages). npm run build produces dist/asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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. | notes | status/ | Status | session/ | Session Log | notes | 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.