nuxt-og-image 3.0.0-rc.9 → 3.0.1

package/dist/runtime/nitro/og-image/satori/plugins/imageSrc.js

@@ -0,0 +1,89 @@
+import { useNitroOrigin, useStorage } from "#imports";
+import sizeOf from "image-size";
+import { withBase } from "ufo";
+import { toBase64Image } from "../../../../pure.js";
+import { logger } from "../../../util/logger.js";
+import { defineSatoriTransformer } from "../utils.js";
+async function resolveLocalFilePathImage(publicStoragePath, src) {
+  const key = `${publicStoragePath}${src.replace("./", ":").replace("/", ":")}`;
+  if (await useStorage().hasItem(key))
+    return await useStorage().getItemRaw(key);
+}
+export default defineSatoriTransformer([
+  // fix <img src="">
+  {
+    filter: (node) => node.type === "img" && node.props?.src,
+    transform: async (node, { e, publicStoragePath }) => {
+      const src = node.props.src;
+      const isRelative = src.startsWith("/");
+      let dimensions;
+      let imageBuffer;
+      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 (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src);
+        } else {
+          imageBuffer = await e.$fetch(src, {
+            baseURL: useNitroOrigin(e),
+            responseType: "arrayBuffer"
+          }).catch(() => {
+          });
+        }
+        if (imageBuffer)
+          node.props.src = toBase64Image(imageBuffer);
+      } else if (!src.startsWith("data:")) {
+        imageBuffer = await $fetch(src, {
+          responseType: "arrayBuffer"
+        }).catch(() => {
+        });
+      }
+      if (imageBuffer && (!node.props.width || !node.props.height)) {
+        try {
+          const imageSize = sizeOf(imageBuffer);
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch {
+        }
+        if (dimensions?.width && dimensions?.height) {
+          const naturalAspectRatio = dimensions.width / dimensions.height;
+          if (node.props.width && !node.props.height) {
+            node.props.height = Math.round(node.props.width / naturalAspectRatio);
+          } else if (node.props.height && !node.props.width) {
+            node.props.width = Math.round(node.props.height * naturalAspectRatio);
+          } else if (!node.props.width && !node.props.height) {
+            node.props.width = dimensions.width;
+            node.props.height = dimensions.height;
+          }
+        }
+      }
+      if (typeof node.props.src === "string" && node.props.src.startsWith("/")) {
+        if (imageBuffer) {
+          node.props.src = toBase64Image(imageBuffer);
+        } else {
+          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+        }
+      }
+    }
+  },
+  // fix style="background-image: url('')"
+  {
+    filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
+    transform: async (node, { e, publicStoragePath }) => {
+      const backgroundImage = node.props.style.backgroundImage;
+      const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+      const isRelative = src?.startsWith("/");
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src);
+          if (imageBuffer) {
+            const base64 = toBase64Image(Buffer.from(imageBuffer));
+            node.props.style.backgroundImage = `url(${base64})`;
+          }
+        } else {
+          node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
+        }
+      }
+    }
+  }
+]);

package/dist/runtime/{core/renderers/satori/plugins/unocss.mjs → nitro/og-image/satori/plugins/unocss.js}

@@ -1,7 +1,7 @@
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
 import { createGenerator } from "@unocss/core";
 import presetWind from "@unocss/preset-wind";
-import { defineSatoriTransformer } from "../utils.mjs";
-import { theme } from "#nuxt-og-image/unocss-config.mjs";
+import { defineSatoriTransformer } from "../utils.js";
 const uno = createGenerator({ theme }, {
   presets: [
     presetWind()
@@ -17,7 +17,19 @@ export default defineSatoriTransformer({
       const parsedToken = await uno.parseToken(token);
       if (parsedToken) {
         const inlineStyles = parsedToken[0][2].split(";").filter((s) => !!s?.trim());
-        const vars = {};
+        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] = s.split(":");
           vars[key] = value;

package/dist/runtime/{core/renderers/satori/index.d.ts → nitro/og-image/satori/renderer.d.ts}

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

package/dist/runtime/{core/renderers/satori/index.mjs → nitro/og-image/satori/renderer.js}

@@ -1,15 +1,13 @@
-import { defu } from "defu";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { loadFont } from "../../font/fetch.mjs";
-import { fontCache, fontPromises } from "../../cache/fonts.mjs";
-import { createVNodes } from "./vnodes.mjs";
-import { useResvg, useSatori, useSharp } from "./instances.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function createSvg(event) {
-  const { options } = event;
-  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
-  const vnodes = await createVNodes(event);
-  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+import { fontCache } from "#nuxt-og-image-cache";
+import { defu } from "defu";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.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 = [];
@@ -29,16 +27,27 @@ export async function createSvg(event) {
     }
   }
   const awaitedFonts = await Promise.all(localFontPromises);
-  const satori = await useSatori();
-  return satori(vnodes, defu(options.satori, satoriOptions, {
-    fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
-      return { ..._f, weight: Number(_f.weight) };
-    }),
+  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);
 }
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();

package/dist/runtime/{core/html/applyEmojis.d.ts → nitro/og-image/satori/transforms/emojis.d.ts}

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