MDX Demo: all the components

This demo page showcases all the blog's MDX components, grouped by family. Each block fades in on scroll, following the site's design language.

Inline

You can underline with dashes, with dots, with a wave, in blue, or highlight or even in purple. A term: ΔE. Statuses: resolved to review to watch. Grammar: [#N] [$C$D#P] {[COND]?a:b} |expr|. Quiz: . Auto external link: the timelife project, or forced: ninhache.fr. A margin aside¹ illustrates the Tufte style.

Detail learned by stepping in it. ↩

Callouts

Note

Standard note.

Info

Useful information.

Astuce

Practical tip.

Attention

Warning.

Danger

Error to avoid.

Note

The trap would have been to read the buffer on the client side.

Note

Always check a hypothesis against the case that gave rise to it.

Astuce

The legacy directives still work.

Structure: Takeaways, Specs, Card + Grid

Points clés

The binary format is positional: one misread byte shifts everything.
Perceived color isn't the same as the numeric color.
Replaying byte-exact settles the choice between two candidates.

Version: 4.2.1
Dump size: 341 KB
Decoded entries: 175901 / 175901

Server

Buffer reading on the backend, raw binary format.

Client

Tooltip rendering from the resolved grammar.

Pipelines and comparisons

Steps

1
Detect the drift
We notice the format has changed.
2
Replay the candidates
We test each hypothesis byte-exact.
3
Pin the winner
The candidate that decodes everything wins.

Compare

v1 (broken)

Color was replayed per pixel.

v2 (fixed)

Color is flattened once per shape.

Annotated code

decode.ts

function decode(buf: Buffer) {
  const header = buf.readUInt16LE(0);
  const version = buf.readUInt8(2);
  return { header, version };
}

fix.ts

const dmg = base + level; 
const dmg = base + level * ratio; 
render(dmg);

Visualizations

HexDump

Binary header: hover over a field.

Color: Swatch + DeltaE

Brand cyan#56dcfc · L 82 a -27 b -26

A#3366cc · L 45 a 19 b -58

B#3467cd · L 45 a 19 b -58

ΔE 0.4

imperceptible

Tables

and	T	F	U
T	T	F	U
F	F	F	F
U	U	F	U

Table de vérité de and (logique ternaire T/F/U)

or	T	F	U
T	T	T	T
F	T	F	U
U	T	U	U

Table de vérité de or (logique ternaire T/F/U)

Tier	Risk	Action
Green	low	ok
Red	high	block

Charts

Bar chart

Line chart

Figure, Details, Timeline

See the proof (large block)

The schema JSON was 341 KB; it's collapsed here to keep the page breathable.

2019
Live game
The binary format is observed in production.
2022
Reverse engineering
We reconstruct the tooltip grammar.
2026
Web app
The ecosystem becomes a web application.

End of the demo.

Layout

Chapter

A big section

A centered section header in the site's design language, with kicker and subtitle.

The text sits to the right of the image. You can include multiple paragraphs and lists:

first point
second point

Here the image moves to the right via side="right", with the text on the left. On mobile, everything stacks cleanly.

A centered line, as a bit of breathing room.

A wide image that overflows the text column on large screens.

Part II

An opening banner

To open a big section with some breathing room.