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

package/dist/runtime/components/OgImageTemplate/Fallback.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-import { useSiteConfig } from '#imports'
-
-// inherited attrs can mess up the satori parser
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps({
-  path: String,
-  title: {
-    type: String,
-    default: 'Og Image Template',
-  },
-  description: {
-    type: String,
-    default: 'Set a description to change me.',
-  },
-  color: {
-    type: String,
-  },
-  padding: {
-    type: String,
-    default: '0 100px',
-  },
-  titleFontSize: {
-    type: String,
-    default: '75px',
-  },
-  descriptionFontSize: {
-    type: String,
-    default: '35px',
-  },
-  icon: {
-    type: [String, Boolean],
-    default: false,
-  },
-  siteName: {
-    type: String,
-    required: false,
-  },
-  siteLogo: {
-    type: String,
-    required: false,
-  },
-})
-
-const backgroundAttrs = computed(() => {
-  // we want to make a
-  // const isBackgroundTw = props.background?.startsWith('bg-')
-  return {
-    style: {
-      display: 'flex',
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      background: 'rgba(5, 5, 5,1)',
-    },
-  }
-})
-
-const backgroundFlareAttrs = computed(() => {
-  // we want to make a
-  // const isBackgroundTw = props.background?.startsWith('bg-')
-  return {
-    style: {
-      display: 'flex',
-      position: 'absolute',
-      right: '-100%',
-      top: '10%',
-      width: '200%',
-      height: '200%',
-      backgroundImage: 'radial-gradient(circle, rgba(0,220,130, 0.5) 0%,  rgba(5, 5, 5,0.3) 50%, rgba(5, 5, 5,0) 70%)',
-    },
-  }
-})
-
-const containerAttrs = computed(() => {
-  const isColorTw = props.color?.startsWith('text-')
-
-  const classes = [
-    'w-full',
-    'h-full',
-    'flex',
-    'text-gray-100',
-    'relative',
-    'items-center',
-    'justify-center',
-  ]
-  const styles: Record<string, any> = {
-    padding: props.padding,
-  }
-  if (isColorTw)
-    classes.push(props.color)
-  else
-    styles.color = props.color
-  return { class: classes, style: styles }
-})
-
-const titleAttrs = computed(() => {
-  const classes = []
-  const styles = {
-    fontWeight: 'bold',
-    marginBottom: '50px',
-    fontSize: props.titleFontSize,
-  }
-  return { class: classes, style: styles }
-})
-
-const descriptionAttrs = computed(() => {
-  const classes = []
-  const styles = {
-    fontSize: props.descriptionFontSize,
-    lineHeight: `${props.descriptionFontSize.replace('px', '') * 1.5}px`,
-    opacity: '0.8',
-  }
-  return { class: classes, style: styles }
-})
-
-const siteConfig = useSiteConfig()
-const siteName = computed(() => {
-  return props.siteName || siteConfig.name
-})
-const siteLogo = computed(() => {
-  return props.siteLogo || siteConfig.logo
-})
-
-const MaybeIconComponent = resolveComponent('Icon')
-if (typeof props.icon === 'string' && typeof MaybeIconComponent === 'string' && process.dev) {
-  console.warn('Please install `nuxt-icon` to use icons with the fallback OG Image component.')
-  // eslint-disable-next-line no-console
-  console.log('npm add -D nuxt-icon')
-}
-</script>
-
-<template>
-  <div v-bind="backgroundAttrs" />
-  <div v-bind="backgroundFlareAttrs" />
-  <div v-bind="containerAttrs">
-    <div class="flex flex-row justify-between items-center" style="margin-bottom: 100px;">
-      <div class="flex flex-col w-full" :style="icon ? { width: '65%' } : {}">
-        <div v-bind="titleAttrs">
-          {{ title || 'Null Title' }}
-        </div>
-        <div v-if="description" v-bind="descriptionAttrs">
-          {{ description }}
-        </div>
-      </div>
-      <div v-if="typeof icon === 'string' && typeof MaybeIconComponent !== 'string'" style="width: 30%;" class="flex justify-end">
-        <MaybeIconComponent :name="icon" size="250px" style="margin: 0 auto 0 100px;opacity: 0.9;" />
-      </div>
-    </div>
-    <div class="flex flex-row absolute bottom-10 text-left items-start">
-      <img v-if="siteLogo" :src="siteLogo" height="30">
-      <div v-else-if="siteName" style="font-size: 25px;" class="font-bold">
-        {{ siteName }}
-      </div>
-    </div>
-  </div>
-</template>

package/dist/runtime/composables/util.d.ts

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

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -1,69 +0,0 @@
-import { Buffer } from "node:buffer";
-import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
-import { joinURL, parseURL, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
-import { hash } from "ohash";
-import { fetchOptionsCached } from "../utils.mjs";
-import { useNitroCache } from "../../cache.mjs";
-import { useProvider } from "#nuxt-og-image/provider";
-import { useNitroOrigin, useRuntimeConfig } from "#imports";
-export default defineEventHandler(async (e) => {
-  const { runtimeBrowser } = useRuntimeConfig()["nuxt-og-image"];
-  const path = parseURL(e.path).pathname;
-  if (!path.endsWith("__og_image__/og.png"))
-    return;
-  const basePath = withoutTrailingSlash(
-    path.replace("__og_image__/og.png", "")
-  );
-  const options = await fetchOptionsCached(e, basePath);
-  if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
-    return sendRedirect(e, joinURL(useNitroOrigin(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
-  const provider = await useProvider(options.provider);
-  if (!provider) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Provider ${options.provider} is missing.`
-    });
-  }
-  const key = [
-    withoutLeadingSlash(options.path === "/" || !options.path ? "index" : options.path).replaceAll("/", "-"),
-    `og-${hash(options)}`
-  ].join(":");
-  const { enabled: cacheEnabled, cachedItem, update } = await useNitroCache(e, "nuxt-og-image", {
-    key,
-    cacheTtl: options.cacheTtl || 0,
-    cache: !process.dev && options.cache,
-    headers: true
-  });
-  let png;
-  if (cachedItem)
-    png = Buffer.from(cachedItem, "base64");
-  if (!png) {
-    try {
-      png = await provider.createPng(options);
-      if (png) {
-        const base64png = Buffer.from(png).toString("base64");
-        await update(base64png);
-      }
-    } catch (err) {
-      throw createError({
-        statusCode: 500,
-        statusMessage: `Failed to create og image: ${err.message}`
-      });
-    }
-  }
-  if (png) {
-    if (cacheEnabled && options.cacheTtl) {
-      setHeader(e, "Cache-Control", `public, max-age=${Math.round(options.cacheTtl / 1e3)}`);
-    } else {
-      setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-      setHeader(e, "Pragma", "no-cache");
-      setHeader(e, "Expires", "0");
-    }
-    setHeader(e, "Content-Type", "image/png");
-    return png;
-  }
-  throw createError({
-    statusCode: 500,
-    statusMessage: "Failed to create og image, unknown error."
-  });
-});

package/dist/runtime/nitro/middleware/playground.d.ts

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

package/dist/runtime/nitro/middleware/playground.mjs

@@ -1,27 +0,0 @@
-import { defineEventHandler } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchOptionsCached } from "../utils.mjs";
-import { useRuntimeConfig } from "#imports";
-export default defineEventHandler(async (e) => {
-  const path = withoutTrailingSlash(parseURL(e.path).pathname);
-  if (!path.endsWith("/__og_image__"))
-    return;
-  const basePath = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
-  const options = await fetchOptionsCached(e, basePath === "" ? "/" : basePath);
-  if (!options)
-    return `The route ${basePath} has not been set up for og:image generation.`;
-  return `
-<style>
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  iframe {
-    border: none;
-    width: 100%;
-    height: 100%;
-  }
-</style>
-<title>OG Image Playground</title>
-<iframe src="/__nuxt_og_image__/client?&path=${basePath}&base=${useRuntimeConfig().app.baseURL}"></iframe>`;
-});

package/dist/runtime/nitro/providers/browser/lambda.d.ts

@@ -1 +0,0 @@
-export default function createBrowser(): Promise<any>;

package/dist/runtime/nitro/providers/browser/lambda.mjs

@@ -1,9 +0,0 @@
-import edgeChromium from "@sparticuz/chrome-aws-lambda";
-import puppeteer from "puppeteer-core";
-export default async function createBrowser() {
-  return await puppeteer.launch({
-    executablePath: await edgeChromium.executablePath,
-    args: edgeChromium.args,
-    headless: true
-  });
-}

package/dist/runtime/nitro/providers/browser/playwright.d.ts

@@ -1 +0,0 @@
-export default function createBrowser(): Promise<any>;

package/dist/runtime/nitro/providers/browser/playwright.mjs

@@ -1,22 +0,0 @@
-import playwrightCore from "playwright-core";
-export default async function createBrowser() {
-  try {
-    return await playwrightCore.chromium.launch({
-      headless: true
-    });
-  } catch (e) {
-  }
-  try {
-    const playwright = await import(String("playwright"));
-    return await playwright.chromium.launch({
-      headless: true
-    });
-  } catch (e) {
-    if (process.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.");
-      throw e;
-    }
-  }
-}

package/dist/runtime/nitro/providers/browser/universal.d.ts

@@ -1,2 +0,0 @@
-import type { Browser } from 'playwright-core';
-export default function createBrowser(): Promise<Browser | void>;

package/dist/runtime/nitro/providers/png/resvg-node.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="node" />
-import type { ResvgRenderOptions } from '@resvg/resvg-js';
-import type { RuntimeOgImageOptions } from '../../../types';
-export default function (svg: string, options: ResvgRenderOptions & RuntimeOgImageOptions): Promise<Buffer>;

package/dist/runtime/nitro/providers/png/resvg-node.mjs

@@ -1,6 +0,0 @@
-import { Resvg } from "@resvg/resvg-js";
-export default async function(svg, options) {
-  const resvgJS = new Resvg(svg, options);
-  const pngData = resvgJS.render();
-  return pngData.asPng();
-}

package/dist/runtime/nitro/providers/png/resvg-wasm.d.ts

@@ -1,3 +0,0 @@
-import type { ResvgRenderOptions } from '@resvg/resvg-wasm';
-import type { RuntimeOgImageOptions } from '../../../types';
-export default function (svg: string, options: ResvgRenderOptions & RuntimeOgImageOptions): Promise<Uint8Array>;

package/dist/runtime/nitro/providers/png/resvg-wasm.mjs

@@ -1,11 +0,0 @@
-import { Resvg, initWasm } from "@resvg/resvg-wasm";
-import { wasmLoader } from "../../utils.mjs";
-const ReSvgLoader = wasmLoader("/* NUXT_OG_IMAGE_RESVG_WASM */", "/resvg.wasm");
-export default async function(svg, options) {
-  const ReSvgWasm = await ReSvgLoader.load(options);
-  await initWasm(ReSvgWasm).catch(() => {
-  });
-  const resvgJS = new Resvg(svg, options);
-  const pngData = resvgJS.render();
-  return pngData.asPng();
-}

package/dist/runtime/nitro/providers/png/svg2png.d.ts

@@ -1,3 +0,0 @@
-import type { ConvertOptions } from 'svg2png-wasm';
-import type { RuntimeOgImageOptions } from '../../../types';
-export default function (svg: string, options: ConvertOptions & RuntimeOgImageOptions): Promise<Uint8Array>;

package/dist/runtime/nitro/providers/png/svg2png.mjs

@@ -1,11 +0,0 @@
-import { initialize, svg2png } from "svg2png-wasm";
-import { wasmLoader } from "../../utils.mjs";
-const Svg2PngLoader = wasmLoader("/* NUXT_OG_IMAGE_SVG2PNG_WASM */", "/svg2png.wasm");
-export default async function(svg, options) {
-  const Svg2PngWasm = await Svg2PngLoader.load(options);
-  await initialize(Svg2PngWasm).catch((e) => {
-    if (!e.message.trim().endsWith("function can be used only once."))
-      throw e;
-  });
-  return await svg2png(svg, options);
-}

package/dist/runtime/nitro/providers/satori/default.d.ts

@@ -1,2 +0,0 @@
-import type { SatoriOptions } from 'satori';
-export default function (nodes: any, options: SatoriOptions): Promise<string>;

package/dist/runtime/nitro/providers/satori/default.mjs

@@ -1,4 +0,0 @@
-import satori from "satori";
-export default function(nodes, options) {
-  return satori(nodes, options);
-}

package/dist/runtime/nitro/providers/satori/yoga-wasm.d.ts

@@ -1,3 +0,0 @@
-import type { SatoriOptions } from 'satori';
-import type { RuntimeOgImageOptions } from '../../../types';
-export default function (nodes: string, options: SatoriOptions & RuntimeOgImageOptions): Promise<string>;

package/dist/runtime/nitro/providers/satori/yoga-wasm.mjs

@@ -1,10 +0,0 @@
-import satori, { init } from "satori/wasm";
-import initYoga from "yoga-wasm-web";
-import { wasmLoader } from "../../utils.mjs";
-const YogaLoader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm");
-export default async function(nodes, options) {
-  const yogaWasm = await YogaLoader.load(options);
-  const yoga = await initYoga(yogaWasm);
-  init(yoga);
-  return await satori(nodes, options);
-}

package/dist/runtime/nitro/renderers/browser.d.ts

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

package/dist/runtime/nitro/renderers/browser.mjs

@@ -1,36 +0,0 @@
-import { screenshot } from "../../browserUtil.mjs";
-import loadBrowserLauncherChunk from "#nuxt-og-image/browser";
-const BrowserRenderer = {
-  name: "browser",
-  createSvg: async function createSvg() {
-    throw new Error("Browser provider can't create SVGs.");
-  },
-  createVNode: async function createVNode() {
-    throw new Error("Browser provider can't create VNodes.");
-  },
-  createPng: async function createPng(options) {
-    const launchBrowser = await loadBrowserLauncherChunk();
-    if (!launchBrowser) {
-      throw new Error("Failed to load browser. Is the `browserProvider` enabled?");
-    }
-    const browser = await launchBrowser();
-    let res = null;
-    if (browser) {
-      try {
-        if (options.html) {
-          res = await screenshot(browser, options);
-        } else {
-          res = await screenshot(browser, {
-            ...options,
-            host: options.requestOrigin,
-            path: `/api/og-image-html?path=${options.path}`
-          });
-        }
-      } finally {
-        await browser.close();
-      }
-    }
-    return res;
-  }
-};
-export default BrowserRenderer;

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

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

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

@@ -1,58 +0,0 @@
-import { html as convertHtmlToSatori } from "satori-html";
-import { loadFont, walkSatoriTree } from "./utils.mjs";
-import imageSrc from "./plugins/imageSrc.mjs";
-import twClasses from "./plugins/twClasses.mjs";
-import flex from "./plugins/flex.mjs";
-import emojis from "./plugins/emojis.mjs";
-import encoding from "./plugins/encoding.mjs";
-import loadPngCreator from "#nuxt-og-image/png";
-import loadSatori from "#nuxt-og-image/satori";
-import { useRuntimeConfig } from "#imports";
-const satoriFonts = [];
-let fontLoadPromise = null;
-function loadFonts(baseURL, fonts) {
-  if (fontLoadPromise)
-    return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
-}
-const SatoriRenderer = {
-  name: "satori",
-  createPng: async function createPng(options) {
-    const svg = await this.createSvg(options);
-    const pngCreator = await loadPngCreator();
-    return pngCreator(svg, options);
-  },
-  createVNode: async function createVNode(options) {
-    const html = options.html || await globalThis.$fetch("/api/og-image-html", {
-      params: {
-        path: options.path,
-        options: JSON.stringify(options)
-      }
-    });
-    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || html;
-    const satoriTree = convertHtmlToSatori(body);
-    await walkSatoriTree(satoriTree, [
-      emojis,
-      twClasses,
-      imageSrc,
-      flex,
-      encoding
-    ], options);
-    return satoriTree;
-  },
-  createSvg: async function createSvg(options) {
-    const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-    const vnodes = await this.createVNode(options);
-    if (!satoriFonts.length)
-      satoriFonts.push(...await loadFonts(options.requestOrigin, fonts));
-    const satori = await loadSatori();
-    return await satori(vnodes, {
-      ...satoriOptions,
-      fonts: satoriFonts,
-      embedFont: true,
-      width: options.width,
-      height: options.height
-    });
-  }
-};
-export default SatoriRenderer;

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

@@ -1,4 +0,0 @@
-import type { FontConfig, RuntimeOgImageOptions, SatoriTransformer, VNode } from '../../../types';
-export declare function loadFont(requestOrigin: string, font: FontConfig): Promise<any>;
-export declare function walkSatoriTree(node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[], props: RuntimeOgImageOptions): Promise<void>;
-export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

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

@@ -1,60 +0,0 @@
-import { Buffer } from "node:buffer";
-import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
-import { useStorage } from "#imports";
-const cachedFonts = {};
-export async function loadFont(requestOrigin, font) {
-  const fontKey = `${font.name}:${font.weight}`;
-  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
-  if (cachedFonts[fontKey])
-    return cachedFonts[fontKey];
-  const [name, weight] = fontKey.split(":");
-  let data;
-  if (await useStorage().hasItem(storageKey))
-    data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
-  if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
-    data = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
-  }
-  if (font.path) {
-    data = await readPublicAsset(font.path);
-    if (!data) {
-      try {
-        data = await globalThis.$fetch(font.path, {
-          responseType: "arrayBuffer",
-          baseURL: requestOrigin
-        });
-      } catch {
-      }
-    }
-  }
-  if (!data) {
-    const fontUrl = await globalThis.$fetch("/api/og-image-font", {
-      query: { name, weight }
-    });
-    data = await globalThis.$fetch(fontUrl, {
-      responseType: "arrayBuffer"
-    });
-  }
-  cachedFonts[fontKey] = { name, weight: Number(weight), data, style: "normal" };
-  await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[fontKey];
-}
-export async function walkSatoriTree(node, plugins, props) {
-  if (!node.props?.children)
-    return;
-  if (Array.isArray(node.props.children) && node.props.children.length === 0) {
-    delete node.props.children;
-    return;
-  }
-  for (const child of node.props.children || []) {
-    if (child) {
-      for (const plugin of plugins.flat()) {
-        if (plugin.filter(child))
-          await plugin.transform(child, props);
-      }
-      await walkSatoriTree(child, plugins, props);
-    }
-  }
-}
-export function defineSatoriTransformer(transformer) {
-  return transformer;
-}

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

@@ -1,22 +0,0 @@
-import { getQuery } from "h3";
-import { cachedEventHandler } from "#imports";
-export default cachedEventHandler(async (e) => {
-  const { name, weight } = getQuery(e);
-  if (!name || !weight)
-    return "Provide a font name and weight";
-  const css = await await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
-    headers: {
-      // Make sure it returns TTF.
-      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
-    }
-  });
-  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-  if (!resource)
-    return;
-  return resource[1];
-}, {
-  getKey: (e) => {
-    const query = getQuery(e);
-    return `nuxt-og-image:font-url:${query.name}:${query.weight}`;
-  }
-});

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

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