/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; import { Hono } from "npm:hono"; import satori from "npm:satori"; const app = new Hono(); const colors = { textColor: "#222222", surface: "#c0c0c0", dialogBlue: "#000080", dialogBlueLight: "#1084d0", windowFrame: "#0a0a0a", buttonFace: "#dfdfdf", buttonShadow: "#808080", buttonHighlight: "#ffffff", }; const tokens = { borderWindowInner: `inset -2px -2px ${colors.buttonShadow}, inset 2px 2px ${colors.buttonHighlight}`, borderWindowOuter: `inset -1px -1px ${colors.windowFrame}, inset 1px 1px ${colors.buttonFace}`, minimizeIcon: "data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E", maximizeIcon: "data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E", closeIcon: "data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E", elementSpacing: 8, }; function TitleBar(props) { return (

{props.children}

); } function TitleBarText(props) { return (

{props.children}

); } function TitleBarControls(props) { return

{props.children}

; } function Button(props) { return (

{props.children}

); } function TitleBarControl(props) { return ( ); } function MinimizeButton(props) { return ( ); } function MaximizeButton(props) { return ( ); } function CloseButton(props) { return ( ); } function Window(props) { return (

{props.children}

); } function WindowBody(props) { return (

{props.children}

); } function Text(props) { return (

{props.children}

); } function Row(props) { return (

{props.children}

); } app.get("/", async (c) => { // Extract width and height from query params const params = new URLSearchParams(c.req.url.split("?")[1]); const width = parseInt(params.get("w") ?? "200"); const height = parseInt(params.get("h") ?? "110"); const title = params.get("title") ?? "{title}"; const caption = params.get("caption") ?? "{caption}"; const svg = await satori( {title} {caption} , { width, height, fonts: [ { name: "MS Sans Serif", data: await fetch("https://esm.sh/98.css@0.1.20/fonts/converted/ms_sans_serif.woff").then(res => res.arrayBuffer() ), weight: 400, style: "normal", }, { name: "MS Sans Serif", data: await fetch("https://esm.sh/98.css@0.1.20/fonts/converted/ms_sans_serif_bold.woff").then(res => res.arrayBuffer() ), weight: 600, style: "normal", }, ], }, ); return c.body(svg, 200, { "Content-Type": "image/svg+xml", }); }); export default app.fetch;

francoischalifour