nuxt-og-image 2.0.0-beta.52 → 2.0.0-beta.54

package/dist/runtime/nitro/renderers/satori/index.mjs

@@ -1,5 +1,4 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { parseURL } from "ufo";
 import { loadFont, walkSatoriTree } from "./utils.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import twClasses from "./plugins/twClasses.mjs";
@@ -18,40 +17,37 @@ function loadFonts(baseURL, fonts) {
 }
 const SatoriRenderer = {
   name: "satori",
-  createPng: async function createPng(baseUrl, options) {
-    const svg = await this.createSvg(baseUrl, options);
+  createPng: async function createPng(options) {
+    const svg = await this.createSvg(options);
     const pngCreator = await loadPngCreator();
-    return pngCreator(svg, { baseUrl, ...options });
+    return pngCreator(svg, options);
   },
-  createVNode: async function createVNode(baseUrl, options) {
-    const url = parseURL(baseUrl);
+  createVNode: async function createVNode(options) {
     const html = await globalThis.$fetch("/api/og-image-html", {
       params: {
-        path: url.pathname,
+        path: options.path,
         options: JSON.stringify(options)
       }
     });
     const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
     const satoriTree = convertHtmlToSatori(body);
-    await walkSatoriTree(url, satoriTree, [
-      // @todo add user land support
-      emojis(url),
-      twClasses(url),
-      imageSrc(url),
-      flex(url),
-      encoding(url)
-    ]);
+    await walkSatoriTree(satoriTree, [
+      emojis,
+      twClasses,
+      imageSrc,
+      flex,
+      encoding
+    ], options);
     return satoriTree;
   },
-  createSvg: async function createSvg(baseUrl, options) {
+  createSvg: async function createSvg(options) {
     const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-    const vnodes = await this.createVNode(baseUrl, options);
+    const vnodes = await this.createVNode(options);
     if (!satoriFonts.length)
-      satoriFonts.push(...await loadFonts(baseUrl, fonts));
+      satoriFonts.push(...await loadFonts(options.requestOrigin, fonts));
     const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,
-      baseUrl,
       fonts: satoriFonts,
       embedFont: true,
       width: options.width,

package/dist/runtime/nitro/renderers/satori/plugins/emojis.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/emojis.mjs

@@ -2,27 +2,25 @@ import { defineSatoriTransformer } from "../utils.mjs";
 function isEmojiFilter(node) {
   return node.type === "img" && node.props?.class?.includes("emoji");
 }
-export default defineSatoriTransformer(() => {
-  return [
-    // need to make sure parent div has flex for the emoji to render inline
-    {
-      filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
-      transform: async (node) => {
-        node.props.style = node.props.style || {};
-        node.props.style.display = "flex";
-        node.props.style.alignItems = "center";
-      }
-    },
-    {
-      filter: isEmojiFilter,
-      transform: async (node) => {
-        node.props.style = node.props.style || {};
-        node.props.style.height = "1em";
-        node.props.style.width = "1em";
-        node.props.style.margin = "0 .3em 0 .3em";
-        node.props.style.verticalAlign = "0.1em";
-        node.props.class = "";
-      }
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.display = "flex";
+      node.props.style.alignItems = "center";
     }
-  ];
-});
+  },
+  {
+    filter: isEmojiFilter,
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.height = "1em";
+      node.props.style.width = "1em";
+      node.props.style.margin = "0 .3em 0 .3em";
+      node.props.style.verticalAlign = "0.1em";
+      node.props.class = "";
+    }
+  }
+]);

package/dist/runtime/nitro/renderers/satori/plugins/encoding.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/encoding.mjs

@@ -1,10 +1,8 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 import { decodeHtml } from "../../../utils-pure.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => typeof node.props?.children === "string",
-    transform: async (node) => {
-      node.props.children = decodeHtml(node.props.children);
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => typeof node.props?.children === "string",
+  transform: async (node) => {
+    node.props.children = decodeHtml(node.props.children);
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/flex.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/flex.mjs

@@ -1,12 +1,10 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("hidden")),
-    transform: async (node) => {
-      node.props.style = node.props.style || {};
-      node.props.style.display = "flex";
-      if (!node.props?.class?.includes("flex-"))
-        node.props.style.flexDirection = "column";
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("hidden")),
+  transform: async (node) => {
+    node.props.style = node.props.style || {};
+    node.props.style.display = "flex";
+    if (!node.props?.class?.includes("flex-"))
+      node.props.style.flexDirection = "column";
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.mjs

@@ -1,40 +1,50 @@
+import { Buffer } from "node:buffer";
 import { withBase } from "ufo";
+import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
-import { readPublicAssetBase64 } from "../../../utils.mjs";
-export default defineSatoriTransformer((url) => {
-  return {
-    filter: (node) => node.type === "img",
-    transform: async (node) => {
-      const src = node.props?.src;
-      if (src && src.startsWith("/")) {
-        let updated = false;
-        const file = await readPublicAssetBase64(src);
-        if (file) {
-          node.props.src = file;
+import { readPublicAssetBase64, toBase64Image } from "../../../utils.mjs";
+export default defineSatoriTransformer({
+  filter: (node) => node.type === "img",
+  transform: async (node, options) => {
+    const src = node.props?.src;
+    if (src && src.startsWith("/")) {
+      let updated = false;
+      const file = await readPublicAssetBase64(src);
+      let dimensions;
+      if (file) {
+        node.props.src = file.src;
+        dimensions = { width: file.width, height: file.height };
+        updated = true;
+      }
+      if (!updated) {
+        let valid = true;
+        const response = await globalThis.$fetch(src, {
+          responseType: "arrayBuffer",
+          baseURL: options.requestOrigin
+        }).catch(() => {
+          valid = false;
+        });
+        if (valid) {
+          node.props.src = toBase64Image(src, response);
+          const imageSize = await sizeOf(Buffer.from(response));
+          dimensions = { width: imageSize.width, height: imageSize.height };
           updated = true;
         }
-        if (!updated) {
-          try {
-            const response = await globalThis.$fetch(src);
-            node.props.src = response.arrayBuffer();
-            updated = true;
-          } catch (e) {
-          }
-        }
-        if (!updated) {
-          try {
-            const response = await globalThis.$fetch.raw(src);
-            if (response.status === 200) {
-              node.props.src = response.arrayBuffer();
-              updated = true;
-            }
-          } catch (e) {
-          }
-        }
-        if (!updated) {
-          node.props.src = `${withBase(src, `${url.protocol}//${url.host}`)}?${Date.now()}`;
+      }
+      if (dimensions?.width && dimensions?.height) {
+        const naturalAspectRatio = dimensions.width / dimensions.height;
+        if (node.props.width && !node.props.height) {
+          node.props.height = Math.round(node.props.width / naturalAspectRatio);
+        } else if (node.props.height && !node.props.width) {
+          node.props.width = Math.round(node.props.height * naturalAspectRatio);
+        } else if (!node.props.width && !node.props.height) {
+          node.props.width = dimensions.width;
+          node.props.height = dimensions.height;
         }
       }
+      if (!updated) {
+        node.props.src = `${withBase(src, `${options.requestOrigin}`)}?${Date.now()}`;
+      }
     }
-  };
+  }
 });

package/dist/runtime/nitro/renderers/satori/plugins/twClasses.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
+declare const _default: import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/twClasses.mjs

@@ -1,9 +1,7 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => !!node.props?.class && !node.props?.tw,
-    transform: async (node) => {
-      node.props.tw = node.props.class;
-    }
-  };
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class && !node.props?.tw,
+  transform: async (node) => {
+    node.props.tw = node.props.class;
+  }
 });

package/dist/runtime/nitro/renderers/satori/utils.d.ts

@@ -1,5 +1,4 @@
-import type { ParsedURL } from 'ufo';
-import type { FontConfig, SatoriTransformer, VNode } from '../../../../types';
-export declare function loadFont(baseURL: string, font: FontConfig): Promise<any>;
-export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
-export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer | SatoriTransformer[]): (url: ParsedURL) => SatoriTransformer | SatoriTransformer[];
+import type { FontConfig, RuntimeOgImageOptions, SatoriTransformer, VNode } from '../../../../types';
+export declare function loadFont(requestOrigin: string, font: FontConfig): Promise<any>;
+export declare function walkSatoriTree(node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[], props: RuntimeOgImageOptions): Promise<void>;
+export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

package/dist/runtime/nitro/renderers/satori/utils.mjs

@@ -2,15 +2,13 @@ import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#imports";
 const cachedFonts = {};
-export async function loadFont(baseURL, font) {
-  let fontKey = font;
-  if (typeof font === "object")
-    fontKey = `${font.name}:${font.weight}`;
+export async function loadFont(requestOrigin, font) {
+  const fontKey = `${font.name}:${font.weight}`;
+  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
   if (cachedFonts[fontKey])
     return cachedFonts[fontKey];
   const [name, weight] = fontKey.split(":");
   let data;
-  const storageKey = `assets:nuxt-og-imagee:font:${fontKey}`;
   if (await useStorage().hasItem(storageKey))
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
   if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
@@ -22,7 +20,7 @@ export async function loadFont(baseURL, font) {
       try {
         data = await globalThis.$fetch(font.path, {
           responseType: "arrayBuffer",
-          baseURL
+          baseURL: requestOrigin
         });
       } catch {
       }
@@ -40,7 +38,7 @@ export async function loadFont(baseURL, font) {
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
   return cachedFonts[fontKey];
 }
-export async function walkSatoriTree(url, node, plugins) {
+export async function walkSatoriTree(node, plugins, props) {
   if (!node.props?.children)
     return;
   if (Array.isArray(node.props.children) && node.props.children.length === 0) {
@@ -51,9 +49,9 @@ export async function walkSatoriTree(url, node, plugins) {
     if (child) {
       for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
-          await plugin.transform(child);
+          await plugin.transform(child, props);
       }
-      await walkSatoriTree(url, child, plugins);
+      await walkSatoriTree(child, plugins, props);
     }
   }
 }

package/dist/runtime/nitro/routes/options.d.ts

@@ -1,3 +1,3 @@
-import type { OgImageOptions } from '../../../types';
-declare const _default: import("h3").EventHandler<false | OgImageOptions>;
+import type { RuntimeOgImageOptions } from '../../../types';
+declare const _default: import("h3").EventHandler<false | RuntimeOgImageOptions>;
 export default _default;

package/dist/runtime/nitro/routes/options.mjs

@@ -1,7 +1,7 @@
 import { createError, defineEventHandler, getQuery } from "h3";
 import { withoutBase } from "ufo";
 import { defu } from "defu";
-import { extractOgImageOptions } from "../utils.mjs";
+import { extractOgImageOptions, useHostname } from "../utils.mjs";
 import { getRouteRules } from "#internal/nitro";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -32,6 +32,11 @@ export default defineEventHandler(async (e) => {
   if (routeRules === false)
     return false;
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const result = defu(extractedPayload, routeRules, { path }, defaults);
-  return result;
+  return defu(
+    extractedPayload,
+    routeRules,
+    // runtime options
+    { path, requestOrigin: useHostname(e) },
+    defaults
+  );
 });

package/dist/runtime/nitro/routes/svg.mjs

@@ -1,6 +1,6 @@
 import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -15,5 +15,5 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createSvg(withBase(path, useHostname(e)), options);
+  return provider.createSvg(options);
 });

package/dist/runtime/nitro/routes/vnode.mjs

@@ -1,6 +1,6 @@
 import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -15,5 +15,5 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createVNode(withBase(path, useHostname(e)), options);
+  return provider.createVNode(options);
 });

package/dist/runtime/nitro/utils.d.ts

@@ -1,15 +1,18 @@
 /// <reference types="node" />
 import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
-import type { OgImageOptions } from '../../types';
+import type { RuntimeOgImageOptions } from '../../types';
 export * from './util-hostname';
 export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
-    load(options: {
-        baseUrl: string;
-    }): Promise<any>;
+    load(options: RuntimeOgImageOptions): Promise<any>;
 };
-export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;
+export declare function fetchOptions(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
-export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
+export declare function readPublicAssetBase64(file: string): Promise<{
+    src: string;
+    width?: number;
+    height?: number;
+} | undefined>;
+export declare function toBase64Image(fileName: string, data: string | ArrayBuffer): string;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -3,6 +3,7 @@ import { Buffer } from "node:buffer";
 import { getQuery } from "h3";
 import { join } from "pathe";
 import { prefixStorage } from "unstorage";
+import sizeOf from "image-size";
 import { useRuntimeConfig, useStorage } from "#imports";
 export * from "./util-hostname.mjs";
 export function wasmLoader(asyncModuleLoad, fallback) {
@@ -27,8 +28,7 @@ export function wasmLoader(asyncModuleLoad, fallback) {
             wasm = Buffer.from(wasm, "base64");
         }
         if (!wasm) {
-          const url = new URL(options.baseUrl);
-          wasm = await (await globalThis.$fetch(fallback, { baseURL: url.origin })).arrayBuffer();
+          wasm = await (await globalThis.$fetch(fallback, { baseURL: options.requestOrigin })).arrayBuffer();
           wasm = Buffer.from(wasm);
         }
         resolve(wasm);
@@ -85,14 +85,22 @@ export async function readPublicAsset(file, encoding) {
 }
 export async function readPublicAssetBase64(file) {
   const base64 = await readPublicAsset(file, "base64");
+  const dimensions = await sizeOf(Buffer.from(base64, "base64"));
   if (base64) {
-    let type = "image/jpeg";
-    const ext = file.split(".").pop();
-    if (ext === "svg")
-      type = "image/svg+xml";
-    else if (ext === "png")
-      type = "image/png";
-    return `data:${type};base64,${base64}`;
+    return {
+      src: toBase64Image(file, base64),
+      ...dimensions
+    };
   }
 }
+export function toBase64Image(fileName, data) {
+  const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
+  let type = "image/jpeg";
+  const ext = fileName.split(".").pop();
+  if (ext === "svg")
+    type = "image/svg+xml";
+  else if (ext === "png")
+    type = "image/png";
+  return `data:${type};base64,${base64}`;
+}
 export * from "./utils-pure.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.52",
+  "version": "2.0.0-beta.54",
   "packageManager": "pnpm@8.6.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -39,6 +39,7 @@
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
     "globby": "^13.1.4",
+    "image-size": "^1.0.2",
     "inline-css": "^4.0.2",
     "launch-editor": "^2.6.0",
     "nuxt-icon": "^0.4.1",
@@ -47,7 +48,7 @@
     "ofetch": "^1.1.0",
     "ohash": "^1.1.2",
     "pathe": "^1.1.1",
-    "playwright-core": "^1.34.3",
+    "playwright-core": "^1.35.0",
     "radix3": "^1.0.1",
     "satori": "0.10.1",
     "satori-html": "^0.3.2",
@@ -62,16 +63,16 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.5",
-    "@nuxt/devtools-edge": "0.5.5-28099668.306c6a5",
+    "@nuxt/devtools-edge": "0.5.5-28104076.594a352",
     "@nuxt/module-builder": "^0.4.0",
     "@nuxt/test-utils": "3.5.3",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@types/ws": "^8.5.4",
+    "@types/ws": "^8.5.5",
     "bumpp": "^9.1.1",
     "eslint": "8.42.0",
     "jest-image-snapshot": "^6.1.0",
     "nuxt": "^3.5.3",
-    "sass": "^1.62.1",
+    "sass": "^1.63.3",
     "vitest": "^0.32.0"
   },
   "resolutions": {