nuxt-og-image 2.0.5 → 2.0.7

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

@@ -1,20 +1,20 @@
 import { Buffer } from "node:buffer";
 import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
-import { joinURL, parseURL, withoutTrailingSlash } from "ufo";
-import { prefixStorage } from "unstorage";
+import { joinURL, parseURL, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
 import { hash } from "ohash";
-import { fetchOptions } from "../utils.mjs";
+import { fetchOptionsCached } from "../utils.mjs";
+import { useNitroCache } from "../../cache.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
-import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
+import { useNitroOrigin, useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const { runtimeBrowser, runtimeCacheStorage, version } = useRuntimeConfig()["nuxt-og-image"];
+  const { runtimeBrowser } = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/og.png"))
     return;
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  const options = await fetchOptions(e, basePath);
+  const options = await fetchOptionsCached(e, basePath);
   if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
     return sendRedirect(e, joinURL(useNitroOrigin(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
   const provider = await useProvider(options.provider);
@@ -24,27 +24,25 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  const useCache = runtimeCacheStorage && !process.dev && options.cacheTtl && options.cacheTtl > 0 && options.cache;
-  const baseCacheKey = runtimeCacheStorage === "default" ? `/cache/og-image${version}` : `/og-image/${version}`;
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/images`);
-  const key = [options.path === "/" || !options.path ? "index" : options.path, hash(options)].join(":");
+  const key = [
+    withoutLeadingSlash(options.path === "/" || !options.path ? "index" : options.path).replaceAll("/", "-"),
+    `og-${hash(options)}`
+  ].join(":");
+  const { enabled: cacheEnabled, cachedItem, update } = await useNitroCache(e, "nuxt-og-image", {
+    key,
+    cacheTtl: options.cacheTtl || 0,
+    cache: process.dev && options.cache,
+    headers: true
+  });
   let png;
-  if (useCache && await cache.hasItem(key)) {
-    const { value, expiresAt } = await cache.getItem(key);
-    if (expiresAt > Date.now()) {
-      setHeader(e, "Cache-Control", "public, max-age=31536000");
-      setHeader(e, "Content-Type", "image/png");
-      png = Buffer.from(value, "base64");
-    } else {
-      await cache.removeItem(key);
-    }
-  }
+  if (cachedItem)
+    png = Buffer.from(cachedItem, "base64");
   if (!png) {
     try {
       png = await provider.createPng(options);
-      if (useCache && png) {
+      if (png) {
         const base64png = Buffer.from(png).toString("base64");
-        await cache.setItem(key, { value: base64png, expiresAt: Date.now() + (options.cacheTtl || 0) });
+        await update(base64png);
       }
     } catch (err) {
       throw createError({
@@ -54,7 +52,7 @@ export default defineEventHandler(async (e) => {
     }
   }
   if (png) {
-    if (!process.dev && options.cache) {
+    if (cacheEnabled) {
       setHeader(e, "Cache-Control", "public, max-age=31536000");
     } else {
       setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");

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

@@ -1,13 +1,13 @@
 import { defineEventHandler } from "h3";
 import { parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchOptions } from "../utils.mjs";
+import { fetchOptionsCached } 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 = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
-  const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
+  const options = await fetchOptionsCached(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
   return `

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

@@ -1,28 +1,37 @@
 import { appendHeader } from "h3";
-import { joinURL } from "ufo";
-import { prefixStorage } from "unstorage";
-import { extractOgImageOptions } from "../utils-pure.mjs";
-import { useRuntimeConfig, useStorage } from "#imports";
-const OgImagePrenderNitroPlugin = (nitroApp) => {
+import { joinURL, withoutLeadingSlash } from "ufo";
+import { extractAndNormaliseOgImageOptions } from "../utils-pure.mjs";
+import { useNitroCache } from "../../cache.mjs";
+import { getRouteRules } from "#internal/nitro";
+const OgImagePrenderNitroPlugin = async (nitroApp) => {
   if (!process.env.prerender)
     return;
-  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
-  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/options`);
+  const { defaults } = 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/"))
+    const path = event.node.req.url;
+    if (path.includes(".") || path.startsWith("/__nuxt_island/"))
       return;
-    const options = extractOgImageOptions(ctx.head.join("\n"));
+    const routeRules = getRouteRules(event)?.ogImage || {};
+    if (routeRules === false)
+      return;
+    const options = extractAndNormaliseOgImageOptions(path, ctx.head.join("\n"), routeRules, defaults);
     if (!options)
       return;
-    await cache.setItem(url === "/" || !url ? "index" : url, {
-      value: JSON.stringify(options),
-      expiresAt: Date.now() + 60 * 60 * 1e3
-      // 60 minutes to prerender
+    const key = [
+      withoutLeadingSlash(path === "/" || !path ? "index" : path).replaceAll("/", "-"),
+      "options"
+    ].join(":");
+    const { update } = await useNitroCache(event, "nuxt-og-image", {
+      key,
+      // shouldn't change for the prerender, 5 min cache
+      cacheTtl: 5 * 60 * 1e3,
+      cache: true,
+      headers: false,
+      skipRestore: true
     });
+    await update(options);
     if (options.provider === "satori")
-      appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
+      appendHeader(event, "x-nitro-prerender", joinURL(path, "/__og_image__/og.png"));
   });
 };
 export default OgImagePrenderNitroPlugin;

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

@@ -5,7 +5,7 @@ import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
 import { hash } from "ohash";
 import twemoji from "twemoji";
 import { defu } from "defu";
-import { fetchOptions } from "../utils.mjs";
+import { fetchOptionsCached } from "../utils.mjs";
 import { useNitroOrigin, useRuntimeConfig } from "#imports";
 import loadInlineCSS from "#nuxt-og-image/inline-css";
 export default defineEventHandler(async (e) => {
@@ -22,7 +22,7 @@ export default defineEventHandler(async (e) => {
     } catch {
     }
   }
-  let options = await fetchOptions(e, path);
+  let options = await fetchOptionsCached(e, path);
   if (queryOptions)
     options = defu(queryOptions, options);
   if (options.provider === "browser" && !options.component) {

package/dist/runtime/nitro/routes/options.d.ts

@@ -1,3 +1,3 @@
-import type { RuntimeOgImageOptions } from '../../types';
-declare const _default: import("h3").EventHandler<false | RuntimeOgImageOptions>;
+import type { OgImageOptions } from '../../types';
+declare const _default: import("h3").EventHandler<false | OgImageOptions>;
 export default _default;

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

@@ -1,7 +1,6 @@
 import { createError, defineEventHandler, getQuery } from "h3";
 import { withoutBase } from "ufo";
-import { defu } from "defu";
-import { extractOgImageOptions } from "../utils.mjs";
+import { extractAndNormaliseOgImageOptions } from "../utils.mjs";
 import { getRouteRules } from "#internal/nitro";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -24,19 +23,13 @@ export default defineEventHandler(async (e) => {
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
-  const extractedPayload = extractOgImageOptions(html, routeRules);
-  if (!extractedPayload) {
+  const { defaults } = useRuntimeConfig()["nuxt-og-image"];
+  const payload = extractAndNormaliseOgImageOptions(path, html, routeRules, defaults);
+  if (!payload) {
     throw createError({
       statusCode: 500,
       statusMessage: `The path ${path} is missing the og-image payload.`
     });
   }
-  const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  return defu(
-    extractedPayload,
-    routeRules,
-    // runtime options
-    { path },
-    defaults
-  );
+  return payload;
 });

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

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

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

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

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

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

package/dist/runtime/nitro/utils-pure.mjs

@@ -11,7 +11,7 @@ function decodeObjectHtmlEntities(obj) {
   });
   return obj;
 }
-export function extractOgImageOptions(html, routeRules) {
+export function extractAndNormaliseOgImageOptions(path, html, routeRules, defaults) {
   const htmlPayload = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
   if (!htmlPayload)
     return false;
@@ -28,15 +28,20 @@ export function extractOgImageOptions(html, routeRules) {
     if (process.dev)
       console.warn("Failed to parse #nuxt-og-image-options", e, options);
   }
-  if (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);
+  if (!options)
+    return false;
+  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 false;
+  const decoded = decodeObjectHtmlEntities(options);
+  return defu(
+    decoded,
+    // runtime options
+    { path },
+    defaults
+  );
 }

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

@@ -5,6 +5,7 @@ import type { RuntimeOgImageOptions } from '../types';
 export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
     load(options: RuntimeOgImageOptions): Promise<any>;
 };
+export declare function fetchOptionsCached(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
 export declare function fetchOptions(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;

package/dist/runtime/nitro/utils.mjs

@@ -2,9 +2,11 @@ import { existsSync, promises as fsp } from "node:fs";
 import { Buffer } from "node:buffer";
 import { getQuery } from "h3";
 import { join } from "pathe";
-import { prefixStorage } from "unstorage";
 import sizeOf from "image-size";
-import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
+import { defu } from "defu";
+import { withoutLeadingSlash } from "ufo";
+import { useNitroCache } from "../cache.mjs";
+import { useNitroOrigin, useRuntimeConfig } from "#imports";
 export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
   let wasm;
@@ -36,40 +38,37 @@ export function wasmLoader(asyncModuleLoad, fallback) {
     }
   };
 }
+export async function fetchOptionsCached(e, path) {
+  const key = [
+    withoutLeadingSlash(path === "/" || !path ? "index" : path).replaceAll("/", "-"),
+    "options"
+  ].join(":");
+  const { cachedItem, update } = await useNitroCache(e, "nuxt-og-image", {
+    key,
+    // allow internal requests to be cached
+    cacheTtl: 5 * 1e3,
+    cache: !process.dev,
+    headers: false
+  });
+  if (cachedItem)
+    return cachedItem;
+  const options = await fetchOptions(e, path);
+  await update(options);
+  return options;
+}
 export async function fetchOptions(e, path) {
-  const { runtimeCacheStorage, version } = useRuntimeConfig()["nuxt-og-image"];
-  const baseCacheKey = runtimeCacheStorage === "default" ? `/cache/og-image${version}` : `/og-image/${version}`;
-  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), `${baseCacheKey}/options`) : false;
-  const key = [path === "/" || !path ? "index" : path].join(":");
-  let options;
-  if (!process.dev && cache && await cache.hasItem(key)) {
-    const cachedValue = await cache.getItem(key);
-    if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
-      options = cachedValue.value;
-    else
-      await cache.removeItem(key);
-  }
-  if (!options) {
-    options = await globalThis.$fetch("/api/og-image-options", {
-      query: {
-        path
-      },
-      responseType: "json"
-    });
-    if (cache) {
-      await cache.setItem(key, {
-        value: options,
-        // cache for 1 minute or 5 seconds, avoids subsequent internal fetches
-        expiresAt: Date.now() + (options.cache ? 60 * 1e3 : 5 * 1e3)
-      });
-    }
-  }
-  return {
-    ...options,
+  const options = await globalThis.$fetch("/api/og-image-options", {
+    query: {
+      path
+    },
+    responseType: "json"
+  });
+  return defu(
+    { requestOrigin: useNitroOrigin(e) },
+    options,
     // use query data
-    ...getQuery(e),
-    requestOrigin: useNitroOrigin(e)
-  };
+    getQuery(e)
+  );
 }
 export function base64ToArrayBuffer(base64) {
   const buffer = Buffer.from(base64, "base64");

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.5",
-  "packageManager": "pnpm@8.6.6",
+  "version": "2.0.7",
+  "packageManager": "pnpm@8.6.7",
   "description": "Enlightened OG Image generation for Nuxt.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -43,8 +43,8 @@
     "image-size": "^1.0.2",
     "inline-css": "^4.0.2",
     "launch-editor": "^2.6.0",
-    "nuxt-site-config": "^1.0.3",
-    "nuxt-site-config-kit": "^1.0.3",
+    "nuxt-site-config": "^1.0.5",
+    "nuxt-site-config-kit": "^1.0.5",
     "nypm": "^0.2.2",
     "ofetch": "^1.1.1",
     "ohash": "^1.1.2",