nuxt-og-image 6.9.0 → 6.10.0

package/README.md

@@ -7,6 +7,14 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
+<a href="https://skilld.dev/gh/nuxt-modules/og-image">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/nuxt-modules/og-image?theme=dark">
+    <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/nuxt-modules/og-image?theme=light">
+    <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/nuxt-modules/og-image?theme=light">
+  </picture>
+</a>
+
 Nuxt OG Image allows you to easily generate OG Images using either Vue components or screenshots of your pages.
 
 OG Images are known to improve click-through rates on social media.
@@ -42,10 +50,7 @@ npx nuxi@latest module add og-image
 ```
 
 > [!TIP]
-> Generate an Agent Skill for this package using [skilld](https://github.com/harlan-zw/skilld):
-> ```bash
-> npx skilld add nuxt-og-image
-> ```
+> Using an AI agent? Get the nuxt-og-image Skill on [skilld.dev/gh/nuxt-modules/og-image](https://skilld.dev/gh/nuxt-modules/og-image).
 
 💡 Built your OG images? Check how they render across Twitter, Facebook, LinkedIn and Slack with the free [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger), or monitor them site-wide with [Nuxt SEO Pro](https://nuxtseo.com/pro).
 

package/dist/chunks/tw4.mjs

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { pathToFileURL } from 'node:url';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
-import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.CTD0ZPNd.mjs';
+import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.DWcVJOVy.mjs';
 import 'node:crypto';
 import 'node:fs';
 import '@nuxt/kit';
@@ -11,18 +11,17 @@ import 'fnv1a-64';
 import 'nuxt-site-config/kit';
 import 'nuxtseo-shared/kit';
 import 'pkg-types';
-import 'std-env';
 import 'magic-string';
 import 'oxc-walker';
 import '../../dist/runtime/logger.js';
 import 'chrome-launcher';
+import 'std-env';
 import 'nypm';
 import 'nuxtseo-shared/devtools';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
 import '../../dist/runtime/server/og-image/utils/css.js';
 import 'strip-literal';
-import 'ufo';
 import 'unplugin';
 import '@vue/compiler-sfc';
 import 'ofetch';

package/dist/chunks/uno.mjs

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
-import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.CTD0ZPNd.mjs';
-export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.CTD0ZPNd.mjs';
+import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.DWcVJOVy.mjs';
+export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.DWcVJOVy.mjs';
 import 'node:crypto';
 import 'node:fs';
 import 'node:url';
@@ -12,18 +12,17 @@ import 'nuxt-site-config/kit';
 import 'nuxtseo-shared/kit';
 import 'pathe';
 import 'pkg-types';
-import 'std-env';
 import 'magic-string';
 import 'oxc-walker';
 import 'exsolve';
 import 'chrome-launcher';
+import 'std-env';
 import 'nypm';
 import 'nuxtseo-shared/devtools';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
 import '../../dist/runtime/server/og-image/utils/css.js';
 import 'strip-literal';
-import 'ufo';
 import 'unplugin';
 import '@vue/compiler-sfc';
 import 'ofetch';

package/dist/cli.mjs

@@ -13,6 +13,67 @@ import 'magicast';
 import 'magicast/helpers';
 import '../dist/runtime/logger.js';
 
+const RENDERER_PREFERENCE = ["takumi", "satori", "browser"];
+const RE_TEMPLATE_FILE = /^(.+)\.(takumi|satori|browser)\.vue$/;
+const RENDERER_PACKAGES = {
+  takumi: ["@takumi-rs/core", "@takumi-rs/wasm"],
+  satori: ["satori"],
+  browser: ["playwright-core"]
+};
+function parseTemplateFile(file) {
+  const match = RE_TEMPLATE_FILE.exec(file);
+  if (!match)
+    return null;
+  return { baseName: match[1], renderer: match[2] };
+}
+function listEjectableNames(templateFiles) {
+  const names = /* @__PURE__ */ new Set();
+  for (const file of templateFiles) {
+    const parsed = parseTemplateFile(file);
+    if (!parsed)
+      continue;
+    names.add(parsed.baseName);
+    names.add(`${parsed.baseName}.${parsed.renderer}`);
+  }
+  return [...names].sort();
+}
+function resolveEjectTemplate(name, ctx) {
+  const requested = name.replace(/\.vue$/, "");
+  const variants = ctx.templateFiles.map((file) => ({ file, parsed: parseTemplateFile(file) })).filter((v) => !!v.parsed);
+  const exact = variants.find((v) => `${v.parsed.baseName}.${v.parsed.renderer}` === requested);
+  if (exact)
+    return { _tag: "Ok", file: exact.file, renderer: exact.parsed.renderer, reason: "exact" };
+  const candidates = variants.filter((v) => v.parsed.baseName === requested);
+  if (candidates.length === 0)
+    return { _tag: "NotFound", name, available: listEjectableNames(ctx.templateFiles) };
+  if (candidates.length === 1)
+    return { _tag: "Ok", file: candidates[0].file, renderer: candidates[0].parsed.renderer, reason: "only-variant" };
+  const pick = (renderers, reason) => {
+    for (const renderer of RENDERER_PREFERENCE) {
+      if (!renderers.includes(renderer))
+        continue;
+      const match = candidates.find((c) => c.parsed.renderer === renderer);
+      if (match)
+        return { _tag: "Ok", file: match.file, renderer, reason };
+    }
+    return null;
+  };
+  return pick(ctx.appRenderers, "app-templates") ?? pick(ctx.installedRenderers, "installed") ?? pick(RENDERER_PREFERENCE, "default");
+}
+function detectInstalledRenderers(pkg) {
+  const deps = { ...pkg?.dependencies, ...pkg?.devDependencies };
+  return RENDERER_PREFERENCE.filter((r) => RENDERER_PACKAGES[r].some((p) => p in deps));
+}
+function detectAppRenderers(files) {
+  const found = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    const parsed = parseTemplateFile(file.split("/").pop() || file);
+    if (parsed)
+      found.add(parsed.renderer);
+  }
+  return RENDERER_PREFERENCE.filter((r) => found.has(r));
+}
+
 const __dirname$1 = dirname(fileURLToPath(import.meta.url));
 const communityDir = resolve(__dirname$1, "runtime/app/components/Templates/Community");
 const RE_RENDERER_SUFFIX = /\.(satori|browser|takumi)\.vue$/;
@@ -195,28 +256,30 @@ function listTemplates() {
   const templates = [...new Set(
     readdirSync(communityDir).filter((f) => f.endsWith(".vue")).map(getBaseName)
   )];
+  const variants = listEjectableNames(readdirSync(communityDir)).filter((n) => n.includes("."));
   p.intro("Community Templates");
   p.note(templates.map((t) => `\u2022 ${t}`).join("\n"), "Available");
   p.log.info("Usage: npx nuxt-og-image eject <template-name>");
+  p.log.info(`To pick a renderer, add its suffix: ${variants.slice(0, 2).join(", ")}`);
   p.outro("");
 }
-function findTemplateFile(name) {
-  const files = readdirSync(communityDir).filter((f) => f.endsWith(".vue"));
-  const match = files.find((f) => getBaseName(f) === name);
-  return match || null;
-}
-function ejectTemplate(name, targetDir) {
-  const templateFile = findTemplateFile(name);
-  if (!templateFile) {
+function ejectTemplate(name, targetDir, cwd = process.cwd()) {
+  const appComponents = [.../* @__PURE__ */ new Set([cwd, targetDir])].flatMap(findOgImageComponents);
+  const resolution = resolveEjectTemplate(name, {
+    templateFiles: readdirSync(communityDir).filter((f) => f.endsWith(".vue")),
+    appRenderers: detectAppRenderers(appComponents),
+    installedRenderers: detectInstalledRenderers(readPackageJson(cwd))
+  });
+  if (resolution._tag === "NotFound") {
     p.log.error(`Template "${name}" not found.`);
     listTemplates();
     process.exit(1);
   }
-  const templatePath = join(communityDir, templateFile);
+  const templatePath = join(communityDir, resolution.file);
   const outputDir = resolve(targetDir, "components", "OgImage");
   if (!existsSync(outputDir))
     mkdirSync(outputDir, { recursive: true });
-  const outputPath = join(outputDir, templateFile);
+  const outputPath = join(outputDir, resolution.file);
   if (existsSync(outputPath)) {
     p.log.error(`File already exists: ${outputPath}`);
     process.exit(1);
@@ -224,6 +287,17 @@ function ejectTemplate(name, targetDir) {
   const content = readFileSync(templatePath, "utf-8");
   writeFileSync(outputPath, content, "utf-8");
   p.log.success(`Ejected "${name}" to ${outputPath}`);
+  const why = {
+    "exact": null,
+    "only-variant": null,
+    "app-templates": `your templates use ${resolution.renderer}`,
+    "installed": `${resolution.renderer} is in package.json`,
+    "default": `${resolution.renderer} is the default renderer`
+  }[resolution.reason];
+  if (why) {
+    const others = listEjectableNames(readdirSync(communityDir)).filter((n) => n.startsWith(`${getBaseName(resolution.file)}.`) && n !== resolution.file.replace(".vue", ""));
+    p.log.info(`Picked the ${resolution.renderer} variant because ${why}.${others.length ? ` For another renderer, run: npx nuxt-og-image eject ${others[0]}` : ""}`);
+  }
 }
 function findOgImageComponents(dir) {
   const components = [];
@@ -445,11 +519,19 @@ function collectTemplateReplacements(templateHtml) {
     if (el.name !== "OgImage" && el.name !== "OgImageScreenshot")
       return;
     const isScreenshot = el.name === "OgImageScreenshot";
-    const composable = isScreenshot ? "defineOgImageScreenshot" : "defineOgImage";
-    const propsStr = attrsToProps(el.attributes);
     const start = el.loc[0].start;
     const end = el.loc[1].end;
-    const text = propsStr ? `<!-- Migrated: use ${composable}(${propsStr}) in <script setup> -->` : `<!-- Migrated: use ${composable}() in <script setup> -->`;
+    let call;
+    if (isScreenshot) {
+      const propsStr = attrsToProps(el.attributes);
+      call = `defineOgImageScreenshot(${propsStr})`;
+    } else {
+      const { component, ":component": dynamicComponent, ...props } = el.attributes;
+      const componentArg = dynamicComponent || (component ? `'${component}'` : `'NuxtSeo'`);
+      const propsStr = attrsToProps(props);
+      call = `defineOgImage(${componentArg}${propsStr ? `, ${propsStr}` : ""})`;
+    }
+    const text = `<!-- Migrated: use ${call} in <script setup> -->`;
     replacements.push({ start, end, text });
   });
   return replacements;
@@ -755,7 +837,7 @@ async function runMigrate(args2) {
       if (shouldEject) {
         const targetDir = existsSync(join(cwd, "app")) ? join(cwd, "app") : cwd;
         for (const name of migrationCheck.usedCommunityTemplates) {
-          ejectTemplate(name, targetDir);
+          ejectTemplate(name, targetDir, cwd);
         }
       } else {
         p.log.info("Run manually before building for production:");
@@ -1273,6 +1355,7 @@ function showHelp() {
     "                  Options: --renderer <renderer>, --path <dir>",
     "list              List available community templates",
     "eject <name>      Eject a community template to your project",
+    "                  Picks the variant for your renderer; add .takumi or .satori to choose",
     "switch            Switch components between renderers",
     "                  Options: --from <renderer>, --to <renderer>, --dry-run, --yes",
     "enable <renderer> Install dependencies for a renderer (satori, browser, takumi)",
@@ -1299,7 +1382,7 @@ if (hasHelp || !command) {
   }
   const cwd = process.cwd();
   const targetDir = existsSync(join(cwd, "app")) ? join(cwd, "app") : cwd;
-  ejectTemplate(templateName, targetDir);
+  ejectTemplate(templateName, targetDir, cwd);
 } else if (command === "list") {
   listTemplates();
 } else if (command === "migrate") {

package/dist/module.d.mts

@@ -142,7 +142,7 @@ interface ModuleOptions {
     /**
      * Browser renderer configuration.
      *
-     * When using browser-based rendering (screenshots), configure the browser provider.
+     * Set to true to enable defineOgImageScreenshot(), or configure a browser provider.
      * For Cloudflare deployments, specify the browser binding name.
      *
      * @example { provider: 'cloudflare', binding: 'BROWSER' }

package/dist/module.d.ts

@@ -142,7 +142,7 @@ interface ModuleOptions {
     /**
      * Browser renderer configuration.
      *
-     * When using browser-based rendering (screenshots), configure the browser provider.
+     * Set to true to enable defineOgImageScreenshot(), or configure a browser provider.
      * For Cloudflare deployments, specify the browser binding name.
      *
      * @example { provider: 'cloudflare', binding: 'BROWSER' }

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.16.0"
   },
   "configKey": "ogImage",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -9,20 +9,19 @@ import 'nuxt-site-config/kit';
 import 'nuxtseo-shared/kit';
 import 'pathe';
 import 'pkg-types';
-import 'std-env';
-export { n as default } from './shared/nuxt-og-image.CTD0ZPNd.mjs';
+export { n as default } from './shared/nuxt-og-image.DWcVJOVy.mjs';
 import '../dist/runtime/logger.js';
 import 'magic-string';
 import 'oxc-walker';
 import 'exsolve';
 import 'chrome-launcher';
+import 'std-env';
 import 'nypm';
 import 'nuxtseo-shared/devtools';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
 import '../dist/runtime/server/og-image/utils/css.js';
 import 'strip-literal';
-import 'ufo';
 import 'unplugin';
 import '@vue/compiler-sfc';
 import 'ofetch';

package/dist/runtime/app/composables/defineOgImageScreenshot.js

@@ -1,6 +1,9 @@
-import { useRouter } from "#app";
+import { createError, useRouter } from "#app";
+import { useOgImageRuntimeConfig } from "../utils.js";
 import { defineOgImageRaw } from "./_defineOgImageRaw.js";
 export function defineOgImageScreenshot(options = {}) {
+  if (!useOgImageRuntimeConfig().browserEnabled)
+    throw createError({ statusCode: 500, statusMessage: "[nuxt-og-image] Screenshots require browser opt-in. Set ogImage.browser to true or a browser provider in nuxt.config.ts." });
   const router = useRouter();
   const route = router.currentRoute.value?.path || "/";
   const { delay, mask, selector, colorScheme, ...rest } = options;

package/dist/runtime/app/composables/zero-runtime.d.ts

@@ -0,0 +1,9 @@
+import { defineOgImage as _defineOgImage } from './defineOgImage.js';
+import { defineOgImageComponent as _defineOgImageComponent } from './defineOgImageComponent.js';
+import { defineOgImageScreenshot as _defineOgImageScreenshot } from './defineOgImageScreenshot.js';
+export declare const defineOgImage: typeof _defineOgImage;
+/**
+ * @deprecated Use `defineOgImage()` instead.
+ */
+export declare const defineOgImageComponent: typeof _defineOgImageComponent;
+export declare const defineOgImageScreenshot: typeof _defineOgImageScreenshot;

package/dist/runtime/app/composables/zero-runtime.js

@@ -0,0 +1,6 @@
+import { defineOgImage as _defineOgImage } from "./defineOgImage.js";
+import { defineOgImageComponent as _defineOgImageComponent } from "./defineOgImageComponent.js";
+import { defineOgImageScreenshot as _defineOgImageScreenshot } from "./defineOgImageScreenshot.js";
+export const defineOgImage = (...args) => import.meta.prerender ? _defineOgImage(...args) : [];
+export const defineOgImageComponent = (...args) => import.meta.prerender ? _defineOgImageComponent(...args) : [];
+export const defineOgImageScreenshot = (...args) => import.meta.prerender ? _defineOgImageScreenshot(...args) : [];

package/dist/runtime/app/utils.js

@@ -184,9 +184,12 @@ export function resolveComponentName(component) {
     const originalName = component;
     const normalizedName = originalName.split(".").map((s, i) => i === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1)).join("");
     const inputBase = normalizedName.replace(RE_RENDERER_SUFFIX, "");
+    const requestedRenderer = normalizedName.match(RE_RENDERER_SUFFIX)?.[1]?.toLowerCase();
     for (const component2 of componentNames) {
       if (component2.pascalName === normalizedName)
         return component2.pascalName;
+      if (requestedRenderer && component2.renderer !== requestedRenderer)
+        continue;
       const basePascalName = component2.pascalName.replace(RE_RENDERER_SUFFIX, "");
       if (basePascalName === originalName || basePascalName === inputBase)
         return component2.pascalName;

package/dist/runtime/server/og-image/context.js

@@ -9,7 +9,6 @@ import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { logger } from "../../logger.js";
 import { decodeOgImageParams, extractEncodedSegment, sanitizeProps, separateProps, verifyOgImageSignature } from "../../shared.js";
 import { hashKey } from "../../shared/hash.js";
-import { autoEjectCommunityTemplate } from "../util/auto-eject.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { normaliseOptions } from "../util/options.js";
 import { getEventQuery } from "../util/query.js";
@@ -174,8 +173,6 @@ export async function resolveContext(e) {
     }
     normalised.options.props = filtered;
   }
-  if (normalised.component?.category === "community")
-    autoEjectCommunityTemplate(normalised.component, runtimeConfig, { requestPath: e.path });
   const rendererType = normalised.renderer;
   const baseCacheKey = normalised.options.cacheKey || (hashMatch ? `hash:${hashMatch[1]}` : resolvePathCacheKey(e, basePathWithQuery, normalised.options));
   const key = componentHash ? `${baseCacheKey}:${componentHash}` : baseCacheKey;

package/dist/runtime/server/og-image/takumi/nodes.d.ts

@@ -1,4 +1,4 @@
 import type { Node } from '@takumi-rs/helpers';
 import type { OgImageRenderEventContext, VNode } from '../../../types.js';
 export declare function createTakumiNodes(ctx: OgImageRenderEventContext): Promise<Node>;
-export declare function vnodeToTakumiNode(vnode: VNode, inheritedFontSize: number, inheritedColor?: string): Promise<Node>;
+export declare function vnodeToTakumiNode(vnode: VNode, inheritedColor?: string): Promise<Node>;

package/dist/runtime/server/og-image/takumi/nodes.js

@@ -1,8 +1,7 @@
 import { createVNodes, resolveSvgDimension, SVG_CAMEL_ATTR_VALUES } from "../core/vnodes.js";
-const RE_RELATIVE_UNIT = /^([\d.]+)(em|rem)$/;
-const RE_TW_TEXT_ARBITRARY = /(?:^|\s)text-\[(\d+(?:\.\d+)?)(px|rem|em)\]/;
-const RE_FONT_SIZE_PX = /^(\d+(?:\.\d+)?)(px)?$/;
-const DEFAULT_FONT_SIZE = 16;
+const RE_RELATIVE_UNIT = /^[\d.]+r?em$/;
+const RE_LEADING_SPACE = /^\s/;
+const RE_TRAILING_SPACE = /\s$/;
 const RE_UPPERCASE = /[A-Z]/g;
 const RE_DQUOTE = /"/g;
 const RE_AMP = /&/g;
@@ -10,7 +9,7 @@ const RE_LT = /</g;
 const RE_GT = />/g;
 export async function createTakumiNodes(ctx) {
   const vnodeTree = await createVNodes(ctx);
-  return await ctx.timings.measure("takumi-nodes", () => vnodeToTakumiNode(vnodeTree, DEFAULT_FONT_SIZE));
+  return await ctx.timings.measure("takumi-nodes", () => vnodeToTakumiNode(vnodeTree));
 }
 function pickNumericDimension(props, key) {
   const v = props[key];
@@ -19,35 +18,11 @@ function pickNumericDimension(props, key) {
   const n = Number(v);
   return Number.isNaN(n) ? void 0 : n;
 }
-function resolveRelativeUnit(value, inheritedFontSize) {
-  if (value == null)
-    return void 0;
-  const match = String(value).match(RE_RELATIVE_UNIT);
-  if (!match)
-    return void 0;
-  const n = Number.parseFloat(match[1]);
-  return match[2] === "rem" ? n * DEFAULT_FONT_SIZE : n * inheritedFontSize;
-}
-function extractFontSize(props, style) {
-  if (style?.fontSize != null) {
-    const m = String(style.fontSize).match(RE_FONT_SIZE_PX);
-    if (m)
-      return Number.parseFloat(m[1]);
-  }
-  const twStr = props.tw || props.class || "";
-  const twMatch = twStr.match(RE_TW_TEXT_ARBITRARY);
-  if (twMatch) {
-    const val = Number.parseFloat(twMatch[1]);
-    if (twMatch[2] === "px")
-      return val;
-  }
-  return void 0;
-}
 function extractColor(style) {
   const color = style?.color;
   return typeof color === "string" && color ? color : void 0;
 }
-export async function vnodeToTakumiNode(vnode, inheritedFontSize, inheritedColor) {
+export async function vnodeToTakumiNode(vnode, inheritedColor) {
   const { style, children, class: cls, tw, src, ...rest } = vnode.props;
   const nodeColor = extractColor(style) ?? inheritedColor;
   const baseMetadata = {
@@ -55,18 +30,16 @@ export async function vnodeToTakumiNode(vnode, inheritedFontSize, inheritedColor
     style
   };
   if (vnode.type === "svg") {
-    const hasExplicitFontSize = inheritedFontSize !== DEFAULT_FONT_SIZE;
-    const isRelativeW = RE_RELATIVE_UNIT.test(String(rest.width ?? ""));
-    const isRelativeH = RE_RELATIVE_UNIT.test(String(rest.height ?? ""));
+    const relativeW = RE_RELATIVE_UNIT.test(String(rest.width ?? "")) ? String(rest.width) : void 0;
+    const relativeH = RE_RELATIVE_UNIT.test(String(rest.height ?? "")) ? String(rest.height) : void 0;
+    const imageStyle = relativeW || relativeH ? { ...style, ...relativeW && style?.width == null ? { width: relativeW } : {}, ...relativeH && style?.height == null ? { height: relativeH } : {} } : style;
     return {
       ...baseMetadata,
+      style: imageStyle,
       type: "image",
       src: vnodeToHtmlString(vnode, nodeColor),
-      // When em/rem + explicit parent font size → resolve to px.
-      // When em/rem + default font size → leave undefined (takumi handles natively).
-      // Otherwise → use standard resolution chain (numeric attrs → style → viewBox).
-      width: isRelativeW ? hasExplicitFontSize ? resolveRelativeUnit(rest.width, inheritedFontSize) : void 0 : resolveSvgDimension(rest, style, "width"),
-      height: isRelativeH ? hasExplicitFontSize ? resolveRelativeUnit(rest.height, inheritedFontSize) : void 0 : resolveSvgDimension(rest, style, "height")
+      width: relativeW ? void 0 : resolveSvgDimension(rest, style, "width"),
+      height: relativeH ? void 0 : resolveSvgDimension(rest, style, "height")
     };
   }
   if (vnode.type === "img") {
@@ -78,8 +51,6 @@ export async function vnodeToTakumiNode(vnode, inheritedFontSize, inheritedColor
       height: pickNumericDimension(rest, "height")
     };
   }
-  const nodeFontSize = extractFontSize(vnode.props, style);
-  const childFontSize = nodeFontSize ?? inheritedFontSize;
   const containerStyle = { ...style };
   const w = pickNumericDimension(rest, "width");
   const h = pickNumericDimension(rest, "height");
@@ -102,11 +73,15 @@ export async function vnodeToTakumiNode(vnode, inheritedFontSize, inheritedColor
   }
   if (Array.isArray(children)) {
     const takumiChildren = [];
-    for (const child of children) {
-      if (child && typeof child === "object")
-        takumiChildren.push(await vnodeToTakumiNode(child, childFontSize, nodeColor));
-      else if (typeof child === "string" && child.trim())
-        takumiChildren.push({ type: "text", text: child.trim() });
+    const isInlineImage = (c) => !!c && typeof c === "object" && ["svg", "img"].includes(c.type);
+    for (const [i, child] of children.entries()) {
+      if (child && typeof child === "object") {
+        takumiChildren.push(await vnodeToTakumiNode(child, nodeColor));
+      } else if (typeof child === "string" && child.trim()) {
+        const start = isInlineImage(children[i - 1]) && RE_LEADING_SPACE.test(child) ? " " : "";
+        const end = isInlineImage(children[i + 1]) && RE_TRAILING_SPACE.test(child) ? " " : "";
+        takumiChildren.push({ type: "text", text: `${start}${child.trim()}${end}` });
+      }
     }
     return {
       ...containerMetadata,

package/dist/runtime/server/plugins/auto-eject.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/server/plugins/auto-eject.js

@@ -0,0 +1,36 @@
+import { parse } from "devalue";
+import { defineNitroPlugin } from "#nuxtseo/nitro";
+import { autoEjectCommunityTemplate } from "../util/auto-eject.js";
+import { normaliseOptions } from "../util/options.js";
+import { useOgImageRuntimeConfig } from "../utils.js";
+const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/;
+export default defineNitroPlugin((nitro) => {
+  if (!import.meta.dev)
+    return;
+  nitro.hooks.hook("render:html", (html, ctx) => {
+    const payload = [...html.head, ...html.bodyAppend].join("\n").match(PAYLOAD_REGEX)?.[1];
+    if (!payload)
+      return;
+    for (const options of parse(payload)) {
+      if (!options?.component)
+        continue;
+      const normalised = (() => {
+        try {
+          return normaliseOptions({ ...options });
+        } catch {
+          return null;
+        }
+      })();
+      if (normalised?.component?.category === "community")
+        (ctx.event.context._ogImageAutoEject ||= []).push(normalised.component);
+    }
+  });
+  nitro.hooks.hook("afterResponse", (event) => {
+    const components = event.context._ogImageAutoEject;
+    if (!components?.length)
+      return;
+    const runtimeConfig = useOgImageRuntimeConfig(event);
+    for (const component of components)
+      autoEjectCommunityTemplate(component, runtimeConfig);
+  });
+});

package/dist/runtime/server/plugins/prerender.js

@@ -1,7 +1,7 @@
 import { parse } from "devalue";
-import { parseURL } from "ufo";
+import { parseURL, withoutBase } from "ufo";
 import { appendResponseHeader } from "#nuxtseo/h3";
-import { defineNitroPlugin } from "#nuxtseo/nitro";
+import { defineNitroPlugin, useRuntimeConfig } from "#nuxtseo/nitro";
 import { prerenderOptionsCache } from "#og-image-cache";
 import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { isInternalRoute } from "../../shared.js";
@@ -37,9 +37,10 @@ export default defineNitroPlugin(async (nitro) => {
     });
     const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path));
     await prerenderOptionsCache.setItem(key, payloads);
+    const pagePath = withoutBase(path, useRuntimeConfig().app.baseURL);
     for (const [_ogKey, opt] of payloads) {
       if (opt._hash) {
-        await prerenderOptionsCache.setItem(`hash:${opt._hash}`, opt);
+        await prerenderOptionsCache.setItem(`hash:${opt._hash}`, { ...opt, _path: pagePath });
       }
     }
     const prerenderPaths = ctx.event.context._ogImagePrerenderPaths;

package/dist/runtime/server/util/auto-eject.d.ts

@@ -1,4 +1,2 @@
 import type { OgImageComponent, OgImageRuntimeConfig } from '../../types.js';
-export declare function autoEjectCommunityTemplate(component: OgImageComponent, runtimeConfig: OgImageRuntimeConfig, options?: {
-    requestPath?: string;
-}): void;
+export declare function autoEjectCommunityTemplate(component: OgImageComponent, runtimeConfig: OgImageRuntimeConfig): void;

package/dist/runtime/server/util/auto-eject.js

@@ -4,12 +4,9 @@ import { logger } from "./logger.js";
 const RE_OG_IMAGE_PREFIX = /^OgImage/;
 const RE_RENDERER_SUFFIX = /(Satori|Browser|Takumi)$/;
 const ejectedTemplates = /* @__PURE__ */ new Set();
-export function autoEjectCommunityTemplate(component, runtimeConfig, options) {
+export function autoEjectCommunityTemplate(component, runtimeConfig) {
   if (!import.meta.dev)
     return;
-  if (options?.requestPath?.includes("/_og/")) {
-    return;
-  }
   const { srcDir, communityTemplatesDir } = runtimeConfig;
   if (!srcDir || !communityTemplatesDir)
     return;

package/dist/runtime/server/util/options.js

@@ -104,21 +104,11 @@ export function normaliseOptions(_options) {
     renderer = resolved.renderer;
   }
   options.component = resolved.pascalName;
-  if (resolved.category === "community") {
-    if (!import.meta.dev) {
-      const appComponent = componentNames.find((c) => c.category !== "community");
-      if (appComponent) {
-        resolved = appComponent;
-        renderer = resolved.renderer;
-        options.component = resolved.pascalName;
-      } else {
-        throw createError({
-          statusCode: 500,
-          message: `Community template "${resolved.pascalName}" must be ejected before production use. Run: npx nuxt-og-image eject ${resolved.pascalName}
-  No app components found \u2014 create one in components/OgImage/`
-        });
-      }
-    }
+  if (resolved.category === "community" && !import.meta.dev) {
+    throw createError({
+      statusCode: 500,
+      message: `[Nuxt OG Image] Community template "${resolved.pascalName}" is not ejected, and production builds do not include community templates. Run: npx nuxt-og-image eject ${stripRenderer(resolved.pascalName)}.${resolved.renderer}`
+    });
   }
   return {
     options,