Skip to content

Add PDF/SVG exports, wire up tooltip a11y, drop leftover footer branding#6

Merged
Hefrock merged 1 commit into
mainfrom
claude/intelligent-gates-2s4z93
Jun 20, 2026
Merged

Add PDF/SVG exports, wire up tooltip a11y, drop leftover footer branding#6
Hefrock merged 1 commit into
mainfrom
claude/intelligent-gates-2s4z93

Conversation

@Hefrock

@Hefrock Hefrock commented Jun 20, 2026

Copy link
Copy Markdown
Owner

Summary

Closes out the remaining items from the last gap analysis:

  • scripts/export-pdf.js — prints index.html to exports/ai-agent-patterns.pdf via Playwright. Added a @media print block to index.html that hides the toolbar and keeps cards from splitting across page breaks.
  • scripts/export-svg.js — extracts each pattern's flow diagram as a standalone exports/svg/pattern-{slug}.svg. Bakes every element's resolved fill/stroke/font-*/filter via getComputedStyle and inlines the shared #arrow marker + #nodeShadow filter <defs>, so each file opens correctly with zero dependency on the page's stylesheet or CSS custom properties.
  • Both wired into package.json (npm run export:pdf / export:svg) and into ci.yml's PR validation smoke test.
  • Statefulness tooltip a11y: the meta value now has aria-describedby pointing at a visually-hidden (.sr-only) span carrying the same explanation text, since the CSS ::after tooltip content isn't reliably exposed to screen readers.
  • Removed leftover "Built with Claude" footer text — found while visually reviewing the new PDF export; this looks like what "remove your branding at the bottom" was originally asking for and it had slipped through.
  • Updated CLAUDE.md and README.md to document all of the above.

Test plan

  • npm run validate passes (15/15 patterns)
  • Regenerated and visually inspected all 3 rendered PDF pages (toolbar hidden, no clipped cards, all colors/pills correct)
  • Regenerated all 15 SVGs; rendered 3 standalone (loop, parallel-cluster, branch-cluster) directly from disk in a browser with no other files present — all render pixel-correct with proper arrowheads, drop shadows, and dashed styling
  • Verified aria-describedby resolves to the correct hidden text for a sample card
  • Re-ran export:images / export:pptx after the footer/CSS edits — no regressions

Generated by Claude Code

…edby

- scripts/export-pdf.js prints index.html to exports/ai-agent-patterns.pdf
  via Playwright, with a new @media print block hiding the toolbar and
  preventing cards from splitting across page breaks.
- scripts/export-svg.js extracts each pattern's flow diagram as a fully
  standalone exports/svg/pattern-{slug}.svg by baking computed styles and
  inlining the shared arrow marker/shadow filter defs.
- Both wired into npm scripts and ci.yml's PR validation smoke test.
- Statefulness meta value now has aria-describedby pointing at a visually
  hidden span with the same tooltip text, since the CSS ::after tooltip
  isn't exposed to screen readers.
- Removed the leftover "Built with Claude" site footer text.
- Updated CLAUDE.md/README.md to document all of the above.
@Hefrock
Hefrock merged commit c97989d into main Jun 20, 2026
1 check passed
@Hefrock
Hefrock deleted the claude/intelligent-gates-2s4z93 branch June 20, 2026 00:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants