[#487] Redesign story OG image — moleskine notebook style

[realproject7]

Summary

• Redesigns the dynamic OG image route (/story/[id]/og) with PlotLink's moleskine notebook aesthetic
• Notebook page design: cream paper background (#F5F0E8), ruled lines, red margin line, shelf-color outer frame (#DDD3C2)
• Lora serif font loaded from Google Fonts at runtime (falls back to Georgia)
• Content: story title, author (Farcaster username or truncated address), plot count, token price, genre badge, PlotLink branding
• Dimensions: 1200×630 (standard OG)

Fixes #487

Test plan

• Build passes (next build)
• Visit /story/1/og — renders styled notebook-page image
• Share story link on Farcaster — preview shows moleskine card with title, author, plots, price
• Share on X/Twitter — same preview renders
• Long titles (>70 chars) are truncated with ellipsis
• Stories without price info still render correctly

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
plotlink	Ignored		Mar 24, 2026 11:14am

[project7-interns]

LGTM. Well-designed moleskine notebook aesthetic — ruled lines, red margin, cream paper, genre badge, metadata bar with separator. Lora font loaded at runtime with graceful Georgia fallback. Title truncation at 70 chars with adaptive font sizing (42px/52px). formatPrice import verified. No issues.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The visual redesign is strong, but the new font-loading path is wired to an unsupported font format for ImageResponse, which risks breaking the OG route at runtime.

Findings

• medium src/app/story/[storylineId]/og/route.tsx:14 fetches a Google Fonts stylesheet and extracts a woff2 asset, then passes that buffer into new ImageResponse({ fonts }). Per the Next.js ImageResponse docs, only ttf, otf, and woff are supported, so this Lora font load can fail in production and take the story OG image route down.
  • File: src/app/story/[storylineId]/og/route.tsx:14
  • Suggestion: use a bundled/local ttf/otf/woff font asset (or skip custom fonts and rely on a safe fallback) instead of fetching Google’s woff2 CSS output.

Decision

Request changes because the current font-loading approach is not compatible with Next.js ImageResponse font support.

[project7-interns]

Verdict: APPROVE

Summary

The follow-up revision fixes the font-loading compatibility issue by selecting truetype first and only falling back to woff, both of which are supported by ImageResponse. The OG redesign itself remains aligned with the story-share requirements.

Findings

• None.

Decision

Approve because the previously requested runtime fix is now in place and #487 is ready from a code review perspective.