mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-19 17:27:26 +02:00
💄 Custom og-image for blog posts (#814)
This commit is contained in:
parent
a9e41b2f0d
commit
c24af3d808
7 changed files with 253 additions and 11 deletions
80
apps/landing/src/pages/api/og-image.tsx
Normal file
80
apps/landing/src/pages/api/og-image.tsx
Normal file
|
@ -0,0 +1,80 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
import { ImageResponse } from "@vercel/og";
|
||||
import { NextRequest } from "next/server";
|
||||
|
||||
export const config = {
|
||||
runtime: "edge",
|
||||
};
|
||||
|
||||
const regularFont = fetch(
|
||||
new URL("/public/static/fonts/inter-regular.ttf", import.meta.url),
|
||||
).then((res) => res.arrayBuffer());
|
||||
|
||||
const boldFont = fetch(
|
||||
new URL("/public/static/fonts/inter-bold.ttf", import.meta.url),
|
||||
).then((res) => res.arrayBuffer());
|
||||
|
||||
export default async function handler(req: NextRequest) {
|
||||
const [regularFontData, boldFontData] = await Promise.all([
|
||||
regularFont,
|
||||
boldFont,
|
||||
]);
|
||||
|
||||
const { searchParams } = req.nextUrl;
|
||||
const title = searchParams.get("title");
|
||||
const excerpt = searchParams.get("excerpt");
|
||||
const type = searchParams.get("type");
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<div tw="bg-gray-50 h-full flex-col w-full px-18 py-16 flex">
|
||||
<div tw="mb-16 flex justify-between">
|
||||
<div tw="flex justify-between items-center w-full">
|
||||
<img
|
||||
alt="Rallly"
|
||||
src="https://rallly.co/logo-color.svg"
|
||||
height={64}
|
||||
/>
|
||||
<div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
|
||||
<span tw="bg-gray-200 px-6 py-3 rounded-full">{type}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 tw="flex flex-col text-7xl leading-tight font-bold tracking-tight text-gray-900 text-left">
|
||||
<span>{title}</span>
|
||||
</h2>
|
||||
{excerpt ? (
|
||||
<p tw="text-4xl leading-relaxed text-gray-500">{excerpt}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{
|
||||
name: "Inter",
|
||||
data: regularFontData,
|
||||
weight: 400,
|
||||
},
|
||||
{
|
||||
name: "Inter",
|
||||
data: boldFontData,
|
||||
weight: 700,
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue