nuxt-og-image 3.0.0-rc.1 → 3.0.0-rc.11

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/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,6 +14,7 @@ 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;

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

@@ -1,13 +1,13 @@
-import { parseURL, 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;
@@ -15,21 +15,23 @@ export async function resolveRendererContext(e) {
   if (!extension) {
     return createError({
       statusCode: 400,
-      statusMessage: `Missing OG Image type.`
+      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
     });
   }
   if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
     return createError({
       statusCode: 400,
-      statusMessage: `Unknown OG Image type ${extension}.`
+      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
     });
   }
-  const basePath = withoutTrailingSlash(
-    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
-  );
   let queryParams = { ...getQuery(e) };
   queryParams.props = JSON.parse(queryParams.props || "{}");
   queryParams = separateProps(queryParams);
+  let basePath = withoutTrailingSlash(
+    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
+  );
+  if (queryParams._query)
+    basePath = withQuery(basePath, JSON.parse(queryParams._query));
   const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
   const key = resolvePathCacheKey(e, basePath);
   let options = queryParams.options;
@@ -44,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,
@@ -61,7 +59,7 @@ export async function resolveRendererContext(e) {
   if (!options) {
     return createError({
       statusCode: 404,
-      statusMessage: "OG Image not found."
+      statusMessage: "[Nuxt OG Image] OG Image not found."
     });
   }
   let renderer;
@@ -76,7 +74,7 @@ export async function resolveRendererContext(e) {
   if (!renderer || renderer.__unenv__) {
     throw createError({
       statusCode: 400,
-      statusMessage: `Renderer ${options.renderer} is missing.`
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
     });
   }
   const ctx = {

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/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/nitro/utils.mjs

@@ -2,12 +2,11 @@ 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 ? "index" : basePath,
+    !basePath || basePath === "/" ? "index" : basePath,
     hash([
       basePath,
       siteConfig.url,

package/dist/runtime/nuxt/utils.mjs

@@ -1,17 +1,24 @@
 import { defu } from "defu";
-import { separateProps } from "../utils.mjs";
+import { withQuery } from "ufo";
+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));
-  const url = src || input.url || resolvedOptions.url;
-  let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
+  let url = src || input.url || resolvedOptions.url;
+  if (!url)
+    return;
+  if (input._query && Object.keys(input._query).length && url)
+    url = withQuery(url, { _query: input._query });
+  let urlExtension = getExtension(url) || resolvedOptions.extension;
   if (urlExtension === "jpg")
     urlExtension = "jpeg";
   const meta = [
     { property: "og:image", content: url },
     { property: "og:image:type", content: `image/${urlExtension}` },
     { name: "twitter:card", content: "summary_large_image" },
+    // we don't need this but avoids issue when using useSeoMeta({ twitterImage })
+    { name: "twitter:image", content: url },
     { name: "twitter:image:src", content: url }
   ];
   if (resolvedOptions.width) {

package/dist/runtime/server/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/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/server/routes/__og-image__/font-[name]-[weight].[extension].mjs

@@ -1,10 +1,36 @@
-import { createError, defineEventHandler, proxyRequest, sendRedirect } from "h3";
+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)
+  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.
@@ -14,7 +40,7 @@ export default defineEventHandler(async (e) => {
   if (!css) {
     return createError({
       statusCode: 500,
-      statusMessage: `Invalid Google Font ${name}:${weight}`
+      statusMessage: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
     });
   }
   const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
@@ -25,6 +51,6 @@ export default defineEventHandler(async (e) => {
     return sendRedirect(e, woff2Resource[1]);
   return createError({
     statusCode: 500,
-    statusMessage: `Malformed Google Font CSS ${css}`
+    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
   });
 });

package/dist/runtime/server/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)
@@ -23,10 +22,12 @@ export default defineEventHandler(async (e) => {
       compatibilityHints.push("Inlining CSS is only supported in Node based environments.");
     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
     };
   }
@@ -43,7 +44,7 @@ export default defineEventHandler(async (e) => {
       if (ctx.renderer.name !== "satori") {
         return createError({
           statusCode: 400,
-          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
         });
       }
       setHeader(e, "Content-Type", `image/svg+xml`);
@@ -54,7 +55,7 @@ export default defineEventHandler(async (e) => {
       if (!renderer.supportedFormats.includes(extension)) {
         return createError({
           statusCode: 400,
-          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
         });
       }
       setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
@@ -62,7 +63,7 @@ export default defineEventHandler(async (e) => {
     default:
       return createError({
         statusCode: 400,
-        statusMessage: `Invalid request for og.${extension}.`
+        statusMessage: `[Nuxt OG Image] Invalid request for og.${extension}.`
       });
   }
   const cacheApi = await useOgImageBufferCache(ctx, {
@@ -71,6 +72,8 @@ export default defineEventHandler(async (e) => {
   });
   if (typeof cacheApi === "undefined")
     return;
+  if (cacheApi instanceof H3Error)
+    return cacheApi;
   let image = cacheApi.cachedItem;
   if (!image) {
     image = await renderer.createImage(ctx);

package/dist/runtime/types.d.ts

@@ -106,9 +106,14 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     sharp?: SharpOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
+    /**
+     * @internal
+     */
+    _query?: Record<string, any>;
 }
 export interface FontConfig {
     name: string;
+    style?: string;
     weight?: string | number;
     path?: string;
     key?: string;

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

@@ -4,3 +4,5 @@ export declare function separateProps(options: OgImageOptions | undefined, ignor
     props: Record<string, any>;
 };
 export declare function normaliseFontInput(fonts: InputFontConfig[]): ResolvedFontConfig[];
+export declare function withoutQuery(path: string): string;
+export declare function getExtension(path: string): string;

package/dist/runtime/utils.pure.mjs

@@ -17,6 +17,7 @@ function filterIsOgImageOption(key) {
     "component",
     "renderer",
     "emojis",
+    "_query",
     "satori",
     "resvg",
     "sharp",
@@ -48,7 +49,7 @@ export function normaliseFontInput(fonts) {
       return {
         cacheKey: f,
         name,
-        weight: weight || "400",
+        weight: weight || 400,
         style: "normal",
         path: void 0
       };
@@ -61,3 +62,11 @@ export function normaliseFontInput(fonts) {
     };
   });
 }
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function getExtension(path) {
+  path = withoutQuery(path);
+  const lastSegment = path.split("/").pop() || path;
+  return lastSegment.split(".").pop() || lastSegment;
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-rc.1",
-  "packageManager": "pnpm@8.12.0",
+  "version": "3.0.0-rc.11",
+  "packageManager": "pnpm@8.12.1",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -33,8 +33,8 @@
     "virtual.d.ts"
   ],
   "dependencies": {
-    "@iconify-json/noto": "^1.1.17",
-    "@nuxt/devtools-kit": "^1.0.5",
+    "@iconify-json/noto": "^1.1.18",
+    "@nuxt/devtools-kit": "^1.0.6",
     "@nuxt/kit": "^3.8.2",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
@@ -42,13 +42,13 @@
     "@unocss/preset-wind": "^0.58.0",
     "@vueuse/core": "^10.7.0",
     "chrome-launcher": "^1.1.0",
-    "css-inline": "^0.11.0",
+    "css-inline": "^0.11.2",
     "defu": "^6.1.3",
     "execa": "^8.0.1",
     "floating-vue": "2.0.0-beta.24",
     "image-size": "^1.0.2",
-    "nuxt-site-config": "^1.6.6",
-    "nuxt-site-config-kit": "^1.6.6",
+    "nuxt-site-config": "^2.1.0",
+    "nuxt-site-config-kit": "^2.1.0",
     "nypm": "^0.3.3",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
@@ -64,25 +64,26 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.4.3",
+    "@antfu/eslint-config": "2.4.6",
+    "@img/sharp-linux-x64": "0.33.1",
     "@nuxt/content": "^2.9.0",
-    "@nuxt/devtools": "1.0.5",
+    "@nuxt/devtools": "1.0.6",
     "@nuxt/module-builder": "^0.5.4",
     "@nuxt/test-utils": "3.8.1",
-    "@nuxt/ui": "^2.11.0",
+    "@nuxt/ui": "^2.11.1",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/i18n": "8.0.0-rc.8",
+    "@nuxtjs/i18n": "8.0.0-rc.11",
     "@nuxtjs/tailwindcss": "^6.10.1",
     "@unocss/nuxt": "^0.58.0",
-    "bumpp": "^9.2.0",
-    "eslint": "8.55.0",
-    "jest-image-snapshot": "^6.3.0",
+    "bumpp": "^9.2.1",
+    "eslint": "8.56.0",
+    "jest-image-snapshot": "^6.4.0",
     "nuxt": "^3.8.2",
     "nuxt-icon": "0.6.7",
     "playwright": "^1.40.1",
     "sass": "^1.69.5",
-    "sharp": "^0.33.0",
-    "vitest": "^1.0.2"
+    "sharp": "^0.33.1",
+    "vitest": "^1.0.4"
   },
   "build": {
     "externals": [
@@ -102,7 +103,7 @@
     "dev": "nuxi dev .playground",
     "dev:build": "nuxi build .playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxi prepare .playground",
-    "release": "bumpp package.json --commit --push --tag",
+    "release": "bumpp && pnpm -r publish --no-git-checks",
     "test": "vitest"
   }
 }

package/dist/client/_nuxt/builds/meta/c430c582-423d-48d2-8592-39b7bfd61658.json

@@ -1 +0,0 @@
-{"id":"c430c582-423d-48d2-8592-39b7bfd61658","timestamp":1702109741421,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}