nuxt-og-image 1.3.1 → 1.4.0

package/dist/module.mjs

@@ -1,5 +1,4 @@
-import { mkdir, writeFile } from 'node:fs/promises';
-import { existsSync } from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
 import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
@@ -9,8 +8,9 @@ import { joinURL } from 'ufo';
 import { resolve, relative } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
-import { copy } from 'fs-extra';
+import { pathExists, copy, mkdirp } from 'fs-extra';
 import { provider } from 'std-env';
+import { existsSync } from 'fs';
 import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 
@@ -197,7 +197,6 @@ const module = defineNuxtModule({
   },
   defaults(nuxt) {
     return {
-      experimentalNitroBrowser: false,
       // when we run `nuxi generate` we need to force prerendering
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       host: nuxt.options.runtimeConfig.public?.siteUrl,
@@ -206,6 +205,8 @@ const module = defineNuxtModule({
         width: 1200,
         height: 630
       },
+      satoriProvider: true,
+      browserProvider: true,
       fonts: [],
       satoriOptions: {}
     };
@@ -221,7 +222,6 @@ const module = defineNuxtModule({
       return resolve(`../dist/${p}`);
     };
     nuxt.options.experimental.componentIslands = true;
-    const isEdge = provider === "stackblitz" || (process.env.NITRO_PRESET || "").includes("edge");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
@@ -240,16 +240,17 @@ export {}
     nuxt.hooks.hook("prepare:types", ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
     });
-    ["html", "options", "svg", "vnode", "og.png"].forEach((type) => {
+    addServerHandler({
+      lazy: true,
+      handler: resolve("./runtime/nitro/middleware/og.png")
+    });
+    ["html", "options", "svg", "vnode", "font"].forEach((type) => {
       addServerHandler({
         lazy: true,
-        handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
+        route: `/api/og-image-${type}`,
+        handler: resolve(`./runtime/nitro/routes/${type}`)
       });
     });
-    addServerHandler({
-      route: "/api/og-image-font",
-      handler: resolve("./runtime/nitro/routes/__og_image__/font")
-    });
     nuxt.hook("devtools:customTabs", (iframeTabs) => {
       iframeTabs.push({
         name: "ogimage",
@@ -266,14 +267,14 @@ export {}
       const {
         middleware: rpcMiddleware
       } = setupPlaygroundRPC(nuxt, config);
-      nuxt.hook("vite:serverCreated", (server) => {
+      nuxt.hook("vite:serverCreated", async (server) => {
         server.middlewares.use(PATH_ENTRY, tinyws());
         server.middlewares.use(PATH_ENTRY, rpcMiddleware);
-        if (existsSync(playgroundDir))
+        if (await pathExists(playgroundDir))
           server.middlewares.use(PATH_PLAYGROUND, sirv(playgroundDir, { single: true, dev: true }));
       });
       addServerHandler({
-        handler: resolve("./runtime/nitro/routes/__og_image__/index")
+        handler: resolve("./runtime/nitro/middleware/playground")
       });
     }
     ["defineOgImageDynamic", "defineOgImageStatic", "defineOgImageScreenshot"].forEach((name) => {
@@ -297,45 +298,67 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    const fontDir = resolve(nuxt.options.buildDir, "nuxt-og-image");
-    const publicDirs = [`${nuxt.options.rootDir}/public`, fontDir];
-    exposeModuleConfig("nuxt-og-image", { ...config, publicDirs });
-    nuxt.hooks.hook("build:before", async () => {
-      await copy(resolve("./runtime/public"), resolve(nuxt.options.buildDir, "nuxt-og-image"));
-    });
-    nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+    const moduleAssetDir = resolve("./runtime/public-assets");
+    const assetDirs = [
+      resolve(nuxt.options.rootDir, nuxt.options.dir.public),
+      moduleAssetDir
+    ];
+    exposeModuleConfig("nuxt-og-image", { ...config, assetDirs });
+    const nitroPreset = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
+    const isWebWorkerEnv = process.env.NODE_ENV !== "development" && (provider === "stackblitz" || ["cloudflare", "vercel-edge", "netlify-edge", "lambda"].includes(nitroPreset));
+    nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
       nitroConfig.publicAssets = nitroConfig.publicAssets || [];
-      nitroConfig.publicAssets.push({ dir: fontDir, maxAge: 31536e3 });
-      if (isEdge && config.experimentalNitroBrowser)
-        nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
-      else
-        nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/default'`;
-      nitroConfig.virtual["#nuxt-og-image/resvg"] = `import resvg from '${runtimeDir}/nitro/resvg/${isEdge ? "wasm" : "node"}'; export { resvg }`;
+      nitroConfig.publicAssets.push({ dir: moduleAssetDir, maxAge: 31536e3 });
+      const providerPath = `${runtimeDir}/nitro/providers`;
+      if (config.browserProvider) {
+        nitroConfig.virtual["#nuxt-og-image/browser"] = `
+export default async function() {
+ return (process.env.prerender || process.env.dev === 'true') ? await import('${providerPath}/browser/node').then(m => m.default) : () => {}
+}
+`;
+      }
+      if (config.satoriProvider) {
+        nitroConfig.virtual["#nuxt-og-image/satori"] = isWebWorkerEnv ? `export default async function() {
+  return (process.env.prerender || process.env.dev === 'true') ? await import('${providerPath}/satori/webworker').then(m => m.default) : await import('${providerPath}/satori/webworker').then(m => m.default)
+}` : `import node from '${providerPath}/satori/node';
+export default function() {
+ return node
+}
+`;
+        nitroConfig.virtual["#nuxt-og-image/svg2png"] = `export default async function() {
+ return await import('${providerPath}/svg2png/universal').then(m => m.default)
+}`;
+      }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
-      import satori from '${runtimeDir}/nitro/providers/satori'
-      import browser from '${runtimeDir}/nitro/providers/browser'
-
-      export function useProvider(provider) {
+      export async function useProvider(provider) {
         if (provider === 'satori')
-          return satori
+          return ${config.satoriProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}').then(m => m.default)` : null}
         if (provider === 'browser')
-          return browser
+          return (process.env.prerender || process.env.dev) ? ${config.browserProvider ? `await import('${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}').then(m => m.default)` : null} : null
       }
       `;
-      if (config.experimentalNitroBrowser) {
-        nitroConfig.virtual["#nuxt-og-image/providers/browser"] = `export * from '${runtimeDir}/nitro/providers/browser'`;
-        if (isEdge) {
-          ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
-            nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
-          });
-        }
-      }
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let screenshotQueue = [];
+      nitro.hooks.hook("compiled", async (_nitro) => {
+        if (_nitro.options.preset === "cloudflare" || _nitro.options.preset === "vercel-edge") {
+          await copy(resolve("./runtime/public-assets/inter-latin-ext-400-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-400-normal.woff"));
+          await copy(resolve("./runtime/public-assets/inter-latin-ext-700-normal.woff"), resolve(_nitro.options.output.publicDir, "inter-latin-ext-700-normal.woff"));
+          await copy(resolve("./runtime/public-assets/svg2png.wasm"), resolve(_nitro.options.output.serverDir, "svg2png.wasm"));
+          await copy(resolve("./runtime/public-assets/yoga.wasm"), resolve(_nitro.options.output.serverDir, "yoga.wasm"));
+          const indexFile = resolve(_nitro.options.output.serverDir, "index.mjs");
+          if (await pathExists(indexFile)) {
+            const indexContents = await readFile(indexFile, "utf-8");
+            await writeFile(
+              indexFile,
+              indexContents.replace('"/* NUXT_OG_IMAGE_SVG2PNG_WASM */"', 'import("./svg2png.wasm").then(m => m.default || m)').replace('"/* NUXT_OG_IMAGE_YOGA_WASM */"', 'import("./yoga.wasm").then(m => m.default || m)').replace(".cwd(),", '?.cwd || "/",')
+            );
+          }
+        }
+      });
       const _routeRulesMatcher = toRouteMatcher(
         createRouter({ routes: nitro.options.routeRules })
       );
@@ -356,7 +379,7 @@ export {}
           ...routeRules.ogImage || {},
           ctx
         };
-        if ((nuxt.options._generate || options.prerender) && options.provider === "browser")
+        if ((nuxt.options._generate || options.static) && options.provider === "browser")
           screenshotQueue.push(options);
       });
       if (nuxt.options.dev)
@@ -390,7 +413,7 @@ export {}
                   ...entry || {}
                 });
                 try {
-                  await mkdir(dirname, { recursive: true });
+                  await mkdirp(dirname);
                 } catch (e) {
                 }
                 await writeFile(filename, imgBuffer);

package/dist/runtime/components/OgImageBasic.island.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   path: String,
   title: String,
   description: String,

package/dist/runtime/composables/defineOgImage.mjs

@@ -2,27 +2,28 @@ import { useServerHead } from "@vueuse/head";
 import { withBase } from "ufo";
 import { useRequestEvent } from "#app";
 import { useRouter } from "#imports";
-import { defaults, forcePrerender, host } from "#nuxt-og-image/config";
+import { defaults, forcePrerender, host, satoriProvider } from "#nuxt-og-image/config";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
   defineOgImage({
     alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
     provider: "browser",
-    prerender: true,
+    static: true,
     ...options
   });
 }
 export function defineOgImageDynamic(options = {}) {
   defineOgImage({
-    provider: "satori",
+    provider: satoriProvider ? "satori" : "browser",
+    static: !!forcePrerender,
     ...options
   });
 }
 export function defineOgImageStatic(options = {}) {
   defineOgImage({
-    provider: "satori",
-    prerender: true,
+    provider: satoriProvider ? "satori" : "browser",
+    static: true,
     ...options
   });
 }
@@ -31,7 +32,7 @@ export function defineOgImage(options = {}) {
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
     const e = useRequestEvent();
-    if ((forcePrerender || options.prerender) && options.provider === "satori")
+    if ((forcePrerender || options.static) && options.provider === "satori")
       e.res.setHeader("x-nitro-prerender", `${route === "/" ? "" : route}/__og_image__/og.png`);
     const meta = [
       {
@@ -40,7 +41,7 @@ export function defineOgImage(options = {}) {
       },
       {
         property: "og:image",
-        content: () => withBase(`${route}/__og_image__/og.png`, host)
+        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, host)
       },
       {
         property: "og:image:width",

package/dist/runtime/nitro/{routes/__og_image__ → middleware}/og.png.mjs

@@ -1,6 +1,6 @@
 import { defineEventHandler, setHeader } from "h3";
-import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchOptions, useHostname } from "../../utils.mjs";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
@@ -9,11 +9,11 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  const options = await fetchOptions(basePath);
   setHeader(e, "Content-Type", "image/png");
   setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
   setHeader(e, "Pragma", "no-cache");
   setHeader(e, "Expires", "0");
+  const options = await fetchOptions(e, basePath);
   const provider = await useProvider(options.provider);
-  return provider.createPng(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
+  return provider.createPng(withBase(basePath, useHostname(e)), options);
 });

package/dist/runtime/nitro/{routes/__og_image__/index.mjs → middleware/playground.mjs}

@@ -1,12 +1,12 @@
 import { defineEventHandler } from "h3";
 import { parseURL, withoutTrailingSlash } from "ufo";
-import { fetchOptions } from "../../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 export default defineEventHandler(async (e) => {
-  const path = parseURL(e.path).pathname;
+  const path = withoutTrailingSlash(parseURL(e.path).pathname);
   if (!path.endsWith("/__og_image__"))
     return;
-  const basePath = withoutTrailingSlash(path.replace("__og_image__", ""));
-  const options = await fetchOptions(basePath);
+  const basePath = path.replace("/__og_image__", "");
+  const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
   return `

package/dist/runtime/nitro/providers/browser/lambda.d.ts

@@ -0,0 +1 @@
+export default function createBrowser(): Promise<import("puppeteer-core").Browser>;

package/dist/runtime/nitro/{browsers → providers/browser}/lambda.mjs

@@ -1,6 +1,6 @@
 import edgeChromium from "chrome-aws-lambda";
 import puppeteer from "puppeteer-core";
-export async function createBrowser() {
+export default async function createBrowser() {
   return puppeteer.launch({
     args: edgeChromium.args,
     executablePath: await edgeChromium.executablePath,

package/dist/runtime/nitro/providers/browser/node.d.ts

@@ -0,0 +1 @@
+export default function createBrowser(): Promise<any>;

package/dist/runtime/nitro/{browsers/default.mjs → providers/browser/node.mjs}

@@ -1,4 +1,4 @@
-export async function createBrowser() {
+export default async function createBrowser() {
   try {
     const playwrightCore = await import(String("playwright-core"));
     const { Launcher } = await import(String("chrome-launcher"));

package/dist/runtime/nitro/providers/satori/node.d.ts

@@ -0,0 +1,2 @@
+import type { SatoriOptions } from 'satori';
+export default function (nodes: any, options: SatoriOptions): Promise<string>;

package/dist/runtime/nitro/providers/satori/node.mjs

@@ -0,0 +1,4 @@
+import satori from "satori";
+export default function(nodes, options) {
+  return satori(nodes, options);
+}

package/dist/runtime/nitro/providers/satori/webworker.d.ts

@@ -0,0 +1,4 @@
+import type { SatoriOptions } from 'satori';
+export default function (nodes: string, options: SatoriOptions & {
+    baseUrl: string;
+}): Promise<any>;

package/dist/runtime/nitro/providers/satori/webworker.mjs

@@ -0,0 +1,11 @@
+import satori, { init } from "satori/wasm";
+import initYoga from "yoga-wasm-web";
+import { wasmLoader } from "../../utils.mjs";
+export default async function(nodes, options) {
+  const loader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm", options.baseUrl);
+  if (!await loader.loaded()) {
+    const yoga = await initYoga(await loader.load());
+    init(yoga);
+  }
+  return await satori(nodes, options);
+}

package/dist/runtime/nitro/providers/svg2png/universal.d.ts

@@ -0,0 +1,4 @@
+import type { ConvertOptions } from 'svg2png-wasm';
+export default function (svg: string, options: ConvertOptions & {
+    baseUrl: string;
+}): Promise<Uint8Array>;

package/dist/runtime/nitro/providers/svg2png/universal.mjs

@@ -0,0 +1,9 @@
+import { initialize, svg2png } from "svg2png-wasm";
+import { wasmLoader } from "../../utils.mjs";
+export default async function(svg, options) {
+  const loader = wasmLoader("/* NUXT_OG_IMAGE_SVG2PNG_WASM */", "/svg2png.wasm", options.baseUrl);
+  if (!await loader.loaded())
+    await initialize(await loader.load()).catch(() => {
+    });
+  return await svg2png(svg, options);
+}

package/dist/runtime/nitro/renderers/browser.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer } from '../../../types';
+declare const _default: Renderer;
+export default _default;

package/dist/runtime/nitro/{providers → renderers}/browser.mjs

@@ -1,5 +1,5 @@
 import { screenshot } from "../../browserUtil.mjs";
-import { createBrowser } from "#nuxt-og-image/browser";
+import loadBrowser from "#nuxt-og-image/browser";
 export default {
   name: "browser",
   createSvg: async function createSvg() {
@@ -9,7 +9,10 @@ export default {
     throw new Error("Browser provider can't create VNodes.");
   },
   createPng: async function createPng(basePath, options) {
+    const createBrowser = await loadBrowser();
     const browser = await createBrowser();
-    return screenshot(browser, basePath, options);
+    if (browser)
+      return screenshot(browser, basePath, options);
+    return null;
   }
 };

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

@@ -0,0 +1,3 @@
+import type { Renderer } from '../../../../types';
+declare const _default: Renderer;
+export default _default;

package/dist/runtime/nitro/{providers → renderers}/satori/index.mjs

@@ -1,5 +1,4 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import satori from "satori";
 import { parseURL } from "ufo";
 import twemoji from "twemoji";
 import { loadFont, walkSatoriTree } from "./utils.mjs";
@@ -8,16 +7,21 @@ import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
 import emojis from "./plugins/emojis.mjs";
 import { fonts, satoriOptions } from "#nuxt-og-image/config";
-import { resvg } from "#nuxt-og-image/resvg";
+import loadSvg2png from "#nuxt-og-image/svg2png";
+import loadSatori from "#nuxt-og-image/satori";
+const satoriFonts = [];
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
     const svg = await this.createSvg(baseUrl, options);
-    return resvg(svg, options);
+    const svg2png = await loadSvg2png();
+    return svg2png(svg, { baseUrl, ...options });
   },
   createVNode: async function createVNode(baseUrl, options) {
     const url = parseURL(baseUrl);
-    const html = await $fetch(url.pathname);
+    const html = await globalThis.$fetch("/api/og-image-html", {
+      query: { path: url.pathname, options: JSON.stringify(options) }
+    });
     const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
     const emojiedFont = twemoji.parse(body, {
       folder: "svg",
@@ -34,13 +38,15 @@ export default {
     return satoriTree;
   },
   createSvg: async function createSvg(baseUrl, options) {
-    const url = parseURL(baseUrl);
     const vnodes = await this.createVNode(baseUrl, options);
-    const satoriFonts = [];
-    for (const font of fonts)
-      satoriFonts.push(await loadFont(url, font));
+    if (!satoriFonts.length) {
+      for (const font of fonts)
+        satoriFonts.push(await loadFont(new URL(baseUrl), font));
+    }
+    const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,
+      baseUrl,
       fonts: satoriFonts,
       embedFont: true,
       width: options.width,

package/dist/runtime/nitro/{providers → renderers}/satori/plugins/imageSrc.mjs

@@ -1,5 +1,6 @@
 import { withBase } from "ufo";
-import { defineSatoriTransformer, readPublicAssetBase64 } from "../utils.mjs";
+import { defineSatoriTransformer } from "../utils.mjs";
+import { readPublicAssetBase64 } from "../../../utils.mjs";
 export default defineSatoriTransformer((url) => {
   return {
     filter: (node) => node.type === "img",

package/dist/runtime/nitro/{providers → renderers}/satori/utils.d.ts

@@ -1,8 +1,5 @@
-/// <reference types="node" />
 import type { ParsedURL } from 'ufo';
 import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
-export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
-export declare function loadFont(url: ParsedURL, font: string): Promise<any>;
+export declare function loadFont(url: URL, font: string): 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

@@ -0,0 +1,45 @@
+import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
+import { useStorage } from "#internal/nitro";
+const cachedFonts = {};
+export async function loadFont(url, font) {
+  if (cachedFonts[font])
+    return cachedFonts[font];
+  let data;
+  const storageKey = `assets:nuxt-og-imagee:font:${font}`;
+  if (await useStorage().hasItem(storageKey)) {
+    data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
+    return cachedFonts[font] = { name: font, data, style: "normal" };
+  }
+  const [name, weight] = font.split(":");
+  if (name === "Inter" && ["400", "700"].includes(weight)) {
+    const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
+    if (data2)
+      return cachedFonts[font] = { name: font, data: data2, style: "normal" };
+  }
+  if (!data) {
+    const fontUrl = await globalThis.$fetch("/api/og-image-font", {
+      query: { name, weight }
+    });
+    data = await globalThis.$fetch(fontUrl, {
+      responseType: "arrayBuffer"
+    });
+  }
+  await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
+  return cachedFonts[font] = { name, weight, data, style: "normal" };
+}
+export async function walkSatoriTree(url, node, plugins) {
+  if (!node.props?.children)
+    return;
+  for (const child of node.props.children || []) {
+    if (child) {
+      for (const plugin of plugins) {
+        if (plugin.filter(child))
+          await plugin.transform(child);
+      }
+      await walkSatoriTree(url, child, plugins);
+    }
+  }
+}
+export function defineSatoriTransformer(transformer) {
+  return transformer;
+}

package/dist/runtime/nitro/routes/{__og_image__/font.mjs → font.mjs}

@@ -4,7 +4,7 @@ export default defineCachedEventHandler(async (e) => {
   const { name, weight } = getQuery(e);
   if (!name || !weight)
     return "Provide a font name and weight";
-  const css = await await $fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
+  const css = await await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
     headers: {
       // Make sure it returns TTF.
       "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"

package/dist/runtime/nitro/routes/{__og_image__/html.mjs → html.mjs}

@@ -1,18 +1,19 @@
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
+import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
 import { defaults, fonts } from "#nuxt-og-image/config";
 export default defineEventHandler(async (e) => {
-  const path = parseURL(e.path).pathname;
-  if (!path.endsWith("__og_image__/html"))
-    return;
-  const basePath = withoutTrailingSlash(path.replace("__og_image__/html", ""));
+  const path = getQuery(e).path || "/";
   const scale = getQuery(e).scale;
-  const options = await fetchOptions(basePath);
+  let options;
+  if (getQuery(e).options)
+    options = JSON.parse(getQuery(e).options);
+  if (!options)
+    options = await fetchOptions(e, path);
   if (options.provider === "browser")
-    return sendRedirect(e, withBase(basePath, useHostname(e)));
+    return sendRedirect(e, withBase(path, useHostname(e)));
   const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);

package/dist/runtime/nitro/routes/{__og_image__/options.d.ts → options.d.ts}

@@ -1,5 +1,5 @@
-import type { OgImageOptions } from '../../../../types';
+import type { OgImageOptions } from '../../../types';
 export declare function extractOgImageOptions(html: string): any;
 export declare const inferOgImageOptions: (html: string) => OgImageOptions;
-declare const _default: import("h3").EventHandler<false | OgImageOptions | undefined>;
+declare const _default: import("h3").EventHandler<false | OgImageOptions>;
 export default _default;

package/dist/runtime/nitro/routes/{__og_image__/options.mjs → options.mjs}

@@ -1,4 +1,3 @@
-import { parseURL, withoutTrailingSlash } from "ufo";
 import { defineEventHandler, getQuery } from "h3";
 import { getRouteRules } from "#internal/nitro";
 import { defaults } from "#nuxt-og-image/config";
@@ -21,22 +20,20 @@ export const inferOgImageOptions = (html) => {
   return options;
 };
 export default defineEventHandler(async (e) => {
-  const path = parseURL(e.path).pathname;
-  if (!path.endsWith("__og_image__/options"))
-    return;
-  const basePath = withoutTrailingSlash(path.replace("__og_image__/options", ""));
-  const html = await $fetch(basePath);
+  const query = getQuery(e);
+  const path = query.path;
+  const html = await globalThis.$fetch(path);
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload)
     return false;
-  e.node.req.url = basePath;
+  e.node.req.url = path;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
   return {
-    path: basePath,
+    path,
     ...defaults,
     // use inferred data
     ...inferOgImageOptions(html),
@@ -45,6 +42,6 @@ export default defineEventHandler(async (e) => {
     // use provided data
     ...extractedPayload,
     // use query data
-    ...getQuery(e)
+    ...query
   };
 });