nuxt-og-image 3.0.0-beta.9 → 3.0.0-rc.1

package/dist/runtime/server/routes/__og-image__/image.mjs

@@ -0,0 +1,88 @@
+import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
+import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
+import { fetchIsland } from "../../../core/html/fetchIsland.mjs";
+import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
+import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
+import { useOgImageBufferCache } from "../../../cache.mjs";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useSiteConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  const ctx = await resolveRendererContext(e);
+  if (ctx instanceof H3Error)
+    return ctx;
+  const { isDebugJsonPayload, extension, options, renderer } = ctx;
+  const { debug, baseCacheKey } = useOgImageRuntimeConfig();
+  const compatibilityHints = [];
+  if (isDebugJsonPayload) {
+    const queryExtension = getQuery(e).extension || ctx.options.extension;
+    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
+      compatibilityHints.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
+    if (options.renderer === "chromium")
+      compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
+    if (options.component !== "PageScreenshot" && await applyInlineCss(ctx, await fetchIsland(ctx)))
+      compatibilityHints.push("Inlining CSS is only supported in Node based environments.");
+    setHeader(e, "Content-Type", "application/json");
+    return {
+      compatibilityHints,
+      cacheKey: ctx.key,
+      options: ctx.options,
+      siteConfig: useSiteConfig(e),
+      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
+    };
+  }
+  switch (extension) {
+    case "html":
+      setHeader(e, "Content-Type", `text/html`);
+      return devIframeTemplate(ctx);
+    case "svg":
+      if (!debug && !import.meta.dev) {
+        return createError({
+          statusCode: 404
+        });
+      }
+      if (ctx.renderer.name !== "satori") {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/svg+xml`);
+      return (await ctx.renderer.debug(ctx)).svg;
+    case "png":
+    case "jpeg":
+    case "jpg":
+      if (!renderer.supportedFormats.includes(extension)) {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
+      break;
+    default:
+      return createError({
+        statusCode: 400,
+        statusMessage: `Invalid request for og.${extension}.`
+      });
+  }
+  const cacheApi = await useOgImageBufferCache(ctx, {
+    cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
+    baseCacheKey
+  });
+  if (typeof cacheApi === "undefined")
+    return;
+  let image = cacheApi.cachedItem;
+  if (!image) {
+    image = await renderer.createImage(ctx);
+    if (image instanceof H3Error)
+      return image;
+    if (!image) {
+      return createError({
+        statusCode: 500,
+        statusMessage: `Failed to generate og.${extension}.`
+      });
+    }
+    await cacheApi.update(image);
+  }
+  return image;
+});

package/dist/runtime/types.d.ts

@@ -1,15 +1,40 @@
-/// <reference types="node" />
-import type { Buffer } from 'node:buffer';
 import type { html } from 'satori-html';
 import type { H3Error, H3Event } from 'h3';
 import type { ResvgRenderOptions } from '@resvg/resvg-js';
 import type { SatoriOptions } from 'satori';
+import type { AllowedComponentProps, Component, ComponentCustomProps, VNodeProps } from '@vue/runtime-core';
+import type { SharpOptions } from 'sharp';
+import type { NitroApp, WasmOptions } from 'nitropack';
+import type { OgImageComponents } from '#nuxt-og-image/components';
+export interface OgImageRenderEventContext {
+    e: H3Event;
+    extension: 'png' | 'jpeg' | 'jpg' | 'svg' | 'html' | 'json';
+    key: string;
+    basePath: string;
+    renderer: Renderer;
+    options: OgImageOptions;
+    isDebugJsonPayload: boolean;
+    _nitro: NitroApp;
+}
+export type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
+export interface OgImageRuntimeConfig {
+    version: string;
+    satoriOptions: SatoriOptions;
+    resvgOptions: ResvgRenderOptions;
+    sharpOptions: SharpOptions;
+    defaults: OgImageOptions;
+    debug: boolean;
+    baseCacheKey: string;
+    fonts: FontConfig[];
+    hasNuxtIcon: boolean;
+    colorPreference: 'light' | 'dark';
+}
 export interface OgImageComponent {
     path?: string;
     pascalName: string;
     kebabName: string;
     hash: string;
-    category: 'app' | 'official' | 'community' | 'pro';
+    category: 'app' | 'community' | 'pro';
     credits?: string;
 }
 export interface ScreenshotOptions {
@@ -33,49 +58,93 @@ export interface ScreenshotOptions {
      */
     delay?: number;
 }
-export interface OgImageOptions extends Partial<ScreenshotOptions> {
-    component?: string;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
+export type OgImagePrebuilt = {
+    url: string;
+} & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
+export type DefineOgImageInput = OgImageOptions | OgImagePrebuilt | false;
+export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     /**
-     * @deprecated use renderer. Replace `browser` with `chromium`
+     * The width of the screenshot.
+     *
+     * @default 1200
      */
-    provider?: 'browser' | 'satori';
+    width?: number;
+    /**
+     * The height of the screenshot.
+     *
+     * @default 630
+     */
+    height?: number;
+    /**
+     * The alt text for the image.
+     */
+    alt?: string;
+    /**
+     * Use a prebuilt image instead of generating one.
+     *
+     * Should be an absolute URL.
+     */
+    url?: string;
+    /**
+     * The name of the component to render.
+     */
+    component?: T | string;
+    /**
+     * Props to pass to the component.
+     */
+    props?: OgImageComponents[T] | Record<string, any>;
+    renderer?: 'chromium' | 'satori';
+    extension?: 'png' | 'jpeg' | 'jpg';
+    emojis?: IconifyEmojiIconSets;
     /**
      * Provide a static HTML template to render the OG Image instead of a component.
      */
     html?: string;
-    cache?: boolean;
-    cacheKey?: string;
     resvg?: ResvgRenderOptions;
     satori?: SatoriOptions;
-    /**
-     * The time to live of the cache in milliseconds.
-     */
-    cacheTtl?: number;
-    [key: string]: any;
-}
-export interface RuntimeOgImageOptions extends Omit<OgImageOptions, 'extension'> {
-    extension: 'png' | 'jpeg' | 'jpg' | 'svg' | 'json' | 'html';
-    path: string;
+    screenshot?: Partial<ScreenshotOptions>;
+    sharp?: SharpOptions;
+    fonts?: InputFontConfig[];
+    cacheMaxAgeSeconds?: number;
 }
 export interface FontConfig {
     name: string;
-    weight: string | number;
+    weight?: string | number;
     path?: string;
+    key?: string;
+}
+export interface ResolvedFontConfig extends FontConfig {
+    cacheKey: string;
+    data?: BufferSource;
+}
+export type InputFontConfig = (`${string}:${number}` | string | FontConfig);
+export interface RuntimeCompatibilitySchema {
+    chromium: 'node' | false;
+    ['css-inline']: 'node' | false;
+    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
+    satori: 'node' | 'wasm' | 'wasm-fs' | false;
+    sharp: 'node' | false;
+    wasm?: WasmOptions;
+}
+export type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
+export interface CompatibilityFlagEnvOverrides {
+    dev?: CompatibilityFlags;
+    runtime?: CompatibilityFlags;
+    prerender?: CompatibilityFlags;
 }
-export type InputFontConfig = (`${string}:${number}` | FontConfig);
-export type RendererOptions = Omit<RuntimeOgImageOptions, 'extension'> & {
-    extension: Omit<RuntimeOgImageOptions['extension'], 'html'>;
+export type RendererOptions = Omit<OgImageOptions, 'extension'> & {
+    extension: Omit<OgImageOptions['extension'], 'html'>;
 };
 export interface Renderer {
     name: 'chromium' | 'satori';
     supportedFormats: Partial<RendererOptions['extension']>[];
-    createImage: (e: H3Event, options: RendererOptions) => Promise<H3Error | Buffer>;
+    createImage: (e: OgImageRenderEventContext) => Promise<H3Error | BufferSource | void>;
+    debug: (e: OgImageRenderEventContext) => Promise<Record<string, any>>;
 }
-export type OgImageScreenshotOptions = Omit<OgImageOptions, 'component'>;
+export type ExtractComponentProps<T extends Component> = T extends new (...args: any) => any ? Omit<InstanceType<T>['$props'], keyof ComponentCustomProps | keyof VNodeProps | keyof AllowedComponentProps> : never;
+export type OgImagePageScreenshotOptions = Omit<OgImageOptions, 'html' | 'renderer' | 'component' | 'satori' | 'resvg' | 'sharp'>;
 export type VNode = ReturnType<typeof html>;
 export interface SatoriTransformer {
     filter: (node: VNode) => boolean;
-    transform: (node: VNode, e: H3Event) => Promise<void>;
+    transform: (node: VNode, e: OgImageRenderEventContext) => Promise<void>;
 }

package/dist/runtime/utils.d.ts

@@ -0,0 +1,4 @@
+import type { OgImageOptions, OgImageRuntimeConfig } from './types';
+export * from './utils.pure';
+export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
+export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/utils.mjs

@@ -0,0 +1,11 @@
+import { joinURL } from "ufo";
+import { defu } from "defu";
+import { useRuntimeConfig } from "#imports";
+export * from "./utils.pure.mjs";
+export function getOgImagePath(pagePath, _options) {
+  const options = defu(_options, useOgImageRuntimeConfig().defaults);
+  return joinURL("/__og-image__/image", pagePath, `og.${options.extension}`);
+}
+export function useOgImageRuntimeConfig() {
+  return useRuntimeConfig()["nuxt-og-image"];
+}

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

@@ -0,0 +1,6 @@
+import type { InputFontConfig, OgImageOptions, ResolvedFontConfig } from './types';
+export declare function isInternalRoute(path: string): boolean;
+export declare function separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): {
+    props: Record<string, any>;
+};
+export declare function normaliseFontInput(fonts: InputFontConfig[]): ResolvedFontConfig[];

package/dist/runtime/utils.pure.mjs

@@ -0,0 +1,63 @@
+import { defu } from "defu";
+export function isInternalRoute(path) {
+  const lastSegment = path.split("/").pop() || path;
+  return lastSegment.includes(".") || path.startsWith("/__") || path.startsWith("@");
+}
+function filterIsOgImageOption(key) {
+  const keys = [
+    "url",
+    "extension",
+    "width",
+    "height",
+    "fonts",
+    "alt",
+    "props",
+    "renderer",
+    "html",
+    "component",
+    "renderer",
+    "emojis",
+    "satori",
+    "resvg",
+    "sharp",
+    "screenshot",
+    "cacheMaxAgeSeconds"
+  ];
+  return keys.includes(key);
+}
+export function separateProps(options, ignoreKeys = []) {
+  options = options || {};
+  const _props = defu(options.props, Object.fromEntries(
+    Object.entries({ ...options }).filter(([k]) => !filterIsOgImageOption(k) && !ignoreKeys.includes(k))
+  ));
+  const props = {};
+  Object.entries(_props).forEach(([key, val]) => {
+    props[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+  });
+  return {
+    ...Object.fromEntries(
+      Object.entries({ ...options }).filter(([k]) => filterIsOgImageOption(k) || ignoreKeys.includes(k))
+    ),
+    props
+  };
+}
+export function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const [name, weight] = f.split(":");
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || "400",
+        style: "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-beta.9",
-  "packageManager": "pnpm@8.11.0",
+  "version": "3.0.0-rc.1",
+  "packageManager": "pnpm@8.12.0",
   "description": "Enlightened OG Image generation for Nuxt.",
+  "author": {
+    "website": "https://harlanzw.com",
+    "name": "Harlan Wilton",
+    "url": "harlan@harlanzw.com"
+  },
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
   "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
@@ -24,82 +29,72 @@
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "virtual.d.ts"
   ],
-  "resolutions": {
-    "nitropack": "npm:nitropack-nightly@2.8.1-28352923.b53e001"
-  },
   "dependencies": {
-    "@img/sharp-libvips-dev": "^1.0.0",
-    "@img/sharp-wasm32": "0.33.0-rc.2",
-    "@nuxt/devtools-kit": "^1.0.4",
+    "@iconify-json/noto": "^1.1.17",
+    "@nuxt/devtools-kit": "^1.0.5",
     "@nuxt/kit": "^3.8.2",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
-    "@twemoji/api": "^14.1.2",
-    "@types/fs-extra": "^11.0.4",
-    "birpc": "0.2.14",
-    "chalk": "^5.3.0",
+    "@unocss/core": "^0.58.0",
+    "@unocss/preset-wind": "^0.58.0",
+    "@vueuse/core": "^10.7.0",
     "chrome-launcher": "^1.1.0",
     "css-inline": "^0.11.0",
     "defu": "^6.1.3",
     "execa": "^8.0.1",
-    "fast-glob": "^3.3.2",
-    "flatted": "^3.2.9",
     "floating-vue": "2.0.0-beta.24",
-    "fs-extra": "^11.2.0",
-    "globby": "^14.0.0",
     "image-size": "^1.0.2",
-    "launch-editor": "^2.6.1",
     "nuxt-site-config": "^1.6.6",
     "nuxt-site-config-kit": "^1.6.6",
     "nypm": "^0.3.3",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
-    "playwright-core": "^1.40.0",
+    "playwright-core": "^1.40.1",
     "radix3": "^1.1.0",
     "satori": "0.10.11",
     "satori-html": "^0.3.2",
-    "sharp": "0.33.0-rc.2",
     "sirv": "^2.0.3",
-    "std-env": "^3.5.0",
-    "svg2png-wasm": "^1.4.1",
+    "std-env": "^3.6.0",
     "terminate": "^2.6.1",
-    "tinyws": "^0.1.0",
-    "twemoji": "^14.0.2",
     "ufo": "^1.3.2",
-    "vue-component-meta": "^1.8.22",
-    "ws": "^8.14.2",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "nitropack": "npm:nitropack-nightly@2.8.1-28352923.b53e001",
-    "@antfu/eslint-config": "2.1.1",
-    "@img/sharp-linux-x64": "0.33.0-rc.2",
+    "@antfu/eslint-config": "2.4.3",
     "@nuxt/content": "^2.9.0",
-    "@nuxt/devtools": "1.0.4",
+    "@nuxt/devtools": "1.0.5",
     "@nuxt/module-builder": "^0.5.4",
     "@nuxt/test-utils": "3.8.1",
+    "@nuxt/ui": "^2.11.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
-    "@types/ws": "^8.5.10",
+    "@nuxtjs/i18n": "8.0.0-rc.8",
+    "@nuxtjs/tailwindcss": "^6.10.1",
+    "@unocss/nuxt": "^0.58.0",
     "bumpp": "^9.2.0",
-    "eslint": "8.54.0",
-    "jest-image-snapshot": "^6.2.0",
+    "eslint": "8.55.0",
+    "jest-image-snapshot": "^6.3.0",
     "nuxt": "^3.8.2",
-    "nuxt-icon": "0.6.6",
-    "playwright": "^1.40.0",
+    "nuxt-icon": "0.6.7",
+    "playwright": "^1.40.1",
     "sass": "^1.69.5",
-    "vitest": "^0.34.6"
+    "sharp": "^0.33.0",
+    "vitest": "^1.0.2"
   },
   "build": {
     "externals": [
       "h3",
-      "nitropack"
+      "nitropack",
+      "@vue/runtime-core",
+      "#nuxt-og-image/components",
+      "sharp"
     ]
   },
   "scripts": {
+    "stub": "nuxt-build-module build --stub",
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
     "build:client": "nuxi generate client",
     "build:module": "nuxt-build-module build",

package/virtual.d.ts

@@ -0,0 +1,49 @@
+declare module '#nuxt-og-image/components' {
+  import type { Component } from 'vue'
+
+  const components: Record<string, Component>
+  export default components
+}
+declare module '#nuxt-og-image/renderers/satori' {
+  import type Renderer from './src/runtime/types'
+
+  const renderer: Renderer | { __unenv__: true } | undefined
+  export default renderer
+}
+declare module '#nuxt-og-image/renderers/chromium' {
+  import type Renderer from './src/runtime/types'
+
+  const renderer: Renderer | { __unenv__: true } | undefined
+  export default renderer
+}
+
+declare module '#nuxt-og-image/bindings/satori' {
+  const satori: typeof import('satori').satori
+  export default satori
+}
+
+declare module '#nuxt-og-image/bindings/resvg' {
+  interface WasmResvg {
+    initWasmPromise: Promise<void>
+    Resvg: import('resvg').Resvg
+  }
+  const instance: WasmResvg
+  export default instance
+}
+declare module '#nuxt-og-image/bindings/chromium' {
+  export const createBrowser: () => Promise<Browser | void>
+}
+
+declare module '#nuxt-og-image/bindings/css-inline' {
+  import type _CssInline from 'css-inline'
+
+  const cssInline: _CssInline
+  export default cssInline
+}
+
+declare module '#nuxt-og-image/bindings/sharp' {
+  import type _sharp from 'sharp'
+
+  const sharp: _sharp
+  export default sharp
+}

package/dist/client/_nuxt/IconCSS.05a4ab6a.js

@@ -1 +0,0 @@
-import{g as _,h as m,i as f,j as c,r as d,o as I,c as v,n as x,_ as S}from"./entry.d927023c.js";const y=_({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(u){m(e=>({f4b1dbd8:p.value}));const t=f(),s=u,l=c(()=>{var e,n;return(n=(e=t.nuxtIcon)==null?void 0:e.aliases)!=null&&n[s.name]?t.nuxtIcon.aliases[s.name]:s.name}),r=c(()=>d(l.value)),p=c(()=>{var o,a;const e=(a=(o=t.nuxtIcon)==null?void 0:o.iconifyApiOptions)==null?void 0:a.url;if(e)try{new URL(e)}catch{console.warn("Nuxt IconCSS: Invalid custom Iconify API URL");return}return`url('${e||"https://api.iconify.design"}/${r.value.prefix}/${r.value.name}.svg')`}),i=c(()=>{var n,o,a;if(!s.size&&typeof((n=t.nuxtIcon)==null?void 0:n.size)=="boolean"&&!((o=t.nuxtIcon)!=null&&o.size))return;const e=s.size||((a=t.nuxtIcon)==null?void 0:a.size)||"1em";return String(Number(e))===e?`${e}px`:e});return(e,n)=>(I(),v("span",{style:x({width:i.value,height:i.value})},null,4))}});const C=S(y,[["__scopeId","data-v-2408e4e8"]]);export{C as default};

package/dist/client/_nuxt/IconCSS.8f429b14.css

@@ -1 +0,0 @@
-span[data-v-2408e4e8]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--f4b1dbd8);mask-image:var(--f4b1dbd8);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

package/dist/client/_nuxt/builds/meta/ce33a6eb-5cc2-4c46-8618-9befaa3f226c.json

@@ -1 +0,0 @@
-{"id":"ce33a6eb-5cc2-4c46-8618-9befaa3f226c","timestamp":1701255996639,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}