229 lines
8.0 KiB
Plaintext
229 lines
8.0 KiB
Plaintext
---
|
|
title: "The Rendering Test Card"
|
|
date: "2026-07-06"
|
|
excerpt: "Every element this pipeline renders, on one page."
|
|
tags: [meta, mdx, typography]
|
|
author: "Krishna"
|
|
---
|
|
|
|
## Typography
|
|
|
|
### Signal grammar
|
|
|
|
This card is a field check, not a showpiece. It asks the renderer to carry ordinary prose, sharp metadata, and the odd piece of tactical noise without losing the thread. If the page looks calm under load, the pipeline can be trusted. If it flinches here, it will flinch in production.
|
|
|
|
Read the text like a watch log. **Strong claims are reserved for verified contact.** *Emphasis marks drift, not drama.* ~~Dead assertions stay visible until the after-action report is signed.~~ Smart punctuation should land cleanly — “quotes” should curl, and a hard break should not feel like a crash. The internal archive lives at [the field notes index](/blog/). The outside manual can sit at [rehype-pretty-code](https://rehype-pretty.pages.dev/). A bare link should wake up by itself: https://example.com/rendering-test-card.
|
|
|
|
The voice here stays terse. Each paragraph names a capability, applies pressure, and moves. That is the house rule: fewer ornaments, more bearing. A page can be severe without becoming sterile. The interesting test is whether small UI affordances remain legible when the copy refuses to decorate them.
|
|
|
|
---
|
|
|
|
## Lists
|
|
|
|
### Inventory
|
|
|
|
Unordered checks keep the scan loose:
|
|
|
|
- Confirm the route exports as a static post.
|
|
- Confirm the prose measure stays narrow enough for a long read.
|
|
- Confirm links, code, math, and admonitions agree on the same blacksite language.
|
|
- Nested notes should indent, not collapse.
|
|
- Secondary bullets should feel like subordinate evidence.
|
|
- Confirm the page still works when there is no cover image.
|
|
|
|
Ordered checks keep the operator honest:
|
|
|
|
1. Build the archive.
|
|
2. Open the rendered HTML.
|
|
3. Search for the artifacts the pipeline promises.
|
|
1. Highlighted code lines.
|
|
2. KaTeX nodes.
|
|
3. Footnote anchors.
|
|
4. Callout wrappers.
|
|
4. Record only what happened.
|
|
|
|
Task lists expose the GFM path:
|
|
|
|
- [x] Write the proving document.
|
|
- [x] Include nested structure.
|
|
- [ ] Re-run after any renderer change.
|
|
- [ ] Delete nothing until the replacement has better evidence.
|
|
|
|
---
|
|
|
|
## Code
|
|
|
|
### Highlight pressure
|
|
|
|
The first fence checks title, caption, line highlights, range highlights, and character highlights in one pass. The word `signal` should glow wherever the highlighter is told to track it.
|
|
|
|
```ts title="lib/signal.ts" caption="Line + char highlights" {2,4-5} /signal/
|
|
type Packet = { channel: string; signal: number; sealed: boolean };
|
|
|
|
export function normalizeSignal(packet: Packet) {
|
|
const signal = Math.max(0, Math.min(packet.signal, 1));
|
|
const channel = packet.channel.trim().toLowerCase();
|
|
return { ...packet, channel, signal, sealed: true };
|
|
}
|
|
```
|
|
|
|
The second fence checks a custom starting line number. It should begin at ten and still keep the gutter stable.
|
|
|
|
```tsx showLineNumbers{10}
|
|
export function StatusGlyph({ hot }: { hot: boolean }) {
|
|
return (
|
|
<span data-state={hot ? "hot" : "cold"}>
|
|
{hot ? "ONLINE" : "QUIET"}
|
|
</span>
|
|
);
|
|
}
|
|
```
|
|
|
|
Shell output should remain compact and copyable.
|
|
|
|
```bash
|
|
npm run build
|
|
grep -l "data-highlighted-line" out/blog/rendering-test-card/index.html
|
|
```
|
|
|
|
Diff blocks stay plain. No transformer-only notation is allowed here.
|
|
|
|
```diff
|
|
- status: ornamental
|
|
+ status: verified
|
|
- proof: implied
|
|
+ proof: linked
|
|
```
|
|
|
|
ANSI logs are ugly by design; the renderer should still box them cleanly.
|
|
|
|
```ansi
|
|
\x1b[36m[signal]\x1b[0m route compiled
|
|
\x1b[32m[ok]\x1b[0m artifacts exported
|
|
\x1b[33m[warn]\x1b[0m rerun after CSS changes
|
|
```
|
|
|
|
Inline code should also carry language metadata: `[1,2,3].join("-"){:js}`. If that tiny token renders with the same discipline as the larger fences, the small print is doing its job.
|
|
|
|
---
|
|
|
|
## Math
|
|
|
|
### Compact proof
|
|
|
|
Inline math should sit inside the sentence without shaking the baseline: $e^{i\pi}+1=0$. The sentence remains prose; the equation is just a hard stop.
|
|
|
|
Display math gets its own clearing. The matrix below is simple, but it is enough to prove that block rendering, centering, and KaTeX styles all survived the export.
|
|
|
|
$$
|
|
\begin{bmatrix}
|
|
1 & 0 & 0 \\
|
|
0 & \cos\theta & -\sin\theta \\
|
|
0 & \sin\theta & \cos\theta
|
|
\end{bmatrix}
|
|
\begin{bmatrix}
|
|
x \\
|
|
y \\
|
|
z
|
|
\end{bmatrix}
|
|
=
|
|
\begin{bmatrix}
|
|
x \\
|
|
y\cos\theta - z\sin\theta \\
|
|
y\sin\theta + z\cos\theta
|
|
\end{bmatrix}
|
|
$$
|
|
|
|
The goal is not mathematical density. The goal is verifying that a technical note can carry the notation it needs without importing a new surface.
|
|
|
|
---
|
|
|
|
## Callouts
|
|
|
|
### Directive sweep
|
|
|
|
:::note{title="Renderer note"}
|
|
The note block marks neutral intelligence. It should accept a title, preserve block spacing, and render like part of the system rather than a pasted warning label.
|
|
|
|
This second paragraph proves container directives can carry more than one child. The gap between paragraphs matters because real notes often contain both the condition and the reason.
|
|
:::
|
|
|
|
:::tip
|
|
Use the smallest artifact that proves the path. A single post can test more of the stack than a dozen screenshots if it names the contracts directly.
|
|
:::
|
|
|
|
:::warning
|
|
Syntax that depends on an unconfigured transformer is a trap. Plain language fences are boring. Boring is stable.
|
|
:::
|
|
|
|
:::danger
|
|
Do not fix a content failure by changing the pipeline from this post. The test card is a witness. It is not a mechanic.
|
|
:::
|
|
|
|
---
|
|
|
|
## Table
|
|
|
|
### Alignment grid
|
|
|
|
| Element | Contract | Evidence |
|
|
| :--- | :---: | ---: |
|
|
| Code | highlighted line + copy chrome | built HTML |
|
|
| Math | inline + display KaTeX | `katex` |
|
|
| Footnotes | backrefs and labels | `data-footnote` |
|
|
| Callouts | four directive variants | `callout` |
|
|
| Media | body banner, no cover crop | `/banner.jpg` |
|
|
|
|
Tables are where spacing failures show up first. Left labels, centered contracts, and right-weighted evidence should all remain readable without becoming a spreadsheet costume.
|
|
|
|
---
|
|
|
|
## Quotes & Footnotes
|
|
|
|
### Chain of custody
|
|
|
|
> The first rule is to preserve the signal.
|
|
>
|
|
> > The second rule is to mark every repeater that touched it.
|
|
>
|
|
> A quote with a nested quote should feel like a transcript, not a decoration.
|
|
|
|
Footnotes carry side-channel evidence without derailing the main line.[^1] A second footnote proves numbering, backlinks, and spacing after multiple references.[^2] The prose should not pretend the notes are invisible. They are part of the record, just filed below the fold.
|
|
|
|
[^1]: The first note verifies the GFM footnote path and the styled reference marker in the paragraph.
|
|
[^2]: The second note verifies ordered footnote output and return links after export.
|
|
|
|
---
|
|
|
|
## Details
|
|
|
|
### Collapsible packet
|
|
|
|
<details>
|
|
<summary>Open the sealed appendix</summary>
|
|
|
|
Inside the disclosure sits the low-priority material: rerun instructions, caveats, and the kind of context that should be available without owning the first read. The summary line must stay keyboard reachable. The body must keep normal prose spacing. The border should match the rest of the blacksite shell.
|
|
|
|
</details>
|
|
|
|
This section is deliberately small. A details block is not a drawer for hiding bad structure. It is a pressure valve for material that belongs nearby but not inline.
|
|
|
|
---
|
|
|
|
## Media
|
|
|
|
### Banner and controls
|
|
|
|
<figure>
|
|
|
|
|
|
|
|
<figcaption>Signal banner: wide body media, uncropped by the post header.</figcaption>
|
|
</figure>
|
|
|
|
The banner belongs in the body because the card needs to prove ordinary image rendering, not cover-image cropping. The ratio is long and low. Let it stay that way. If the image fills the measure, rounds its corners, and keeps a readable caption, the media path is aligned with the rest of the archive.
|
|
|
|
Keyboard hints should remain tactile: <kbd>⌘</kbd> <kbd>K</kbd>. They are tiny controls, but tiny controls are where aesthetic systems usually leak. This one should look like hardware, not a pill from another site.
|
|
|
|
End of card. The route has now touched typography, lists, code, math, callouts, tables, quotes, footnotes, details, media, and keyboard chrome. Any future renderer change can come back here and ask the same blunt question: did the signal survive contact?
|