docs(blog): Your Workflow History Is Storing More Than You Think

[Bueller87]

What changed?

Added the Week 1 pillar blog post for the DataConverter series: Your Workflow History Is Storing More Than You Think.

• New blog post at blog/2026-06-03-workflow-history-data-converter/ covering the three DataConverter patterns (compression, claim-check, encryption) as a discovery-first post designed to drive traffic to the new concept doc and samples
• PatternCards React component: collapsible cards for each pattern with symptom, explanation, tradeoff, and a direct link to the concept doc section; dark/light mode aware
• PayloadFlow React component: animated encode/decode flow diagram with tab strip to switch between all three patterns; dark/light mode aware
• Pipeline illustration (data-pipeline-exposed-vs-protected.png)

Why?

Part 1 of a 3-post series (pillar + 2 spokes) introducing the DataConverter concept doc and Go/Java samples. The pillar's job is awareness and discovery, not instruction. It hooks readers on the plaintext-history problem and drives clicks to the concept doc. Weeks 2 and 3 will deep-dive on claim-check and encryption respectively.

How did you verify it?

• Verified locally using npm run preview:github-pages -- --serve.
• Checked dark mode and light mode rendering for both React components and confirmed all concept doc anchor links resolve correctly.

Potential risks

None — new content only, no changes to existing docs or config.

Related changes

N/A

[gitar-bot]

Code Review ✅ Approved 2 resolved / 2 findings

Adds the DataConverter pillar blog post along with interactive PatternCards and PayloadFlow components. Fixes for animation timer leaks and keyboard accessibility have been implemented, with no further issues found.

✅ 2 resolved

✅ Bug: Animation timer leak if component unmounts mid-animation

📄 blog/2026-06-03-workflow-history-data-converter/PayloadFlow/index.tsx:50-64
In PayloadFlow/index.tsx, the runAnimation function chains multiple setTimeout calls via the tick closure, but timerRef.current only holds the last scheduled timeout ID. If the component unmounts while the particle is traveling, the cleanup effect on line 75 (clearTimer()) will only cancel the most recent setTimeout — any previously scheduled tick that hasn't fired yet could still execute on an unmounted component, causing a React state-update-on-unmounted-component warning.

Since each tick call schedules the next one, and timerRef is updated before the next fires, this is actually safe in practice because only one timeout is pending at a time (each fires before scheduling the next). However, the useEffect cleanup on activeIdx change (line 69-73) has a subtle issue: if a user switches tabs while the animation is in the traveling phase, clearTimer() cancels the current pending tick, but setPhase("idle") and setParticleX(0) run — this is correct behavior. No real bug here after closer inspection.

✅ Quality: Accessibility: interactive cards missing keyboard support

📄 blog/2026-06-03-workflow-history-data-converter/PatternCards/index.tsx:47-61
In PatternCards/index.tsx, the expandable cards use a <div onClick={...}> pattern (line 49) without role="button", tabIndex, or onKeyDown handlers. This makes the cards inaccessible to keyboard-only users — they cannot focus or activate the cards without a mouse. Similarly, the tab strip buttons in PayloadFlow are proper <button> elements (good), but the card divs are not.

Rules ✅ All requirements met

Repository Rules

✅ Markdown Frontmatter Completeness: The new blog post contains complete and well-formatted YAML frontmatter adhering to all structural and quality requirements.

✅ PR Description Quality Standards: The PR description clearly states what changed, why, and how it was verified including production preview testing with dark/light mode checks.

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}