nuxt-og-image/dist/module.d.ts

Enlightened OG Image generation for Nuxt.

import * as _nuxt_schema from '@nuxt/schema';
import { AddComponentOptions } from '@nuxt/kit';
import { SatoriOptions } from 'satori';
import { ResvgRenderOptions } from '@resvg/resvg-js';
import { SharpOptions } from 'sharp';
import { NitroOptions } from 'nitropack';
import { OgImageComponents } from '#nuxt-og-image/components';

type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
interface OgImageComponent {
    path?: string;
    pascalName: string;
    kebabName: string;
    hash: string;
    category: 'app' | 'community' | 'pro';
    credits?: string;
}
interface ScreenshotOptions {
    colorScheme?: 'dark' | 'light';
    selector?: string;
    mask?: string;
    /**
     * The width of the screenshot.
     *
     * @default 1200
     */
    width: number;
    /**
     * The height of the screenshot.
     *
     * @default 630
     */
    height: number;
    /**
     * How long to wait before taking the screenshot. Useful for waiting for animations.
     */
    delay?: number;
}
interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
    /**
     * The width of the screenshot.
     *
     * @default 1200
     */
    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;
    resvg?: ResvgRenderOptions;
    satori?: SatoriOptions;
    screenshot?: Partial<ScreenshotOptions>;
    sharp?: SharpOptions;
    fonts?: InputFontConfig[];
    cacheMaxAgeSeconds?: number;
    /**
     * @internal
     */
    _query?: Record<string, any>;
}
interface FontConfig {
    name: string;
    style?: string;
    weight?: string | number;
    path?: string;
    key?: string;
    absolutePath?: boolean;
}
type InputFontConfig = (`${string}:${number}` | string | FontConfig);
interface RuntimeCompatibilitySchema {
    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
    satori: 'node' | 'wasm' | 'wasm-fs' | false;
    sharp: 'node' | false;
    wasm?: NitroOptions['wasm'];
}
type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
interface CompatibilityFlagEnvOverrides {
    dev?: CompatibilityFlags;
    runtime?: CompatibilityFlags;
    prerender?: CompatibilityFlags;
}

interface ModuleOptions {
    /**
     * Whether the og:image images should be generated.
     *
     * @default true
     */
    enabled: boolean;
    /**
     * Default data used within the payload to generate the OG Image.
     *
     * You can use this to change the default template, image sizing and more.
     *
     * @default { component: 'OgImageTemplateFallback', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
     */
    defaults: OgImageOptions;
    /**
     * Fonts to use when rendering the og:image.
     *
     * @example ['Roboto:400', 'Roboto:700', { path: 'path/to/font.ttf', weight: 400, name: 'MyFont' }]
     */
    fonts: InputFontConfig[];
    /**
     * Options to pass to satori.
     *
     * @see https://github.com/vercel/satori/blob/main/src/satori.ts#L18
     */
    satoriOptions?: Partial<SatoriOptions>;
    /**
     * Options to pass to resvg.
     *
     * @see https://github.com/yisibl/resvg-js/blob/main/wasm/index.d.ts#L39
     */
    resvgOptions?: Partial<ResvgRenderOptions>;
    /**
     * Options to pass to sharp.
     *
     * @see https://sharp.pixelplumbing.com/api-constructor
     */
    sharpOptions?: Partial<SharpOptions>;
    /**
     * Enables debug logs and a debug endpoint.
     *
     * @false false
     */
    debug: boolean;
    /**
     * Options to pass to the <OgImage> and <OgImageScreenshot> component.
     */
    componentOptions?: Pick<AddComponentOptions, 'global'>;
    /**
     * Modify the cache behavior.
     *
     * Passing a boolean will enable or disable the runtime cache with the default options.
     *
     * Providing a record will allow you to configure the runtime cache fully.
     *
     * @default true
     * @see https://nitro.unjs.io/guide/storage#mountpoints
     * @example { driver: 'redis', host: 'localhost', port: 6379, password: 'password' }
     */
    runtimeCacheStorage: boolean | (Record<string, any> & {
        driver: string;
    });
    /**
     * Extra component directories that should be used to resolve components.
     *
     * @default ['OgImage', 'OgImageTemplate']
     */
    componentDirs: string[];
    /**
     * Manually modify the compatibility.
     */
    compatibility?: CompatibilityFlagEnvOverrides;
    /**
     * Use an alternative host for downloading Google Fonts. This is used to support China where Google Fonts is blocked.
     *
     * When `true` is set will use `fonts.font.im`, otherwise will use a string as the host.
     */
    googleFontMirror?: true | string;
}
interface ModuleHooks {
    'nuxt-og-image:components': (ctx: {
        components: OgImageComponent[];
    }) => Promise<void> | void;
    'nuxt-og-image:runtime-config': (config: ModuleOptions) => Promise<void> | void;
}
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

export { type ModuleHooks, type ModuleOptions, _default as default };