your personal website on atproto - mirror
blento.app
small improvements og images
+11
-16
+11
-16
src/routes/[handle]/og.png/+server.ts
+11
-16
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 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" />
16
+
<div class="flex flex-col p-8 w-full h-full bg-neutral-900">
17
+
<div class="flex items-center mb-8 mt-16">
18
+
<img src="${image}" width="128" height="128" class="rounded-full" />
19
19
20
-
<h1 tw="text-neutral-50 text-7xl ml-4">${handle}</h1>
20
+
<h1 class="text-neutral-50 text-7xl ml-4">${handle}</h1>
21
21
</div>
22
-
23
-
<p tw="mt-8 text-4xl text-neutral-300">Welcome to my blento</p>
22
+
23
+
<p class="mt-8 text-4xl text-neutral-300">Check out my blento</p>
24
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>
25
+
<div class="w-20 h-20 rounded-xl bg-rose-700 text-transparent absolute top-70 right-20">h</div>
26
+
<div class="w-20 h-40 rounded-xl bg-rose-400 text-transparent absolute top-94 right-20">h</div>
27
+
<div class="w-40 h-40 rounded-xl bg-rose-300 text-transparent absolute top-70 right-44">h</div>
28
+
<div class="w-20 h-40 rounded-xl bg-rose-600 text-transparent absolute top-70 right-88">h</div>
29
+
<div class="w-40 h-20 rounded-xl bg-rose-500 text-transparent absolute top-114 right-68">h</div>
30
30
</div>
31
31
`;
32
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>
38
33
return new ImageResponse(htmlString, {
39
34
width: 1200,
40
35
height: 630
