fix: og image generation
This commit is contained in:
gosangam
+170
-167
@@ -4,215 +4,218 @@ import { join } from "node:path";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
|
||||
// Cache the font data at module level so it's only loaded once
|
||||
let geistBoldData: ArrayBuffer | null = null;
|
||||
let geistRegularData: ArrayBuffer | null = null;
|
||||
|
||||
async function loadFonts() {
|
||||
if (!geistBoldData) {
|
||||
// Fetch Geist Bold from Google Fonts CDN
|
||||
const boldRes = await fetch(
|
||||
"https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-700-normal.woff",
|
||||
);
|
||||
geistBoldData = await boldRes.arrayBuffer();
|
||||
}
|
||||
if (!geistRegularData) {
|
||||
const regularRes = await fetch(
|
||||
"https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-400-normal.woff",
|
||||
);
|
||||
geistRegularData = await regularRes.arrayBuffer();
|
||||
}
|
||||
return { bold: geistBoldData, regular: geistRegularData };
|
||||
}
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
|
||||
const title = searchParams.get("title") || "Prabhupāda Says";
|
||||
const detail = searchParams.get("detail") || "";
|
||||
const quote = searchParams.get("quote") || "";
|
||||
const title = searchParams.get("title") || "Prabhupāda Says";
|
||||
const detail = searchParams.get("detail") || "";
|
||||
const rawQuote = searchParams.get("quote") || "";
|
||||
|
||||
// Truncate for readability and to prevent overflow
|
||||
const displayTitle = title.length > 60 ? title.slice(0, 57) + "..." : title;
|
||||
const displayDetail =
|
||||
detail.length > 80 ? detail.slice(0, 77) + "..." : detail;
|
||||
const displayQuote = quote.length > 220 ? quote.slice(0, 217) + "..." : quote;
|
||||
// Fallback: if no quote provided, generate one from context
|
||||
const quote =
|
||||
rawQuote ||
|
||||
(title === "Prabhupāda Says"
|
||||
? "Browse the original, unedited books, letters, and teachings of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda — presented as they are."
|
||||
: `Read ${title}${detail ? ` — ${detail}` : ""} by His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda`);
|
||||
|
||||
// Load the Prabhupāda image as base64
|
||||
const imgData = await readFile(
|
||||
join(process.cwd(), "public/images/og-left-prabhupada-reading.png"),
|
||||
"base64",
|
||||
);
|
||||
const imgSrc = `data:image/png;base64,${imgData}`;
|
||||
// Truncate for readability and to prevent overflow
|
||||
const displayTitle = title.length > 60 ? title.slice(0, 57) + "..." : title;
|
||||
const displayDetail =
|
||||
detail.length > 80 ? detail.slice(0, 77) + "..." : detail;
|
||||
const displayQuote =
|
||||
quote.length > 220 ? quote.slice(0, 217) + "..." : quote;
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "1200",
|
||||
height: "630",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
backgroundColor: "#faf5f0",
|
||||
fontFamily: "sans-serif",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Left side — image + branding */}
|
||||
// Load fonts and image
|
||||
const fonts = await loadFonts();
|
||||
|
||||
const imgData = await readFile(
|
||||
join(process.cwd(), "public/images/og-left-prabhupada-reading.png"),
|
||||
"base64",
|
||||
);
|
||||
const imgSrc = `data:image/png;base64,${imgData}`;
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "460",
|
||||
height: "630",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
flexDirection: "row",
|
||||
backgroundColor: "#faf5f0",
|
||||
fontFamily: "Geist, sans-serif",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* Decorative quote mark */}
|
||||
{/* Left side — image + branding */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "30",
|
||||
left: "30",
|
||||
fontSize: "180",
|
||||
fontWeight: "900",
|
||||
color: "#e8b4b8",
|
||||
lineHeight: "1",
|
||||
width: 460,
|
||||
height: 630,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
“
|
||||
{/* Prabhupāda image — already contains quote mark and branding */}
|
||||
<img
|
||||
src={imgSrc}
|
||||
width={420}
|
||||
height={590}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
objectPosition: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Prabhupāda image */}
|
||||
<img
|
||||
src={imgSrc}
|
||||
width="420"
|
||||
height="500"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
objectPosition: "bottom",
|
||||
marginBottom: "0",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Branding at the bottom */}
|
||||
{/* Right side — content */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
paddingBottom: "24",
|
||||
marginTop: "-10",
|
||||
justifyContent: "center",
|
||||
paddingTop: 50,
|
||||
paddingRight: 60,
|
||||
paddingBottom: 50,
|
||||
paddingLeft: 60,
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "36",
|
||||
color: "#d4929a",
|
||||
fontStyle: "italic",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Prabhupāda
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "20",
|
||||
color: "#d4929a",
|
||||
fontWeight: "700",
|
||||
letterSpacing: "2",
|
||||
marginTop: "-2",
|
||||
}}
|
||||
>
|
||||
says
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side — content */}
|
||||
<div
|
||||
style={{
|
||||
flex: "1",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
padding: "50 60 50 30",
|
||||
gap: "16",
|
||||
}}
|
||||
>
|
||||
{/* Title */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: "44",
|
||||
fontWeight: "800",
|
||||
color: "#2d2418",
|
||||
lineHeight: "1.15",
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
maxHeight: "102",
|
||||
}}
|
||||
>
|
||||
{displayTitle}
|
||||
</div>
|
||||
|
||||
{/* Detail (chapter, verse, etc.) */}
|
||||
{displayDetail && (
|
||||
{/* Title */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: "22",
|
||||
fontWeight: "600",
|
||||
color: "#5a4a3a",
|
||||
lineHeight: "1.3",
|
||||
fontSize: 36,
|
||||
fontWeight: 700,
|
||||
color: "#2d2418",
|
||||
lineHeight: 1.15,
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
maxHeight: "30",
|
||||
maxHeight: 84,
|
||||
}}
|
||||
>
|
||||
{displayDetail}
|
||||
{displayTitle}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quote text */}
|
||||
{displayQuote && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: "16",
|
||||
overflow: "hidden",
|
||||
maxHeight: "180",
|
||||
}}
|
||||
>
|
||||
{/* Detail (chapter, verse, etc.) */}
|
||||
{displayDetail ? (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "24",
|
||||
color: "#3d3228",
|
||||
lineHeight: "1.5",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
color: "#5a4a3a",
|
||||
lineHeight: 1.3,
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
maxHeight: 30,
|
||||
}}
|
||||
>
|
||||
{displayQuote}
|
||||
{displayDetail}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{/* Read more */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6",
|
||||
marginTop: "16",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
{/* Quote text */}
|
||||
{displayQuote ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: 16,
|
||||
overflow: "hidden",
|
||||
maxHeight: 180,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 24,
|
||||
color: "#3d3228",
|
||||
lineHeight: 1.5,
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{displayQuote}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Read more */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: "18",
|
||||
fontWeight: "700",
|
||||
color: "#5a4a3a",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
Read more at
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "18",
|
||||
fontWeight: "700",
|
||||
color: "#c47a5a",
|
||||
}}
|
||||
>
|
||||
prabhupadasays.org
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
color: "#5a4a3a",
|
||||
}}
|
||||
>
|
||||
Read more at
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
color: "#c47a5a",
|
||||
}}
|
||||
>
|
||||
prabhupadasays.org
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
},
|
||||
);
|
||||
</div>,
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{
|
||||
name: "Geist",
|
||||
data: fonts.regular,
|
||||
style: "normal" as const,
|
||||
weight: 400,
|
||||
},
|
||||
{
|
||||
name: "Geist",
|
||||
data: fonts.bold,
|
||||
style: "normal" as const,
|
||||
weight: 700,
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("OG image generation failed:", e);
|
||||
return new Response("Failed to generate OG image", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user