nuxt-og-image 3.0.0-beta.3 → 3.0.0-beta.31

package/dist/module.mjs

@@ -1,15 +1,17 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { useNuxt, createResolver, addTemplate, addServerPlugin, defineNuxtModule, useLogger, hasNuxtModule, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
+import { loadNuxtModuleInstance, useNuxt, createResolver, addTemplate, resolvePath, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit';
-import { provider, env } from 'std-env';
+import { provider, env, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
-import { relative } from 'pathe';
-import 'nypm';
+import { relative, dirname } from 'pathe';
 import { defu } from 'defu';
+import 'nypm';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
+import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
 
-const version = "3.0.0-beta.3";
+const version = "3.0.0-beta.31";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -32,18 +34,19 @@ const NodeRuntime = {
     "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "import"
+  }
 };
 const cloudflare = {
   bindings: {
     "chromium": false,
-    "css-inline": "node",
+    "css-inline": false,
     "resvg": "wasm",
     "satori": "node",
     "sharp": false
   },
-  wasmStrategy: "import"
+  wasm: {
+    esmImport: true
+  }
 };
 const awsLambda = {
   bindings: {
@@ -52,8 +55,7 @@ const awsLambda = {
     "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "inline"
+  }
 };
 const RuntimeCompatibility = {
   "nitro-dev": NodeRuntime,
@@ -62,45 +64,43 @@ const RuntimeCompatibility = {
   "stackblitz": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline"
+      "css-inline": false,
+      "resvg": "stackblitz",
+      "satori": "stackblitz",
+      "sharp": false
+    }
   },
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
   "netlify-edge": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
+      "css-inline": false,
       "resvg": "wasm",
       "satori": "node",
-      "sharp": "node"
+      "sharp": false
     },
-    wasmStrategy: "inline"
-  },
-  "vercel": {
-    bindings: {
-      "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline"
+    wasm: {
+      rollup: {
+        targetEnv: "auto-inline",
+        sync: ["@resvg/resvg-wasm/index_bg.wasm"]
+      }
+    }
   },
+  "firebase": awsLambda,
+  "vercel": awsLambda,
   "vercel-edge": {
     bindings: {
       "chromium": false,
-      "css-inline": "node",
+      "css-inline": false,
       "resvg": "wasm",
       "satori": "node",
-      "sharp": "node"
+      "sharp": false
     },
-    wasmStrategy: "inline",
-    wasmImportQuery: "?module"
+    wasm: {
+      // lowers workers kb size
+      esmImport: true
+    }
   },
   "cloudflare-pages": cloudflare,
   "cloudflare": cloudflare
@@ -141,15 +141,37 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
     applyBinding("satori"),
     applyBinding("resvg"),
     applyBinding("sharp"),
+    applyBinding("css-inline"),
     nitroConfig.alias || {}
   );
-  if (target.includes("cloudflare")) {
-    nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
-    nitroConfig.rollupConfig.output.inlineDynamicImports = true;
+  if (Object.values(compatibility.bindings).includes("wasm")) {
+    nitroConfig.experimental = nitroConfig.experimental || {};
+    nitroConfig.experimental.wasm = true;
   }
+  nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
+  nitroConfig.wasm = defu(compatibility.wasm, nitroConfig.wasm);
   return compatibility;
 }
 
+async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
+  const moduleMeta = (typeof module === "string" ? { name: module } : await module.getMeta?.()) || {};
+  const { nuxtModule } = await loadNuxtModuleInstance(module, nuxt);
+  let moduleEntry;
+  for (const m of nuxt.options.modules) {
+    if (Array.isArray(m) && m.length >= 2) {
+      const _module = m[0];
+      const _moduleEntryName = typeof _module === "string" ? _module : (await _module.getMeta?.())?.name || "";
+      if (_moduleEntryName === moduleMeta.name)
+        moduleEntry = m;
+    }
+  }
+  let inlineOptions = {};
+  if (moduleEntry)
+    inlineOptions = moduleEntry[1];
+  if (nuxtModule.getOptions)
+    return nuxtModule.getOptions(inlineOptions, nuxt);
+  return inlineOptions;
+}
 function extendTypes(module, template) {
   const nuxt = useNuxt();
   const { resolve } = createResolver(import.meta.url);
@@ -201,9 +223,15 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
         rpc.broadcast.refreshRouteData(path).catch(() => {
         });
       }
-      if (options.componentDirs.some((dir) => path.includes(dir)))
-        rpc.broadcast.refreshGlobalData().catch(() => {
-        });
+      if (options.componentDirs.some((dir) => path.includes(dir))) {
+        if (e === "change") {
+          rpc.broadcast.refresh().catch(() => {
+          });
+        } else {
+          rpc.broadcast.refreshGlobalData().catch(() => {
+          });
+        }
+      }
     });
   });
   nuxt.hook("devtools:customTabs", (tabs) => {
@@ -226,8 +254,8 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
 function setupDevHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
     nitroConfig.alias["#nuxt-og-image/renderers/satori"] = options.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = options.runtimeBrowser ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
-    applyNitroPresetCompatibility(nitroConfig, { resolve });
+    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = options.runtimeChromium ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
+    applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: options.runtimeCompatibility });
   });
 }
 
@@ -251,12 +279,13 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
 }
 
 function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
-  addServerPlugin(resolve("./runtime/nitro/plugins/prerender.ts"));
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
       nitroConfig.alias["#nuxt-og-image/renderers/satori"] = resolve("./runtime/core/renderers/satori");
       nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = resolve("./runtime/core/renderers/chromium");
       applyNitroPresetCompatibility(nitroConfig, { resolve });
+      nitroConfig.wasm = nitroConfig.wasm || {};
+      nitroConfig.wasm.esmImport = false;
     });
   });
 }
@@ -267,20 +296,41 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
     nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
     nitroConfig.alias["#nuxt-og-image/renderers/satori"] = config.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = config.runtimeBrowser ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
+    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = config.runtimeChromium ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
     applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: config.runtimeCompatibility });
     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.alias.queue = "unenv/runtime/mock/proxy-cjs";
   });
+  nuxt.hooks.hook("nitro:init", async (nitro) => {
+    nitro.hooks.hook("compiled", async (_nitro) => {
+      const target = resolveNitroPreset(_nitro.options);
+      const compatibility = getPresetNitroPresetCompatibility(target);
+      if (compatibility.wasm?.esmImport !== true)
+        return;
+      const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+      let serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      if (target === "cloudflare-pages")
+        serverEntry = resolve(dirname(serverEntry), "./chunks/wasm.mjs");
+      const contents = await readFile(serverEntry, "utf-8");
+      const resvgHash = sha1(await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm")));
+      const yogaHash = sha1(await readFile(await resolvePath("yoga-wasm-web/dist/yoga.wasm")));
+      const postfix = target === "vercel-edge" ? "?module" : "";
+      const path = target === "cloudflare-pages" ? `../wasm/` : `./wasm/`;
+      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
+    });
+  });
+}
+function sha1(source) {
+  return createHash("sha1").update(source).digest("hex").slice(0, 16);
 }
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.7.0",
+      nuxt: "^3.8.2",
       bridge: false
     },
     configKey: "ogImage"
@@ -289,21 +339,20 @@ const module = defineNuxtModule({
     return {
       enabled: true,
       defaults: {
+        emojis: "noto",
         renderer: "satori",
-        component: "Fallback",
+        component: "NuxtSeo",
         width: 1200,
         height: 600,
-        cache: true,
         // default is to cache the image for 1 day (24 hours)
-        cacheTtl: 24 * 60 * 60 * 1e3
+        cacheMaxAgeSeconds: 60 * 60 * 24 * 3
       },
       componentDirs: ["OgImage", "OgImageTemplate"],
-      runtimeSatori: true,
-      runtimeBrowser: nuxt.options.dev,
       fonts: [],
       runtimeCacheStorage: true,
-      playground: env.NODE_ENV === "development" || nuxt.options.dev,
-      debug: false
+      runtimeSatori: true,
+      runtimeChromium: nuxt.options.dev,
+      debug: isDevelopment
     };
   },
   async setup(config, nuxt) {
@@ -320,14 +369,20 @@ const module = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const compatibility = getPresetNitroPresetCompatibility(preset);
-    config.defaults.extension = "jpg";
-    if (!compatibility.bindings.sharp)
+    const userConfiguredExtension = config.defaults.extension;
+    config.defaults.extension = userConfiguredExtension || "jpg";
+    if (!compatibility.bindings.sharp && config.defaults.renderer !== "chromium") {
+      if (userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension))
+        logger.warn("The sharp runtime is not available for this target, disabling sharp and using png instead.");
       config.defaults.extension = "png";
+    }
+    if (config.runtimeChromium && !compatibility.bindings.chromium) {
+      logger.warn("The Chromium runtime is not available for this target, disabling runtimeChromium.");
+      config.runtimeChromium = false;
+    }
     await installNuxtSiteConfig();
-    if (hasNuxtModule("@nuxt/content")) {
+    if (hasNuxtModule("@nuxt/content"))
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
-      addPlugin(resolve("./runtime/nuxt/plugins/nuxt-content-canonical-urls"));
-    }
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
     nuxt.options.experimental.componentIslands = true;
@@ -346,52 +401,34 @@ const module = defineNuxtModule({
     addServerHandler({
       lazy: true,
       route: "/__og-image__/image/**",
-      handler: resolve("./runtime/server/routes/__og-image__/image-[path]-og.[extension]")
+      handler: resolve("./runtime/server/routes/__og-image__/image")
     });
     nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
-    [
-      // deprecated
-      "Dynamic",
-      "Static",
-      // new
-      "index",
-      "Cached",
-      "Component",
-      "WithoutCache",
-      "Screenshot"
-    ].forEach((name) => {
-      name = name === "index" ? "defineOgImage" : `defineOgImage${name}`;
+    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
       addImports({
         name,
-        from: resolve("./runtime/composables/defineOgImage")
+        from: resolve(`./runtime/composables/${name}`)
       });
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
     });
     await addComponentsDir({
       path: resolve("./runtime/components/Templates/Community"),
-      island: true
-    });
-    await addComponentsDir({
-      path: resolve("./runtime/components/Templates/Official"),
-      island: true
+      island: true,
+      watch: true
     });
     [
-      // deprecated
-      "Static",
-      "Dynamic",
       // new
-      "index",
-      "Cached",
-      "WithoutCache",
-      "Screenshot"
+      "OgImage",
+      "OgImageScreenshot"
     ].forEach((name) => {
       addComponent({
-        global: hasNuxtModule("@nuxt/content"),
-        name: name === "index" ? "OgImage" : `OgImage${name}`,
+        name,
+        global: true,
         filePath: resolve(`./runtime/components/OgImage/${name}`)
       });
     });
-    addPlugin(resolve("./runtime/nuxt/plugins/route-rule-og-image.server"));
+    addPlugin({ mode: "server", src: resolve("./runtime/nuxt/plugins/route-rule-og-image.server") });
+    addPlugin({ mode: "server", src: resolve("./runtime/nuxt/plugins/og-image-canonical-urls.server") });
     const ogImageComponentCtx = { components: [] };
     nuxt.hook("components:extend", (components) => {
       ogImageComponentCtx.components = [];
@@ -409,8 +446,6 @@ const module = defineNuxtModule({
           let category = "app";
           if (component.filePath.includes(resolve("./runtime/components/Templates/Community")))
             category = "community";
-          else if (component.filePath.includes(resolve("./runtime/components/Templates/Official")))
-            category = "official";
           const componentFile = fs.readFileSync(component.filePath, "utf-8");
           const credits = componentFile.split("\n").find((line) => line.startsWith(" * @credits"))?.replace("* @credits", "").trim();
           ogImageComponentCtx.components.push({
@@ -437,6 +472,16 @@ const module = defineNuxtModule({
     nuxt.options.nitro.virtual["#nuxt-og-image/component-names.mjs"] = () => {
       return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
     };
+    let unoCssConfig = { theme: {} };
+    nuxt.hook("tailwindcss:config", (tailwindConfig) => {
+      unoCssConfig = defu(tailwindConfig.theme.extend, { ...tailwindConfig.theme || {}, extend: void 0 });
+    });
+    nuxt.hook("unocss:config", (_unoCssConfig) => {
+      unoCssConfig = { ..._unoCssConfig.theme };
+    });
+    nuxt.options.nitro.virtual["#nuxt-og-image/unocss-config.mjs"] = () => {
+      return `export const theme = ${JSON.stringify(unoCssConfig)}`;
+    };
     extendTypes("nuxt-og-image", ({ typesPath }) => {
       const componentImports = ogImageComponentCtx.components.map((component) => {
         const relativeComponentPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
@@ -445,12 +490,13 @@ const module = defineNuxtModule({
       return `
 declare module 'nitropack' {
   interface NitroRouteRules {
-    ogImage?: false | import('${typesPath}').OgImageOptions
+    ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
   interface NitroRouteConfig {
-    ogImage?: false | import('${typesPath}').OgImageOptions
+    ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
 }
+
 declare module '#nuxt-og-image/components' {
   export interface OgImageComponents {
 ${componentImports}
@@ -458,6 +504,11 @@ ${componentImports}
 }
 `;
     });
+    const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
+    const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;
+    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image@${version}`;
+    if (!cacheEnabled)
+      baseCacheKey = false;
     nuxt.hooks.hook("modules:done", async () => {
       nuxt.hooks.callHook("og-image:config", config);
       const normalisedFonts = config.fonts.map((f) => {
@@ -478,6 +529,9 @@ ${componentImports}
           nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
         });
       }
+      let colorPreference = hasNuxtModule("@nuxtjs/color-mode") ? (await getNuxtModuleOptions("@nuxtjs/color-mode")).preference : "light";
+      if (!colorPreference || !["dark", "light"].includes(colorPreference))
+        colorPreference = "light";
       nuxt.options.runtimeConfig["nuxt-og-image"] = {
         version,
         // binding options
@@ -485,18 +539,17 @@ ${componentImports}
         resvgOptions: config.resvgOptions || {},
         sharpOptions: config.sharpOptions || {},
         runtimeSatori: config.runtimeSatori,
-        runtimeBrowser: config.runtimeBrowser,
-        // @ts-expect-error runtime type
+        runtimeChromium: config.runtimeChromium,
         defaults: config.defaults,
+        debug: config.debug,
         // avoid adding credentials
-        runtimeCacheStorage: typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver,
+        baseCacheKey,
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
-        hasNuxtIcon: hasNuxtModule("nuxt-icon")
+        hasNuxtIcon: hasNuxtModule("nuxt-icon"),
+        colorPreference
       };
     });
-    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
-    nuxt.options.nitro.experimental.wasm = true;
     if (nuxt.options.dev) {
       setupDevHandler(config, resolve);
       setupDevToolsUI(config, resolve);
@@ -505,8 +558,9 @@ ${componentImports}
     } else if (nuxt.options.build) {
       await setupBuildHandler(config, resolve);
     }
-    if (nuxt.options.nitro.prerender?.routes || nuxt.options._generate)
-      setupPrerenderHandler(config, resolve);
+    if (nuxt.options.nitro.prerender?.routes?.length || nuxt.options.nitro.prerender?.crawlLinks || nuxt.options._generate)
+      addServerPlugin(resolve("./runtime/nitro/plugins/prerender.ts"));
+    setupPrerenderHandler(config, resolve);
   }
 });
 

package/dist/runtime/cache.d.ts

@@ -1,12 +1,9 @@
-import type { H3Event } from 'h3';
-export declare function useNitroCache<T>(e: H3Event, options: {
-    key: string;
-    cacheTtl: number;
-    cache: boolean;
-    headers: boolean;
-    skipRestore?: boolean;
-}): Promise<{
-    cachedItem: false | T;
+import type { H3EventOgImageRender } from './types';
+export declare function useOgImageBufferCache(ctx: H3EventOgImageRender, options: {
+    baseCacheKey: string | false;
+    cacheMaxAgeSeconds?: number;
+}): Promise<void | {
+    cachedItem: false | BufferSource;
     enabled: boolean;
-    update: (item: T) => Promise<void>;
+    update: (image: BufferSource) => Promise<void>;
 }>;

package/dist/runtime/cache.mjs

@@ -1,45 +1,58 @@
 import { prefixStorage } from "unstorage";
-import { getQuery, setHeader } from "h3";
-import { useRuntimeConfig, useStorage } from "#imports";
-export async function useNitroCache(e, options) {
-  const module = "nuxt-og-image";
-  const { runtimeCacheStorage, version } = useRuntimeConfig()[module];
-  const enabled = options.cache && runtimeCacheStorage && options.cacheTtl && options.cacheTtl > 0;
-  const baseCacheKey = runtimeCacheStorage === "default" ? `/cache/${module}@${version}` : `/${module}@${version}`;
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/`);
-  const key = options.key;
-  let xCacheHeader = "DISABLED";
-  let xCacheExpires = 0;
-  const newExpires = Date.now() + (options.cacheTtl || 0);
-  const purge = typeof getQuery(e).purge !== "undefined";
+import { getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
+import { withTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { useStorage } from "#imports";
+export async function useOgImageBufferCache(ctx, options) {
+  const maxAge = Number(options.cacheMaxAgeSeconds);
+  const enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
+  const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
+  const key = ctx.key;
   let cachedItem = false;
-  if (!options.skipRestore && enabled && await cache.hasItem(key).catch(() => false)) {
-    const { value, expiresAt } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
-    if (purge) {
-      xCacheHeader = "PURGE";
-      xCacheExpires = newExpires;
+  if (enabled && await cache.hasItem(key).catch(() => false)) {
+    const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
+    if (typeof getQuery(ctx.e).purge !== "undefined") {
       await cache.removeItem(key).catch(() => {
       });
     } else if (expiresAt > Date.now()) {
-      xCacheHeader = "HIT";
-      xCacheExpires = newExpires;
-      cachedItem = value;
+      cachedItem = Buffer.from(value, "base64");
+      if (handleCacheHeaders(ctx.e, {
+        modifiedTime: new Date(headers["last-modified"]),
+        etag: headers.etag,
+        maxAge
+      }))
+        return;
+      setHeaders(ctx.e, headers);
     } else {
-      xCacheHeader = "MISS";
-      xCacheExpires = expiresAt;
       await cache.removeItem(key).catch(() => {
       });
     }
   }
-  if (options.headers) {
-    setHeader(e, `x-${module}-cache`, xCacheHeader);
-    setHeader(e, `x-${module}-expires`, xCacheExpires.toString());
+  if (!enabled) {
+    setHeader(ctx.e, "Cache-Control", "no-cache, no-store, must-revalidate");
+    setHeader(ctx.e, "Pragma", "no-cache");
+    setHeader(ctx.e, "Expires", "0");
   }
   return {
     enabled,
     cachedItem,
     async update(item) {
-      enabled && await cache.setItem(key, { value: item, expiresAt: Date.now() + (options.cacheTtl || 0) });
+      if (!enabled)
+        return;
+      const value = Buffer.from(item).toString("base64");
+      const headers = {
+        // avoid multi-tenancy cache issues
+        "Vary": "accept-encoding, host",
+        "etag": `W/"${hash(value)}"`,
+        "last-modified": (/* @__PURE__ */ new Date()).toUTCString(),
+        "cache-control": `public, s-maxage=${maxAge}, stale-while-revalidate`
+      };
+      setHeaders(ctx.e, headers);
+      await cache.setItem(key, {
+        value,
+        headers,
+        expiresAt: Date.now() + maxAge * 1e3
+      });
     }
   };
 }

package/dist/runtime/components/OgImage/OgImage.d.ts

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"NuxtSeo">>, {
+    props?: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/OgImage/{index.mjs → OgImage.mjs}

@@ -4,7 +4,7 @@ export default defineComponent({
   name: "OgImage",
   async setup(_, { attrs }) {
     if (import.meta.server)
-      await defineOgImage(attrs);
+      defineOgImage(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImage/OgImageScreenshot.d.ts

@@ -0,0 +1,5 @@
+import type { OgImagePageScreenshotOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImagePageScreenshotOptions>, {
+    props?: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/OgImage/{Screenshot.mjs → OgImageScreenshot.mjs}

@@ -4,7 +4,7 @@ export default defineComponent({
   name: "OgImageScreenshot",
   async setup(_, { attrs }) {
     if (import.meta.server)
-      await defineOgImageScreenshot(attrs);
+      defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/Templates/{Official → Community}/BrandedLogo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// inherited attrs can mess up the satori parser
-defineOptions({ inheritAttrs: false })
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
 
 withDefaults(defineProps<{
   title?: string

package/dist/runtime/components/Templates/Community/Nuxt.vue

@@ -3,14 +3,15 @@
  * @credits NuxtLabs <https://nuxtlabs.com/>
  * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
  */
+import { computed } from 'vue'
 
-defineOptions({ inheritAttrs: false })
-
-withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
   title: 'title',
   description: 'description',
   headline: 'headline',
 })
+
+const title = computed(() => props.title.slice(0, 60))
 </script>
 
 <template>
@@ -43,11 +44,11 @@ withDefaults(defineProps<{ title?: string, description?: string, headline?: stri
       </defs>
     </svg>
 
-    <div class="w-[700px] pl-[100px]">
+    <div class="w-[600px] pl-[100px]">
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
         <span>{{ title }}</span>
       </h1>
       <p class="text-[32px] text-[#E4E4E7] leading-tight">