nuxt-og-image 6.5.2 → 6.6.0

package/dist/devtools/pages/og-image/templates.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { withQuery } from 'ufo'
+import { navigateTo } from '#imports'
+import { useOgImage } from '../../lib/og-image/og-image'
+
+const {
+  appComponents,
+  communityComponents,
+  activeComponentName,
+  src,
+  aspectRatio,
+  isLoading,
+  patchOptions,
+} = useOgImage()
+
+async function selectTemplate(componentName: string) {
+  patchOptions({ component: componentName })
+  await navigateTo('/')
+}
+</script>
+
+<template>
+  <div class="templates-page animate-fade-up">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner" />
+      <p class="loading-text">
+        Loading templates&#8230;
+      </p>
+    </div>
+
+    <!-- Content -->
+    <div v-else class="templates-content stagger-children">
+      <!-- Your Templates -->
+      <DevtoolsSection v-if="appComponents.length" icon="carbon:app" text="Your Templates">
+        <template #description>
+          Custom OG Image components in your project
+        </template>
+        <div class="template-grid">
+          <button
+            v-for="name in appComponents"
+            :key="name.pascalName"
+            class="template-item"
+            @click="selectTemplate(name.pascalName)"
+          >
+            <TemplateComponentPreview
+              :component="name"
+              :src="withQuery(src, { component: name.pascalName })"
+              :aspect-ratio="aspectRatio"
+              :active="name.pascalName === activeComponentName"
+            />
+          </button>
+        </div>
+      </DevtoolsSection>
+
+      <!-- Community Templates -->
+      <DevtoolsSection icon="carbon:user-multiple" text="Community Templates">
+        <template #description>
+          Pre-built templates you can use or eject
+        </template>
+        <div class="template-grid">
+          <button
+            v-for="name in communityComponents"
+            :key="name.pascalName"
+            class="template-item"
+            @click="selectTemplate(name.pascalName)"
+          >
+            <TemplateComponentPreview
+              :component="name"
+              :src="withQuery(src, { component: name.pascalName })"
+              :aspect-ratio="aspectRatio"
+              :active="name.pascalName === activeComponentName"
+            />
+          </button>
+        </div>
+      </DevtoolsSection>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.templates-page {
+  padding-bottom: 2rem;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--seo-green);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.templates-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.template-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .template-grid {
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1.25rem;
+  }
+}
+
+.template-item {
+  padding: 0;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.template-item:hover {
+  transform: translateY(-2px);
+}
+
+.template-item:active {
+  transform: translateY(0);
+}
+</style>

package/dist/devtools/pages/og-image.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { OgImageRuntimeConfig } from '../lib/og-image/runtime-types'
+import type { GlobalDebugResponse, PathDebugResponse } from '../lib/og-image/types'
+import defu from 'defu'
+import { appFetch } from 'nuxtseo-layer-devtools/composables/rpc'
+import { loadShiki } from 'nuxtseo-layer-devtools/composables/shiki'
+import { path, productionUrl, query, refreshTime } from 'nuxtseo-layer-devtools/composables/state'
+import { computed, provide, useAsyncData, useNuxtApp, useRoute, watch } from '#imports'
+import AddComponentDialog from '../components/og-image/AddComponentDialog.vue'
+import CreateOgImageDialog from '../components/og-image/CreateOgImageDialog.vue'
+import RendererSelectModal from '../components/og-image/RendererSelectModal.vue'
+import { GlobalDebugKey, PathDebugKey, PathDebugStatusKey, RefetchPathDebugKey } from '../lib/og-image/keys'
+import { useOgImage } from '../lib/og-image/og-image'
+import { encodeOgImageParams } from '../lib/og-image/shared/urlEncoding'
+import { ogImageKey, options, optionsOverrides } from '../lib/og-image/util/logic'
+
+const RE_IMAGE_EXT = /\.(png|jpeg|jpg|webp)$/
+
+await loadShiki()
+
+const nuxtApp = useNuxtApp()
+nuxtApp.payload.data = nuxtApp.payload.data || {}
+
+// @ts-expect-error untyped
+const { data: globalDebug } = useAsyncData<GlobalDebugResponse>('og-image-global-debug', () => {
+  if (!appFetch.value)
+    return { runtimeConfig: {} as OgImageRuntimeConfig, componentNames: [] }
+  return appFetch.value('/_og/debug.json')
+}, {
+  watch: [appFetch, refreshTime],
+  default: () => ({ runtimeConfig: {} as OgImageRuntimeConfig, componentNames: [] }),
+})
+
+// Read og:image URL from host document — already has correct component/params from defineOgImage
+function getHostOgImageDebugUrl(): string | undefined {
+  try {
+    const doc = window.parent?.document
+    if (!doc)
+      return
+    const meta = doc.querySelector('meta[property="og:image"]') || doc.querySelector('meta[name="twitter:image"]')
+    const content = meta?.getAttribute('content')
+    if (!content?.includes('/_og/'))
+      return
+    return new URL(content).pathname.replace(RE_IMAGE_EXT, '.json')
+  }
+  catch {
+    // Cross-origin parent documents cannot be inspected; fall back to route options.
+  }
+}
+
+const { data: pathDebug, refresh: refreshPathDebug, status: pathDebugStatus } = useAsyncData<PathDebugResponse>('og-image-path-debug', async () => {
+  if (!appFetch.value)
+    return { extract: { options: [], socialPreview: { root: {}, images: [] } } }
+  let url = getHostOgImageDebugUrl()
+  if (!url) {
+    const params = defu(
+      { key: ogImageKey.value || 'og', _path: path.value, _query: query.value },
+      optionsOverrides.value,
+      options.value,
+    )
+    const encoded = encodeOgImageParams(params)
+    url = `/_og/d/${encoded || 'default'}.json`
+  }
+  return (appFetch.value(url) as Promise<PathDebugResponse>).catch((err: any): PathDebugResponse => ({
+    extract: { options: [], socialPreview: { root: {}, images: [] } },
+    fetchError: {
+      statusCode: err?.data?.statusCode || err?.statusCode,
+      message: err?.data?.stack?.[0] || err?.data?.message || err?.message || 'Unknown error',
+      stack: err?.data?.stack,
+    },
+  }))
+}, {
+  watch: [appFetch, path, refreshTime, ogImageKey],
+  default: () => ({ extract: { options: [], socialPreview: { root: {}, images: [] } } }),
+})
+
+// Sync production URL from site config for production preview toggle
+watch(globalDebug, (val) => {
+  // @ts-expect-error globalDebug type doesn't include siteConfigUrl
+  if (val?.siteConfigUrl)
+    // @ts-expect-error globalDebug type doesn't include siteConfigUrl
+    productionUrl.value = val.siteConfigUrl
+}, { immediate: true })
+
+// @ts-expect-error untyped
+provide(GlobalDebugKey, globalDebug)
+provide(PathDebugKey, pathDebug)
+provide(PathDebugStatusKey, pathDebugStatus)
+provide(RefetchPathDebugKey, refreshPathDebug)
+
+const {
+  isDebugLoading,
+  error,
+  refreshSources,
+  resetProps,
+} = useOgImage()
+
+await resetProps(false)
+
+const route = useRoute()
+const currentTab = computed(() => {
+  const p = route.path
+  if (p === '/og-image/templates')
+    return 'templates'
+  if (p === '/og-image/debug')
+    return 'debug'
+  if (p === '/og-image/docs')
+    return 'docs'
+  return 'design'
+})
+
+const navItems = [
+  { value: 'design', to: '/og-image', icon: 'carbon:brush-freehand', label: 'Design', devOnly: false },
+  { value: 'templates', to: '/og-image/templates', icon: 'carbon:image', label: 'Templates', devOnly: false },
+  { value: 'debug', to: '/og-image/debug', icon: 'carbon:debug', label: 'Debug', devOnly: true },
+  { value: 'docs', to: '/og-image/docs', icon: 'carbon:book', label: 'Docs', devOnly: false },
+]
+
+const runtimeVersion = computed(() => {
+  // @ts-expect-error untyped
+  return globalDebug.value?.runtimeConfig?.version || 'unknown'
+})
+</script>
+
+<template>
+  <DevtoolsLayout
+    module-name="nuxt-og-image"
+    title="OG Image"
+    icon="carbon:image-search"
+    :version="runtimeVersion"
+    :nav-items="navItems"
+    github-url="https://github.com/nuxt-modules/og-image"
+    :loading="isDebugLoading || !!error"
+    :active-tab="currentTab"
+    @refresh="refreshSources"
+  >
+    <AddComponentDialog />
+    <CreateOgImageDialog />
+    <RendererSelectModal />
+    <NuxtPage />
+  </DevtoolsLayout>
+</template>
+
+<style>
+/* Textarea */
+textarea {
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+textarea:focus-visible {
+  border-color: var(--seo-green);
+  outline: none;
+}
+
+/* JSON Editor theme */
+:root {
+  --jse-theme-color: var(--color-surface-elevated) !important;
+  --jse-text-color-inverse: var(--color-text-muted) !important;
+  --jse-theme-color-highlight: var(--color-surface-sunken) !important;
+  --jse-panel-background: var(--color-surface-elevated) !important;
+  --jse-background-color: var(--jse-panel-background) !important;
+  --jse-error-color: oklch(65% 0.2 25 / 0.3) !important;
+  --jse-main-border: none !important;
+}
+
+.dark,
+.jse-theme-dark {
+  --jse-panel-background: var(--color-neutral-900) !important;
+  --jse-theme-color: var(--color-neutral-900) !important;
+  --jse-text-color-inverse: var(--color-neutral-300) !important;
+  --jse-main-border: none !important;
+}
+
+.jse-main {
+  min-height: 1em !important;
+}
+
+.jse-contents {
+  border-width: 0 !important;
+  border-radius: var(--radius-md) !important;
+}
+</style>

package/dist/module.cjs

@@ -10,7 +10,7 @@ require('ohash');
 require('pathe');
 require('pkg-types');
 require('std-env');
-const module$1 = require('./shared/nuxt-og-image.CgPzmzQY.cjs');
+const module$1 = require('./shared/nuxt-og-image.CfTPCtaS.cjs');
 require('nuxtseo-shared/kit');
 require('../dist/runtime/logger.js');
 require('node:crypto');

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.16.0"
   },
   "configKey": "ogImage",
-  "version": "6.5.2",
+  "version": "6.6.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'ohash';
 import 'pathe';
 import 'pkg-types';
 import 'std-env';
-export { m as default } from './shared/nuxt-og-image.DGAMxBol.mjs';
+export { m as default } from './shared/nuxt-og-image.DdbTs-xp.mjs';
 import 'nuxtseo-shared/kit';
 import '../dist/runtime/logger.js';
 import 'node:crypto';

package/dist/runtime/server/og-image/core/plugins/imageSrc.js

@@ -120,8 +120,8 @@ export default defineTransformer([
       let src = node.props.src;
       if (src.startsWith("data:"))
         return;
-      if (src.endsWith(".webp")) {
-        logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the chromium renderer.", src);
+      if (ctx.renderer.name === "satori" && src.endsWith(".webp")) {
+        logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the takumi or browser renderer.", src);
       }
       const isRelative = src.startsWith("/");
       if (!isRelative)

package/dist/runtime/server/og-image/core/style-attr.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Parse an inline `style="..."` attribute value into a camelCase property map
+ * suitable for handing to Satori / Takumi.
+ *
+ * Kept in a leaf module (no nitro / h3 imports) so it can be unit-tested
+ * directly without pulling the full runtime bundle.
+ */
+export declare function parseStyleAttr(style: string | null | undefined): Record<string, any> | undefined;

package/dist/runtime/server/og-image/core/style-attr.js

@@ -0,0 +1,34 @@
+import { splitCssDeclarations } from "../utils/css.js";
+const RE_KEBAB_SEGMENT = /-([a-z])/g;
+const RE_CSS_QUOTES = /^['"](.+)['"]$/;
+const RE_IMPORTANT = /\s*!important\s*$/;
+const RE_HTML_ENTITY = /&(?:amp|quot|#39|#x27);/g;
+const HTML_ENTITY_MAP = {
+  "&": "&",
+  """: '"',
+  "'": "'",
+  "'": "'"
+};
+function camelCase(str) {
+  return str.replace(RE_KEBAB_SEGMENT, (_, c) => c.toUpperCase());
+}
+function decodeHtmlEntities(value) {
+  return value.replace(RE_HTML_ENTITY, (m) => HTML_ENTITY_MAP[m] ?? m);
+}
+export function parseStyleAttr(style) {
+  if (!style)
+    return void 0;
+  const result = {};
+  for (const decl of splitCssDeclarations(decodeHtmlEntities(style))) {
+    const colonIdx = decl.indexOf(":");
+    if (colonIdx === -1)
+      continue;
+    const prop = decl.slice(0, colonIdx).trim();
+    const val = decl.slice(colonIdx + 1).trim();
+    if (prop && val) {
+      const cleanVal = val.replace(RE_IMPORTANT, "");
+      result[camelCase(prop)] = prop === "font-family" ? cleanVal.replace(RE_CSS_QUOTES, "$1") : cleanVal;
+    }
+  }
+  return Object.keys(result).length ? result : void 0;
+}

package/dist/runtime/server/og-image/core/vnodes.d.ts

@@ -1,5 +1,7 @@
 import type { ElementNode } from 'ultrahtml';
 import type { OgImageRenderEventContext, VNode } from '../../../types.js';
+import { parseStyleAttr } from './style-attr.js';
+export { parseStyleAttr };
 export declare const SVG_CAMEL_ATTR_VALUES: Set<string>;
 /**
  * Resolve an SVG element's width or height from multiple sources:
@@ -11,7 +13,6 @@ export declare const SVG_CAMEL_ATTR_VALUES: Set<string>;
  * can fall back to ancestor or renderer-specific resolution.
  */
 export declare function resolveSvgDimension(props: Record<string, any>, style: Record<string, any> | undefined, key: 'width' | 'height'): number | undefined;
-export declare function parseStyleAttr(style: string | null | undefined): Record<string, any> | undefined;
 export declare function elementToVNode(el: ElementNode): VNode;
 export declare function htmlToVNode(html: string): VNode;
 export declare function warnUnsupportedSvgElements(vnode: VNode, component?: string): void;

package/dist/runtime/server/og-image/core/vnodes.js

@@ -1,22 +1,16 @@
 import { ELEMENT_NODE, parse, TEXT_NODE } from "ultrahtml";
 import { querySelector } from "ultrahtml/selector";
-import { decodeHtml, htmlDecodeQuotes } from "../../util/encoding.js";
+import { decodeHtml } from "../../util/encoding.js";
 import { fetchIsland } from "../../util/kit.js";
 import { logger } from "../../util/logger.js";
-import { splitCssDeclarations } from "../utils/css.js";
 import { walkTree } from "./plugins.js";
 import encoding from "./plugins/encoding.js";
 import imageSrc from "./plugins/imageSrc.js";
 import styleDirectives from "./plugins/styleDirectives.js";
+import { parseStyleAttr } from "./style-attr.js";
 import { applyEmojis } from "./transforms/emojis/index.js";
-const RE_KEBAB_SEGMENT = /-([a-z])/g;
-const RE_AMP_ENTITY = /&/g;
-const RE_CSS_QUOTES = /^['"](.+)['"]$/;
-const RE_IMPORTANT = /\s*!important\s*$/;
+export { parseStyleAttr };
 const RE_BODY_CONTENT = /<body>([\s\S]*)<\/body>/;
-function camelCase(str) {
-  return str.replace(RE_KEBAB_SEGMENT, (_, c) => c.toUpperCase());
-}
 const SVG_CAMEL_ATTRS = {
   viewbox: "viewBox",
   preserveaspectratio: "preserveAspectRatio",
@@ -94,23 +88,6 @@ export function resolveSvgDimension(props, style, key) {
     }
   }
 }
-export function parseStyleAttr(style) {
-  if (!style)
-    return void 0;
-  const result = {};
-  for (const decl of splitCssDeclarations(style.replace(RE_AMP_ENTITY, "&"))) {
-    const colonIdx = decl.indexOf(":");
-    if (colonIdx === -1)
-      continue;
-    const prop = decl.slice(0, colonIdx).trim();
-    const val = decl.slice(colonIdx + 1).trim();
-    if (prop && val) {
-      const cleanVal = val.replace(RE_IMPORTANT, "");
-      result[camelCase(prop)] = prop === "font-family" ? cleanVal.replace(RE_CSS_QUOTES, "$1") : cleanVal;
-    }
-  }
-  return Object.keys(result).length ? result : void 0;
-}
 export function elementToVNode(el) {
   const props = {};
   const { style, ...attrs } = el.attributes;
@@ -180,7 +157,6 @@ export async function createVNodes(ctx, options) {
   if (!html) {
     const islandTimeout = ctx.runtimeConfig.security?.renderTimeout ?? 15e3;
     const island = await ctx.timings.measure("island-fetch", () => fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options, islandTimeout));
-    island.html = htmlDecodeQuotes(island.html);
     await applyEmojis(ctx, island);
     html = island.html;
     if (html?.includes("<body>")) {

package/dist/shared/{nuxt-og-image.CgPzmzQY.cjs → nuxt-og-image.CfTPCtaS.cjs}

@@ -3125,7 +3125,6 @@ const RE_SVG_ID_ATTR = /\bid="([^"]+)"/g;
 const RE_SVG_VIEWBOX = /viewBox="([^"]*)"/;
 const RE_SVG_BODY = /<svg[^>]*>([\s\S]*)<\/svg>/;
 const RE_OG_IMAGE_QUERY$1 = /\?og-image(?:-depth=\d+)?$/;
-const RE_TEMPLATE_CONTENT = /<template>([\s\S]*?)<\/template>/;
 const RE_TEXT_BETWEEN_TAGS = />([^<]*)</g;
 const RE_SPECIAL_REGEX_CHARS = /[.*+?^${}()|[\]\\]/g;
 const RE_WRAPPER_DIV_START = /^<div>/;
@@ -3137,7 +3136,6 @@ const RE_DATA_ATTR = /\bdata-([\w-]+)="([^"]*)"/g;
 const RE_DYNAMIC_DATA_THEME = /\s:data-theme="[^"]+"/;
 const RE_COLOR_ATTR_NAME = /^(?:color|fill|stroke|flood-color|lighting-color|stop-color)$/;
 const RE_NON_STYLE_VAR_ATTR = /\b(?!style|class)([a-zA-Z-]+)="([^"]*var\(--[^"]+)"/g;
-const RE_QUOTED_ATTR = /^([a-z-]+)="(.*)"$/i;
 const RE_COLOR_PROP_NAME = /color|fill|stroke|background|border|outline|shadow|accent|caret/;
 const RE_STYLE_VAR_ATTR = /\bstyle="([^"]*var\(--[^"]+)"/g;
 const RE_INLINE_STYLE = /\bstyle="([^"]*)"/g;
@@ -3187,11 +3185,11 @@ function buildIconSvg(iconData, defaultWidth, defaultHeight, attrs) {
       existingStyle = value;
       continue;
     }
-    filteredAttrs.push(`${key}="${value}"`);
+    filteredAttrs.push(`${key}="${escapeAttrValue(value)}"`);
   }
   const attrsStr = filteredAttrs.length > 0 ? ` ${filteredAttrs.join(" ")}` : "";
   const mergedStyle = existingStyle ? `display:flex; ${existingStyle}` : "display:flex";
-  let svg = `<span${attrsStr} style="${mergedStyle}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="100%" height="100%" fill="currentColor">${body}</svg></span>`;
+  let svg = `<span${attrsStr} style="${escapeAttrValue(mergedStyle)}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="100%" height="100%" fill="currentColor">${body}</svg></span>`;
   svg = makeIdsUnique(svg);
   return svg;
 }
@@ -3343,6 +3341,21 @@ function mergeThemePairs(classes, light, dark) {
   }
   return result;
 }
+function getOuterTemplateBounds(code) {
+  let descriptor;
+  try {
+    descriptor = compilerSfc.parse(code).descriptor;
+  } catch {
+    return void 0;
+  }
+  const template = descriptor.template;
+  if (!template)
+    return void 0;
+  return {
+    templateStart: template.loc.start.offset,
+    templateEnd: template.loc.end.offset
+  };
+}
 const AssetTransformPlugin = unplugin.createUnplugin((options) => {
   let emojiIcons = null;
   return {
@@ -3359,12 +3372,11 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
       const id = rawId.replace(RE_OG_IMAGE_QUERY$1, "");
       if (rawId.includes("?og-image"))
         options.onNestedTransform?.(id);
-      const templateMatch = code.match(RE_TEMPLATE_CONTENT);
-      if (!templateMatch)
+      const bounds = getOuterTemplateBounds(code);
+      if (!bounds)
         return;
       const s = new MagicString__default(code);
-      const templateStart = code.indexOf("<template>") + "<template>".length;
-      const templateEnd = code.indexOf("</template>");
+      const { templateStart, templateEnd } = bounds;
       let template = code.slice(templateStart, templateEnd);
       let hasChanges = false;
       if (options.emojiSet && emojiUtils_js.RE_MATCH_EMOJIS.test(template)) {
@@ -3551,10 +3563,11 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
             }
           });
           if (result) {
-            const newTemplateStart = result.code.indexOf("<template>") + "<template>".length;
-            const newTemplateEnd = result.code.indexOf("</template>");
-            template = result.code.slice(newTemplateStart, newTemplateEnd);
-            hasChanges = true;
+            const newBounds = getOuterTemplateBounds(result.code);
+            if (newBounds) {
+              template = result.code.slice(newBounds.templateStart, newBounds.templateEnd);
+              hasChanges = true;
+            }
           }
         } catch (err) {
           const componentName = id.split("/").pop();
@@ -3578,16 +3591,16 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
           template.replace(RE_NON_STYLE_VAR_ATTR, (match, attr, value) => {
             const resolved = resolveCssVars(value, vars);
             if (resolved !== value) {
-              replacements.push({ from: match, to: `${attr}="${resolved}"` });
+              replacements.push({ from: match, to: "", attr, value: resolved });
             }
             return match;
           });
           for (const r of replacements) {
-            const attrMatch = r.to.match(RE_QUOTED_ATTR);
-            if (attrMatch?.[1] && attrMatch[2] !== void 0 && RE_COLOR_ATTR_NAME.test(attrMatch[1])) {
-              const downleveled = await downlevelColor(attrMatch[1], attrMatch[2]);
-              r.to = `${attrMatch[1]}="${downleveled}"`;
+            let value = r.value;
+            if (RE_COLOR_ATTR_NAME.test(r.attr)) {
+              value = await downlevelColor(r.attr, value);
             }
+            r.to = `${r.attr}="${escapeAttrValue(value)}"`;
             template = template.replace(r.from, r.to);
             hasChanges = true;
           }
@@ -3596,12 +3609,11 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
           template.replace(RE_STYLE_VAR_ATTR, (match, styleValue) => {
             const resolved = resolveCssVars(styleValue, vars);
             if (resolved !== styleValue)
-              styleReplacements.push({ from: match, to: `style="${resolved}"` });
+              styleReplacements.push({ from: match, content: resolved });
             return match;
           });
           for (const r of styleReplacements) {
-            const styleContent = r.to.slice('style="'.length, -1);
-            const declarations = styleContent.split(";").filter(Boolean);
+            const declarations = r.content.split(";").filter(Boolean);
             const downleveled = [];
             for (const decl of declarations) {
               const colonIdx = decl.indexOf(":");
@@ -3618,8 +3630,8 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
               }
               downleveled.push(`${prop}: ${value}`);
             }
-            r.to = `style="${downleveled.join("; ")}"`;
-            template = template.replace(r.from, r.to);
+            const to = `style="${escapeAttrValue(downleveled.join("; "))}"`;
+            template = template.replace(r.from, to);
             hasChanges = true;
           }
           RE_DYNAMIC_STYLE_VAR.lastIndex = 0;
@@ -3719,7 +3731,9 @@ const AssetTransformPlugin = unplugin.createUnplugin((options) => {
                     existingProps[prop.trim()] = value;
                 }
                 const merged = { ...matchedStyles, ...existingProps };
-                el.attributes.style = Object.entries(merged).map(([p, v]) => `${p}:${v}`).join(";");
+                el.attributes.style = escapeAttrValue(
+                  Object.entries(merged).map(([p, v]) => `${p}:${v}`).join(";")
+                );
                 const remaining = elClasses.filter((c) => !consumedClasses.has(c));
                 if (remaining.length > 0)
                   el.attributes.class = remaining.join(" ");
@@ -4699,7 +4713,7 @@ const module$1 = kit.defineNuxtModule({
     await onUpgrade(nuxt, options, previousVersion);
   },
   async setup(config, nuxt) {
-    const _resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/nuxt-og-image.CgPzmzQY.cjs', document.baseURI).href)));
+    const _resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/nuxt-og-image.CfTPCtaS.cjs', document.baseURI).href)));
     const fixSharedPath = (p) => {
       return p.replace(/\/shared\/runtime(\/|$)/, "/runtime$1").replace(/\/shared\/client(\/|$)/, "/client$1").replace(/\/shared\/devtools(\/|$)/, "/devtools$1");
     };