nuxt-og-image 2.0.0-beta.31 → 2.0.0-beta.33

package/README.md

@@ -13,7 +13,7 @@
 Enlightened OG Image generation for Nuxt 3.
 </p>
 
-<img src="https://repository-images.githubusercontent.com/578125755/05ce0b00-ef15-48d0-94b5-b999373a20f9">
+<img src="https://repository-images.githubusercontent.com/578125755/90f77ca8-95be-4e06-9600-332afe1ba24f">
 
 <p align="center">
 <table>
@@ -50,18 +50,18 @@ Enlightened OG Image generation for Nuxt 3.
 
 Both Satori and Browser will work in Node based environments. Prerendering is fully supported.
 
-When you want to generate dynamic images at runtime there are certain nitro runtime limitations.
+When you want to generate dynamic images at runtime there are certain Nitro runtime limitations.
 
 | Provider                           | Satori |  Browser |
-|------------------------------------|-----------------| -- |
-| StackBlitz                         | ✅              | ❌             |
-| Node                                  | ✅              | ✅              |
-| Vercel                             | ✅              | ✅             |
-| Vercel Edge                        | ✅              | ❌              |
+|------------------------------------|----------------| -- |
+| StackBlitz                         | ✅             | ❌             |
+| Node                               | ✅             | ✅              |
+| Vercel                             | ✅             | ✅             |
+| Vercel Edge                        | ✅             | ❌              |
 | Cloudflare Workers (requires paid) | ✅            | ❌             |
 | Cloudflare Pages (requires paid)   | ✅            | ❌             |
-| Netlify (TBC)                      | ❌              | ❌             |
-| Netlify Edge (TBC)                 | ❌              | ❌             |
+| Netlify                            | ✅              | ❌             |
+| Netlify Edge (TBC)                 | ❌             | ❌             |
 
 Other providers are yet to be tested. Please create an issue if you have tested one.
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "2.0.0-beta.31"
+  "version": "2.0.0-beta.33"
 }

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

@@ -10,13 +10,12 @@ import encoding from "./plugins/encoding.mjs";
 import loadPngCreator from "#nuxt-og-image/png";
 import loadSatori from "#nuxt-og-image/satori";
 import { useRuntimeConfig } from "#imports";
-import { useNitroApp } from "#internal/nitro";
 const satoriFonts = [];
 let fontLoadPromise = null;
-function loadFonts(fonts) {
+function loadFonts(baseURL, fonts) {
   if (fontLoadPromise)
     return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(font)));
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
 }
 export default {
   name: "satori",
@@ -27,8 +26,12 @@ export default {
   },
   createVNode: async function createVNode(baseUrl, options) {
     const url = parseURL(baseUrl);
-    const nitroApp = useNitroApp();
-    const html = await (await nitroApp.localFetch(`/api/og-image-html?path=${url.pathname}&options=${encodeURI(JSON.stringify(options))}`)).text();
+    const html = await globalThis.$fetch("/api/og-image-html", {
+      params: {
+        path: url.pathname,
+        options: JSON.stringify(options)
+      }
+    });
     let body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
     try {
       body = twemoji.parse(body, {
@@ -52,7 +55,7 @@ export default {
     const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
     const vnodes = await this.createVNode(baseUrl, options);
     if (!satoriFonts.length)
-      satoriFonts.push(...await loadFonts(fonts));
+      satoriFonts.push(...await loadFonts(baseUrl, fonts));
     const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,

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

@@ -1,7 +1,6 @@
 import { withBase } from "ufo";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { readPublicAssetBase64 } from "../../../utils.mjs";
-import { useNitroApp } from "#internal/nitro";
 export default defineSatoriTransformer((url) => {
   return {
     filter: (node) => node.type === "img",
@@ -23,9 +22,8 @@ export default defineSatoriTransformer((url) => {
           }
         }
         if (!updated) {
-          const nitroApp = useNitroApp();
           try {
-            const response = await nitroApp.localFetch(src);
+            const response = await globalThis.$fetch.raw(src);
             if (response.status === 200) {
               node.props.src = response.arrayBuffer();
               updated = true;

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

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

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

@@ -2,7 +2,7 @@ import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};
-export async function loadFont(font) {
+export async function loadFont(baseURL, font) {
   let fontKey = font;
   if (typeof font === "object")
     fontKey = `${font.name}:${font.weight}`;
@@ -19,9 +19,13 @@ export async function loadFont(font) {
   if (typeof font === "object") {
     data = await readPublicAsset(font.path);
     if (!data) {
-      data = await globalThis.$fetch(font.path, {
-        responseType: "arrayBuffer"
-      });
+      try {
+        data = await globalThis.$fetch(font.path, {
+          responseType: "arrayBuffer",
+          baseURL
+        });
+      } catch {
+      }
     }
   }
   if (!data) {

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

@@ -1,15 +1,14 @@
 import { createError, defineEventHandler, getQuery } from "h3";
 import { withoutBase } from "ufo";
 import { extractOgImageOptions } from "../utils.mjs";
-import { getRouteRules, useNitroApp } from "#internal/nitro";
+import { getRouteRules } from "#internal/nitro";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
   const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
-  const nitro = useNitroApp();
   let html;
   try {
-    html = await (await nitro.localFetch(path)).text();
+    html = await globalThis.$fetch(path);
   } catch (err) {
     throw createError({
       statusCode: 500,

package/dist/runtime/nitro/utils.mjs

@@ -4,7 +4,6 @@ import { getQuery } from "h3";
 import { join } from "pathe";
 import { prefixStorage } from "unstorage";
 import { useRuntimeConfig, useStorage } from "#imports";
-import { useNitroApp } from "#internal/nitro";
 export * from "./util-hostname.mjs";
 export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
@@ -50,8 +49,12 @@ export async function fetchOptions(e, path) {
       await cache.removeItem(path);
   }
   if (!options) {
-    const nitro = useNitroApp();
-    options = await (await nitro.localFetch(`/api/og-image-options?path=${path}`)).json();
+    options = await globalThis.$fetch("/api/og-image-options", {
+      query: {
+        path
+      },
+      responseType: "json"
+    });
     if (cache) {
       await cache.setItem(path, {
         value: options,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.33",
   "packageManager": "pnpm@8.1.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.4.3",
+    "@nuxt/kit": "^3.4.3",
     "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.11",
@@ -46,29 +46,29 @@
     "pathe": "^1.1.0",
     "playwright-core": "^1.33.0",
     "radix3": "^1.0.1",
-    "satori": "0.7.3",
+    "satori": "0.7.4",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.3",
-    "std-env": "^3.3.2",
+    "std-env": "^3.3.3",
     "svg2png-wasm": "^1.3.4",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
-    "ufo": "^1.1.1",
+    "ufo": "^1.1.2",
     "ws": "^8.13.0",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.5",
-    "@nuxt/devtools-edge": "0.4.5-28050619.e64dbcd",
+    "@antfu/eslint-config": "^0.38.6",
+    "@nuxt/devtools-edge": "0.4.5-28053684.ddd2e41",
     "@nuxt/module-builder": "^0.3.1",
     "@nuxt/test-utils": "3.4.3",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
     "bumpp": "^9.1.0",
-    "eslint": "8.39.0",
+    "eslint": "8.40.0",
     "jest-image-snapshot": "^6.1.0",
     "nuxt": "^3.4.3",
-    "vitest": "^0.30.1"
+    "vitest": "^0.31.0"
   },
   "resolutions": {
     "nitropack": "npm:nitropack-edge@2.4.0-28027501.1cf01bf",