og image

not perfect but that's something
Vahor · Apr 30, 2024 · 5f3e209 · 5f3e209
1 parent 7fb4458
commit 5f3e209
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/public/og-bg.jpg b/public/og-bg.jpg
diff --git a/src/app/og/[...slug]/route.tsx b/src/app/og/[...slug]/route.tsx
@@ -17,34 +17,75 @@ export async function GET(_: NextRequest, params: BlogPageProps) {
 	}
 
 	// Font
-	const interSemiBold = fetch(
-		`${BASE_URL}/fonts/Inter-SemiBold.ttf`,
-	).then((res) => res.arrayBuffer())
+	const interSemiBold = fetch(`${BASE_URL}/fonts/Inter-SemiBold.ttf`).then(
+		(res) => res.arrayBuffer(),
+	);
 
 	return new ImageResponse(
 		<div
 			style={{
-				fontSize: 48,
-				background: "white",
-				width: "100%",
 				height: "100%",
+				width: "100%",
 				display: "flex",
-				alignItems: "center",
+				flexDirection: "column",
+				alignItems: "flex-start",
 				justifyContent: "center",
+				backgroundImage: `url(${BASE_URL}/og-bg.jpg)`,
 			}}
 		>
-			{post.title}
+			<div
+				style={{
+					paddingLeft: 50,
+					display: "flex",
+					fontSize: 110,
+					fontFamily: "Inter",
+					letterSpacing: "-0.05em",
+					fontStyle: "normal",
+					lineHeight: "105px",
+					color: "white",
+					whiteSpace: "pre-wrap",
+				}}
+			>
+				{post.title}
+			</div>
+
+			<div
+				style={{
+					position: "absolute",
+					bottom: 50,
+					left: 50,
+					display: "flex",
+					fontSize: 24,
+					fontFamily: "Inter",
+					letterSpacing: "-0.05em",
+					fontStyle: "normal",
+					color: "white",
+					whiteSpace: "pre-wrap",
+				}}
+			>
+				<img
+					src={`${BASE_URL}/logo-dark.svg`}
+					style={{
+						width: 40,
+						height: 40,
+						marginTop: -5,
+						marginRight: 15,
+					}}
+					alt=""
+				/>
+				<span>Nathan David</span>
+			</div>
 		</div>,
 		{
 			...size,
 			fonts: [
 				{
-					name: 'Inter',
+					name: "Inter",
 					data: await interSemiBold,
-					style: 'normal',
+					style: "normal",
 					weight: 400,
 				},
-			]
+			],
 		},
 	);
 }