openstatus.dev
Openstatus
www.openstatus.dev
1/* eslint-disable @next/next/no-img-element */
2import { ImageResponse } from "next/og";
3
4import { OG_DESCRIPTION, TITLE } from "@/app/shared-metadata";
5import { SIZE } from "./utils";
6
7export const runtime = "edge";
8
9const FOOTER = "openstatus.dev";
10const CATEGORY = "product";
11
12export async function GET(req: Request) {
13 const fontMonoRegular = await fetch(
14 new URL("../../../public/fonts/RobotoMono-Regular.ttf", import.meta.url),
15 ).then((res) => res.arrayBuffer());
16 const fontMonoMedium = await fetch(
17 new URL("../../../public/fonts/RobotoMono-Medium.ttf", import.meta.url),
18 ).then((res) => res.arrayBuffer());
19 const fontMonoBold = await fetch(
20 new URL("../../../public/fonts/RobotoMono-Bold.ttf", import.meta.url),
21 ).then((res) => res.arrayBuffer());
22
23 const { searchParams } = new URL(req.url);
24
25 const title =
26 (searchParams.has("title") && searchParams.get("title")) || TITLE;
27
28 const description =
29 (searchParams.has("description") && searchParams.get("description")) ||
30 OG_DESCRIPTION;
31
32 const footer =
33 (searchParams.has("footer") && searchParams.get("footer")) || FOOTER;
34
35 const category =
36 (searchParams.has("category") && searchParams.get("category")) || CATEGORY;
37
38 return new ImageResponse(
39 <div tw="relative flex flex-col items-start justify-start w-full h-full bg-gray-100">
40 <div
41 tw="flex flex-col h-full p-8 w-full"
42 style={{ fontFamily: "Font Mono" }}
43 >
44 <div tw="flex flex-col justify-end flex-1 mb-8">
45 <p tw="text-xl text-left">[{category.toLowerCase()}]</p>
46 <h1
47 tw="text-6xl text-black text-left font-medium"
48 style={{ lineClamp: 2, display: "block" }}
49 >
50 {title}
51 </h1>
52 <p
53 tw="text-4xl text-slate-700 text-left"
54 style={{ lineClamp: 2, display: "block" }}
55 >
56 {description}
57 </p>
58 </div>
59 <p tw="font-medium text-xl text-slate-500 text-left">{footer}</p>
60 </div>
61 </div>,
62 {
63 ...SIZE,
64 fonts: [
65 {
66 name: "Font Mono",
67 data: fontMonoRegular,
68 style: "normal",
69 weight: 400,
70 },
71 {
72 name: "Font Mono",
73 data: fontMonoMedium,
74 style: "normal",
75 weight: 500,
76 },
77 {
78 name: "Font Mono",
79 data: fontMonoBold,
80 style: "normal",
81 weight: 700,
82 },
83 ],
84 },
85 );
86}