From de0af8e3f64d06baa366f17210d353fd6f94f288 Mon Sep 17 00:00:00 2001 From: Kurt M Kluth Date: Sun, 19 Jul 2026 04:54:43 -0700 Subject: [PATCH] Playbook: prescribe a bespoke, crop-safe og.png Link unfurlers (Teams) center-crop the card to a square and clip a full-width wordmark. Record the pattern both Lisa games now use: a tools/og.ps1 that draws the game hero centered and shrinks title/tagline to fit the center safe square, verified against a simulated square crop. Co-Authored-By: Claude Opus 4.8 --- NEW-GAME-PLAYBOOK.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/NEW-GAME-PLAYBOOK.md b/NEW-GAME-PLAYBOOK.md index 67c0fa1..34a065e 100644 --- a/NEW-GAME-PLAYBOOK.md +++ b/NEW-GAME-PLAYBOOK.md @@ -22,8 +22,19 @@ it overridable via `NEXT_PUBLIC_SITE_URL`. - [ ] Green gates: `typecheck`, `lint`, unit tests, e2e tests, and a **production build**. - [ ] PWA assets present: `manifest`, service worker (registers off-localhost - only, versioned cache), icons, and `og.png` (raster; unfurlers ignore - SVG). Reuse the shared `tools/og-image.ps1` + `tools/icons.ps1`. + only, versioned cache), icons (`tools/icons.ps1`), and `og.png` (raster; + unfurlers ignore SVG). +- [ ] **Prefer a bespoke, crop-safe `og.png`** over the generic + `tools/og-image.ps1`. Write a `tools/og.ps1` that draws the game's own + hero motif (the icon/home art) centered, and keep the hero, title, and + tagline inside the centered safe square (x 285..915 of the 1200x630 + card) — measure the title/tagline and shrink to fit. Reason: link + unfurlers like Microsoft Teams center-crop the card to a square, and a + full-width wordmark gets clipped (see Lisa's Hexscape / Lisa's Tapistry + `tools/og.ps1` for the pattern: shrink-to-fit text + a hero from the + icon). Verify by simulating the center-square crop before shipping. + Point `npm run og` at `tools/og.ps1`; keep `og-image.ps1` as a fallback. + Note: unfurlers cache og images hard, so a live preview lags a redeploy. - [ ] `CLAUDE.md` and `README.md` accurate (commands, architecture, deploy, and the "main is protected" note).