nuxt-og-image 5.1.10 → 5.1.12

package/dist/runtime/server/og-image/satori/plugins/nuxt-icon.js

@@ -0,0 +1,20 @@
+import { logger } from "../../../util/logger.js";
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "span" && node.props?.class?.includes("iconify"),
+    transform: (node, e) => {
+      if (import.meta.dev) {
+        logger.warn(`When using the Nuxt Icon components in \`${e.options.component}\` you must provide \`mode="svg"\` to ensure correct rendering.`);
+      }
+    }
+  },
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => node.type === "svg" && node.props?.class?.includes("iconify"),
+    transform: (node) => {
+      node.props.class = String(node.props.class).split(" ").filter((c) => !c.startsWith("iconify")).join(" ");
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/plugins/unocss.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/unocss.js

@@ -0,0 +1,55 @@
+import { defineSatoriTransformer } from "../utils.js";
+function safeSplit(s) {
+  const [key, value] = s.split(":");
+  return [String(key || "").trim(), String(value || "").trim()];
+}
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class,
+  transform: async (node, ctx) => {
+    const classes = node.props.class || "";
+    const styles = node.props.style || {};
+    const replacedClasses = /* @__PURE__ */ new Set();
+    for (const token of classes.split(" ").filter((c) => c.trim())) {
+      const parsedToken = await ctx.unocss.parseToken(token);
+      if (parsedToken) {
+        const inlineStyles = String(parsedToken?.[0]?.[2]).split(";").filter((s) => !!s?.trim());
+        const vars = {
+          "--color-gray-50": "249 250 251",
+          "--color-gray-100": "243 244 246",
+          "--color-gray-200": "229 231 235",
+          "--color-gray-300": "209 213 219",
+          "--color-gray-400": "156 163 175",
+          "--color-gray-500": "107 114 128",
+          "--color-gray-600": "75 85 99",
+          "--color-gray-700": "55 65 81",
+          "--color-gray-800": "31 41 55",
+          "--color-gray-900": "17 24 39",
+          "--color-gray-950": "3 7 18"
+        };
+        inlineStyles.filter((s) => s.startsWith("--")).forEach((s) => {
+          const [key, value] = safeSplit(s);
+          vars[key] = value;
+        });
+        inlineStyles.filter((s) => !s.startsWith("--")).forEach((s) => {
+          const [key, value] = safeSplit(s);
+          const camelCasedKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          if (!styles[camelCasedKey])
+            styles[camelCasedKey] = value.replace(/var\((.*?)\)/g, (_, k) => vars[k.trim()]);
+          if (styles[camelCasedKey] && styles[camelCasedKey].includes("/")) {
+            const [rgb, opacity] = styles[camelCasedKey].split("/");
+            if (rgb && opacity) {
+              if (opacity.trim() === "1)")
+                styles[camelCasedKey] = rgb.replace(/(\d+) (\d+) (\d+).*/, (_, r, g, b) => `${r}, ${g}, ${b})`);
+              else
+                styles[camelCasedKey] = `${rgb.replace("rgb", "rgba").replaceAll(" ", ", ")}${opacity.trim()}`;
+            }
+          }
+        });
+        replacedClasses.add(token);
+      }
+    }
+    node.props.class = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.tw = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.style = styles;
+  }
+});

package/dist/runtime/server/og-image/satori/renderer.d.ts

@@ -0,0 +1,4 @@
+import type { OgImageRenderEventContext, Renderer } from '../../../types.js';
+export declare function createSvg(event: OgImageRenderEventContext): Promise<string | void>;
+declare const SatoriRenderer: Renderer;
+export default SatoriRenderer;

package/dist/runtime/server/og-image/satori/renderer.js

@@ -0,0 +1,123 @@
+import { fontCache } from "#og-image-cache";
+import { theme } from "#og-image-virtual/unocss-config.mjs";
+import compatibility from "#og-image/compatibility";
+import { defu } from "defu";
+import { sendError } from "h3";
+import { normaliseFontInput } from "../../../shared.js";
+import { useOgImageRuntimeConfig } from "../../utils.js";
+import { loadFont } from "./font.js";
+import { useResvg, useSatori, useSharp } from "./instances.js";
+import { createVNodes } from "./vnodes.js";
+const fontPromises = {};
+async function resolveFonts(event) {
+  const { fonts } = useOgImageRuntimeConfig();
+  const normalisedFonts = normaliseFontInput([...event.options.fonts || [], ...fonts]);
+  const localFontPromises = [];
+  const preloadedFonts = [];
+  if (fontCache) {
+    for (const font of normalisedFonts) {
+      if (await fontCache.hasItem(font.cacheKey)) {
+        font.data = await fontCache.getItemRaw(font.cacheKey) || void 0;
+        preloadedFonts.push(font);
+      } else {
+        if (!fontPromises[font.cacheKey]) {
+          fontPromises[font.cacheKey] = loadFont(event, font).then(async (_font) => {
+            if (_font?.data)
+              await fontCache?.setItemRaw(_font.cacheKey, _font.data);
+            return _font;
+          });
+        }
+        localFontPromises.push(fontPromises[font.cacheKey]);
+      }
+    }
+  }
+  const awaitedFonts = await Promise.all(localFontPromises);
+  return [...preloadedFonts, ...awaitedFonts].map((_f) => {
+    return { name: _f.name, data: _f.data, style: _f.style, weight: Number(_f.weight) };
+  });
+}
+export async function createSvg(event) {
+  const { options } = event;
+  const { satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
+  const [satori, vnodes, fonts] = await Promise.all([
+    useSatori(),
+    createVNodes(event),
+    resolveFonts(event)
+  ]);
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+  const satoriOptions = defu(options.satori, _satoriOptions, {
+    fonts,
+    tailwindConfig: { theme },
+    embedFont: true,
+    width: options.width,
+    height: options.height
+  });
+  return satori(vnodes, satoriOptions).catch((err) => {
+    return sendError(event.e, err, import.meta.dev);
+  });
+}
+async function createPng(event) {
+  const { resvgOptions } = useOgImageRuntimeConfig();
+  const svg = await createSvg(event);
+  if (!svg)
+    throw new Error("Failed to create SVG");
+  const Resvg = await useResvg();
+  const resvg = new Resvg(svg, defu(
+    event.options.resvg,
+    resvgOptions
+  ));
+  const pngData = resvg.render();
+  return pngData.asPng();
+}
+async function createJpeg(event) {
+  const { sharpOptions } = useOgImageRuntimeConfig();
+  if (compatibility.sharp === false) {
+    if (import.meta.dev) {
+      throw new Error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime.");
+    } else {
+      console.error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime. Falling back to png.");
+    }
+    return createPng(event);
+  }
+  const svg = await createSvg(event);
+  if (!svg) {
+    throw new Error("Failed to create SVG for JPEG rendering.");
+  }
+  const svgBuffer = Buffer.from(svg);
+  const sharp = await useSharp().catch(() => {
+    if (import.meta.dev) {
+      throw new Error("Sharp dependency could not be loaded. Please check you have it installed and are using a compatible runtime.");
+    }
+    return null;
+  });
+  if (!sharp) {
+    console.error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime. Falling back to png.");
+    return createPng(event);
+  }
+  const options = defu(event.options.sharp, sharpOptions);
+  return sharp(svgBuffer, options).jpeg(options).toBuffer();
+}
+const SatoriRenderer = {
+  name: "satori",
+  supportedFormats: ["png", "jpeg", "jpg", "json"],
+  async createImage(e) {
+    switch (e.extension) {
+      case "png":
+        return createPng(e);
+      case "jpeg":
+      case "jpg":
+        return createJpeg(e);
+    }
+  },
+  async debug(e) {
+    const [vnodes, svg] = await Promise.all([
+      createVNodes(e),
+      createSvg(e)
+    ]);
+    return {
+      vnodes,
+      svg
+    };
+  }
+};
+export default SatoriRenderer;

package/dist/runtime/server/og-image/satori/transforms/emojis.d.ts

@@ -0,0 +1,3 @@
+import type { NuxtIslandResponse } from 'nuxt/app';
+import type { OgImageRenderEventContext } from '../../../../types.js';
+export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<string | boolean>;