nuxt-og-image 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/module.mjs

@@ -1,10 +1,10 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addImports, addComponent, addServerPlugin } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { joinURL } from 'ufo';
+import { withBase, joinURL } from 'ufo';
 import { resolve, relative } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
@@ -16,14 +16,16 @@ import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 
 async function createBrowser() {
-  try {
-    const { Launcher } = await import(String("chrome-launcher"));
-    const chromePath = Launcher.getFirstInstallation();
-    return await playwrightCore.chromium.launch({
-      headless: true,
-      executablePath: chromePath
-    });
-  } catch (e) {
+  if (process.dev || process.env.prerender) {
+    try {
+      const { Launcher } = await import(String("chrome-launcher"));
+      const chromePath = Launcher.getFirstInstallation();
+      return await playwrightCore.chromium.launch({
+        headless: true,
+        executablePath: chromePath
+      });
+    } catch (e) {
+    }
   }
   try {
     return await playwrightCore.chromium.launch({
@@ -54,9 +56,9 @@ async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  const isHtml = options.path.startsWith("html:") || options.html;
+  const isHtml = options.html || options.path?.startsWith("html:");
   if (isHtml) {
-    const html = options.html || options.path.substring(5);
+    const html = options.html || options.path?.substring(5);
     await page.evaluate((html2) => {
       document.open("text/html");
       document.write(html2);
@@ -69,6 +71,9 @@ async function screenshot(browser, options) {
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: 1e4
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -78,8 +83,8 @@ async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  return await page.screenshot(screenshotOptions);
 }
 
 function setupPlaygroundRPC(nuxt, config) {
@@ -113,7 +118,7 @@ function setupPlaygroundRPC(nuxt, config) {
   const birpc = createBirpcGroup(serverFunctions, []);
   nuxt.hook("builder:watch", (e, path) => {
     if (e === "change")
-      birpc.boardcast.refresh.asEvent(path);
+      birpc.broadcast.refresh.asEvent(path);
   });
   const middleware = async (req, res) => {
     if (req.ws) {
@@ -164,11 +169,15 @@ function getBodyJson(req) {
   });
 }
 
-function decodeHtmlEntities(obj) {
+function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(parseInt(int));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -185,24 +194,24 @@ function extractOgImageOptions(html) {
       console.warn("Failed to parse #nuxt-og-image-options", e, options);
   }
   if (options) {
-    const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
-    if (description)
-      options.description = description;
-    else
-      options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
-    return decodeHtmlEntities(options);
+    if (!options.description) {
+      const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
+      if (description)
+        options.description = description;
+      else
+        options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
+    }
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
-function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
-}
 
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
 const edgeProvidersSupported = [
   "cloudflare",
+  "cloudflare-pages",
   "vercel-edge",
   "netlify-edge"
 ];
@@ -217,6 +226,7 @@ const module = defineNuxtModule({
   },
   defaults(nuxt) {
     const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || process.env.NUXT_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl || nuxt.options.runtimeConfig.siteUrl;
+    const isEdgeProvider = edgeProvidersSupported.includes(process.env.NITRO_PRESET || "") || edgeProvidersSupported.includes(nuxt.options.nitro.preset);
     return {
       // when we run `nuxi generate` we need to force prerendering
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
@@ -227,11 +237,11 @@ const module = defineNuxtModule({
         height: 630
       },
       satoriProvider: true,
-      browserProvider: true,
+      // disable browser in edge environments
+      browserProvider: !isEdgeProvider,
       fonts: [],
       satoriOptions: {},
       experimentalInlineWasm: process.env.NITRO_PRESET === "netlify-edge" || nuxt.options.nitro.preset === "netlify-edge" || false,
-      experimentalRuntimeBrowser: false,
       playground: process.env.NODE_ENV === "development" || nuxt.options.dev
     };
   },
@@ -323,6 +333,7 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
+    addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
     const moduleAssetDir = resolve("./runtime/public-assets");
     const assetDirs = [
       resolve(nuxt.options.rootDir, nuxt.options.dir.public),
@@ -337,17 +348,13 @@ export {}
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
-      if (config.experimentalRuntimeBrowser) {
-        nitroConfig.alias = nitroConfig.alias || {};
-        nitroConfig.alias.electron = "unenv/runtime/mock/proxy-cjs";
-        nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
-        nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
-      }
       nitroConfig.publicAssets = nitroConfig.publicAssets || [];
       nitroConfig.publicAssets.push({ dir: moduleAssetDir, maxAge: 31536e3 });
       const providerPath = `${runtimeDir}/nitro/providers`;
+      const nitroPreset = nuxt.options.nitro.preset || process.env.NITRO_PRESET;
+      const isNodeNitroServer = !nitroPreset || nitroPreset === "node";
       if (config.browserProvider) {
-        nitroConfig.virtual["#nuxt-og-image/browser"] = nuxt.options.dev || config.experimentalRuntimeBrowser ? `
+        nitroConfig.virtual["#nuxt-og-image/browser"] = nuxt.options.dev || process.env.prerender || isNodeNitroServer ? `
 import node from '${providerPath}/browser/node'
 
 export default async function() {
@@ -370,14 +377,15 @@ export default async function() {
 }`;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
-import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'
-import browser from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}'
+${config.satoriProvider ? `import satori from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/satori"))}'` : ""}
+${config.browserProvider ? `import browser from '${relative(nuxt.options.rootDir, resolve("./runtime/nitro/renderers/browser"))}'` : ""}
 
 export async function useProvider(provider) {
   if (provider === 'satori')
-    return satori
+    return ${config.satoriProvider ? "satori" : "null"}
   if (provider === 'browser')
-    return browser
+    return ${config.browserProvider ? "browser" : "null"}
+  return null
 }
       `;
     });
@@ -392,9 +400,14 @@ export async function useProvider(provider) {
             if (useSatoriWasm)
               await copy(resolve("./runtime/public-assets/yoga.wasm"), resolve(_nitro.options.output.serverDir, "yoga.wasm"));
           }
-          const indexFile = resolve(_nitro.options.output.serverDir, _nitro.options.preset === "netlify-edge" ? "server.mjs" : "index.mjs");
+          const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+          const entryFile = typeof configuredEntry === "string" ? configuredEntry : "index.mjs";
+          const indexFile = resolve(_nitro.options.output.serverDir, entryFile);
           if (await pathExists(indexFile)) {
-            const indexContents = (await readFile(indexFile, "utf-8")).replace(".cwd(),", '?.cwd || "/",');
+            let indexContents = await readFile(indexFile, "utf-8");
+            if (_nitro.options.preset.includes("vercel")) {
+              indexContents = indexContents.replace(".cwd(),", '?.cwd || "/",');
+            }
             if (!config.experimentalInlineWasm) {
               await writeFile(
                 indexFile,
@@ -421,7 +434,6 @@ export async function useProvider(provider) {
         if (!html)
           return;
         const extractedOptions = extractOgImageOptions(html);
-        ctx.contents = stripOgImageOptions(html);
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
         if (!extractedOptions || routeRules.ogImage === false)
           return;
@@ -440,21 +452,6 @@ export async function useProvider(provider) {
         await nuxt.callHook("og-image:prerenderScreenshots", screenshotQueue);
         if (screenshotQueue.length === 0)
           return;
-        for (const entry of screenshotQueue) {
-          if (entry.route && Object.keys(entry).length === 1) {
-            const html = await $fetch(entry.route);
-            const extractedOptions = extractOgImageOptions(html);
-            const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
-            Object.assign(entry, {
-              // @ts-expect-error runtime
-              path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
-              ...extractedOptions,
-              ...routeRules.ogImage || {}
-            });
-          }
-          if (entry.component)
-            entry.html = await $fetch(entry.path);
-        }
         nitro.logger.info("Ensuring chromium install for og:image generation...");
         const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
           stdio: "inherit"
@@ -481,6 +478,21 @@ export async function useProvider(provider) {
           browser = await createBrowser();
           if (browser) {
             nitro.logger.info(`Prerendering ${screenshotQueue.length} og:image screenshots...`);
+            for (const entry of screenshotQueue) {
+              if (entry.route && Object.keys(entry).length === 1) {
+                const html = await $fetch(entry.route, { baseURL: withBase(nuxt.options.app.baseURL, host) });
+                const extractedOptions = extractOgImageOptions(html);
+                const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
+                Object.assign(entry, {
+                  // @ts-expect-error runtime
+                  path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
+                  ...extractedOptions,
+                  ...routeRules.ogImage || {}
+                });
+              }
+              if (entry.component)
+                entry.html = await globalThis.$fetch(entry.path);
+            }
             for (const k in screenshotQueue) {
               const entry = screenshotQueue[k];
               const start = Date.now();
@@ -518,7 +530,7 @@ export async function useProvider(provider) {
         }
         screenshotQueue = [];
       };
-      if (!nuxt.options._prepare) {
+      if (nuxt.options._generate) {
         nitro.hooks.hook("rollup:before", async () => {
           await captureScreenshots();
         });

package/dist/runtime/browserUtil.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../types';
 export declare function screenshot(browser: Browser, options: Partial<ScreenshotOptions> & Record<string, any>): Promise<Buffer>;

package/dist/runtime/browserUtil.mjs

@@ -6,9 +6,9 @@ export async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  const isHtml = options.path.startsWith("html:") || options.html;
+  const isHtml = options.html || options.path?.startsWith("html:");
   if (isHtml) {
-    const html = options.html || options.path.substring(5);
+    const html = options.html || options.path?.substring(5);
     await page.evaluate((html2) => {
       document.open("text/html");
       document.write(html2);
@@ -21,6 +21,9 @@ export async function screenshot(browser, options) {
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: 1e4
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -30,6 +33,6 @@ export async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  return await page.screenshot(screenshotOptions);
 }

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,7 +1,7 @@
-import { useServerHead } from "@vueuse/head";
 import { withBase } from "ufo";
 import { useRequestEvent } from "#app";
-import { useRouter, useRuntimeConfig } from "#imports";
+import { useHostname } from "../nitro/util-hostname.mjs";
+import { useRouter, useRuntimeConfig, useServerHead } from "#imports";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
@@ -31,12 +31,11 @@ export function defineOgImageStatic(options = {}) {
 }
 export function defineOgImage(options = {}) {
   if (process.server) {
-    const { forcePrerender, defaults, host } = useRuntimeConfig()["nuxt-og-image"];
+    const { defaults, siteUrl } = useRuntimeConfig()["nuxt-og-image"];
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
     const e = useRequestEvent();
-    if ((forcePrerender || options.static) && options.provider === "satori")
-      e.res.setHeader("x-nitro-prerender", `${route === "/" ? "" : route}/__og_image__/og.png`);
+    const baseUrl = process.env.prerender ? siteUrl : useHostname(e);
     const meta = [
       {
         name: "twitter:card",
@@ -44,11 +43,11 @@ export function defineOgImage(options = {}) {
       },
       {
         name: "twitter:image:src",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, host)
+        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl)
       },
       {
         property: "og:image",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, host)
+        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl)
       },
       {
         property: "og:image:width",

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -9,7 +9,6 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  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");
@@ -21,5 +20,21 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createPng(withBase(basePath, useHostname(e)), options);
+  try {
+    const png = await provider.createPng(withBase(basePath, useHostname(e)), options);
+    if (png) {
+      setHeader(e, "Content-Type", "image/png");
+      return png;
+    }
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to create og image: ${err.message}`
+    });
+  }
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Failed to create og image, unknown error."
+  });
+  return false;
 });

package/dist/runtime/nitro/middleware/playground.mjs

@@ -1,11 +1,12 @@
 import { defineEventHandler } from "h3";
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { fetchOptions } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const path = withoutTrailingSlash(parseURL(e.path).pathname);
   if (!path.endsWith("/__og_image__"))
     return;
-  const basePath = path.replace("/__og_image__", "");
+  const basePath = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
@@ -22,5 +23,5 @@ export default defineEventHandler(async (e) => {
   }
 </style>
 <title>OG Image Playground</title>
-<iframe src="/__nuxt_og_image__/client/?&path=${basePath}"></iframe>`;
+<iframe src="/__nuxt_og_image__/client?&path=${basePath}&base=${useRuntimeConfig().app.baseURL}"></iframe>`;
 });

package/dist/runtime/nitro/plugins/prerender.d.ts

@@ -0,0 +1,3 @@
+import type { NitroAppPlugin } from 'nitropack';
+declare const OgImagePrenderNitroPlugin: NitroAppPlugin;
+export default OgImagePrenderNitroPlugin;

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -0,0 +1,20 @@
+import { appendHeader } from "h3";
+import { joinURL } from "ufo";
+import { extractOgImageOptions } from "../utils-pure.mjs";
+import { useRuntimeConfig } from "#imports";
+const OgImagePrenderNitroPlugin = (nitroApp) => {
+  if (!process.env.prerender)
+    return;
+  const { forcePrerender } = useRuntimeConfig()["nuxt-og-image"];
+  nitroApp.hooks.hook("render:html", async (ctx, { event }) => {
+    const url = event.node.req.url;
+    if (url.includes(".") || url.startsWith("/__nuxt_island/"))
+      return;
+    const options = extractOgImageOptions(ctx.head.join("\n"));
+    if (!options)
+      return;
+    if ((forcePrerender || options.static) && options.provider === "satori")
+      appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
+  });
+};
+export default OgImagePrenderNitroPlugin;

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

@@ -1,13 +1,15 @@
 import playwrightCore from "playwright-core";
 export default async function createBrowser() {
-  try {
-    const { Launcher } = await import(String("chrome-launcher"));
-    const chromePath = Launcher.getFirstInstallation();
-    return await playwrightCore.chromium.launch({
-      headless: true,
-      executablePath: chromePath
-    });
-  } catch (e) {
+  if (process.dev || process.env.prerender) {
+    try {
+      const { Launcher } = await import(String("chrome-launcher"));
+      const chromePath = Launcher.getFirstInstallation();
+      return await playwrightCore.chromium.launch({
+        headless: true,
+        executablePath: chromePath
+      });
+    } catch (e) {
+    }
   }
   try {
     return await playwrightCore.chromium.launch({

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

@@ -2,8 +2,11 @@ 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(() => {
+  if (!await loader.loaded()) {
+    await initialize(await loader.load()).catch((e) => {
+      if (!e.message.trim().endsWith("function can be used only once."))
+        throw e;
     });
+  }
   return await svg2png(svg, options);
 }

package/dist/runtime/nitro/renderers/browser.mjs

@@ -1,5 +1,7 @@
+import { withBase } from "ufo";
 import { screenshot } from "../../browserUtil.mjs";
 import loadBrowser from "#nuxt-og-image/browser";
+import { useRuntimeConfig } from "#imports";
 export default {
   name: "browser",
   createSvg: async function createSvg() {
@@ -11,12 +13,15 @@ export default {
   createPng: async function createPng(basePath, options) {
     const url = new URL(basePath);
     const createBrowser = await loadBrowser();
+    if (!createBrowser) {
+      throw new Error("Failed to load browser. Is the `browserProvider` enabled?");
+    }
     const browser = await createBrowser();
     if (browser) {
       try {
         return await screenshot(browser, {
           ...options,
-          host: url.origin,
+          host: withBase(useRuntimeConfig().app.baseURL, url.origin),
           path: `/api/og-image-html?path=${url.pathname}`
         });
       } finally {

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

@@ -1,9 +1,10 @@
 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 = node.props.children.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
+      node.props.children = decodeHtml(node.props.children);
     }
   };
 });

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

@@ -1,3 +1,4 @@
+import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};

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

@@ -3,19 +3,22 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
 import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const scale = query.scale;
+  const mode = query.mode || "light";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options)
+    options = JSON.parse(query.options);
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+  }
   const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);

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

@@ -1,9 +1,12 @@
 import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
-import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { withoutBase } from "ufo";
+import { extractOgImageOptions } from "../utils.mjs";
+import { useHostname } from "../util-hostname.mjs";
+import { getRouteRules } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const fetchOptions = process.dev || process.env.prerender ? {
     headers: getHeaders(e)
   } : {

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);

package/dist/runtime/nitro/util-hostname.d.ts

@@ -0,0 +1,2 @@
+import type { H3Event } from 'h3';
+export declare function useHostname(e: H3Event): string;

package/dist/runtime/nitro/util-hostname.mjs

@@ -0,0 +1,15 @@
+import { getRequestHost, getRequestProtocol } from "h3";
+import { withBase } from "ufo";
+import { useRuntimeConfig } from "#imports";
+export function useHostname(e) {
+  const base = useRuntimeConfig().app.baseURL;
+  let host = getRequestHost(e);
+  if (host === "localhost")
+    host = process.env.NITRO_HOST || process.env.HOST || host;
+  const protocol = getRequestProtocol(e);
+  const useHttp = process.dev || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
+  let port = host.includes(":") ? host.split(":").pop() : false;
+  if ((process.dev || process.env.prerender || host.includes("localhost")) && !port)
+    port = process.env.NITRO_PORT || process.env.PORT;
+  return withBase(base, `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}`);
+}

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

@@ -1,2 +1,3 @@
-export declare function extractOgImageOptions(html: string): false | Record<string, any>;
-export declare function stripOgImageOptions(html: string): string;
+import type { OgImageOptions } from '../../types';
+export declare function decodeHtml(html: string): string;
+export declare function extractOgImageOptions(html: string): OgImageOptions | false;