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
/** @jsxImportSource https://esm.sh/react */
import { ogImage } from "https://esm.town/v/moe/ogImage"
export default async function(req: Request): Promise<Response> {
// const data = await fetch("https://moe-spacexapi.web.val.run").then((res) => res.json())
// const l = data.launches[0]
// console.log(l)
// return Response.json({ ok: true })
// return new Response(await launchImage(l), { headers: { "Content-Type": "image/png" } })
return new Response(await homeImage(), { headers: { "Content-Type": "image/png" } })
}
export async function launchImage(l) {
return await ogImage(
<div tw="w-full h-full flex justify-center items-center text-[100px] bg-neutral-900 text-neutral-50 p-20">
<div tw="flex flex-col">
<div tw="flex text-[40px] font-semibold">{l.dateText}</div>
<div tw="flex text-[40px] my-2">{l.payloadIcon} {l.payload} • {l.customer}</div>
<div tw="flex text-[32px] font-semibold opacity-60 my-2">{l.type} • {l.site} • {l.orbit}</div>
<div tw="flex text-[32px] opacity-60">{l.note}</div>
</div>
</div>,
)
}
export async function homeImage() {
return await ogImage(
<div tw="w-full h-full flex justify-center items-center text-[100px] bg-neutral-900 text-neutral-50 p-20">
<div tw="flex flex-col items-center">
<div tw="flex text-[80px] font-semibold mb-5">🚀</div>
<div tw="flex text-[80px] font-semibold">SpaceX</div>
<div tw="flex text-[80px] font-semibold">Launches</div>
</div>
</div>,
)
}