nuxt-og-image 5.1.10 → 5.1.11

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

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

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

@@ -0,0 +1,51 @@
+import { useNitroOrigin } from "#site-config/server/composables/useNitroOrigin";
+import { createConsola } from "consola";
+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)) || [];
+  if (!import.meta.prerender && !componentInlineStyles.length) {
+    return false;
+  }
+  let linksToCss = [];
+  if (import.meta.dev) {
+    const cssResults = componentInlineStyles.length ? await Promise.all(
+      componentInlineStyles.map((l) => {
+        const url = l.href.endsWith("lang.css") ? `${l.href}&hmr=false` : l.href;
+        return e.$fetch(url, {
+          responseType: "text",
+          baseURL: useNitroOrigin(e)
+        }).then((res) => {
+          if (res.includes("__vite__css"))
+            return res.match(/__vite__css = "([^"]+)"/)?.[1] || "";
+          return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+        }).catch(() => {
+          return "";
+        });
+      })
+    ) : [];
+    linksToCss = cssResults;
+    css = [linksToCss.join("\n"), css].join("\n");
+  }
+  if (!css.trim().length)
+    return false;
+  const cssInline = await useCssInline();
+  if (!cssInline || cssInline?.__mock__) {
+    if (componentInlineStyles.length) {
+      const logger = createConsola().withTag("Nuxt OG Image");
+      logger.warn("To have inline styles applied you need to install either the `@css-inline/css-inline` or `@css-inline/css-inline-wasm` package.");
+    }
+    return false;
+  }
+  html = cssInline.inline(island.html, {
+    loadRemoteStylesheets: false,
+    extraCss: css
+  });
+  const classes = css.match(/\.([\w-]+)/g)?.map((c) => c.replace(".", ""));
+  if (classes)
+    html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
+  island.html = html;
+  return true;
+}

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

@@ -0,0 +1,3 @@
+import type { OgImageRenderEventContext, SatoriTransformer, VNode } from '../../../types.js';
+export declare function walkSatoriTree(e: OgImageRenderEventContext, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): (void | Promise<void>)[];
+export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

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

@@ -0,0 +1,24 @@
+export function walkSatoriTree(e, node, plugins) {
+  const promises = [];
+  if (!node.props?.children || !Array.isArray(node.props.children))
+    return promises;
+  if (node.props.children.length === 0) {
+    delete node.props.children;
+    return promises;
+  }
+  for (const child of node.props.children || []) {
+    if (child) {
+      for (const plugin of plugins.flat()) {
+        if (plugin.filter(child))
+          promises.push(plugin.transform(child, e));
+      }
+      promises.push(
+        ...walkSatoriTree(e, child, plugins)
+      );
+    }
+  }
+  return promises;
+}
+export function defineSatoriTransformer(transformer) {
+  return transformer;
+}

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

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext, VNode } from '../../../types.js';
+export declare function createVNodes(ctx: OgImageRenderEventContext): Promise<VNode>;

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

@@ -0,0 +1,40 @@
+import { html as convertHtmlToSatori } from "satori-html";
+import { htmlDecodeQuotes } from "../../util/encoding.js";
+import { fetchIsland } from "../../util/kit.js";
+import classes from "./plugins/classes.js";
+import emojis from "./plugins/emojis.js";
+import encoding from "./plugins/encoding.js";
+import flex from "./plugins/flex.js";
+import imageSrc from "./plugins/imageSrc.js";
+import nuxtIcon from "./plugins/nuxt-icon.js";
+import unocss from "./plugins/unocss.js";
+import { applyEmojis } from "./transforms/emojis.js";
+import { applyInlineCss } from "./transforms/inlineCss.js";
+import { walkSatoriTree } from "./utils.js";
+export async function createVNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+    island.html = htmlDecodeQuotes(island.html);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+    if (html?.includes("<body>")) {
+      html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || "";
+    }
+  }
+  const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const satoriTree = convertHtmlToSatori(template);
+  walkSatoriTree(ctx, satoriTree, [
+    emojis,
+    classes,
+    flex,
+    encoding,
+    nuxtIcon
+  ]);
+  await Promise.all(walkSatoriTree(ctx, satoriTree, [
+    unocss,
+    imageSrc
+  ]));
+  return satoriTree;
+}

package/dist/runtime/server/og-image/templates/html.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext } from '../../../types.js';
+export declare function html(ctx: OgImageRenderEventContext): Promise<string>;

package/dist/runtime/server/og-image/templates/html.js

@@ -0,0 +1,112 @@
+import { theme } from "#og-image-virtual/unocss-config.mjs";
+import { createHeadCore } from "@unhead/vue";
+import { renderSSRHead } from "@unhead/vue/server";
+import { createError } from "h3";
+import { normaliseFontInput } from "../../../shared.js";
+import { fetchIsland } from "../../util/kit.js";
+import { useOgImageRuntimeConfig } from "../../utils.js";
+import { applyEmojis } from "../satori/transforms/emojis.js";
+export async function html(ctx) {
+  const { options } = ctx;
+  const { fonts } = useOgImageRuntimeConfig();
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
+    });
+  }
+  const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+  const head = createHeadCore();
+  head.push(island.head);
+  let defaultFontFamily = "sans-serif";
+  const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
+  const firstFont = normalisedFonts[0];
+  if (firstFont)
+    defaultFontFamily = firstFont.name.replaceAll("+", " ");
+  await applyEmojis(ctx, island);
+  let html2 = island.html;
+  head.push({
+    style: [
+      {
+        // default font is the first font family
+        innerHTML: `body { font-family: '${defaultFontFamily}', sans-serif;  }`
+      },
+      {
+        innerHTML: `body {
+    transform: scale(${options.props?.scale || 1});
+    transform-origin: top left;
+    max-height: 100vh;
+    position: relative;
+    width: ${options.width}px;
+    height: ${options.height}px;
+    overflow: hidden;
+    background-color: ${options.props?.colorMode === "dark" ? "#1b1b1b" : "#fff"};
+}
+div {
+  display: flex;
+}
+div:has(div, p, ul, ol, li, blockquote, pre, hr, table, dl) {
+  display: flex;
+  flex-direction: column;
+}
+div:not(:has(div, p, ul, ol, li, blockquote, pre, hr, table, dl)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+svg[data-emoji] {
+  display: inline-block;
+}
+`
+      },
+      ...fonts.map((font) => {
+        return `
+          @font-face {
+            font-family: '${font.name.replaceAll("+", " ")}';
+            font-style: normal;
+            font-weight: ${font.weight};
+            src: url('/__og-image__/font/${font.key}') format('truetype');
+          }
+          `;
+      })
+    ],
+    meta: [
+      {
+        charset: "utf-8"
+      }
+    ],
+    script: [
+      {
+        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-wind.global.js"
+      },
+      {
+        innerHTML: `
+  window.__unocss = {
+    theme: ${JSON.stringify(theme)},
+    presets: [
+      () => window.__unocss_runtime.presets.presetWind(),
+    ],
+  }
+`
+      },
+      {
+        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"
+      }
+    ],
+    link: [
+      {
+        // reset css to match svg output
+        href: "https://cdn.jsdelivr.net/npm/gardevoir",
+        rel: "stylesheet"
+      }
+    ]
+  });
+  html2 = html2.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  const headChunk = await renderSSRHead(head);
+  return `<!DOCTYPE html>
+<html ${headChunk.htmlAttrs}>
+<head>${headChunk.headTags}</head>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html2}</div>${headChunk.bodyTags}</body>
+</html>`;
+}

package/dist/runtime/server/plugins/__zero-runtime/nuxt-content-v2.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nitropack").NitroAppPlugin;
+export default _default;

package/dist/runtime/server/plugins/__zero-runtime/nuxt-content-v2.js

@@ -0,0 +1,9 @@
+import { defineNitroPlugin } from "nitropack/runtime";
+import { nuxtContentPlugin } from "../../util/plugins.js";
+export default defineNitroPlugin((nitroApp) => {
+  if (import.meta.dev || import.meta.prerender) {
+    nuxtContentPlugin(nitroApp);
+    return;
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/server/plugins/nuxt-content-v2.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nitropack").NitroAppPlugin;
+export default _default;

package/dist/runtime/server/plugins/nuxt-content-v2.js

@@ -0,0 +1,5 @@
+import { defineNitroPlugin } from "nitropack/runtime";
+import { nuxtContentPlugin } from "../util/plugins.js";
+export default defineNitroPlugin((nitroApp) => {
+  nuxtContentPlugin(nitroApp);
+});

package/dist/runtime/server/plugins/prerender.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nitropack").NitroAppPlugin;
+export default _default;

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

@@ -0,0 +1,38 @@
+import { prerenderOptionsCache } from "#og-image-cache";
+import { createSitePathResolver } from "#site-config/server/composables/utils";
+import { defineNitroPlugin } from "nitropack/runtime";
+import { parseURL } from "ufo";
+import { isInternalRoute } from "../../shared.js";
+import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
+import { createNitroRouteRuleMatcher } from "../util/kit.js";
+export default defineNitroPlugin(async (nitro) => {
+  if (!import.meta.prerender)
+    return;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  nitro.hooks.hook("render:html", async (html, ctx) => {
+    const { head, bodyAppend } = html;
+    const path = parseURL(ctx.event.path).pathname;
+    if (isInternalRoute(path))
+      return;
+    const routeRules = routeRuleMatcher(path);
+    if (routeRules.ogImage === false)
+      return;
+    const options = extractAndNormaliseOgImageOptions([
+      head.join("\n"),
+      bodyAppend.join("\n")
+    ].join("\n"));
+    if (!options)
+      return;
+    const resolvePathWithBase = createSitePathResolver(ctx.event, {
+      absolute: false,
+      withBase: true
+    });
+    const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path));
+    await prerenderOptionsCache.setItem(key, options);
+    const index = html.bodyAppend.findIndex((script) => script.includes('id="nuxt-og-image-options"'));
+    if (index !== -1) {
+      html.bodyAppend[index] = String(html.bodyAppend[index]).replace(/<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/, "");
+      html.bodyAppend[index] = html.bodyAppend[index].replace(/<script id="nuxt-og-image-overrides" type="application\/json">[\s\S]*?<\/script>/, "");
+    }
+  });
+});

package/dist/runtime/server/routes/__zero-runtime/font.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/server/routes/__zero-runtime/font.js

@@ -0,0 +1,8 @@
+import { defineEventHandler } from "h3";
+import { fontEventHandler } from "../../util/eventHandlers.js";
+export default defineEventHandler(async (e) => {
+  if (import.meta.dev || import.meta.prerender) {
+    return await fontEventHandler(e);
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/server/routes/__zero-runtime/image.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/server/routes/__zero-runtime/image.js

@@ -0,0 +1,8 @@
+import { defineEventHandler } from "h3";
+import { imageEventHandler } from "../../util/eventHandlers.js";
+export default defineEventHandler(async (e) => {
+  if (import.meta.dev || import.meta.prerender) {
+    return await imageEventHandler(e);
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/server/routes/debug.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
+    siteConfigUrl: string;
+    componentNames: any;
+    runtimeConfig: import("../../types.js").OgImageRuntimeConfig;
+    compatibility: any;
+}>>;
+export default _default;

package/dist/runtime/server/routes/debug.json.js

@@ -0,0 +1,15 @@
+import { componentNames } from "#og-image-virtual/component-names.mjs";
+import compatibility from "#og-image/compatibility";
+import { useSiteConfig } from "#site-config/server/composables/useSiteConfig";
+import { defineEventHandler, setHeader } from "h3";
+import { useOgImageRuntimeConfig } from "../utils.js";
+export default defineEventHandler(async (e) => {
+  setHeader(e, "Content-Type", "application/json");
+  const runtimeConfig = useOgImageRuntimeConfig();
+  return {
+    siteConfigUrl: useSiteConfig(e).url,
+    componentNames,
+    runtimeConfig,
+    compatibility
+  };
+});

package/dist/runtime/server/routes/font.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/server/routes/font.js

@@ -0,0 +1,3 @@
+import { defineEventHandler } from "h3";
+import { fontEventHandler } from "../util/eventHandlers.js";
+export default defineEventHandler(fontEventHandler);

package/dist/runtime/server/routes/image.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/server/routes/image.js

@@ -0,0 +1,3 @@
+import { defineEventHandler } from "h3";
+import { imageEventHandler } from "../util/eventHandlers.js";
+export default defineEventHandler(imageEventHandler);

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/server/util/cache.d.ts

@@ -0,0 +1,10 @@
+import type { H3Error } from 'h3';
+import type { OgImageRenderEventContext } from '../../types.js';
+export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
+    baseCacheKey: string | false;
+    cacheMaxAgeSeconds?: number;
+}): Promise<void | H3Error | {
+    cachedItem: false | BufferSource;
+    enabled: boolean;
+    update: (image: BufferSource | Buffer | Uint8Array) => Promise<void>;
+}>;

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

@@ -0,0 +1,74 @@
+import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
+import { useStorage } from "nitropack/runtime";
+import { hash } from "ohash";
+import { withTrailingSlash } from "ufo";
+import { prefixStorage } from "unstorage";
+export async function useOgImageBufferCache(ctx, options) {
+  const maxAge = Number(options.cacheMaxAgeSeconds);
+  let enabled = !import.meta.dev && import.meta.env?.MODE !== "test" && maxAge > 0;
+  const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
+  const key = ctx.key;
+  let cachedItem = false;
+  if (enabled) {
+    const hasItem = await cache.hasItem(key).catch((e) => {
+      enabled = false;
+      return createError({
+        cause: e,
+        statusCode: 500,
+        statusMessage: `[Nuxt OG Image] Failed to connect to cache ${options.baseCacheKey}. Response from cache: ${e.message}`
+      });
+    });
+    if (hasItem instanceof Error)
+      return hasItem;
+    if (hasItem) {
+      const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({
+        value: null,
+        expiresAt: Date.now()
+      }));
+      if (typeof getQuery(ctx.e).purge !== "undefined") {
+        await cache.removeItem(key).catch(() => {
+        });
+      } else if (expiresAt > Date.now()) {
+        cachedItem = Buffer.from(value, "base64");
+        if (handleCacheHeaders(ctx.e, {
+          modifiedTime: new Date(headers["last-modified"]),
+          etag: headers.etag,
+          maxAge
+        })) {
+          return;
+        }
+        setHeaders(ctx.e, headers);
+      } else {
+        await cache.removeItem(key).catch(() => {
+        });
+      }
+    }
+  }
+  if (!enabled) {
+    setHeader(ctx.e, "Cache-Control", "no-cache, no-store, must-revalidate");
+    setHeader(ctx.e, "Pragma", "no-cache");
+    setHeader(ctx.e, "Expires", "0");
+  }
+  return {
+    enabled,
+    cachedItem,
+    async update(item) {
+      if (!enabled)
+        return;
+      const value = Buffer.from(item).toString("base64");
+      const headers = {
+        // avoid multi-tenancy cache issues
+        "Vary": "accept-encoding, host",
+        "etag": `W/"${hash(value)}"`,
+        "last-modified": (/* @__PURE__ */ new Date()).toUTCString(),
+        "cache-control": `public, s-maxage=${maxAge}, stale-while-revalidate`
+      };
+      setHeaders(ctx.e, headers);
+      await cache.setItem(key, {
+        value,
+        headers,
+        expiresAt: Date.now() + maxAge * 1e3
+      });
+    }
+  };
+}

package/dist/runtime/server/util/encoding.d.ts

@@ -0,0 +1,3 @@
+export declare function htmlDecodeQuotes(html: string): string;
+export declare function decodeHtml(html: string): string;
+export declare function decodeObjectHtmlEntities(obj: Record<string, string | any>): Record<string, any>;

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

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#(\d+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  }).replace(/&amp;/g, "&");
+}
+export function decodeObjectHtmlEntities(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
+  });
+  return obj;
+}

package/dist/runtime/server/util/eventHandlers.d.ts

@@ -0,0 +1,3 @@
+import type { H3Event } from 'h3';
+export declare function fontEventHandler(e: H3Event): Promise<any>;
+export declare function imageEventHandler(e: H3Event): Promise<any>;