Skip to content

[#510] Fix OG image to match moleskine notebook shape#513

Merged
realproject7 merged 3 commits intomainfrom
task/510-og-image-moleskine
Mar 24, 2026
Merged

[#510] Fix OG image to match moleskine notebook shape#513
realproject7 merged 3 commits intomainfrom
task/510-og-image-moleskine

Conversation

@realproject7
Copy link
Copy Markdown
Owner

@realproject7 realproject7 commented Mar 24, 2026

Summary

  • Redesigned OG image to match home page StoryCard moleskine notebook shape
  • Title + author displayed INSIDE a portrait notebook cover (cream bg, rounded corners, elastic band)
  • Metadata (PlotLink branding, genre badge, plot count, price, plotlink.xyz) displayed OUTSIDE on darker shelf background
  • Generous 40px/60px margins prevent cropping in Farcaster/X previews
  • Notebook uses same styling as StoryCard: #F5EFE6 bg, 5px 15px 15px 5px border-radius, elastic band

Fixes #510

Test plan

  • Visit /story/1/og to preview the OG image
  • Share a story link in Farcaster — verify no clipping on any edge
  • Share in X/Twitter — verify thumbnail renders fully
  • Test with long titles (60+ chars) and short titles
  • Verify genre badge, plot count, price, and plotlink.xyz all visible outside notebook

🤖 Generated with Claude Code

@realproject7 @claude
[#510] Redesign OG image to match moleskine notebook shape
1f3e674 
Move title + author inside a portrait moleskine notebook cover
(matching StoryCard shape/styling), with metadata (PlotLink branding,
genre, plot count, price, plotlink.xyz) outside on the darker
background. Adds generous margins to prevent cropping in social
previews.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@realproject7 @claude
[#510] Revert font URL to wght@700 only
4e784d8 
Fix regression: requesting both 400;700 weights caused the regex to
grab the 400 (regular) URL instead of 700 (bold), making title text
render thinner than intended.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 24, 2026 •
edited
Loading

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 24, 2026 8:21pm

Request Review

project7-interns
project7-interns approved these changes Mar 24, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font weight fix confirmed. LGTM — notebook shape, layout, and margins all look correct.

project7-interns
project7-interns requested changes Mar 24, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The overall direction is right, but the notebook silhouette still does not match the home page StoryCard the ticket explicitly references.

Findings

  • [medium] The OG notebook uses a different aspect ratio than the home page StoryCard, so the book reads visibly wider than the reference component.
    • File: src/app/story/[storylineId]/og/route.tsx:99
    • Suggestion: Match the StoryCard geometry from src/components/StoryCard.tsx:58 (aspect-[2/3]) instead of hardcoding 370x530, or derive one dimension from the other with that same ratio.

Decision

Requesting changes because issue #510 asks for the exact home page moleskine shape, and the current width/height pair does not match that reference.

@realproject7 @claude
[#510] Fix notebook aspect ratio to exact 2:3 matching StoryCard
273a907 
Changed from 370x530 (~0.70) to 350x525 (exactly 2/3) to match
the StoryCard's aspect-[2/3] class.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
project7-interns approved these changes Mar 24, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The updated OG route now matches the StoryCard's 2:3 notebook silhouette, which resolves the blocking fidelity issue from the prior review.

Findings

  • No outstanding findings in the updated diff.

Decision

Approve. The current PR head satisfies the notebook-shape requirement from issue #510. I did not render the social preview locally.

@realproject7 realproject7 merged commit cdbbbc4 into main Mar 24, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@project7-interns project7-interns project7-interns approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix OG image — match home page moleskine book shape with proper margins

2 participants

@realproject7 @project7-interns