nuxt-og-image 3.0.0-beta.9 → 3.0.0-rc.1

package/dist/module.mjs

@@ -1,15 +1,20 @@
 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 { installNuxtSiteConfig } from 'nuxt-site-config-kit';
-import { provider, env } from 'std-env';
+import { useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, defineNuxtModule, useLogger, tryResolveModule, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { assertSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config-kit';
+import { provider, env, isDevelopment, isCI } from 'std-env';
 import { hash } from 'ohash';
-import { relative } from 'pathe';
-import 'nypm';
+import { relative, dirname } from 'pathe';
 import { defu } from 'defu';
+import { Launcher } from 'chrome-launcher';
+import { ensureDependencyInstalled } from 'nypm';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
+import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { execa } from 'execa';
+import terminate from 'terminate';
 
-const version = "3.0.0-beta.9";
+const version = "3.0.0-rc.1";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -26,72 +31,69 @@ const autodetectableStaticProviders = {
 };
 const NodeRuntime = {
   // node-server runtime
-  bindings: {
-    "chromium": "node",
-    "css-inline": "node",
-    "resvg": "node",
-    "satori": "node",
-    "sharp": "node"
-  },
-  wasmStrategy: "import"
+  "chromium": "node",
+  "css-inline": "node",
+  "resvg": "node",
+  "satori": "node",
+  "sharp": "node"
+  // will be disabled if they're missing the dependency
 };
 const cloudflare = {
-  bindings: {
-    "chromium": false,
-    "css-inline": "node",
-    "resvg": "wasm",
-    "satori": "node",
-    "sharp": false
-  },
-  wasmStrategy: "import"
+  "chromium": false,
+  "css-inline": false,
+  "resvg": "wasm",
+  "satori": "node",
+  "sharp": false,
+  "wasm": {
+    esmImport: true
+  }
 };
 const awsLambda = {
-  bindings: {
-    "chromium": false,
-    "css-inline": "node",
-    "resvg": "node",
-    "satori": "node",
-    "sharp": "node"
-  },
-  wasmStrategy: "inline"
+  "chromium": false,
+  "css-inline": "node",
+  "resvg": "node",
+  "satori": "node",
+  "sharp": false
+  // 0.33.x has issues
 };
 const RuntimeCompatibility = {
   "nitro-dev": NodeRuntime,
   "nitro-prerender": NodeRuntime,
   "node-server": NodeRuntime,
   "stackblitz": {
-    bindings: {
-      "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline"
+    "chromium": false,
+    "css-inline": false,
+    "resvg": "wasm-fs",
+    "satori": "wasm-fs",
+    "sharp": false
   },
   "aws-lambda": awsLambda,
   "netlify": awsLambda,
   "netlify-edge": {
-    bindings: {
-      "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": false
-    },
-    wasmStrategy: "inline"
+    "chromium": false,
+    "css-inline": false,
+    "resvg": "wasm",
+    "satori": "node",
+    "sharp": false,
+    "wasm": {
+      rollup: {
+        targetEnv: "auto-inline",
+        sync: ["@resvg/resvg-wasm/index_bg.wasm"]
+      }
+    }
   },
+  "firebase": awsLambda,
   "vercel": awsLambda,
   "vercel-edge": {
-    bindings: {
-      "chromium": false,
-      "css-inline": "node",
-      "resvg": "wasm",
-      "satori": "node",
-      "sharp": "node"
-    },
-    wasmStrategy: "inline",
-    wasmImportQuery: "?module"
+    "chromium": false,
+    "css-inline": false,
+    "resvg": "wasm",
+    "satori": "node",
+    "sharp": false,
+    "wasm": {
+      // lowers workers kb size
+      esmImport: true
+    }
   },
   "cloudflare-pages": cloudflare,
   "cloudflare": cloudflare
@@ -116,37 +118,75 @@ function getPresetNitroPresetCompatibility(target) {
   return compatibility;
 }
 function applyNitroPresetCompatibility(nitroConfig, options) {
-  let compatibility = options?.compatibility;
   const target = resolveNitroPreset(nitroConfig);
-  if (!compatibility)
-    compatibility = getPresetNitroPresetCompatibility(target);
-  const resolve = options.resolve;
+  const compatibility = getPresetNitroPresetCompatibility(target);
+  const { resolve } = options;
+  const satoriEnabled = typeof options.compatibility?.satori !== "undefined" ? !!options.compatibility.satori : !!compatibility.satori;
+  const chromiumEnabled = typeof options.compatibility?.chromium !== "undefined" ? !!options.compatibility.chromium : !!compatibility.chromium;
+  nitroConfig.alias["#nuxt-og-image/renderers/satori"] = satoriEnabled ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
+  nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = chromiumEnabled ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
+  const resolvedCompatibility = {};
   function applyBinding(key) {
-    const binding = compatibility.bindings[key];
-    if (binding === false)
-      return { [`#nuxt-og-image/bindings/${key}`]: "unenv/runtime/mock/empty" };
-    return { [`#nuxt-og-image/bindings/${key}`]: resolve(`./runtime/core/bindings/${key}/${binding}`) };
+    let binding = options.compatibility?.[key];
+    if (typeof binding === "undefined")
+      binding = compatibility[key];
+    resolvedCompatibility[key] = binding;
+    return {
+      [`#nuxt-og-image/bindings/${key}`]: binding === false ? "unenv/runtime/mock/empty" : resolve(`./runtime/core/bindings/${key}/${binding}`)
+    };
   }
   nitroConfig.alias = defu(
     applyBinding("chromium"),
     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).includes("wasm")) {
     nitroConfig.experimental = nitroConfig.experimental || {};
     nitroConfig.experimental.wasm = true;
   }
-  return compatibility;
+  nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
+  nitroConfig.wasm = defu(compatibility.wasm, nitroConfig.wasm);
+  nitroConfig.virtual["#nuxt-og-image/compatibility"] = () => `export default ${JSON.stringify(resolvedCompatibility)}`;
+  addTemplate({
+    filename: "nuxt-og-image/compatibility.mjs",
+    getContents() {
+      return `export default ${JSON.stringify(resolvedCompatibility)}`;
+    },
+    options: { mode: "server" }
+  });
+  return resolvedCompatibility;
+}
+function ensureDependencies(dep, nuxt = useNuxt()) {
+  return Promise.all(dep.map((d) => {
+    return ensureDependencyInstalled(d, {
+      cwd: nuxt.options.rootDir,
+      dev: true
+    });
+  }));
 }
 
+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);
@@ -198,9 +238,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) => {
@@ -222,40 +268,42 @@ 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 });
+    applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
   });
 }
 
 function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = "unenv/runtime/mock/empty";
     applyNitroPresetCompatibility(nitroConfig, {
       compatibility: {
-        bindings: {
-          "css-inline": false,
-          "chromium": false,
-          "resvg": false,
-          "satori": false,
-          "sharp": false
-        }
+        "chromium": false,
+        "satori": false,
+        "css-inline": false,
+        "resvg": false,
+        "sharp": false
       },
       resolve
     });
+    assertSiteConfig("nuxt-og-image", {
+      url: "OG Image tags are required to be absolute URLs."
+    }, {
+      throwError: true
+    });
   });
 }
 
 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 });
+      applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility.prerender, resolve });
       nitroConfig.wasm = nitroConfig.wasm || {};
       nitroConfig.wasm.esmImport = false;
+      const prerenderingPages = (nuxt.options.nitro.prerender?.routes || []).some((r) => r && (!r.includes(".") || r.includes("*")));
+      prerenderingPages && assertSiteConfig("nuxt-og-image", {
+        url: "OG Image tags are required to be absolute URLs."
+      }, {
+        throwError: false
+      });
     });
   });
 }
@@ -265,44 +313,97 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
   if (typeof config.runtimeCacheStorage === "object")
     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";
-    applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: config.runtimeCompatibility });
+    applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
     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);
+}
+
+async function ensureChromium(logger) {
+  logger.info("Ensuring Chromium install for og:image generation...");
+  const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
+    stdio: "inherit"
+  });
+  installChromeProcess.stderr?.pipe(process.stderr);
+  await new Promise((resolve) => {
+    installChromeProcess.on("exit", (e) => {
+      if (e !== 0)
+        logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
+      resolve(true);
+    });
+  });
+  installChromeProcess.pid && terminate(installChromeProcess.pid);
+}
+
+function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const [name, weight] = f.split(":");
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || "400",
+        style: "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
 }
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.7.0",
+      nuxt: "^3.8.2",
       bridge: false
     },
     configKey: "ogImage"
   },
-  defaults(nuxt) {
+  defaults() {
     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
+        // default is to cache the image for 3 day (72 hours)
+        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
+      debug: isDevelopment
     };
   },
   async setup(config, nuxt) {
@@ -318,17 +419,98 @@ 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)
-      config.defaults.extension = "png";
+    const targetCompatibility = getPresetNitroPresetCompatibility(preset);
+    const hasSharpDependency = !!await tryResolveModule("sharp");
+    const userConfiguredExtension = config.defaults.extension;
+    const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
+    config.defaults.extension = userConfiguredExtension || (hasSharpDependency && targetCompatibility.sharp ? "jpg" : "png");
+    if (hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+      if (hasSharpDependency && !targetCompatibility.sharp) {
+        logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+        config.compatibility = defu(config.compatibility, {
+          runtime: { sharp: false }
+        });
+      } else if (!hasSharpDependency) {
+        logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
+        await ensureDependencies(["sharp"]);
+        logger.warn("Support for `sharp` is limited so check the compatibility guide.");
+      }
+    } else if (!hasSharpDependency) {
+      config.compatibility = defu(config.compatibility, {
+        runtime: { sharp: false },
+        dev: { sharp: false },
+        prerender: { sharp: false }
+      });
+    }
+    let hasChromeLocally = false;
+    try {
+      hasChromeLocally = !!Launcher.getFirstInstallation();
+    } catch {
+    }
+    const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
+    if (isUndefinedOrTruthy(config.compatibility?.prerender?.chromium) && isUndefinedOrTruthy(config.compatibility?.runtime?.chromium)) {
+      if (isCI)
+        await ensureChromium(logger);
+      const hasPlaywrightDependency = !!await tryResolveModule("playwright");
+      if (hasChromeLocally) {
+        config.compatibility = defu(config.compatibility, {
+          runtime: { chromium: false },
+          dev: { chromium: "node" },
+          prerender: { chromium: "node" }
+        });
+      } else if (hasPlaywrightDependency && targetCompatibility.chromium) {
+        config.compatibility = defu(config.compatibility, {
+          runtime: { chromium: "node" },
+          dev: { chromium: "node" },
+          prerender: { chromium: "node" }
+        });
+      }
+    } else if (!hasChromeLocally && nuxt.options.dev && config.compatibility?.dev?.chromium === "node") {
+      await ensureChromium(logger);
+    }
+    await import('@resvg/resvg-js').catch(() => {
+      logger.warn("ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.");
+      config.compatibility = defu(config.compatibility, {
+        dev: { resvg: "wasm-fs" },
+        prerender: { resvg: "wasm-fs" }
+      });
+    });
     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"];
+    if (preset === "cloudflare") {
+      config.fonts = config.fonts.filter((f) => {
+        if (typeof f !== "string" && f.path) {
+          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in Cloudflare Workers, please use a Google font.`);
+          return false;
+        }
+        return true;
+      });
+    }
+    if (preset === "stackblitz") {
+      config.fonts = config.fonts.map((f) => {
+        if (typeof f === "string" && f.startsWith("Inter:")) {
+          const [_, weight] = f.split(":");
+          return {
+            name: "Inter",
+            weight,
+            // nuxt server assets
+            key: `nuxt-og-image:fonts:inter-latin-ext-${weight}-normal.woff`
+          };
+        }
+        if (typeof f === "string" || !f.path && !f.key) {
+          logger.warn(`The ${typeof f === "string" ? f : `${f.name}:${f.weight}`} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+          return false;
+        }
+        return f;
+      }).filter(Boolean);
+      nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+        nitroConfig.serverAssets = nitroConfig.serverAssets || [];
+        nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
+      });
+    }
     nuxt.options.experimental.componentIslands = true;
     addServerHandler({
       lazy: true,
@@ -345,52 +527,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}`,
-        filePath: resolve(`./runtime/components/OgImage/${name}`)
+        name,
+        filePath: resolve(`./runtime/components/OgImage/${name}`),
+        ...config.componentOptions
       });
     });
-    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 = [];
@@ -408,8 +572,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({
@@ -426,7 +588,7 @@ const module = defineNuxtModule({
       nuxt.hooks.hook("nuxt-og-image:components", ogImageComponentCtx);
     });
     addTemplate({
-      filename: "og-image-component-names.mjs",
+      filename: "nuxt-og-image/components.mjs",
       getContents() {
         return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
       },
@@ -436,6 +598,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);
@@ -444,12 +616,17 @@ 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>
+  }
+  interface NitroRuntimeHooks {
+    'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
+    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
   }
 }
+
 declare module '#nuxt-og-image/components' {
   export interface OgImageComponents {
 ${componentImports}
@@ -457,42 +634,44 @@ ${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) => {
-        if (typeof f === "string") {
-          const [name, weight] = f.split(":");
-          return {
-            name,
-            weight,
-            path: void 0
-          };
-        }
-        return f;
-      });
+      const normalisedFonts = normaliseFontInput(config.fonts);
       if (!nuxt.options._generate && nuxt.options.build) {
         nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {};
         nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [];
-        normalisedFonts.filter((f) => !f.path).forEach(({ name, weight }) => {
+        normalisedFonts.filter((f) => !f.path && !f.key).forEach(({ name, weight }) => {
           nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
         });
       }
-      nuxt.options.runtimeConfig["nuxt-og-image"] = {
+      const hasColorModeModule = hasNuxtModule("@nuxtjs/color-mode");
+      const colorModeOptions = hasColorModeModule ? await getNuxtModuleOptions("@nuxtjs/color-mode") : {};
+      let colorPreference = colorModeOptions.preference;
+      if (!colorPreference || colorPreference === "system")
+        colorPreference = colorModeOptions.fallback;
+      if (!colorPreference || colorPreference === "system")
+        colorPreference = "light";
+      const runtimeConfig = {
         version,
         // binding options
         satoriOptions: config.satoriOptions || {},
         resvgOptions: config.resvgOptions || {},
         sharpOptions: config.sharpOptions || {},
-        runtimeSatori: config.runtimeSatori,
-        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,
+        baseCacheKey,
         // convert the fonts to uniform type to fix ts issue
         fonts: normalisedFonts,
-        hasNuxtIcon: hasNuxtModule("nuxt-icon")
+        hasNuxtIcon: hasNuxtModule("nuxt-icon"),
+        colorPreference
       };
+      nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
+      nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;
     });
     if (nuxt.options.dev) {
       setupDevHandler(config, resolve);
@@ -502,8 +681,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.build)
+      addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
+    setupPrerenderHandler(config, resolve);
   }
 });