nuxt-og-image 5.1.4 → 5.1.5

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

@@ -6,6 +6,7 @@ import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js"
 import { loadFont } from "./font.js";
 import { useResvg, useSatori, useSharp } from "./instances.js";
 import { createVNodes } from "./vnodes.js";
+import compatibility from "#og-image/compatibility";
 const fontPromises = {};
 async function resolveFonts(event) {
   const { fonts } = useOgImageRuntimeConfig();
@@ -67,9 +68,31 @@ async function createPng(event) {
 }
 async function createJpeg(event) {
   const { sharpOptions } = useOgImageRuntimeConfig();
-  const png = await createPng(event);
-  const sharp = await useSharp();
-  return sharp(png, defu(event.options.sharp, sharpOptions)).jpeg().toBuffer();
+  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",

package/dist/runtime/server/og-image/satori/transforms/inlineCss.js

@@ -4,8 +4,8 @@ import { useCssInline } from "../instances.js";
 export async function applyInlineCss(ctx, island) {
   const { e } = ctx;
   let html = island.html;
-  let css = island.head.style.map((s) => s.innerHTML).filter(Boolean).join("\n");
-  const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components") && l.href.replaceAll("/", "").includes(ctx.options.component));
+  let css = island.head.style?.map((s) => s.innerHTML).filter(Boolean).join("\n") || "";
+  const componentInlineStyles = island.head.link?.filter((l) => l.href.startsWith("/_nuxt/components") && l.href.replaceAll("/", "").includes(ctx.options.component)) || [];
   if (!import.meta.prerender && !componentInlineStyles.length) {
     return false;
   }

package/dist/runtime/types.d.ts

@@ -7,7 +7,7 @@ import type { NitroOptions } from 'nitropack';
 import type { NitroApp } from 'nitropack/types';
 import type { SatoriOptions } from 'satori';
 import type { html } from 'satori-html';
-import type { SharpOptions } from 'sharp';
+import type { JpegOptions, SharpOptions } from 'sharp';
 import type { Ref } from 'vue';
 export interface OgImageRenderEventContext {
     unocss: UnoGenerator;
@@ -116,7 +116,7 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     resvg?: ResvgRenderOptions;
     satori?: SatoriOptions;
     screenshot?: Partial<ScreenshotOptions>;
-    sharp?: SharpOptions;
+    sharp?: SharpOptions & JpegOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "5.1.4",
+  "version": "5.1.5",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -49,15 +49,15 @@
   },
   "dependencies": {
     "@nuxt/devtools-kit": "^2.4.1",
-    "@nuxt/kit": "^3.17.3",
+    "@nuxt/kit": "^3.17.4",
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@unocss/core": "^66.1.2",
-    "@unocss/preset-wind3": "^66.1.2",
+    "@unocss/core": "^66.1.3",
+    "@unocss/preset-wind3": "^66.1.3",
     "chrome-launcher": "^1.2.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
-    "execa": "^9.5.3",
+    "execa": "^9.6.0",
     "image-size": "^2.0.2",
     "magic-string": "^0.30.17",
     "mocked-exports": "^0.1.1",
@@ -69,18 +69,18 @@
     "pkg-types": "^2.1.0",
     "playwright-core": "^1.52.0",
     "radix3": "^1.1.2",
-    "satori": "^0.13.1",
+    "satori": "^0.13.2",
     "satori-html": "^0.3.2",
     "sirv": "^3.0.1",
     "std-env": "^3.9.0",
     "strip-literal": "^3.0.0",
     "ufo": "^1.6.1",
-    "unplugin": "^2.3.4",
+    "unplugin": "^2.3.5",
     "unwasm": "^0.3.9",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.13.1",
+    "@antfu/eslint-config": "^4.13.2",
     "@css-inline/css-inline": "^0.14.3",
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/carbon": "^1.2.8",
@@ -88,33 +88,33 @@
     "@iconify-json/noto": "^1.2.3",
     "@iconify-json/ri": "^1.2.5",
     "@iconify-json/tabler": "^1.2.18",
-    "@img/sharp-linux-x64": "^0.34.1",
+    "@img/sharp-linux-x64": "^0.34.2",
     "@nuxt/content": "^3.5.1",
     "@nuxt/devtools": "^2.4.1",
     "@nuxt/devtools-ui-kit": "^2.4.1",
     "@nuxt/icon": "^1.13.0",
     "@nuxt/image": "^1.10.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.0",
-    "@nuxt/ui": "^3.1.2",
+    "@nuxt/test-utils": "^3.19.1",
+    "@nuxt/ui": "^3.1.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/i18n": "^9.5.4",
+    "@nuxtjs/i18n": "^9.5.5",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "@unocss/nuxt": "^66.1.2",
-    "@unocss/preset-icons": "^66.1.2",
-    "@unocss/runtime": "^66.1.2",
-    "@vueuse/nuxt": "^13.2.0",
+    "@unocss/nuxt": "^66.1.3",
+    "@unocss/preset-icons": "^66.1.3",
+    "@unocss/runtime": "^66.1.3",
+    "@vueuse/nuxt": "^13.3.0",
     "bumpp": "^10.1.1",
-    "eslint": "9.25.1",
-    "jest-image-snapshot": "^6.5.0",
-    "nuxt": "^3.17.3",
+    "eslint": "9.28.0",
+    "jest-image-snapshot": "^6.5.1",
+    "nuxt": "^3.17.4",
     "playwright": "^1.52.0",
-    "sass": "^1.89.0",
-    "sharp": "^0.34.1",
+    "sass": "^1.89.1",
+    "sharp": "^0.34.2",
     "typescript": "^5.8.3",
-    "unocss": "^66.1.2",
-    "vitest": "^3.1.3",
+    "unocss": "^66.1.3",
+    "vitest": "^3.2.0",
     "vue-tsc": "^2.2.10"
   },
   "scripts": {

package/dist/client/_nuxt/builds/meta/dev.json

@@ -1 +0,0 @@
-{"id":"dev","timestamp":1747715432208,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/_nuxt/builds/meta/e8cf65e2-e6ce-426c-84bd-d6a74b10ae7a.json

@@ -1 +0,0 @@
-{"id":"e8cf65e2-e6ce-426c-84bd-d6a74b10ae7a","timestamp":1747715432026,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/_nuxt/error-404.B8Wdqtfs.css

@@ -1 +0,0 @@
-.spotlight[data-v-614499fb]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-614499fb]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-614499fb]{background-color:#ffffff4d}.gradient-border[data-v-614499fb]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-614499fb]{background-color:#1414144d}.gradient-border[data-v-614499fb]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82,#36e4da 75%,#0047e1)}}.gradient-border[data-v-614499fb]:before{background-size:400% auto;border-radius:.5rem;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;right:0;top:0;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-614499fb]:hover:before{background-position:-50% 0;opacity:1}.fixed[data-v-614499fb]{position:fixed}.left-0[data-v-614499fb]{left:0}.right-0[data-v-614499fb]{right:0}.z-10[data-v-614499fb]{z-index:10}.z-20[data-v-614499fb]{z-index:20}.grid[data-v-614499fb]{display:grid}.mb-16[data-v-614499fb]{margin-bottom:4rem}.mb-8[data-v-614499fb]{margin-bottom:2rem}.max-w-520px[data-v-614499fb]{max-width:520px}.min-h-screen[data-v-614499fb]{min-height:100vh}.w-full[data-v-614499fb]{width:100%}.flex[data-v-614499fb]{display:flex}.cursor-pointer[data-v-614499fb]{cursor:pointer}.place-content-center[data-v-614499fb]{place-content:center}.items-center[data-v-614499fb]{align-items:center}.justify-center[data-v-614499fb]{justify-content:center}.overflow-hidden[data-v-614499fb]{overflow:hidden}.bg-white[data-v-614499fb]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-4[data-v-614499fb]{padding-left:1rem;padding-right:1rem}.px-8[data-v-614499fb]{padding-left:2rem;padding-right:2rem}.py-2[data-v-614499fb]{padding-bottom:.5rem;padding-top:.5rem}.text-center[data-v-614499fb]{text-align:center}.text-8xl[data-v-614499fb]{font-size:6rem;line-height:1}.text-xl[data-v-614499fb]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-614499fb]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-614499fb]{font-weight:300}.font-medium[data-v-614499fb]{font-weight:500}.leading-tight[data-v-614499fb]{line-height:1.25}.font-sans[data-v-614499fb]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-614499fb]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-614499fb]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-614499fb]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-614499fb]{padding-left:0;padding-right:0}.sm\:px-6[data-v-614499fb]{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3[data-v-614499fb]{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-4xl[data-v-614499fb]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-614499fb]{font-size:1.25rem;line-height:1.75rem}}

package/dist/client/_nuxt/error-500.Cj9Kfu8q.css

@@ -1 +0,0 @@
-.spotlight[data-v-232a872a]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);filter:blur(20vh)}.fixed[data-v-232a872a]{position:fixed}.-bottom-1\/2[data-v-232a872a]{bottom:-50%}.left-0[data-v-232a872a]{left:0}.right-0[data-v-232a872a]{right:0}.grid[data-v-232a872a]{display:grid}.mb-16[data-v-232a872a]{margin-bottom:4rem}.mb-8[data-v-232a872a]{margin-bottom:2rem}.h-1\/2[data-v-232a872a]{height:50%}.max-w-520px[data-v-232a872a]{max-width:520px}.min-h-screen[data-v-232a872a]{min-height:100vh}.place-content-center[data-v-232a872a]{place-content:center}.overflow-hidden[data-v-232a872a]{overflow:hidden}.bg-white[data-v-232a872a]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-8[data-v-232a872a]{padding-left:2rem;padding-right:2rem}.text-center[data-v-232a872a]{text-align:center}.text-8xl[data-v-232a872a]{font-size:6rem;line-height:1}.text-xl[data-v-232a872a]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-232a872a]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-232a872a]{font-weight:300}.font-medium[data-v-232a872a]{font-weight:500}.leading-tight[data-v-232a872a]{line-height:1.25}.font-sans[data-v-232a872a]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-232a872a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-232a872a]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-232a872a]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-232a872a]{padding-left:0;padding-right:0}.sm\:text-4xl[data-v-232a872a]{font-size:2.25rem;line-height:2.5rem}}

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

@@ -1,24 +0,0 @@
-/**
- * Emoji Unicode to name mapping utilities
- *
- * This file provides utilities for converting Unicode emoji characters to their
- * corresponding Iconify icon names, using a more efficient approach than a large
- * hardcoded mapping.
- */
-export declare const EMOJI_PREFIXES: Record<string, string[]>;
-export declare const KNOWN_EMOJI_NAMES: Record<string, string>;
-/**
- * Gets possible Iconify icon names for a given Unicode emoji
- *
- * @param codePoint The Unicode code point as a hex string (e.g., "1f44b" for 👋)
- * @param emojiSet The emoji set to use (e.g., "noto")
- * @returns An array of possible icon names to try
- */
-export declare function getEmojiIconNames(codePoint: string, emojiSet: string): string[];
-/**
- * Gets the code point for a Unicode emoji character
- *
- * @param emoji The emoji character (e.g., "👋")
- * @returns Hex code point (e.g., "1f44b")
- */
-export declare function getEmojiCodePoint(emoji: string): string;

package/dist/runtime/server/og-image/satori/transforms/emojis/emoji-utils.js

@@ -1,76 +0,0 @@
-export const EMOJI_PREFIXES = {
-  // Most emoji sets use kebab-case naming
-  "default": ["emoji-", ""],
-  // Some sets may have specific prefixes
-  "noto": ["", "emoji-"],
-  "twemoji": ["", "emoji-"],
-  "fluent-emoji": ["", "emoji-"],
-  "fluent-emoji-flat": ["", "emoji-"],
-  "fluent-emoji-high-contrast": ["", "emoji-"],
-  "openmoji": ["", "emoji-"],
-  "emojione": ["", "emoji-"]
-};
-export const KNOWN_EMOJI_NAMES = {
-  "1f44b": "waving-hand",
-  "1f600": "grinning-face",
-  "1f604": "grinning-face-with-smiling-eyes",
-  "1f60d": "smiling-face-with-heart-eyes",
-  "1f618": "face-blowing-a-kiss",
-  "1f44d": "thumbs-up",
-  "1f44e": "thumbs-down",
-  "1f389": "party-popper",
-  "1f680": "rocket",
-  "1f4a5": "collision",
-  "1f525": "fire",
-  "1f381": "wrapped-gift",
-  "1f602": "face-with-tears-of-joy",
-  "1f970": "smiling-face-with-hearts",
-  "1f60a": "smiling-face-with-smiling-eyes",
-  "1f973": "partying-face",
-  "2764": "red-heart",
-  "1f49b": "yellow-heart",
-  "1f499": "blue-heart",
-  "1f49a": "green-heart",
-  "1f49c": "purple-heart",
-  "1f496": "sparkling-heart",
-  "1f495": "two-hearts",
-  "1f4af": "hundred-points",
-  "1f4aa": "flexed-biceps",
-  "1f44f": "clapping-hands",
-  "1f64f": "folded-hands",
-  "1f64c": "raising-hands",
-  "1f9d0": "face-with-monocle",
-  "1f914": "thinking-face",
-  "1f605": "grinning-face-with-sweat",
-  "1f643": "upside-down-face",
-  "1f609": "winking-face",
-  "1f60e": "smiling-face-with-sunglasses",
-  "1f385": "santa-claus",
-  "1f384": "christmas-tree",
-  "1f334": "palm-tree",
-  "1f419": "octopus",
-  "1f98b": "butterfly",
-  "1f41d": "honeybee",
-  "1f436": "dog-face",
-  "1f431": "cat-face",
-  "1f427": "penguin",
-  "1f98a": "fox",
-  "1f438": "frog"
-};
-export function getEmojiIconNames(codePoint, emojiSet) {
-  const prefixes = EMOJI_PREFIXES[emojiSet] || EMOJI_PREFIXES.default;
-  if (KNOWN_EMOJI_NAMES[codePoint]) {
-    return prefixes.map((prefix) => `${prefix}${KNOWN_EMOJI_NAMES[codePoint]}`);
-  }
-  return [
-    // Try direct code point (e.g., "1f44b")
-    codePoint,
-    // Try with u prefix (e.g., "u1f44b")
-    `u${codePoint}`,
-    // Try with emoji- prefix (e.g., "emoji-u1f44b")
-    ...prefixes.map((prefix) => `${prefix}u${codePoint}`)
-  ];
-}
-export function getEmojiCodePoint(emoji) {
-  return emoji.codePointAt(0).toString(16);
-}