nuxt-og-image 2.2.4 → 3.0.0-beta.1

package/dist/runtime/{nitro/providers/browser/universal.mjs → core/bindings/chromium/node.mjs}

@@ -1,6 +1,6 @@
 import playwrightCore from "playwright-core";
-export default async function createBrowser() {
-  if (process.dev || process.env.prerender) {
+export async function createBrowser() {
+  if (import.meta.dev || import.meta.env.prerender) {
     try {
       const { Launcher } = await import(String("chrome-launcher"));
       const chromePath = Launcher.getFirstInstallation();
@@ -23,7 +23,7 @@ export default async function createBrowser() {
       headless: true
     });
   } catch (e) {
-    if (process.dev) {
+    if (import.meta.dev) {
       console.warn("Failed to load chromium instance. Ensure you have chrome installed, otherwise add the dependency: `npm add -D playwright`.");
     } else {
       console.error("Failed to load browser instance. Please open an issue with the exception: https://github.com/harlan-zw/nuxt-og-image/issues.");

package/dist/runtime/core/bindings/resvg/node.d.ts

@@ -0,0 +1,6 @@
+import { Resvg as _Resvg } from '@resvg/resvg-js';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    Resvg: typeof _Resvg;
+};
+export default _default;

package/dist/runtime/core/bindings/resvg/node.mjs

@@ -0,0 +1,5 @@
+import { Resvg as _Resvg } from "@resvg/resvg-js";
+export default {
+  initWasmPromise: Promise.resolve(),
+  Resvg: _Resvg
+};

package/dist/runtime/core/bindings/resvg/wasm.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    Resvg: new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
+        free(): void;
+        render(): {
+            free(): void;
+            asPng(): Uint8Array;
+            readonly height: number;
+            readonly pixels: Uint8Array;
+            readonly width: number;
+        };
+        toString(): string;
+        innerBBox(): {
+            free(): void;
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+        } | undefined;
+        getBBox(): {
+            free(): void;
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+        } | undefined;
+        cropByBBox(bbox: {
+            free(): void;
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+        }): void;
+        imagesToResolve(): any[];
+        resolveImage(href: string, buffer: Uint8Array): void;
+        readonly height: number;
+        readonly width: number;
+    };
+};
+export default _default;

package/dist/runtime/core/bindings/resvg/wasm.mjs

@@ -0,0 +1,7 @@
+import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
+import ReSVGWasm from "@resvg/resvg-wasm/index_bg.wasm";
+export default {
+  initWasmPromise: initWasm(ReSVGWasm).catch(() => {
+  }),
+  Resvg: _Resvg
+};

package/dist/runtime/core/bindings/satori/node.d.ts

@@ -0,0 +1,6 @@
+import _satori from 'satori';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    satori: typeof _satori;
+};
+export default _default;

package/dist/runtime/core/bindings/satori/node.mjs

@@ -0,0 +1,5 @@
+import _satori from "satori";
+export default {
+  initWasmPromise: Promise.resolve(),
+  satori: _satori
+};

package/dist/runtime/core/bindings/satori/yoga-wasm.d.ts

@@ -0,0 +1,6 @@
+import _satori from 'satori/wasm';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    satori: typeof _satori;
+};
+export default _default;

package/dist/runtime/core/bindings/satori/yoga-wasm.mjs

@@ -0,0 +1,7 @@
+import _satori, { init } from "satori/wasm";
+import initYoga from "yoga-wasm-web";
+import YogaWasm from "yoga-wasm-web/dist/yoga.wasm";
+export default {
+  initWasmPromise: initYoga(YogaWasm).then((yoga) => init(yoga)),
+  satori: _satori
+};

package/dist/runtime/core/bindings/sharp/node.d.ts

@@ -0,0 +1,2 @@
+import sharp from 'sharp';
+export default sharp;

package/dist/runtime/core/bindings/sharp/node.mjs

@@ -0,0 +1,2 @@
+import sharp from "sharp";
+export default sharp;

package/dist/runtime/core/bindings/sharp/wasm.d.ts

@@ -0,0 +1,2 @@
+import sharp from '@img/sharp-wasm32/package.json';
+export default sharp;

package/dist/runtime/core/bindings/sharp/wasm.mjs

@@ -0,0 +1,2 @@
+import sharp from "@img/sharp-wasm32/package.json";
+export default sharp;

package/dist/runtime/core/cache/prerender.d.ts

@@ -0,0 +1,6 @@
+import type { Browser } from 'playwright-core';
+import type { OgImageOptions } from '../../types';
+export declare const prerenderCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions> | undefined;
+export declare const prerenderChromiumContext: {
+    browser?: Browser;
+};

package/dist/runtime/core/cache/prerender.mjs

@@ -0,0 +1,6 @@
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+export const prerenderCache = import.meta.prerender ? createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+}) : void 0;
+export const prerenderChromiumContext = { browser: void 0 };

package/dist/runtime/core/env/assets.d.ts

@@ -0,0 +1,2 @@
+export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
+export declare function toBase64Image(fileName: string, data: string | ArrayBuffer): string;

package/dist/runtime/core/env/assets.mjs

@@ -0,0 +1,15 @@
+import { Buffer } from "node:buffer";
+export function base64ToArrayBuffer(base64) {
+  const buffer = Buffer.from(base64, "base64");
+  return new Uint8Array(buffer).buffer;
+}
+export function toBase64Image(fileName, data) {
+  const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
+  let type = "image/jpeg";
+  const ext = fileName.split(".").pop();
+  if (ext === "svg")
+    type = "image/svg+xml";
+  else if (ext === "png")
+    type = "image/png";
+  return `data:${type};base64,${base64}`;
+}

package/dist/runtime/core/font/cache.d.ts

@@ -0,0 +1 @@
+export declare const fontCache: Record<string, any>;

package/dist/runtime/core/font/cache.mjs

@@ -0,0 +1 @@
+export const fontCache = {};

package/dist/runtime/core/font/fetch.d.ts

@@ -0,0 +1,3 @@
+import type { H3Event } from 'h3';
+import type { FontConfig } from '../../types';
+export declare function loadFont(e: H3Event, font: FontConfig): Promise<any>;

package/dist/runtime/core/font/fetch.mjs

@@ -0,0 +1,29 @@
+import { Buffer } from "node:buffer";
+import { base64ToArrayBuffer } from "../env/assets.mjs";
+import { fontCache } from "./cache.mjs";
+import { useNitroOrigin, useStorage } from "#imports";
+export async function loadFont(e, font) {
+  const fontKey = `${font.name}:${font.weight}`;
+  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
+  if (fontCache[fontKey])
+    return fontCache[fontKey];
+  const [name, weight] = fontKey.split(":");
+  let data;
+  if (await useStorage().hasItem(storageKey))
+    data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
+  if (!data) {
+    if (font.path) {
+      data = await e.$fetch(font.path, {
+        baseURL: useNitroOrigin(e),
+        responseType: "arrayBuffer"
+      });
+    } else {
+      data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
+        responseType: "arrayBuffer"
+      });
+    }
+  }
+  fontCache[fontKey] = { name, weight: Number(weight), data, style: "normal" };
+  await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
+  return fontCache[fontKey];
+}

package/dist/runtime/core/html/fetch.d.ts

@@ -0,0 +1,3 @@
+import { type H3Event } from 'h3';
+import type { RendererOptions, RuntimeOgImageOptions } from '../../types';
+export declare function fetchHTML(e: H3Event, options: RuntimeOgImageOptions | RendererOptions): Promise<string>;

package/dist/runtime/core/html/fetch.mjs

@@ -0,0 +1,117 @@
+import { createError } from "h3";
+import { hash } from "ohash";
+import { createHeadCore } from "@unhead/vue";
+import twemoji from "twemoji";
+import { renderSSRHead } from "@unhead/ssr";
+import { useRuntimeConfig } from "#imports";
+export async function fetchHTML(e, options) {
+  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const hashId = hash([options.component, options, Math.random() * 100]);
+  const island = await e.$fetch(`/__nuxt_island/${options.component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(options)
+    }
+  });
+  const head = createHeadCore();
+  head.push(island.head);
+  let defaultFontFamily = "sans-serif";
+  const firstFont = fonts[0];
+  if (firstFont)
+    defaultFontFamily = firstFont.name;
+  let html = island.html;
+  try {
+    html = twemoji.parse(html, {
+      folder: "svg",
+      ext: ".svg"
+    });
+  } catch (e2) {
+  }
+  const googleFonts = {};
+  fonts.filter((font) => !font.path).forEach((font) => {
+    if (!googleFonts[font.name])
+      googleFonts[font.name] = [];
+    googleFonts[font.name].push(font);
+  });
+  head.push({
+    style: [
+      {
+        // default font is the first font family
+        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
+      },
+      {
+        innerHTML: `body {
+    transform: scale(${options.scale || 1});
+    transform-origin: top left;
+    max-height: 100vh;
+    position: relative;
+    width: ${options.width}px;
+    height: ${options.height}px;
+    overflow: hidden;
+    background-color: ${options.mode === "dark" ? "#1b1b1b" : "#fff"};
+}
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}`
+      },
+      ...fonts.filter((font) => font.path).map((font) => {
+        return `
+          @font-face {
+            font-family: '${font.name}';
+            font-style: normal;
+            font-weight: ${font.weight};
+            src: url('${font.path}') format('truetype');
+          }
+          `;
+      })
+    ],
+    meta: [
+      {
+        charset: "utf-8"
+      }
+    ],
+    script: [
+      {
+        src: "https://cdn.tailwindcss.com"
+      },
+      {
+        innerHTML: `tailwind.config = {
+  corePlugins: {
+    preflight: false,
+  },
+  theme: ${JSON.stringify(satoriOptions?.tailwindConfig?.theme || {})}
+}`
+      }
+    ],
+    link: [
+      {
+        // reset css to match svg output
+        href: "https://cdn.jsdelivr.net/npm/gardevoir",
+        rel: "stylesheet"
+      },
+      // have to add each weight as their own stylesheet
+      ...Object.entries(googleFonts).map(([name, fonts2]) => {
+        return {
+          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${fonts2.map((f) => f.weight).join(";")}&display=swap`,
+          rel: "stylesheet"
+        };
+      })
+    ]
+  });
+  html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  const headChunk = await renderSSRHead(head);
+  const htmlTemplate = `<!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;">${html}</div>${headChunk.bodyTags}</body>
+</html>`;
+  return htmlTemplate;
+}

package/dist/runtime/core/options/extract.d.ts

@@ -0,0 +1,3 @@
+import type { OgImageOptions } from '../../types';
+export declare function decodeHtml(html: string): string;
+export declare function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/{nitro/utils-pure.mjs → core/options/extract.mjs}

@@ -1,4 +1,3 @@
-import { defu } from "defu";
 export function decodeHtml(html) {
   return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/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(/&#([0-9]+);/g, (full, int) => {
     return String.fromCharCode(Number.parseInt(int));
@@ -11,37 +10,40 @@ function decodeObjectHtmlEntities(obj) {
   });
   return obj;
 }
-export function extractAndNormaliseOgImageOptions(path, html, routeRules, defaults) {
+export function extractAndNormaliseOgImageOptions(html) {
   const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
   if (!htmlPayload)
     return false;
   let options;
   try {
-    const payload = JSON.parse(htmlPayload);
-    Object.entries(payload).forEach(([key, value]) => {
+    const payload2 = JSON.parse(htmlPayload);
+    Object.entries(payload2).forEach(([key, value]) => {
       if (!value)
-        delete payload[key];
+        delete payload2[key];
     });
-    options = defu(payload, routeRules);
+    options = payload2;
   } catch (e) {
-    options = routeRules;
-    if (process.dev)
+    if (import.meta.dev)
       console.warn("Failed to parse #nuxt-og-image-options", e, options);
   }
   if (!options)
     return false;
-  if (!options.description) {
-    const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
-    if (description)
-      options.description = description;
-    else
-      options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
+  const payload = decodeObjectHtmlEntities(options);
+  if (import.meta.dev) {
+    const socialPreview = {};
+    const socialMetaTags = html.match(/<meta[^>]+(property|name)="(twitter|og):([^"]+)"[^>]*>/g);
+    if (socialMetaTags) {
+      socialMetaTags.forEach((tag) => {
+        const [, , type, key] = tag.match(/(property|name)="(twitter|og):([^"]+)"/);
+        const value = tag.match(/content="([^"]+)"/)?.[1];
+        if (!value)
+          return;
+        if (!socialPreview[type])
+          socialPreview[type] = {};
+        socialPreview[type][key] = value;
+      });
+    }
+    payload.socialPreview = socialPreview;
   }
-  const decoded = decodeObjectHtmlEntities(options);
-  return defu(
-    decoded,
-    // runtime options
-    { path },
-    defaults
-  );
+  return payload;
 }

package/dist/runtime/core/options/fetch.d.ts

@@ -0,0 +1,3 @@
+import { type H3Error, type H3Event } from 'h3';
+import type { OgImageOptions } from '../../types';
+export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string): Promise<H3Error | OgImageOptions>;

package/dist/runtime/core/options/fetch.mjs

@@ -0,0 +1,21 @@
+import { createError } from "h3";
+import { extractAndNormaliseOgImageOptions } from "./extract.mjs";
+export async function fetchPathHtmlAndExtractOptions(e, path) {
+  let html;
+  try {
+    html = await e.$fetch(path);
+  } catch (err) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
+  const payload = extractAndNormaliseOgImageOptions(html);
+  if (!payload) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `The path is missing the Nuxt OG Image payload. Did you forget to use defineOgImage()?`
+    });
+  }
+  return payload;
+}

package/dist/runtime/core/options/normalise.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageOptions } from '../../types';
+export declare function normaliseOptions(_options: OgImageOptions): any;

package/dist/runtime/{composables/util.mjs → core/options/normalise.mjs}

@@ -1,14 +1,17 @@
 import { unref, useRuntimeConfig } from "#imports";
 import { componentNames } from "#build/og-image-component-names.mjs";
-export function normaliseOgImageOptions(_options) {
+export function normaliseOptions(_options) {
+  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
   const options = { ...unref(_options) };
   if (options.static)
     options.cache = options.cache || options.static;
-  if (!options.provider)
-    options.provider = "satori";
-  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
-  if (options.provider === "satori" && !runtimeSatori)
-    options.provider = "browser";
+  if (options.provider === "satori")
+    options.renderer = options.renderer || "satori";
+  else if (options.provider === "browser")
+    options.renderer = options.renderer || "chromium";
+  options.renderer = options.renderer || "satori";
+  if (options.renderer === "satori" && !runtimeSatori)
+    options.renderer = "chromium";
   if (options.component && componentNames) {
     const originalName = options.component;
     for (const component of componentNames) {

package/dist/runtime/core/renderers/chromium/index.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer } from '../../../types';
+declare const ChromiumRenderer: Renderer;
+export default ChromiumRenderer;

package/dist/runtime/core/renderers/chromium/index.mjs

@@ -0,0 +1,26 @@
+import { getOgImagePath } from "../../../utilts.mjs";
+import { prerenderChromiumContext } from "../../cache/prerender.mjs";
+import { createScreenshot } from "./screenshot.mjs";
+import { createBrowser } from "#nuxt-og-image/bindings/chromium";
+const ChromiumRenderer = {
+  name: "chromium",
+  supportedFormats: ["png", "jpeg"],
+  async createImage(e, options) {
+    const browser = (import.meta.prerender ? prerenderChromiumContext.browser : null) || await createBrowser();
+    if (!browser) {
+      return createError({
+        statusCode: 400,
+        statusMessage: "Failed to create Local Chromium Browser."
+      });
+    }
+    if (import.meta.prerender)
+      prerenderChromiumContext.browser = browser;
+    return createScreenshot(e, browser, {
+      ...options,
+      path: options.component === "PageScreenshot" ? options.path : getOgImagePath(options.path, "html")
+    }).finally(async () => {
+      await browser.close();
+    });
+  }
+};
+export default ChromiumRenderer;

package/dist/runtime/core/renderers/chromium/screenshot.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="node" />
+import type { Buffer } from 'node:buffer';
+import type { Browser } from 'playwright-core';
+import type { H3Event } from 'h3';
+import type { RendererOptions } from '../../../types';
+export declare function createScreenshot(e: H3Event, browser: Browser, options: RendererOptions): Promise<Buffer>;

package/dist/runtime/core/renderers/chromium/screenshot.mjs

@@ -0,0 +1,47 @@
+import { withQuery } from "ufo";
+export async function createScreenshot(e, browser, options) {
+  const page = await browser.newPage({
+    colorScheme: options.colorScheme,
+    baseURL: useNitroOrigin(e)
+  });
+  if (import.meta.prerender && !options.html) {
+    options.html = await e.$fetch(options.path);
+  }
+  try {
+    await page.setViewportSize({
+      width: options.width || 1200,
+      height: options.height || 630
+    });
+    const isHtml = options.html || options.path?.startsWith("html:");
+    if (isHtml) {
+      const html = options.html || options.path?.substring(5);
+      await page.evaluate((html2) => {
+        document.open("text/html");
+        document.write(html2);
+        document.close();
+      }, html);
+      await page.waitForLoadState("networkidle");
+    } else {
+      await page.goto(withQuery(options.path, options), {
+        timeout: 1e4,
+        waitUntil: "networkidle"
+      });
+    }
+    const screenshotOptions = {
+      timeout: 1e4,
+      animations: "disabled",
+      type: options.extension
+    };
+    if (options.mask) {
+      await page.evaluate((mask) => {
+        for (const el of document.querySelectorAll(mask))
+          el.style.display = "none";
+      }, options.mask);
+    }
+    if (options.selector)
+      return await page.locator(options.selector).screenshot(screenshotOptions);
+    return await page.screenshot(screenshotOptions);
+  } finally {
+    await page.close();
+  }
+}

package/dist/runtime/core/renderers/satori/fonts.d.ts

@@ -0,0 +1,3 @@
+import type { FontConfig } from '../../../types';
+export declare const satoriFonts: any[];
+export declare function loadFonts(baseURL: string, fonts: FontConfig[]): Promise<any>;

package/dist/runtime/core/renderers/satori/fonts.mjs

@@ -0,0 +1,8 @@
+import { loadFont } from "../../font/fetch.mjs";
+export const satoriFonts = [];
+let fontLoadPromise = null;
+export function loadFonts(baseURL, fonts) {
+  if (fontLoadPromise)
+    return fontLoadPromise;
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
+}

package/dist/runtime/core/renderers/satori/index.d.ts

@@ -0,0 +1,5 @@
+import type { H3Event } from 'h3';
+import type { Renderer, RendererOptions } from '../../../types';
+export declare function createSvg(e: H3Event, options: RendererOptions): Promise<string>;
+declare const SatoriRenderer: Renderer;
+export default SatoriRenderer;

package/dist/runtime/core/renderers/satori/index.mjs

@@ -0,0 +1,53 @@
+import { defu } from "defu";
+import { createVNodes } from "./vnodes.mjs";
+import { loadFonts, satoriFonts } from "./fonts.mjs";
+import { useResvg, useSatori, useSharp } from "./instances.mjs";
+import { useRuntimeConfig } from "#imports";
+export async function createSvg(e, options) {
+  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const vnodes = await createVNodes(e, options);
+  if (!satoriFonts.length)
+    satoriFonts.push(...await loadFonts(e, fonts));
+  const satori = await useSatori();
+  return satori(vnodes, defu(options.satori, satoriOptions, {
+    fonts: satoriFonts,
+    embedFont: true,
+    width: options.width,
+    height: options.height
+  }));
+}
+async function createPng(e, options) {
+  const { resvgOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const svg = await createSvg(e, options);
+  const Resvg = await useResvg();
+  const resvg = new Resvg(svg, defu(
+    options.resvg,
+    resvgOptions
+  ));
+  const pngData = resvg.render();
+  return pngData.asPng();
+}
+async function createJpeg(e, options) {
+  const { sharpOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const png = await createPng(e, options);
+  const sharp = await useSharp();
+  return sharp(png, defu(options.sharp, sharpOptions)).jpeg(defu(options.sharp, sharpOptions)).toBuffer();
+}
+const SatoriRenderer = {
+  name: "satori",
+  supportedFormats: ["svg", "png", "jpeg", "jpg", "json"],
+  async createImage(e, options) {
+    switch (options.extension) {
+      case "json":
+        return createVNodes(e, options);
+      case "svg":
+        return createSvg(e, options);
+      case "png":
+        return createPng(e, options);
+      case "jpeg":
+      case "jpg":
+        return createJpeg(e, options);
+    }
+  }
+};
+export default SatoriRenderer;