wevm / hono-og

Fork of @vercel/og to support Hono JSX.

hono-og

Fork of @vercel/og to be compatible with Hono's JSX pragma.

• Actual README
• Website

Example

import { Hono } from "hono"
import { ImageResponse } from "hono-og"

const app = new Hono()

app.get("/", () => {
  return new ImageResponse(
    <div
      style={{
        backgroundColor: "black",
        backgroundSize: "150px 150px",
        height: "100%",
        width: "100%",
        display: "flex",
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
        flexWrap: "nowrap",
      }}
    >
      <div
        style={{
          fontSize: 60,
          fontStyle: "normal",
          letterSpacing: "-0.025em",
          color: "white",
          marginTop: 30,
          padding: "0 120px",
          lineHeight: 1.4,
          whiteSpace: "pre-wrap",
        }}
      >
        hello hono
      </div>
    </div>,
  )
})

export default app

hono-og's Issues

Memory leak ?

When running an application that generate a lot of image, the memory seem to be steadily increasing, after some point this error show up.

Can there be a memory leak somewhere ?

function getImports() {

 const imports = {};

 imports.wbg = {};

imports.wbg.__wbg_new_15d3966e9981a196 = function (arg0, arg1) {

  const ret = new Error(getStringFromWasm0(arg0, arg1));

^

error: SVG data parsing failed cause unknown token at 1:1

at /app/node_modules/@wevm/vercel-og/dist/index.node.js:26285:17

at WASM  ([wasm code])

at WASM  ([wasm code])

at new Resvg (/app/node_modules/@wevm/vercel-og/dist/index.node.js:26154:7)

at new Resvg2 (/app/node_modules/@wevm/vercel-og/dist/index.node.js:26396:5)

at /app/node_modules/@wevm/vercel-og/dist/index.node.js:26646:19

Opt out of loading dynamics fonts

I getting this error a lot:

Failed to load dynamic font for ⊃ . Error: 26577 | /src: url\((.+)\) format\('(opentype|truetype)'\)/,

Since I am using preloaded font, is it possible to disable loading of dynamic fonts ?

TypeError: Cannot read properties of undefined (reading 'format')

• Hono version: 4.4.6
• Hono Og: 0.0.27

Trying to return an image response:

import { Hono } from 'hono';
import { ImageResponse } from 'hono-og';

const app = new Hono();

app.get(':id', () => {
  return new ImageResponse(
    (
      <div
        style={{
          backgroundColor: 'black',
          backgroundSize: '150px 150px',
          height: '100%',
          width: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          flexWrap: 'nowrap',
        }}
      >
        <div
          style={{
            fontSize: 60,
            fontStyle: 'normal',
            letterSpacing: '-0.025em',
            color: 'white',
            marginTop: 30,
            padding: '0 120px',
            lineHeight: 1.4,
            whiteSpace: 'pre-wrap',
          }}
        >
          hello hono
        </div>
      </div>
    ),
  );
});

export default app;

and hono throws "TypeError: Cannot read properties of undefined (reading 'format')"

Edit: Using Cloudflare workers