nuxt-og-image 3.0.0-beta.10 → 3.0.0-beta.14

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { useNuxt, createResolver, addTemplate, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
+import { useNuxt, createResolver, addTemplate, resolvePath, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addPlugin, addServerHandler, addImports, addComponentsDir, addComponent } from '@nuxt/kit';
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit';
 import { provider, env } from 'std-env';
 import { hash } from 'ohash';
@@ -8,8 +8,10 @@ import { relative } from 'pathe';
 import 'nypm';
 import { defu } from 'defu';
 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.10";
+const version = "3.0.0-beta.14";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -32,8 +34,7 @@ const NodeRuntime = {
     "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "import"
+  }
 };
 const cloudflare = {
   bindings: {
@@ -42,8 +43,8 @@ const cloudflare = {
     "resvg": "wasm",
     "satori": "node",
     "sharp": false
-  },
-  wasmStrategy: "import"
+  }
+  // nitro configures wasm
 };
 const awsLambda = {
   bindings: {
@@ -52,8 +53,7 @@ const awsLambda = {
     "resvg": "node",
     "satori": "node",
     "sharp": "node"
-  },
-  wasmStrategy: "inline"
+  }
 };
 const RuntimeCompatibility = {
   "nitro-dev": NodeRuntime,
@@ -66,8 +66,7 @@ const RuntimeCompatibility = {
       "resvg": "wasm",
       "satori": "node",
       "sharp": "node"
-    },
-    wasmStrategy: "inline"
+    }
   },
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
@@ -79,19 +78,25 @@ const RuntimeCompatibility = {
       "satori": "node",
       "sharp": false
     },
-    wasmStrategy: "inline"
+    wasm: {
+      rollup: {
+        targetEnv: "auto-inline"
+      }
+    }
   },
   "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
@@ -132,18 +137,15 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
     applyBinding("satori"),
     applyBinding("resvg"),
     applyBinding("sharp"),
+    applyBinding("css-inline"),
     nitroConfig.alias || {}
   );
-  nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
-  if (target === "netlify-edge") {
-    nitroConfig.wasm = nitroConfig.wasm || {};
-    nitroConfig.wasm.rollup = nitroConfig.wasm.rollup || {};
-    nitroConfig.wasm.rollup.targetEnv = "auto-inline";
-  }
-  if (target.includes("edge") || target.includes("cloudflare")) {
+  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;
 }
 
@@ -272,13 +274,27 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
     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 configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
+      const serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
+      const contents = await readFile(serverEntry, "utf-8");
+      const wasmSource = await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm"));
+      const wasmHash = sha1(wasmSource);
+      const postfix = _nitro.options.preset === "vercel-edge" ? "?module" : "";
+      await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"./wasm/index_bg-${wasmHash}.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"
@@ -287,13 +303,13 @@ const module = defineNuxtModule({
     return {
       enabled: true,
       defaults: {
+        emojis: "noto",
         renderer: "satori",
         component: "Fallback",
         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,
@@ -318,9 +334,17 @@ 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.runtimeBrowser && !compatibility.bindings.chromium) {
+      logger.warn("The Chromium runtime is not available for this target, disabling runtimeBrowser.");
+      config.runtimeBrowser = false;
+    }
     await installNuxtSiteConfig();
     if (hasNuxtModule("@nuxt/content")) {
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
@@ -344,24 +368,13 @@ 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);
     });
@@ -374,18 +387,12 @@ const module = defineNuxtModule({
       island: 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,
         filePath: resolve(`./runtime/components/OgImage/${name}`)
       });
     });
@@ -443,12 +450,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}
@@ -456,6 +464,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) => {
@@ -486,8 +499,10 @@ ${componentImports}
         runtimeBrowser: config.runtimeBrowser,
         // @ts-expect-error runtime type
         defaults: config.defaults,
+        debug: config.debug,
         // avoid adding credentials
-        runtimeCacheStorage: typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver,
+        // @ts-expect-error runtime type
+        baseCacheKey,
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
         hasNuxtIcon: hasNuxtModule("nuxt-icon")

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 './core/utils/resolveRendererContext';
+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,57 @@
 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 = maxAge > 0;
+  const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
+  const key = ctx.key;
+  const purge = typeof getQuery(ctx.e).purge !== "undefined";
   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 (enabled && await cache.hasItem(key).catch(() => false)) {
+    const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
     if (purge) {
-      xCacheHeader = "PURGE";
-      xCacheExpires = newExpires;
       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) });
+      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);
+      enabled && 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<"Fallback">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"Fallback">>, {
+    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/Screenshot.d.ts

@@ -1,6 +1,5 @@
-import type { OgImageScreenshotOptions } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotOptions>>, {
-    [x: string]: any;
-    [x: number]: any;
+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

@@ -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/SimpleBlog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { parseURL } from 'ufo'
+import { computed, useSiteConfig } from '#imports'
 
 // inherited attrs can mess up the satori parser
 defineOptions({ inheritAttrs: false })

package/dist/runtime/composables/defineOgImage.d.ts

@@ -1,23 +1,2 @@
-import type { AllowedComponentProps, Component, ComponentCustomProps, VNodeProps } from '@vue/runtime-core';
-import type { OgImageOptions, OgImageScreenshotOptions } from '../types';
-import type { OgImageComponents } from '#nuxt-og-image/components';
-export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void;
-/**
- * @param options
- * @deprecated Use `defineOgImage` or `defineOgImageCached` instead
- */
-export declare function defineOgImageStatic(options?: OgImageOptions): void;
-export declare function defineOgImageCached(options?: OgImageOptions): void;
-export declare function defineOgImageWithoutCache(options?: OgImageOptions): void;
-/**
- * @param options
- * @deprecated Use `defineOgImageWithoutCache` instead
- */
-export declare function defineOgImageDynamic(options?: OgImageOptions): void;
-type OgImagePrebuilt = {
-    url: string;
-} & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
-type ExtractComponentProps<T extends Component> = T extends new (...args: any) => any ? Omit<InstanceType<T>['$props'], keyof ComponentCustomProps | keyof VNodeProps | keyof AllowedComponentProps> : never;
-export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props: ExtractComponentProps<OgImageComponents[T]>, options?: OgImageOptions): void;
-export declare function defineOgImage(_options?: OgImagePrebuilt | OgImageOptions): void;
-export {};
+import type { DefineOgImageInput } from '../types';
+export declare function defineOgImage(_options?: DefineOgImageInput): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,124 +1,41 @@
 import { defu } from "defu";
 import { appendHeader } from "h3";
-import { getOgImagePath } from "../utilts.mjs";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { withoutBase } from "ufo";
+import { getOgImagePath } from "../utils.mjs";
 import { normaliseOptions } from "../core/options/normalise.mjs";
-import { useRouter, useRuntimeConfig, useServerHead, withSiteUrl } from "#imports";
-export function defineOgImageScreenshot(options = {}) {
-  const router = useRouter();
-  const route = router.currentRoute.value?.path || "";
-  return defineOgImage({
-    alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
-    renderer: "chromium",
-    extension: "jpeg",
-    component: "PageScreenshot",
-    // this is an alias
-    cache: true,
-    ...options
+import { createOgImageMeta } from "../nuxt/utils.mjs";
+import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
+export function defineOgImage(_options = {}) {
+  if (!import.meta.server)
+    return;
+  const nuxtApp = useNuxtApp();
+  const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+  const basePath = useRouter().currentRoute.value?.path;
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
+  );
+  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+    withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
+  ).reverse()).ogImage;
+  if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
+    ogImageInstances.forEach((e) => {
+      e.dispose();
+    });
+    nuxtApp.ssrContext._ogImageInstances = void 0;
+    return;
+  }
+  const options = normaliseOptions({
+    ..._options
   });
-}
-export function defineOgImageStatic(options = {}) {
-  return defineOgImageCached(options);
-}
-export function defineOgImageCached(options = {}) {
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  if (!defaults.cacheTtl && !options.cacheTtl)
-    options.cacheTtl = 60 * 60 * 24 * 1e3 * 7;
-  return defineOgImage({
-    cache: true,
-    ...options
-  });
-}
-export function defineOgImageWithoutCache(options = {}) {
-  return defineOgImage({
-    ...options,
-    cache: false,
-    cacheTtl: 0
-  });
-}
-export function defineOgImageDynamic(options = {}) {
-  return defineOgImageWithoutCache(options);
-}
-export function defineOgImageComponent(component, props, options = {}) {
-  defineOgImage({
-    component,
-    ...props,
-    ...options
-  });
-}
-export function defineOgImage(_options = {}) {
-  if (import.meta.server) {
-    if (_options.url) {
-      const type = _options.url.endsWith(".png") ? "image/png" : "image/jpeg";
-      const meta2 = [
-        { property: "og:image", content: _options.url },
-        { property: "og:image:type", content: type },
-        { name: "twitter:card", content: "summary_large_image" },
-        { name: "twitter:image:src", content: _options.url }
-      ];
-      if (_options.width) {
-        meta2.push({ property: "og:image:width", content: _options.width });
-        meta2.push({ name: "twitter:image:width", content: _options.width });
-      }
-      if (_options.height) {
-        meta2.push({ property: "og:image:height", content: _options.height });
-        meta2.push({ name: "twitter:image:height", content: _options.height });
-      }
-      if (_options.alt) {
-        meta2.push({ property: "og:image:alt", content: _options.alt });
-        meta2.push({ name: "twitter:image:alt", content: _options.alt });
-      }
-      useServerHead({ meta: meta2 }, {
-        // after async scripts when capo.js is enabled
-        tagPriority: 35
-      });
-      return;
-    }
-    const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-    const options = normaliseOptions(_options);
-    const optionsWithDefault = defu(options, defaults);
-    const path = getOgImagePath(useRouter().currentRoute.value?.path, optionsWithDefault.extension);
-    const src = withSiteUrl(path);
+  const resolvedOptions = normaliseOptions(defu(options, routeRules, defaults));
+  if (_options.url) {
+    createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
+  } else {
+    const path = getOgImagePath(basePath, resolvedOptions);
     if (import.meta.prerender)
       appendHeader(useRequestEvent(), "x-nitro-prerender", path);
-    const meta = [
-      { property: "og:image", content: src },
-      { property: "og:image:width", content: optionsWithDefault.width },
-      { property: "og:image:height", content: optionsWithDefault.height },
-      { property: "og:image:type", content: `image/${optionsWithDefault.extension}` }
-    ];
-    if (optionsWithDefault.alt)
-      meta.push({ property: "og:image:alt", content: optionsWithDefault.alt });
-    meta.push(...[
-      { name: "twitter:card", content: "summary_large_image" },
-      { name: "twitter:image:src", content: src },
-      { name: "twitter:image:width", content: optionsWithDefault.width },
-      { name: "twitter:image:height", content: optionsWithDefault.height }
-    ]);
-    if (optionsWithDefault.alt)
-      meta.push({ name: "twitter:image:alt", content: optionsWithDefault.alt });
-    useServerHead({
-      meta,
-      script: [
-        {
-          id: "nuxt-og-image-options",
-          type: "application/json",
-          processTemplateParams: true,
-          innerHTML: () => {
-            const payload = {
-              title: "%s"
-            };
-            Object.entries(options).forEach(([key, val]) => {
-              payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
-            });
-            return payload;
-          },
-          // we want this to be last in our head
-          tagPosition: "bodyClose"
-        }
-      ]
-    }, {
-      // after async scripts when capo.js is enabled
-      tagPriority: 35
-    });
+    createOgImageMeta(path, options, resolvedOptions, nuxtApp.ssrContext);
   }
 }

package/dist/runtime/composables/defineOgImageComponent.d.ts

@@ -0,0 +1,3 @@
+import type { ExtractComponentProps, OgImageOptions } from '../types';
+import type { OgImageComponents } from '#nuxt-og-image/components';
+export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props: ExtractComponentProps<OgImageComponents[T]>, options?: OgImageOptions): void;

package/dist/runtime/composables/defineOgImageComponent.mjs

@@ -0,0 +1,8 @@
+import { defineOgImage } from "./defineOgImage.mjs";
+export function defineOgImageComponent(component, props, options = {}) {
+  return defineOgImage({
+    component,
+    props,
+    ...options
+  });
+}

package/dist/runtime/composables/defineOgImagePageScreenshot.d.ts

@@ -0,0 +1,2 @@
+import type { OgImagePageScreenshotOptions } from '../types';
+export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): any;

package/dist/runtime/composables/defineOgImagePageScreenshot.mjs

@@ -0,0 +1,14 @@
+import { defineOgImage, useRouter } from "#imports";
+export function defineOgImageScreenshot(options = {}) {
+  const router = useRouter();
+  const route = router.currentRoute.value?.path || "";
+  return defineOgImage({
+    alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
+    renderer: "chromium",
+    extension: "jpeg",
+    component: "PageScreenshot",
+    // this is an alias
+    cache: true,
+    ...options
+  });
+}

package/dist/runtime/core/bindings/css-inline/node.d.ts

@@ -1,5 +1,2 @@
-declare function nodeFn(html: string, options: any): string;
-declare namespace nodeFn {
-    var __mock: boolean;
-}
-export default nodeFn;
+import cssInline from 'css-inline';
+export default cssInline;

package/dist/runtime/core/bindings/css-inline/node.mjs

@@ -1,10 +1,2 @@
-import { inline } from "css-inline";
-function nodeFn(html, options) {
-  return inline(html, {
-    ...options,
-    load_remote_stylesheets: false,
-    keep_style_tags: false
-  });
-}
-nodeFn.__mock = false;
-export default nodeFn;
+import cssInline from "css-inline";
+export default cssInline;