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

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

@@ -1,178 +0,0 @@
-import { withBase } from "ufo";
-import { renderSSRHead } from "@unhead/ssr";
-import { createHeadCore } from "@unhead/vue";
-import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
-import { hash } from "ohash";
-import twemoji from "twemoji";
-import { createDefu } from "defu";
-import { fetchOptionsCached } from "../utils.mjs";
-import { useNitroOrigin, useRuntimeConfig } from "#imports";
-import loadCSSInline from "#nuxt-og-image/css-inline";
-export default defineEventHandler(async (e) => {
-  const { fonts, 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";
-  const nitroOrigin = useNitroOrigin(e);
-  let queryOptions;
-  if (query.options) {
-    try {
-      queryOptions = JSON.parse(query.options);
-    } catch {
-    }
-  }
-  let options = await fetchOptionsCached(e, path);
-  const merger = createDefu((object, key, value) => {
-    if (Array.isArray(value))
-      return value;
-  });
-  if (queryOptions)
-    options = merger(queryOptions, options);
-  if (options.provider === "browser" && options.component === "PageScreenshot") {
-    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
-    return sendRedirect(e, withBase(pathWithoutBase, nitroOrigin));
-  }
-  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) {
-  }
-  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(${scale || 1});
-    transform-origin: top left;
-    max-height: 100vh;
-    position: relative;
-    width: ${options.width}px;
-    height: ${options.height}px;
-    overflow: hidden;
-    background-color: ${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);
-  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: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
-</html>`;
-  const cssInline = loadCSSInline();
-  if (!cssInline.__mock) {
-    let hasInlineStyles = false;
-    const stylesheets = htmlTemplate.match(/<link rel="stylesheet" href=".*?">/g);
-    if (stylesheets) {
-      for (const stylesheet of stylesheets) {
-        if (!stylesheet.includes(`${options.component.replace("OgImageTemplate", "").replace("OgImage", "")}.vue`)) {
-          htmlTemplate = htmlTemplate.replace(stylesheet, "");
-        } else {
-          const href = stylesheet.match(/href="(.*?)"/)[1];
-          try {
-            let css = await (await $fetch(href, {
-              baseURL: nitroOrigin
-            })).text();
-            if (css.includes("const __vite__css =")) {
-              css = css.match(/const __vite__css = "(.*)"/)[1].replace(/\\n/g, "\n");
-            }
-            css = css.replace(/\/\*# sourceMappingURL=.*?\*\//g, "").replaceAll("! important", "").replaceAll("!important");
-            htmlTemplate = htmlTemplate.replace(stylesheet, `<style>${css}</style>`);
-            hasInlineStyles = true;
-          } catch {
-          }
-        }
-      }
-    }
-    if (hasInlineStyles) {
-      try {
-        htmlTemplate = await cssInline(htmlTemplate, {
-          url: nitroOrigin
-        });
-      } catch {
-      }
-    }
-  }
-  return htmlTemplate;
-});

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

@@ -1,3 +0,0 @@
-import type { OgImageOptions } from '../../types';
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<false | OgImageOptions>>;
-export default _default;

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

@@ -1,35 +0,0 @@
-import { createError, defineEventHandler, getQuery } from "h3";
-import { withoutBase } from "ufo";
-import { extractAndNormaliseOgImageOptions } from "../utils.mjs";
-import { getRouteRules } from "#internal/nitro";
-import { useRuntimeConfig } from "#imports";
-export default defineEventHandler(async (e) => {
-  const query = getQuery(e);
-  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}.`
-    });
-  }
-  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"];
-  const payload = extractAndNormaliseOgImageOptions(path, html, routeRules, defaults);
-  if (!payload) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `The path ${path} is missing the og-image payload.`
-    });
-  }
-  return payload;
-});

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

@@ -1,19 +0,0 @@
-import { createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { withBase } from "ufo";
-import { fetchOptionsCached } from "../utils.mjs";
-import { useProvider } from "#nuxt-og-image/provider";
-import { useRuntimeConfig } from "#imports";
-export default defineEventHandler(async (e) => {
-  const query = getQuery(e);
-  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
-  const options = await fetchOptionsCached(e, path);
-  setHeader(e, "Content-Type", "image/svg+xml");
-  const provider = await useProvider(options.provider);
-  if (!provider) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Provider ${options.provider} is missing.`
-    });
-  }
-  return provider.createSvg(options);
-});

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

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

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

@@ -1,19 +0,0 @@
-import { createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { withBase } from "ufo";
-import { fetchOptionsCached } from "../utils.mjs";
-import { useProvider } from "#nuxt-og-image/provider";
-import { useRuntimeConfig } from "#imports";
-export default defineEventHandler(async (e) => {
-  const query = getQuery(e);
-  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
-  const options = await fetchOptionsCached(e, path);
-  setHeader(e, "Content-Type", "application/json");
-  const provider = await useProvider(options.provider);
-  if (!provider) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Provider ${options.provider} is missing.`
-    });
-  }
-  return provider.createVNode(options);
-});

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

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

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

@@ -1,18 +0,0 @@
-/// <reference types="node" />
-import { Buffer } from 'node:buffer';
-import type { H3Event } from 'h3';
-import type { RuntimeOgImageOptions } from '../types';
-export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
-    load(options: RuntimeOgImageOptions): Promise<any>;
-};
-export declare function fetchOptionsCached(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
-export declare function fetchOptions(e: H3Event, path: string): Promise<RuntimeOgImageOptions>;
-export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
-export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
-export declare function readPublicAssetBase64(file: string): Promise<{
-    src: string;
-    width?: number;
-    height?: number;
-} | undefined>;
-export declare function toBase64Image(fileName: string, data: string | ArrayBuffer): string;
-export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,108 +0,0 @@
-import { existsSync, promises as fsp } from "node:fs";
-import { Buffer } from "node:buffer";
-import { getQuery } from "h3";
-import { join } from "pathe";
-import sizeOf from "image-size";
-import { defu } from "defu";
-import { withoutLeadingSlash } from "ufo";
-import { useNitroCache } from "../cache.mjs";
-import { useNitroOrigin, useRuntimeConfig } from "#imports";
-export function wasmLoader(asyncModuleLoad, fallback) {
-  let promise;
-  let wasm;
-  return {
-    async load(options) {
-      if (typeof promise !== "undefined")
-        return promise;
-      if (wasm)
-        return wasm;
-      promise = promise || new Promise(async (resolve) => {
-        try {
-          wasm = await asyncModuleLoad;
-          if (typeof wasm === "string")
-            wasm = void 0;
-        } catch (e) {
-        }
-        if (!wasm) {
-          wasm = await readPublicAsset(fallback, "base64");
-          if (wasm)
-            wasm = Buffer.from(wasm, "base64");
-        }
-        if (!wasm) {
-          wasm = await (await globalThis.$fetch(fallback, { baseURL: options.requestOrigin })).arrayBuffer();
-          wasm = Buffer.from(wasm);
-        }
-        resolve(wasm);
-      });
-      return promise;
-    }
-  };
-}
-export async function fetchOptionsCached(e, path) {
-  const key = [
-    withoutLeadingSlash(path === "/" || !path ? "index" : path).replaceAll("/", "-"),
-    "options"
-  ].join(":");
-  const { cachedItem, update } = await useNitroCache(e, "nuxt-og-image", {
-    key,
-    // allow internal requests to be cached for 5 seconds
-    cacheTtl: 5 * 1e3,
-    cache: !process.dev,
-    headers: false
-  });
-  if (cachedItem)
-    return cachedItem;
-  const options = await fetchOptions(e, path);
-  await update(options);
-  return options;
-}
-export async function fetchOptions(e, path) {
-  const options = await globalThis.$fetch("/api/og-image-options", {
-    query: {
-      path
-    },
-    responseType: "json"
-  });
-  return defu(
-    { requestOrigin: useNitroOrigin(e) },
-    options,
-    // use query data
-    getQuery(e)
-  );
-}
-export function base64ToArrayBuffer(base64) {
-  const buffer = Buffer.from(base64, "base64");
-  return new Uint8Array(buffer).buffer;
-}
-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) {
-    const path = r(assetDir, file);
-    if (existsSync(path))
-      return await fsp.readFile(path, { encoding });
-  }
-}
-export async function readPublicAssetBase64(file) {
-  const base64 = await readPublicAsset(file, "base64");
-  if (base64) {
-    const dimensions = await sizeOf(Buffer.from(base64, "base64"));
-    return {
-      src: toBase64Image(file, base64),
-      ...dimensions
-    };
-  }
-}
-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}`;
-}
-export * from "./utils-pure.mjs";