/** @jsxImportSource npm:hono@3/jsx */ import { render } from "https://deno.land/x/resvg_wasm/mod.ts"; import { Hono } from "npm:hono@3"; import satori from "npm:satori"; const app = new Hono(); async function renderImage(s: string, color: string) { const fontArrayBuf = await fetch( "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf", ).then((res) => res.arrayBuffer()); const svg = await satori( { type: "div", props: { children: s, style: { display: "flex", height: "100%", width: "100%", fontSize: "100px", backgroundColor: "white", color, justifyContent: "center", paddingTop: "120px", }, }, }, { width: 600, height: 400, fonts: [ { name: "Roboto", data: fontArrayBuf, weight: 400, style: "normal", }, ], }, ); return await render(svg); } app.get("/satori", async (c) => { const query = c.req.query("button"); let text = "Hello world!"; let color = "blue"; switch (query) { case "1": { text = "one!"; color = "red"; break; } case "2": { text = "two"; color = "green"; break; } case "3": { text = "three"; color = "chocolate"; break; } case "4": { text = "four"; color = "purple"; break; } } return c.body(await renderImage(text, color), 200, { "Content-Type": "image/png" }); }); app.get("/", (c) => { return c.html( , ); }); app.post("/", async (c) => { const body = await c.req.json(); const buttonIndex = body.untrustedData.buttonIndex; return c.html( , ); }); export default app.fetch;

frame