nuxt-og-image 2.0.0-beta.5 → 2.0.0-beta.50

package/dist/runtime/nitro/renderers/satori/utils.mjs

@@ -1,20 +1,32 @@
+import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};
-export async function loadFont(font) {
-  if (cachedFonts[font])
-    return cachedFonts[font];
+export async function loadFont(baseURL, font) {
+  let fontKey = font;
+  if (typeof font === "object")
+    fontKey = `${font.name}:${font.weight}`;
+  if (cachedFonts[fontKey])
+    return cachedFonts[fontKey];
+  const [name, weight] = fontKey.split(":");
   let data;
-  const storageKey = `assets:nuxt-og-imagee:font:${font}`;
-  if (await useStorage().hasItem(storageKey)) {
+  const storageKey = `assets:nuxt-og-imagee:font:${fontKey}`;
+  if (await useStorage().hasItem(storageKey))
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
-    return cachedFonts[font] = { name: font, data, style: "normal" };
+  if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
+    data = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
   }
-  const [name, weight] = font.split(":");
-  if (name === "Inter" && ["400", "700"].includes(weight)) {
-    const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
-    if (data2)
-      return cachedFonts[font] = { name, weight: Number(weight), data: data2, style: "normal" };
+  if (font.path) {
+    data = await readPublicAsset(font.path);
+    if (!data) {
+      try {
+        data = await globalThis.$fetch(font.path, {
+          responseType: "arrayBuffer",
+          baseURL
+        });
+      } catch {
+      }
+    }
   }
   if (!data) {
     const fontUrl = await globalThis.$fetch("/api/og-image-font", {
@@ -24,8 +36,9 @@ export async function loadFont(font) {
       responseType: "arrayBuffer"
     });
   }
+  cachedFonts[fontKey] = { name, weight: Number(weight), data, style: "normal" };
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[font] = { name, weight: Number(weight), data, style: "normal" };
+  return cachedFonts[fontKey];
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)
@@ -36,7 +49,7 @@ export async function walkSatoriTree(url, node, plugins) {
   }
   for (const child of node.props.children || []) {
     if (child) {
-      for (const plugin of plugins) {
+      for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
           await plugin.transform(child);
       }

package/dist/runtime/nitro/routes/debug.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("h3").EventHandler<{
+    runtimeConfig: any;
+}>;
+export default _default;

package/dist/runtime/nitro/routes/debug.mjs

@@ -0,0 +1,9 @@
+import { defineEventHandler, setHeader } from "h3";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  setHeader(e, "Content-Type", "application/json");
+  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  return {
+    runtimeConfig
+  };
+});

package/dist/runtime/nitro/routes/html.mjs

@@ -1,33 +1,65 @@
 import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
+import { hash } from "ohash";
+import twemoji from "twemoji";
+import { fetchOptions, useHostname } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const { fonts, defaults, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const scale = query.scale;
+  const mode = query.mode || "light";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options) {
+    try {
+      options = JSON.parse(query.options);
+    } catch {
+    }
+  }
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
-  const island = await renderIsland(options);
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+  }
+  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]);
+  const island = await $fetch(`/__nuxt_island/${options.component}:${hashId}`, {
+    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) {
+  }
   head.push({
     style: [
       {
         // default font is the first font family
-        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
+        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
       },
-      scale ? {
+      {
         innerHTML: `body {
-    transform: scale(${scale});
+    transform: scale(${scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
@@ -41,9 +73,18 @@ img.emoji {
    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: [
       {
@@ -54,12 +95,12 @@ img.emoji {
       {
         src: "https://cdn.tailwindcss.com"
       },
-      // @todo merge with users tailwind
       {
         innerHTML: `tailwind.config = {
   corePlugins: {
     preflight: false,
-  }
+  },
+  theme: ${JSON.stringify(satoriOptions.tailwindConfig.theme || {})}
 }`
       }
     ],
@@ -70,19 +111,53 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.map((font) => {
-        const [name, weight] = font.split(":");
+      ...fonts.filter((font) => !font.path).map((font) => {
         return {
-          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,
+          href: `https://fonts.googleapis.com/css2?family=${font.name}:wght@${font.weight}&display=swap`,
           rel: "stylesheet"
         };
       })
     ]
   });
   const headChunk = await renderSSRHead(head);
-  return `<!DOCTYPE html>
+  let htmlTemplate = `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${island.html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${html}</div>${headChunk.bodyTags}</body>
 </html>`;
+  let hasInlineStyles = false;
+  const stylesheets = htmlTemplate.match(/<link rel="stylesheet" href=".*?">/g);
+  if (stylesheets) {
+    for (const stylesheet of stylesheets) {
+      if (!stylesheet.includes(`${options.component}.vue`)) {
+        htmlTemplate = htmlTemplate.replace(stylesheet, "");
+      } else {
+        const href = stylesheet.match(/href="(.*?)"/)[1];
+        try {
+          let css = await (await $fetch(href, {
+            baseURL: useHostname(e)
+          })).text();
+          if (css.includes("const __vite__css =")) {
+            css = css.match(/const __vite__css = "(.*)"/)[1].replace(/\\n/g, "\n");
+          }
+          htmlTemplate = htmlTemplate.replace(stylesheet, `<style>${css.replace(/\/\/# sourceMappingURL=.*/, "")}</style>`);
+          hasInlineStyles = true;
+        } catch {
+        }
+      }
+    }
+  }
+  try {
+    if (hasInlineStyles) {
+      const inlineCss = await import("inline-css").then((m) => m?.default || m);
+      htmlTemplate = inlineCss(htmlTemplate, {
+        url: useHostname(e),
+        applyLinkTags: false,
+        removeLinkTags: false,
+        removeStyleTags: false
+      });
+    }
+  } catch {
+  }
+  return htmlTemplate;
 });

package/dist/runtime/nitro/routes/options.mjs

@@ -1,17 +1,21 @@
-import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
-import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery } from "h3";
+import { withoutBase } from "ufo";
+import { defu } from "defu";
+import { extractOgImageOptions } from "../utils.mjs";
+import { getRouteRules } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
-  const fetchOptions = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
-  };
-  const html = await globalThis.$fetch(path, {
-    ...fetchOptions
-  });
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  let html;
+  try {
+    html = await globalThis.$fetch(path);
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload) {
     throw createError({
@@ -20,20 +24,14 @@ export default defineEventHandler(async (e) => {
     });
   }
   e.node.req.url = path;
+  const oldRouteRules = e.context._nitro.routeRules;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
+  e.context._nitro.routeRules = oldRouteRules;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  return {
-    path,
-    ...defaults,
-    // use route rules
-    ...routeRules || {},
-    // use provided data
-    ...extractedPayload,
-    // use query data
-    ...query
-  };
+  const result = defu(extractedPayload, routeRules, { path }, defaults);
+  return result;
 });

package/dist/runtime/nitro/routes/svg.mjs

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);

package/dist/runtime/nitro/routes/vnode.mjs

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);

package/dist/runtime/nitro/util-hostname.d.ts

@@ -0,0 +1,2 @@
+import type { H3Event } from 'h3';
+export declare function useHostname(e: H3Event): string;

package/dist/runtime/nitro/util-hostname.mjs

@@ -0,0 +1,20 @@
+import { getRequestHost, getRequestProtocol } from "h3";
+import { withBase, withoutProtocol } from "ufo";
+import { useRuntimeConfig } from "#imports";
+export function useHostname(e) {
+  const base = useRuntimeConfig().app.baseURL;
+  let host = getRequestHost(e);
+  if (host === "localhost")
+    host = process.env.NITRO_HOST || process.env.HOST || host;
+  let protocol = getRequestProtocol(e);
+  if (process.env.NUXT_VITE_NODE_OPTIONS) {
+    const envHost = JSON.parse(process.env.NUXT_VITE_NODE_OPTIONS).baseURL.replace("__nuxt_vite_node__", "");
+    host = withoutProtocol(envHost);
+    protocol = envHost.includes("https") ? "https" : "http";
+  }
+  const useHttp = process.dev || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
+  let port = host.includes(":") ? host.split(":").pop() : false;
+  if ((process.dev || process.env.prerender || host.includes("localhost")) && !port)
+    port = process.env.NITRO_PORT || process.env.PORT;
+  return withBase(base, `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}`);
+}

package/dist/runtime/nitro/utils-pure.d.ts

@@ -1,2 +1,3 @@
-export declare function extractOgImageOptions(html: string): false | Record<string, any>;
-export declare function stripOgImageOptions(html: string): string;
+import type { OgImageOptions } from '../../types';
+export declare function decodeHtml(html: string): string;
+export declare function extractOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/nitro/utils-pure.mjs

@@ -1,8 +1,12 @@
-function decodeHtmlEntities(obj) {
+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));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -26,10 +30,7 @@ export function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
-export function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
-}

package/dist/runtime/nitro/utils.d.ts

@@ -1,17 +1,15 @@
 /// <reference types="node" />
+import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
-export declare function wasmLoader(key: any, fallback: string, baseUrl: string): {
-    loaded(): boolean | Promise<any>;
-    load(): Promise<any>;
+export * from './util-hostname';
+export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
+    load(options: {
+        baseUrl: string;
+    }): Promise<any>;
 };
 export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
-export declare function renderIsland(payload: OgImageOptions): Promise<{
-    html: string;
-    head: any;
-}>;
-export declare function useHostname(e: H3Event): any;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
 export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,77 +1,80 @@
 import { existsSync, promises as fsp } from "node:fs";
-import { getHeaders, getQuery, getRequestHeader } from "h3";
+import { Buffer } from "node:buffer";
+import { getQuery } from "h3";
 import { join } from "pathe";
-import { useRuntimeConfig } from "#internal/nitro";
-export function wasmLoader(key, fallback, baseUrl) {
+import { prefixStorage } from "unstorage";
+import { useRuntimeConfig, useStorage } from "#imports";
+export * from "./util-hostname.mjs";
+export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
-  let loaded = false;
+  let wasm;
   return {
-    loaded() {
-      if (loaded)
-        return true;
+    async load(options) {
       if (typeof promise !== "undefined")
         return promise;
-      return false;
-    },
-    async load() {
+      if (wasm)
+        return wasm;
       promise = promise || new Promise(async (resolve) => {
-        let wasm;
         try {
-          wasm = await key;
+          wasm = await asyncModuleLoad;
           if (typeof wasm === "string")
             wasm = void 0;
         } catch (e) {
         }
-        if (!wasm)
-          wasm = await readPublicAsset(fallback);
         if (!wasm) {
-          const url = new URL(baseUrl);
-          wasm = await (await fetch(`${url.origin}${fallback}`)).arrayBuffer();
+          wasm = await readPublicAsset(fallback, "base64");
+          if (wasm)
+            wasm = Buffer.from(wasm, "base64");
+        }
+        if (!wasm) {
+          const url = new URL(options.baseUrl);
+          wasm = await (await globalThis.$fetch(fallback, { baseURL: url.origin })).arrayBuffer();
+          wasm = Buffer.from(wasm);
         }
-        loaded = true;
         resolve(wasm);
       });
       return promise;
     }
   };
 }
-export function fetchOptions(e, path) {
-  const fetchOptions2 = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
+export async function fetchOptions(e, path) {
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), "og-image-cache:options") : false;
+  let options;
+  if (cache && await cache.hasItem(path)) {
+    const cachedValue = await cache.getItem(path);
+    if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
+      options = cachedValue.value;
+    else
+      await cache.removeItem(path);
+  }
+  if (!options) {
+    options = await globalThis.$fetch("/api/og-image-options", {
+      query: {
+        path
+      },
+      responseType: "json"
+    });
+    if (cache) {
+      await cache.setItem(path, {
+        value: options,
+        expiresAt: Date.now() + (options.static ? 60 * 60 * 1e3 : 5 * 1e3)
+      });
+    }
+  }
+  return {
+    ...options,
+    // use query data
+    ...getQuery(e)
   };
-  return globalThis.$fetch("/api/og-image-options", {
-    query: {
-      ...getQuery(e),
-      path
-    },
-    ...fetchOptions2
-  });
 }
 export function base64ToArrayBuffer(base64) {
   const buffer = Buffer.from(base64, "base64");
   return new Uint8Array(buffer).buffer;
 }
-export function renderIsland(payload) {
-  return globalThis.$fetch(`/__nuxt_island/${payload.component}`, {
-    query: { props: JSON.stringify(payload) }
-  });
-}
-export function useHostname(e) {
-  const config = useRuntimeConfig()["nuxt-og-image"];
-  if (!process.dev && config.siteUrl)
-    return config.siteUrl;
-  const host = getRequestHeader(e, "host") || process.env.NITRO_HOST || process.env.HOST || "localhost";
-  const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
-  const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
-  const port = host.includes(":") ? host.split(":").pop() : process.env.NITRO_PORT || process.env.PORT;
-  const base = useRuntimeConfig().app.baseURL;
-  return `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}${base}`;
-}
-const r = (base, key) => {
+function r(base, key) {
   return join(base, key.replace(/:/g, "/"));
-};
+}
 export async function readPublicAsset(file, encoding) {
   const { assetDirs } = useRuntimeConfig()["nuxt-og-image"];
   for (const assetDir of assetDirs) {

package/dist/types.d.ts

@@ -7,5 +7,11 @@ declare module '@nuxt/schema' {
   interface NuxtHooks extends ModuleHooks {}
 }
 
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['ogImage']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ogImage']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+}
+
 
 export { ModuleHooks, ModuleOptions, default } from './module'