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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import { ImageResponse } from "@vercel/og";
export const config = {
runtime: "edge",
};
const karla = fetch(
new URL("../../assets/Karla-MediumItalic.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
const outfit = fetch(
new URL("../../assets/Outfit-Regular.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
export default async function handler(request) {
const Karla = await karla;
const Outfit = await outfit;
const { searchParams } = request.nextUrl;
const hasTitle = searchParams.has("title");
const title = hasTitle
? searchParams.get("title").length > 64
? searchParams.get("title").slice(0, 64) + "..."
: searchParams.get("title")
: "Watch Now";
const image = searchParams.get("image");
if (!title) {
return new ImageResponse(<>Visit with "?username=vercel"</>, {
width: 1200,
height: 630,
});
}
return new ImageResponse(
(
<div
style={{
display: "flex",
fontSize: "60px",
color: "black",
background: "#f6f6f6",
width: "100%",
height: "100%",
backgroundImage: `url(${image})`,
}}
className="relative w-[1900px] h-[400px] text-[10px]"
>
<div
className="w-[1900px] h-[400px]"
style={{
display: "flex",
width: "100%",
paddingLeft: 100,
alignItems: "center",
color: "white",
position: "relative",
backgroundImage: `linear-gradient(to right, rgba(0,0,0,0.93), rgba(0,0,0,0.8) , rgba(0,0,0,0.2))`,
filter: "brightness(20%)",
}}
>
<span
style={{
display: "flex",
position: "absolute",
top: 10,
left: 25,
fontSize: "40px",
color: "#FF7F57",
fontFamily: "Outfit",
filter: "brightness(100%)",
}}
>
moopa
</span>
<h1
style={{
width: "70%",
fontSize: "70px",
filter: "brightness(100%)",
}}
>
{title}
</h1>
</div>
</div>
),
{
width: 1900,
height: 400,
fonts: [
{
name: "Karla",
data: Karla,
style: "normal",
},
{
name: "Outfit",
data: Outfit,
style: "normal",
},
],
}
);
}
|