fix: restore consensus series SVG animations

[vatsalpatel]

Fixes #73

Restores the 16 step-through SVG animations in the Generalized Consensus series, which have rendered as static images since the Fumadocs migration (ac5d0a5).

The problem

The consensus figures are single SVGs holding every state of a sequence, each state given an id — part07-fig3.svg carries 70 of them. A GSAP timeline fetched the SVG, inlined it, hid everything not yet reached, and revealed one step at a time. Several figures deliberately share one SVG and differ only in the timeline.

ac5d0a5 deleted the animation layer (17 files, including svg-animator.ts and 14 per-figure timelines) and dropped gsap. scripts/migrate-from-docusaurus.mjs:93-100 rewrote each <AnimatedSVG src={…} onAnimate={…} /> into a plain markdown image, capturing only src and alt — onAnimate was discarded. With no timeline to hide anything, the browser now paints all 70 elements at once, so figures 3–8 on part 7 render as the same unreadable image.

The fix

Restore the deleted code, then reconnect it in the renderer rather than in content:

• src/lib/svg-animator.ts, and the 14 timeline scripts — restored byte-for-byte from ac5d0a5^
• gsap@^3.13.0 — restored at its original version
• src/components/consensus-animations.ts (new) — maps each figure to its timeline and the props it was authored with
• src/components/animated-figure.tsx (new) — renders markdown images normally, except the 16 animated ones
• src/components/mdx.tsx — img: AnimatedFigure

No content changes. The migration discarded onAnimate but preserved alt, and all 16 (alt, svg) pairs are unique, so the caption is enough to recover which timeline belongs to which figure. Every prop in the registry — autoPlay, showControls, showRestartButton, width, height, style — was extracted mechanically from the pre-migration <AnimatedSVG> blocks and diffed field-by-field against them, so the figures render exactly as authored. That includes two deliberate one-offs: part 6's "Figure 1: Revocation methods" autoplays with a replay button rather than stepping, and part06-fig3 is shifted translateX(-450px) because it is 2000px wide.

This fixes all five posts and both the blog and docs copies at once.

Notes for review

Three things that aren't obvious:

AnimatedSVG.tsx is not a pure revert. Markdown images are wrapped in a paragraph, and a <div> anywhere inside a <p> makes the browser close the paragraph early — desyncing the parsed DOM from React's tree and breaking hydration. All four wrappers are now <span>s with explicit display. The original never hit this because block-level JSX in MDX isn't paragraph-wrapped. This is the only behavioural change to restored code (22 lines).

Matching the SVG can't strip the build hash lexically. Dev serves /img/consensus/part07-fig3.svg; a build emits /assets/part07-fig3-DEk2p0Pr.svg. Vite hashes may themselves contain - and _ (Bexfl0_P, DDkSJ-hG, Dj4zJxj-), so the name is matched as a prefix instead. Worth testing against pnpm build, not just pnpm dev — a stripping approach passes in dev and silently falls back to static images in a build.

Only the 16 known figures are swapped. Everything else falls through to defaultMdxComponents.img untouched, including the genuinely-static figures on the same pages (part07-fig1/2/6, part08-fig1, genpolicy).

Testing

Verified against a production build (pnpm build + vite preview), not just dev:

Page	Animations	Still static	<p><div>
part4 · part-04	1/1	0	0
part6 · part-06	5/5	0	0
part7 · part-07	6/6	0	0
part8 · part-08	3/3	0	0
part10 · part-10	1/1	0	0

All 10 routes return 200 and all 6 hashed SVG assets resolve at runtime. Registry props diff clean against the originals for all 16 figures across every field. pnpm types:check reports the same 4 pre-existing errors (blog-index-sections.tsx, __root.tsx, blog/$slug.tsx) and no new ones.

[vercel]

@vatsalpatel is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

[vatsalpatel]

@SaxonF / @pamelachia Can you please review?