krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ui fix

Browse Source
This commit is contained in:
gosangam
2026-06-15 17:15:38 +05:30
parent cb376f8497
commit 0608e2b6f6
3 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/og/collection/[id]/route.tsx
+14 -13
View File
@@ -3,7 +3,7 @@
/** /**
* OG card for a public collection (`/c/<id>`). * OG card for a public collection (`/c/<id>`).
* *
* Renders a 1200×630 image with the collection title as the centrepiece, * Renders a 1200×1200 (square) image with the collection title as the centrepiece,
* an item-count line, and the cover image dimmed behind it when present * an item-count line, and the cover image dimmed behind it when present
* (flat cream otherwise). Matches the post/profile card aesthetic. * (flat cream otherwise). Matches the post/profile card aesthetic.
* *
@@ -83,7 +83,7 @@ export async function GET(
<div <div
style={{ style={{
width: 1200, width: 1200,
height: 630, height: 1200,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
backgroundColor: hasImage ? "#1a1410" : "#faf5f0", backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
@@ -97,13 +97,13 @@ export async function GET(
alt="" alt=""
src={bgImageUrl} src={bgImageUrl}
width={1200} width={1200}
height={630} height={1200}
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
width: 1200, width: 1200,
height: 630, height: 1200,
objectFit: "cover", objectFit: "cover",
filter: "brightness(0.45)", filter: "brightness(0.45)",
}} }}
@@ -114,7 +114,7 @@ export async function GET(
top: 0, top: 0,
left: 0, left: 0,
width: 1200, width: 1200,
height: 630, height: 1200,
background: background:
"linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))", "linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))",
}} }}
@@ -130,7 +130,7 @@ export async function GET(
flex: 1, flex: 1,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
padding: 80, padding: 96,
}} }}
> >
{/* Eyebrow */} {/* Eyebrow */}
@@ -154,9 +154,9 @@ export async function GET(
fontSize: title.length > 48 ? 60 : 76, fontSize: title.length > 48 ? 60 : 76,
fontWeight: 700, fontWeight: 700,
color: textPrimary, color: textPrimary,
lineHeight: 1.15, lineHeight: 1.2,
marginTop: 24, marginTop: 28,
maxHeight: 320, maxHeight: 560,
overflow: "hidden", overflow: "hidden",
}} }}
> >
@@ -169,9 +169,9 @@ export async function GET(
display: "flex", display: "flex",
fontSize: 28, fontSize: 28,
color: textSecondary, color: textSecondary,
lineHeight: 1.4, lineHeight: 1.45,
marginTop: 24, marginTop: 28,
maxHeight: 120, maxHeight: 280,
overflow: "hidden", overflow: "hidden",
}} }}
> >
@@ -188,6 +188,7 @@ export async function GET(
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
marginTop: 48,
}} }}
> >
<div style={{ fontSize: 24, color: textSecondary, display: "flex" }}> <div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
@@ -202,7 +203,7 @@ export async function GET(
), ),
{ {
width: 1200, width: 1200,
height: 630, height: 1200,
fonts: [ fonts: [
{ {
name: "Noto Sans", name: "Noto Sans",
app/api/og/post/[id]/route.tsx
+14 -12
View File
@@ -3,7 +3,7 @@
/** /**
* OG card for a single post. * OG card for a single post.
* *
* Renders a 1200×630 image with: * Renders a 1200×1200 (square) image with:
* *
* • The post caption (the quote) as the visual centrepiece, in * • The post caption (the quote) as the visual centrepiece, in
* serif-toned weight so it reads as a passage rather than UI chrome. * serif-toned weight so it reads as a passage rather than UI chrome.
@@ -96,7 +96,7 @@ export async function GET(
<div <div
style={{ style={{
width: 1200, width: 1200,
height: 630, height: 1200,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
backgroundColor: hasImage ? "#1a1410" : "#faf5f0", backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
@@ -111,13 +111,13 @@ export async function GET(
alt="" alt=""
src={bgImageUrl} src={bgImageUrl}
width={1200} width={1200}
height={630} height={1200}
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
width: 1200, width: 1200,
height: 630, height: 1200,
objectFit: "cover", objectFit: "cover",
filter: "brightness(0.45)", filter: "brightness(0.45)",
}} }}
@@ -129,7 +129,7 @@ export async function GET(
top: 0, top: 0,
left: 0, left: 0,
width: 1200, width: 1200,
height: 630, height: 1200,
background: background:
"linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))", "linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1))",
}} }}
@@ -147,19 +147,19 @@ export async function GET(
flex: 1, flex: 1,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
padding: 80, padding: 96,
}} }}
> >
{/* Caption — the centrepiece */} {/* Caption — the centrepiece */}
<div <div
style={{ style={{
display: "flex", display: "flex",
fontSize: displayCaption.length > 160 ? 36 : 44, fontSize: displayCaption.length > 180 ? 42 : 52,
fontWeight: 700, fontWeight: 700,
color: textPrimary, color: textPrimary,
lineHeight: 1.35, lineHeight: 1.4,
marginTop: 20, marginTop: 24,
maxHeight: 380, maxHeight: 720,
overflow: "hidden", overflow: "hidden",
zIndex: 1, zIndex: 1,
}} }}
@@ -175,8 +175,9 @@ export async function GET(
fontWeight: 700, fontWeight: 700,
color: textSecondary, color: textSecondary,
letterSpacing: 4, letterSpacing: 4,
lineHeight: 1.35,
textTransform: "uppercase", textTransform: "uppercase",
marginTop: 28, marginTop: 36,
zIndex: 1, zIndex: 1,
}} }}
> >
@@ -193,6 +194,7 @@ export async function GET(
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
marginTop: 48,
zIndex: 1, zIndex: 1,
}} }}
> >
@@ -271,7 +273,7 @@ export async function GET(
), ),
{ {
width: 1200, width: 1200,
height: 630, height: 1200,
fonts: [ fonts: [
{ {
name: "Noto Sans", name: "Noto Sans",
lib/og.ts
+2 -2
View File
@@ -459,7 +459,7 @@ export function ogForPost(p: {
openGraph: { openGraph: {
title, title,
description, description,
images: [{ url: imageUrl, width: 1200, height: 630, alt: reference }], images: [{ url: imageUrl, width: 1200, height: 1200, alt: reference }],
siteName: "Prabhupāda Says", siteName: "Prabhupāda Says",
}, },
twitter: { twitter: {
@@ -495,7 +495,7 @@ export function ogForCollection(c: {
openGraph: { openGraph: {
title, title,
description, description,
images: [{ url: imageUrl, width: 1200, height: 630, alt: title }], images: [{ url: imageUrl, width: 1200, height: 1200, alt: title }],
siteName: "Prabhupāda Says", siteName: "Prabhupāda Says",
}, },
twitter: { twitter: {