Skip to content

feat(game-card): Satori route handler returning 1080×1080 PNG - #92

Draft
brianespinosa wants to merge 1 commit into
mainfrom
wktr-41-satori-game-card
Draft

feat(game-card): Satori route handler returning 1080×1080 PNG#92
brianespinosa wants to merge 1 commit into
mainfrom
wktr-41-satori-game-card

Conversation

@brianespinosa

Copy link
Copy Markdown
Member

Summary

  • Replaces page.tsx + client-side GameCard components with a route.tsx route handler at the same URL returning image/png via next/og ImageResponse
  • Adds src/lib/og/fonts.ts for WOFF font loading and src/lib/og/fitText.ts for opentype.js glyph-width-based font sizing
  • Team name rows are width-matched: Arsenal's row and the "vs Opponent" row are sized so both render at equal pixel widths using getAdvanceWidth closed-form calculation
  • Adds ?simulate=away query param for testing the away fixture layout (AwayBg) without needing a real away fixture
  • Removes GameCard component directory, page.tsx, loading.tsx, and orphaned bg SVGs
  • Removes react-textfit / @types/react-textfit; adds opentype.js

Still pending

  • Branch logo drop shadow — Satori CSS filter: drop-shadow() clips to element paint area; SVG-native feDropShadow is not rendering. Current state uses box-shadow with borderRadius: 50% as an approximation. Needs more investigation tomorrow.
  • Visual verification across all six branch domains
  • Vercel preview deploy verification

Test plan

  • curl -I http://localhost:3000/tacomagooners.com/game-cardContent-Type: image/png
  • curl -o /tmp/card.png http://localhost:3000/tacomagooners.com/game-card && open /tmp/card.png — inspect 1080×1080
  • ?simulate=away variant for away layout
  • Repeat for all six branch domains
  • yarn build && yarn start — no build errors

…0×1080 PNG

- Add route.tsx with ImageResponse: branch logo, team badges, team names, kickoff time
- Add _backgrounds.tsx with HomeBg/AwayBg SVG components
- Add src/lib/og/fonts.ts for woff font loading and src/lib/og/fitText.ts for opentype.js glyph-width sizing
- Match Arsenal row width to opponent row width using getAdvanceWidth closed-form calc
- Add ?simulate=away query param for testing away fixture layout
- Remove GameCard components, page.tsx, loading.tsx, and orphaned bg SVGs
- Remove react-textfit; add opentype.js
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.

1 participant