your personal website on atproto - mirror
blento.app
improve og image
+19
-4
+19
-4
src/routes/[handle]/og.png/+server.ts
+19
-4
src/routes/[handle]/og.png/+server.ts
···
13
13
data.data['app.bsky.actor.profile'].self.value.avatar.ref.$link;
14
14
15
15
const htmlString = `
16
-
<div tw="flex flex-col justify-center items-center w-full h-full bg-neutral-900">
17
-
<img src="${image}" width="128" height="128" tw="rounded-full mb-8" />
16
+
<div tw="flex flex-col justify-center p-8 w-full h-full bg-neutral-900">
17
+
<div tw="flex items-center mb-8">
18
+
<img src="${image}" width="128" height="128" tw="rounded-full" />
18
19
19
-
<h1 tw="text-neutral-50 text-7xl m-0">${handle}</h1>
20
-
<p tw="mt-8 text-4xl text-neutral-300">Welcome to my website</p>
20
+
<h1 tw="text-neutral-50 text-7xl ml-4">${handle}</h1>
21
+
</div>
22
+
<p tw="mt-8 text-4xl text-neutral-300">Welcome to my blento</p>
23
+
24
+
25
+
<div tw="w-20 h-20 rounded-xl bg-rose-700 text-transparent absolute top-50 right-20">h</div>
26
+
<div tw="w-20 h-40 rounded-xl bg-rose-400 text-transparent absolute top-74 right-20">h</div>
27
+
<div tw="w-40 h-40 rounded-xl bg-rose-300 text-transparent absolute top-50 right-44">h</div>
28
+
<div tw="w-20 h-40 rounded-xl bg-rose-600 text-transparent absolute top-50 right-88">h</div>
29
+
<div tw="w-40 h-20 rounded-xl bg-rose-500 text-transparent absolute top-94 right-68">h</div>
21
30
</div>
22
31
`;
32
+
33
+
// <div tw="w-20 h-20 rounded-xl bg-cyan-500 text-transparent absolute top-50 right-20">h</div>
34
+
// <div tw="w-20 h-40 rounded-xl bg-rose-500 text-transparent absolute top-74 right-20">h</div>
35
+
// <div tw="w-40 h-40 rounded-xl bg-emerald-500 text-transparent absolute top-50 right-44">h</div>
36
+
// <div tw="w-20 h-40 rounded-xl bg-amber-500 text-transparent absolute top-50 right-88">h</div>
37
+
// <div tw="w-40 h-20 rounded-xl bg-pink-500 text-transparent absolute top-94 right-68">h</div>
23
38
return new ImageResponse(htmlString, {
24
39
width: 1200,
25
40
height: 630
