Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
realproject7 merged 3 commits into from
Mar 24, 2026
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f3e674
[#510] Redesign OG image to match moleskine notebook shape
realproject7 Mar 24, 2026
4e784d8
[#510] Revert font URL to wght@700 only
realproject7 Mar 24, 2026
273a907
[#510] Fix notebook aspect ratio to exact 2:3 matching StoryCard
realproject7 Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 138 additions & 109 deletions src/app/story/[storylineId]/og/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export async function GET(
: truncateAddress(sl.writer_address);
const plotLabel = sl.plot_count === 1 ? "plot" : "plots";
const titleDisplay =
sl.title.length > 70 ? `${sl.title.slice(0, 67)}...` : sl.title;
sl.title.length > 60 ? `${sl.title.slice(0, 57)}...` : sl.title;

const fonts = fontData
? [{ name: "Lora", data: fontData, weight: 700 as const }]
Expand All @@ -86,40 +86,45 @@ export async function GET(
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#DDD3C2",
padding: "32px",
padding: "40px 60px",
fontFamily: fontData ? "Lora" : "Georgia, serif",
}}
>
{/* Notebook page */}
{/* Left: Moleskine notebook cover */}
<div
style={{
width: "100%",
height: "100%",
width: "350px",
height: "525px",
display: "flex",
flexDirection: "column",
backgroundColor: "#F5F0E8",
borderRadius: "8px",
padding: "0",
boxShadow: "4px 4px 16px rgba(44, 24, 16, 0.15)",
overflow: "hidden",
backgroundColor: "#F5EFE6",
borderRadius: "5px 15px 15px 5px",
border: "1px solid #D4C5B0",
boxShadow:
"4px 6px 20px rgba(44, 24, 16, 0.18), 1px 1px 4px rgba(44, 24, 16, 0.08)",
position: "relative",
overflow: "hidden",
flexShrink: 0,
}}
>
{/* Red margin line */}
{/* Elastic band */}
<div
style={{
position: "absolute",
left: "80px",
top: "0",
bottom: "0",
width: "2px",
backgroundColor: "hsl(350, 35%, 88%)",
top: "-1px",
bottom: "-1px",
right: "22px",
width: "8px",
borderRadius: "2px",
background: "rgba(139, 69, 19, 0.18)",
display: "flex",
}}
/>

{/* Ruled lines */}
{/* Ruled lines background */}
<div
style={{
position: "absolute",
Expand All @@ -129,144 +134,168 @@ export async function GET(
bottom: "0",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
paddingTop: "56px",
gap: "0",
paddingTop: "28px",
}}
>
{Array.from({ length: 16 }).map((_, i) => (
{Array.from({ length: 18 }).map((_, i) => (
<div
key={i}
style={{
width: "100%",
height: "34px",
borderBottom: "1px solid hsl(234, 25%, 93%)",
height: "28px",
borderBottom: "1px solid rgba(232, 223, 208, 0.6)",
display: "flex",
}}
/>
))}
</div>

{/* Content overlay */}
{/* Content inside notebook: title + author */}
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "100%",
padding: "48px 56px 40px 104px",
justifyContent: "center",
alignItems: "center",
flex: 1,
padding: "40px 32px",
position: "relative",
textAlign: "center",
}}
>
{/* Top: PlotLink branding */}
<div
style={{
fontSize: titleDisplay.length > 35 ? "32px" : "38px",
fontWeight: 700,
color: "#8B4513",
lineHeight: 1.25,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
textAlign: "center",
justifyContent: "center",
maxWidth: "290px",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
gap: "10px",
fontSize: "20px",
fontWeight: 700,
color: "#8B4513",
letterSpacing: "0.05em",
textTransform: "uppercase",
}}
>
PlotLink
</div>
{sl.genre && (
<div
style={{
fontSize: "16px",
color: "#8B7355",
border: "1px solid #D4C5B0",
borderRadius: "4px",
padding: "4px 12px",
display: "flex",
}}
>
{sl.genre}
</div>
)}
{titleDisplay}
</div>

{/* Center: Story title */}
<div
style={{
fontSize: "18px",
color: "#8B7355",
marginTop: "20px",
display: "flex",
flexDirection: "column",
gap: "20px",
flex: "1",
justifyContent: "center",
paddingRight: "24px",
}}
>
<div
style={{
fontSize: titleDisplay.length > 40 ? "42px" : "52px",
fontWeight: 700,
color: "#2C1810",
lineHeight: 1.2,
display: "flex",
}}
>
{titleDisplay}
</div>
<div
style={{
fontSize: "24px",
color: "#8B7355",
display: "flex",
}}
>
by {authorName}
</div>
by {authorName}
</div>
</div>
</div>

{/* Bottom: metadata bar */}
{/* Right: Metadata on dark background */}
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "525px",
marginLeft: "56px",
flex: 1,
maxWidth: "580px",
}}
>
{/* Top: PlotLink branding */}
<div
style={{
display: "flex",
flexDirection: "column",
gap: "16px",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
borderTop: "2px solid #D4C5B0",
paddingTop: "20px",
fontSize: "28px",
fontWeight: 700,
color: "#8B4513",
letterSpacing: "0.08em",
textTransform: "uppercase",
}}
>
PlotLink
</div>
<div
style={{
display: "flex",
fontSize: "16px",
color: "#8B7355",
letterSpacing: "0.03em",
}}
>
Tokenised collaborative fiction
</div>
</div>

{/* Middle: genre + stats */}
<div
style={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
{sl.genre ? (
<div
style={{
display: "flex",
gap: "32px",
fontSize: "20px",
color: "#8B7355",
}}
>
<span style={{ display: "flex" }}>
{sl.plot_count} {plotLabel}
</span>
{priceDisplay && (
<span style={{ display: "flex", color: "#8B4513", fontWeight: 700 }}>
{priceDisplay}
</span>
)}
</div>
<div
style={{
alignSelf: "flex-start",
fontSize: "16px",
color: "#D4C5B0",
display: "flex",
color: "#8B7355",
border: "1.5px solid #C4B59E",
borderRadius: "4px",
padding: "6px 16px",
textTransform: "uppercase",
letterSpacing: "0.08em",
}}
>
plotlink.xyz
{sl.genre}
</div>
) : (
<div style={{ display: "flex" }} />
)}
<div
style={{
display: "flex",
gap: "28px",
fontSize: "22px",
color: "#6B5B47",
}}
>
<span style={{ display: "flex" }}>
{sl.plot_count} {plotLabel}
</span>
{priceDisplay && (
<span
style={{
display: "flex",
color: "#8B4513",
fontWeight: 700,
}}
>
{priceDisplay}
</span>
)}
</div>
</div>

{/* Bottom: domain */}
<div
style={{
display: "flex",
fontSize: "18px",
color: "#A89880",
}}
>
plotlink.xyz
</div>
</div>
</div>
),
Expand Down
Loading