@riebeckite/og-image 0.0.37 → 0.0.38

package/README.md

@@ -5,5 +5,5 @@ Static 1200×630 PNG Open Graph image rendering primitives for Riebeckite.
 [日本語](./README_ja.md)
 
 Use `presetLayout("card")`, `presetLayout("minimal")`, or
-`presetLayout("editorial")` with `renderOgImage()`. The renderer uses Sharp and
-accepts Japanese text through its SVG text pipeline.
+`presetLayout("editorial")` with `renderOgImage()`. The renderer turns Hono JSX
+layouts into SVG with Satori, then encodes PNG with Sharp.

package/README_ja.md

@@ -5,4 +5,4 @@ Riebeckite 向けの、1200×630 PNG Open Graph 画像レンダリングプリ
 [English](./README.md)
 
 `presetLayout("card")`、`presetLayout("minimal")`、
-`presetLayout("editorial")` を `renderOgImage()` と組み合わせて使います。レンダラーは Sharp を使い、SVG テキスト経由で日本語を扱います。
+`presetLayout("editorial")` を `renderOgImage()` と組み合わせて使います。レンダラーは Hono JSX のレイアウトを Satori で SVG に変換し、Sharp で PNG にエンコードします。

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type Child } from "hono/jsx";
 export declare const OG_IMAGE_HEIGHT = 630;
 export declare const OG_IMAGE_WIDTH = 1200;
 export type OgPalette = Readonly<{
@@ -32,7 +32,7 @@ export type OgLayoutInput = Readonly<{
     palette: OgPalette;
     content: OgContent;
 }>;
-export type OgLayoutResult = ReactNode | string;
+export type OgLayoutResult = Child;
 export type OgLayout = (input: OgLayoutInput) => OgLayoutResult;
 export type OgPreset = "card" | "minimal" | "editorial";
 export declare function defineOgLayout(layout: OgLayout): OgLayout;

package/dist/index.js

@@ -1,7 +1,7 @@
 // index.ts
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { createElement } from "react";
+import { createElement } from "hono/jsx";
 import satori from "satori";
 import sharp from "sharp";
 var OG_IMAGE_HEIGHT = 630;
@@ -40,7 +40,7 @@ function presetLayout(preset) {
           "div",
           { style: { color: palette.accent, fontSize: 28 } },
           site.title
-        ) : createElement("div"),
+        ) : createElement("div", null),
         createElement(
           "div",
           {
@@ -79,7 +79,7 @@ function presetLayout(preset) {
 }
 async function renderOgImage(layout, input) {
   const result = layout(input);
-  const svg = typeof result === "string" ? `<svg xmlns="http://www.w3.org/2000/svg" width="${OG_IMAGE_WIDTH}" height="${OG_IMAGE_HEIGHT}"><style>${fontFaceCss}text{font-family:"Noto Sans JP",sans-serif}</style>${result}</svg>` : await satori(toReactNode(result), {
+  const svg = typeof result === "string" ? `<svg xmlns="http://www.w3.org/2000/svg" width="${OG_IMAGE_WIDTH}" height="${OG_IMAGE_HEIGHT}"><style>${fontFaceCss}text{font-family:"Noto Sans JP",sans-serif}</style>${result}</svg>` : await satori(toSatoriNode(result), {
     width: OG_IMAGE_WIDTH,
     height: OG_IMAGE_HEIGHT,
     fonts: notoSansJpFonts
@@ -118,17 +118,21 @@ var notoSansJpFonts = notoSansJpFontData.map(([weight, data]) => ({
 var fontFaceCss = notoSansJpFontData.map(
   ([weight, data]) => `@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:${weight};src:url(data:font/woff;base64,${data.toString("base64")}) format("woff")}`
 ).join("");
-function toReactNode(value) {
-  if (Array.isArray(value)) return value.map(toReactNode);
+function toSatoriNode(value) {
+  if (Array.isArray(value)) return value.map(toSatoriNode);
   if (!value || typeof value !== "object") return value;
   const node = value;
+  if (node.type !== void 0) return value;
   if (!node.tag) return value;
   const children = node.children ?? [];
   const props = { ...node.props };
+  if (children.length > 0) {
+    props.children = children.length === 1 ? toSatoriNode(children[0]) : children.map(toSatoriNode);
+  }
   if (typeof node.tag === "function") {
-    return toReactNode(node.tag({ ...props, children }));
+    return toSatoriNode(node.tag(props));
   }
-  return createElement(node.tag, props, ...children.map(toReactNode));
+  return { type: node.tag, props };
 }
 export {
   OG_IMAGE_HEIGHT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/og-image",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
     }
   },
   "dependencies": {
-    "react": "^19.3.1",
+    "hono": "^4.12.25",
     "satori": "^0.25.0",
     "sharp": "^0.35.5"
   },