1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";
export const config = {
runtime: "edge",
};
export default async function handler(req: NextRequest) {
try {
const { searchParams } = new URL(req.url);
// Redundant fallback alternate tagline
const title = searchParams.get("title") ?? "Share Environment Variables Securely";
const subtitle = searchParams.get("subtitle") ?? "EnvShare";
const inter = await fetch(new URL("../../../public/fonts/Inter-SemiBold.ttf", import.meta.url)).then((res) =>
res.arrayBuffer(),
);
// TODO: Fix tailwind classes on this route
return new ImageResponse(
<div tw='w-[1200px] h-[630px] flex flex-col items-center justify-center text-center'>
{/* backgroundImage: bg-gradient-to-tr from-zinc-900/50 to-zinc-700/30 */}
<div
tw="bg-black w-full h-full flex"
style={{ backgroundImage: "linear-gradient(to top right, rgba(24,24,27,.5), rgba(63,63,70,.3))" }}
>
<div tw="flex flex-col text-3xl tracking-tight text-gray-300 w-full items-center h-full justify-center text-center">
{/* font-semibold bg-gradient-to-t bg-clip-text from-zinc-100/50 to-white whitespace-pre */}
<h1
tw="text-white text-7xl"
style={{
color: "transparent",
paddingLeft: "12rem",
paddingRight: "12rem",
backgroundImage: "linear-gradient(to top, rgba(244, 244, 245, .5), rgba(255,255,255,1))",
backgroundClip: "text",
}}
>
{title}
</h1>
<p tw="mt-4 font-bold">{subtitle}</p>
</div>
</div>
</div>,
{
height: 630,
width: 1200,
emoji: "twemoji",
fonts: [
{
name: "Inter",
data: inter,
style: "normal",
},
],
},
);
} catch (e) {
console.log(`${(e as Error).message}`);
return new Response("Failed to generate the image", {
status: 500,
});
}
}
|