nuxt-og-image 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/runtime/core/html/applyInlineCss.mjs

@@ -3,30 +3,37 @@ import { useNitroOrigin } from "#imports";
 import cssInline from "#nuxt-og-image/bindings/css-inline";
 export async function applyInlineCss({ e }, island) {
   let html = island.html;
-  const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
-  const usingInlineCss = !!componentInlineStyles.length;
-  if (!cssInline.__unenv__ && componentInlineStyles.length) {
-    const css = island.head.style.map((s) => s.innerHTML).join("\n");
-    const linksToCss = (await Promise.all(
-      componentInlineStyles.map((l) => {
-        return e.$fetch(`${l.href}&hmr=false`, {
-          responseType: "text",
-          baseURL: useNitroOrigin(e)
-        }).then((res) => {
-          return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
-        });
-      })
-    )).join("\n");
-    const cssToInline = `${linksToCss}${css}`;
+  if (!cssInline.__unenv__) {
+    let css = island.head.style.map((s) => s.innerHTML).join("\n");
+    const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
+    if (process.dev) {
+      const linksToCss = componentInlineStyles.length ? (await Promise.all(
+        componentInlineStyles.map((l) => {
+          const url = l.href.endsWith("lang.css") ? `${l.href}&hmr=false` : l.href;
+          return e.$fetch(url, {
+            responseType: "text",
+            baseURL: useNitroOrigin(e)
+          }).then((res) => {
+            if (res.includes("__vite__css"))
+              return res.match(/__vite__css = "([^"]+)"/)?.[1];
+            return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+          });
+        })
+      )).join("\n") : "";
+      css = `${linksToCss}${css}`;
+    }
+    if (!css.trim().length)
+      return false;
     const cssInline2 = await useCssInline();
     html = cssInline2.inline(island.html, {
-      load_remote_stylesheets: false,
-      extra_css: cssToInline
+      loadRemoteStylesheets: false,
+      extraCss: css
     });
-    const classes = cssToInline.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
+    const classes = css.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
     if (classes)
       html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
     island.html = html;
+    return true;
   }
-  return usingInlineCss;
+  return false;
 }

package/dist/runtime/core/html/devIframeTemplate.mjs

@@ -1,6 +1,6 @@
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/ssr";
-import { useOgImageRuntimeConfig } from "../../utils.mjs";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../utils.mjs";
 import { applyEmojis } from "./applyEmojis.mjs";
 import { fetchIsland } from "./fetchIsland.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
@@ -11,7 +11,8 @@ export async function devIframeTemplate(ctx) {
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
-  const firstFont = fonts[0];
+  const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
+  const firstFont = normalisedFonts[0];
   if (firstFont)
     defaultFontFamily = firstFont.name;
   await applyEmojis(ctx, island);

package/dist/runtime/core/options/extract.d.ts

@@ -1,3 +1,4 @@
 import type { OgImageOptions } from '../../types';
+export declare function htmlDecodeQuotes(html: string): string;
 export declare function decodeHtml(html: string): string;
 export declare function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/core/options/extract.mjs

@@ -1,3 +1,6 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
 export 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(Number.parseInt(int));
@@ -28,6 +31,12 @@ export function extractAndNormaliseOgImageOptions(html) {
   }
   if (!options)
     return false;
+  const description = html.match(/<meta[^>]+name="description"[^>]*>/)?.[0];
+  if (description) {
+    const [, content] = description.match(/content="([^"]+)"/) || [];
+    if (content && !options.props.description)
+      options.props.description = content;
+  }
   const payload = decodeObjectHtmlEntities(options);
   if (import.meta.dev) {
     const socialPreview = {};

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

@@ -7,10 +7,10 @@ import { useResvg, useSatori, useSharp } from "./instances.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
 export async function createSvg(event) {
   const { options } = event;
-  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
+  const { fonts, satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
   const vnodes = await createVNodes(event);
   await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
-  const normalisedFonts = normaliseFontInput([...fonts, ...event.options.fonts || []]);
+  const normalisedFonts = normaliseFontInput([...event.options.fonts || [], ...fonts]);
   const localFontPromises = [];
   const preloadedFonts = [];
   for (const font of normalisedFonts) {
@@ -30,15 +30,16 @@ export async function createSvg(event) {
   }
   const awaitedFonts = await Promise.all(localFontPromises);
   const satori = await useSatori();
-  return satori(vnodes, defu(options.satori, satoriOptions, {
+  const satoriOptions = defu(options.satori, _satoriOptions, {
     fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
-      return { ..._f, weight: Number(_f.weight) };
+      return { name: _f.name, data: _f.data, style: _f.style, weight: Number(_f.weight) };
     }),
     tailwindConfig: { theme },
     embedFont: true,
     width: options.width,
     height: options.height
-  }));
+  });
+  return satori(vnodes, satoriOptions);
 }
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();

package/dist/runtime/core/renderers/satori/instances.mjs

@@ -28,5 +28,6 @@ export async function useSharp() {
 }
 export async function useCssInline() {
   cssInlineInstance.instance = cssInlineInstance.instance || await import("#nuxt-og-image/bindings/css-inline").then((m) => m.default);
-  return cssInlineInstance.instance;
+  await cssInlineInstance.instance.initWasmPromise;
+  return cssInlineInstance.instance.cssInline;
 }

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

@@ -1,8 +1,17 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 import { decodeHtml } from "../../../options/extract.mjs";
-export default defineSatoriTransformer({
-  filter: (node) => typeof node.props?.children === "string",
-  transform: async (node) => {
-    node.props.children = decodeHtml(node.props.children);
+export default defineSatoriTransformer([
+  // clean up
+  {
+    filter: (node) => node.props?.["data-v-inspector"],
+    transform: async (node) => {
+      delete node.props["data-v-inspector"];
+    }
+  },
+  {
+    filter: (node) => typeof node.props?.children === "string",
+    transform: async (node) => {
+      node.props.children = decodeHtml(node.props.children);
+    }
   }
-});
+]);

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

@@ -8,55 +8,54 @@ import { useNitroOrigin } from "#imports";
 export default defineSatoriTransformer([
   // fix <img src="">
   {
-    filter: (node) => node.type === "img",
+    filter: (node) => node.type === "img" && node.props?.src,
     transform: async (node, { e }) => {
-      const src = node.props?.src;
-      const isRelative = src?.startsWith("/");
-      if (src) {
-        let updated = false;
-        let dimensions;
-        let imageBuffer;
-        let valid = true;
+      const src = node.props.src;
+      const isRelative = src.startsWith("/");
+      let dimensions;
+      let imageBuffer;
+      if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
           const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
-          if (await useStorage().hasItem(key)) {
+          if (await useStorage().hasItem(key))
             imageBuffer = await useStorage().getItemRaw(key);
-            updated = !!imageBuffer;
-          }
-        }
-        if (!import.meta.prerender && !updated) {
+        } else {
           imageBuffer = await e.$fetch(src, {
             baseURL: useNitroOrigin(e),
             responseType: "arrayBuffer"
           }).catch(() => {
-            valid = false;
           });
-          valid = !!imageBuffer;
         }
-        if (valid) {
-          node.props.src = toBase64Image(src, imageBuffer);
-          try {
-            const imageSize = sizeOf(Buffer.from(imageBuffer));
-            dimensions = { width: imageSize.width, height: imageSize.height };
-          } catch (e2) {
-          }
-          updated = true;
-        }
-        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;
-          }
+      } else {
+        imageBuffer = await $fetch(src, {
+          responseType: "arrayBuffer"
+        }).catch(() => {
+        });
+      }
+      if (imageBuffer)
+        imageBuffer = Buffer.from(imageBuffer);
+      if (imageBuffer) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(imageBuffer);
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch (e2) {
         }
-        if (!updated && isRelative) {
-          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${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 (node.props.src.startsWith("/")) {
+        node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+      }
     }
   },
   // fix style="background-image: url('')"
@@ -64,11 +63,21 @@ export default defineSatoriTransformer([
     filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
     transform: async (node, { e }) => {
       const backgroundImage = node.props.style.backgroundImage;
-      if (backgroundImage) {
-        const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
-        const isRelative = src?.startsWith("/");
-        if (isRelative)
+      const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+      const isRelative = src?.startsWith("/");
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+          if (await useStorage().hasItem(key)) {
+            const imageBuffer = await useStorage().getItemRaw(key);
+            if (imageBuffer) {
+              const base64 = toBase64Image(src, Buffer.from(imageBuffer));
+              node.props.style.backgroundImage = `url(${base64})`;
+            }
+          }
+        } else {
           node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
+        }
       }
     }
   }

package/dist/runtime/core/renderers/satori/vnodes.mjs

@@ -2,6 +2,7 @@ import { html as convertHtmlToSatori } from "satori-html";
 import { fetchIsland } from "../../html/fetchIsland.mjs";
 import { applyInlineCss } from "../../html/applyInlineCss.mjs";
 import { applyEmojis } from "../../html/applyEmojis.mjs";
+import { htmlDecodeQuotes } from "../../options/extract.mjs";
 import { walkSatoriTree } from "./utils.mjs";
 import unocss from "./plugins/unocss.mjs";
 import emojis from "./plugins/emojis.mjs";
@@ -13,11 +14,12 @@ export async function createVNodes(ctx) {
   let html = ctx.options.html;
   if (!html) {
     const island = await fetchIsland(ctx);
+    island.html = htmlDecodeQuotes(island.html);
     await applyInlineCss(ctx, island);
     await applyEmojis(ctx, island);
     html = island.html;
   }
-  const template = `<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
   const satoriTree = convertHtmlToSatori(template);
   await walkSatoriTree(ctx, satoriTree, [
     unocss,

package/dist/runtime/core/utils/resolveRendererContext.mjs

@@ -1,13 +1,13 @@
-import { parseURL, withQuery, withoutBase, withoutTrailingSlash } from "ufo";
+import { parseURL, withQuery, withoutTrailingSlash } from "ufo";
 import { createError, getQuery } from "h3";
 import { defu } from "defu";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
 import { prerenderOptionsCache } from "../cache/prerender.mjs";
 import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
 import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
 import { resolvePathCacheKey } from "../../nitro/utils.mjs";
-import { useNitroApp, useRuntimeConfig } from "#internal/nitro";
+import { createNitroRouteRuleMatcher } from "../../nitro/kit.mjs";
+import { useNitroApp } from "#internal/nitro/app";
 export async function resolveRendererContext(e) {
   const runtimeConfig = useOgImageRuntimeConfig();
   const path = parseURL(e.path).pathname;
@@ -46,12 +46,8 @@ export async function resolveRendererContext(e) {
     }
   }
   delete queryParams.options;
-  const _routeRulesMatcher = toRouteMatcher(
-    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
-  );
-  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-    withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
-  ).reverse());
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath);
   if (typeof routeRules.ogImage === "undefined" && !options) {
     return createError({
       statusCode: 400,

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

@@ -0,0 +1,3 @@
+import type { NitroRouteRules } from 'nitropack';
+export declare function withoutQuery(path: string): string;
+export declare function createNitroRouteRuleMatcher(): (path: string) => NitroRouteRules;

package/dist/runtime/nitro/kit.mjs

@@ -0,0 +1,23 @@
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { defu } from "defu";
+import { withoutBase, withoutTrailingSlash } from "ufo";
+import { useRuntimeConfig } from "#imports";
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function createNitroRouteRuleMatcher() {
+  const { nitro, app } = useRuntimeConfig();
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({
+      routes: Object.fromEntries(
+        Object.entries(nitro?.routeRules || {}).map(([path, rules]) => [withoutTrailingSlash(path), rules])
+      )
+    })
+  );
+  return (path) => {
+    return defu({}, ..._routeRulesMatcher.matchAll(
+      // radix3 does not support trailing slashes
+      withoutBase(withoutTrailingSlash(withoutQuery(path)), app.baseURL)
+    ).reverse());
+  };
+}

package/dist/runtime/nitro/plugins/nuxt-content.mjs

@@ -2,14 +2,17 @@ import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
 import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
 export default defineNitroPlugin((nitroApp) => {
+  const { isNuxtContentDocumentDriven, defaults } = useOgImageRuntimeConfig();
   nitroApp.hooks.hook("content:file:afterParse", async (content) => {
     if (content._draft || content._extension !== "md" || content._partial || content.indexable === false || content.index === false)
       return;
-    if (content.path && content.ogImage) {
+    let path = content.path;
+    if (isNuxtContentDocumentDriven)
+      path = content._path;
+    if (path && content.ogImage) {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
-      const { defaults } = useOgImageRuntimeConfig();
       const optionsWithDefault = defu(ogImageConfig, defaults);
-      const src = getOgImagePath(content.path, optionsWithDefault);
+      const src = getOgImagePath(path, optionsWithDefault);
       const payload = {
         title: content.title,
         excerpt: content.description || content.excerpt,

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

@@ -1,2 +1,2 @@
-declare const _default: import("nitropack").NitroAppPlugin;
+declare const _default: import("nitropack/dist/runtime/plugin").NitroAppPlugin;
 export default _default;

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

@@ -1,12 +1,10 @@
-import { parseURL, withoutBase } from "ufo";
+import { parseURL } from "ufo";
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { defu } from "defu";
 import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
 import { prerenderOptionsCache } from "../../core/cache/prerender.mjs";
 import { isInternalRoute } from "../../utils.pure.mjs";
 import { resolvePathCacheKey } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { createNitroRouteRuleMatcher } from "../kit.mjs";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
@@ -15,14 +13,9 @@ export default defineNitroPlugin(async (nitro) => {
     const path = parseURL(ctx.event.path).pathname;
     if (isInternalRoute(path))
       return;
-    const runtimeConfig = useRuntimeConfig();
-    const _routeRulesMatcher = toRouteMatcher(
-      createRadixRouter({ routes: runtimeConfig.nitro?.routeRules })
-    );
-    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-      withoutBase(path.split("?")[0], runtimeConfig.app.baseURL)
-    ).reverse()).ogImage;
-    if (routeRules === false)
+    const routeRuleMatcher = createNitroRouteRuleMatcher();
+    const routeRules = routeRuleMatcher(path);
+    if (routeRules.ogImage === false)
       return;
     const options = extractAndNormaliseOgImageOptions([
       head.join("\n"),

package/dist/runtime/{server → nitro}/routes/__og-image__/debug.json.d.ts

@@ -1,8 +1,4 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
-    siteConfigUrl: {
-        value: any;
-        source: any;
-    };
     componentNames: any;
     runtimeConfig: import("../../../types").OgImageRuntimeConfig;
     compatibility: any;

package/dist/runtime/{server → nitro}/routes/__og-image__/debug.json.mjs

@@ -1,17 +1,11 @@
 import { defineEventHandler, setHeader } from "h3";
 import { useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { useSiteConfig } from "#imports";
 import compatibility from "#nuxt-og-image/compatibility";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useOgImageRuntimeConfig();
-  const siteConfig = await useSiteConfig(e, { debug: true });
   return {
-    siteConfigUrl: {
-      value: siteConfig.url,
-      source: siteConfig._context.url || "unknown"
-    },
     componentNames,
     runtimeConfig,
     compatibility

package/dist/runtime/nitro/routes/__og-image__/font-[name]-[weight].[extension].mjs

@@ -0,0 +1,56 @@
+import { createError, defineEventHandler, getQuery, proxyRequest, sendRedirect, setHeader } from "h3";
+import { parseURL } from "ufo";
+import { getExtension, normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { assets } from "#internal/nitro/virtual/server-assets";
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
+  if (!_name || !_weight)
+    return "Provide a font name and weight";
+  const name = _name[0].toUpperCase() + _name.slice(1);
+  const weight = Math.round(Number.parseInt(_weight) / 100) * 100;
+  const config = useOgImageRuntimeConfig();
+  const normalisedFonts = normaliseFontInput(config.fonts);
+  let font;
+  if (typeof getQuery(e).font === "string")
+    font = JSON.parse(getQuery(e).font);
+  if (!font) {
+    font = normalisedFonts.find((font2) => {
+      return font2.name.toLowerCase() === name.toLowerCase() && weight === Number(font2.weight);
+    });
+  }
+  if (!font) {
+    return createError({
+      statusCode: 404,
+      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
+    });
+  }
+  if (import.meta.dev || import.meta.prerender) {
+    if (font.key && await assets.hasItem(font.key)) {
+      setHeader(e, "Content-Type", `font/${getExtension(font.path)}`);
+      return assets.getItemRaw(font.key);
+    }
+  }
+  const css = 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"
+    }
+  });
+  if (!css) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
+    });
+  }
+  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+  if (ttfResource?.[1])
+    return proxyRequest(e, ttfResource[1], {});
+  const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/);
+  if (woff2Resource?.[1])
+    return sendRedirect(e, woff2Resource[1]);
+  return createError({
+    statusCode: 500,
+    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
+  });
+});

package/dist/runtime/{server → nitro}/routes/__og-image__/image.mjs

@@ -5,7 +5,6 @@ import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
 import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
 import { useOgImageBufferCache } from "../../../cache.mjs";
 import { useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { useSiteConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const ctx = await resolveRendererContext(e);
   if (ctx instanceof H3Error)
@@ -20,13 +19,15 @@ export default defineEventHandler(async (e) => {
     if (options.renderer === "chromium")
       compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
     if (options.component !== "PageScreenshot" && await applyInlineCss(ctx, await fetchIsland(ctx)))
-      compatibilityHints.push("Inlining CSS is only supported in Node based environments.");
+      compatibilityHints.push("Inlining CSS is not supported on Cloudflare.");
     setHeader(e, "Content-Type", "application/json");
     return {
+      siteConfig: {
+        url: e.context.siteConfig.get().url
+      },
       compatibilityHints,
       cacheKey: ctx.key,
       options: ctx.options,
-      siteConfig: useSiteConfig(e),
       ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
     };
   }

package/dist/runtime/nitro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/nitro/utils.mjs

@@ -2,9 +2,8 @@ import { withoutLeadingSlash, withoutTrailingSlash } from "ufo";
 import { hash } from "ohash";
 import { normalizeKey } from "unstorage";
 import { getQuery } from "h3";
-import { useSiteConfig } from "#imports";
 export function resolvePathCacheKey(e, path) {
-  const siteConfig = useSiteConfig(e);
+  const siteConfig = e.context.siteConfig.get();
   const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
   return [
     !basePath || basePath === "/" ? "index" : basePath,

package/dist/runtime/nuxt/plugins/og-image-canonical-urls.server.mjs

@@ -15,11 +15,18 @@ export default defineNuxtPlugin({
         key: "nuxt-og-image:overrides-and-canonical-urls",
         hooks: {
           "tags:resolve": async (ctx2) => {
+            const hasPrimaryPayload = ctx2.tags.some((tag) => tag.tag === "script" && tag.props.id === "nuxt-og-image-options");
             let overrides;
             for (const tag of ctx2.tags) {
               if (tag.tag === "script" && tag.props.id === "nuxt-og-image-overrides") {
-                overrides = separateProps(JSON.parse(tag.innerHTML || "{}"));
-                delete ctx2.tags[ctx2.tags.indexOf(tag)];
+                if (hasPrimaryPayload) {
+                  overrides = separateProps(JSON.parse(tag.innerHTML || "{}"));
+                  delete ctx2.tags[ctx2.tags.indexOf(tag)];
+                } else {
+                  tag.props.id = "nuxt-og-image-options";
+                  tag.innerHTML = JSON.stringify(separateProps(JSON.parse(tag.innerHTML || "{}")));
+                  tag._d = "script:id:nuxt-og-image-options";
+                }
                 break;
               }
             }

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

@@ -1,3 +1,4 @@
 import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types';
-export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: Record<string, any>): void;
+import type { NuxtSSRContext } from '#app';
+export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: NuxtSSRContext): void;
 export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;

package/dist/runtime/nuxt/utils.mjs

@@ -1,14 +1,16 @@
 import { defu } from "defu";
 import { withQuery } from "ufo";
-import { separateProps } from "../utils.mjs";
+import { getExtension, separateProps } from "../utils.mjs";
 import { unref, useServerHead } from "#imports";
 import { componentNames } from "#build/nuxt-og-image/components.mjs";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   const _input = separateProps(defu(input, ssrContext._ogImagePayload));
   let url = src || input.url || resolvedOptions.url;
-  if (input._query && url)
+  if (!url)
+    return;
+  if (input._query && Object.keys(input._query).length && url)
     url = withQuery(url, { _query: input._query });
-  let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
+  let urlExtension = getExtension(url) || resolvedOptions.extension;
   if (urlExtension === "jpg")
     urlExtension = "jpeg";
   const meta = [