@vercel/og 0.8.2 → 0.8.4

package/dist/types-d38469ff.d.ts

@@ -0,0 +1,74 @@
+import { SatoriOptions } from 'satori';
+import { OutgoingHttpHeader } from 'http';
+
+declare const apis: {
+    twemoji: (code: any) => string;
+    openmoji: string;
+    blobmoji: string;
+    noto: string;
+    fluent: (code: any) => string;
+    fluentFlat: (code: any) => string;
+};
+type EmojiType = keyof typeof apis;
+
+type ImageOptions = {
+    /**
+     * The width of the image.
+     *
+     * @type {number}
+     * @default 1200
+     */
+    width?: number;
+    /**
+     * The height of the image.
+     *
+     * @type {number}
+     * @default 630
+     */
+    height?: number;
+    /**
+     * Display debug information on the image.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * A list of fonts to use.
+     *
+     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
+     * @default Noto Sans Latin Regular.
+     */
+    fonts?: SatoriOptions['fonts'];
+    /**
+     * Using a specific Emoji style. Defaults to `twemoji`.
+     *
+     * @type {EmojiType}
+     * @default 'twemoji'
+     */
+    emoji?: EmojiType;
+};
+type ImageResponseNodeOptions = ImageOptions & {
+    status?: number;
+    statusText?: string;
+    headers?: OutgoingHttpHeader[];
+};
+type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        /**
+         * Specify styles using Tailwind CSS classes. This feature is currently experimental.
+         * If `style` prop is also specified, styles generated with `tw` prop will be overridden.
+         *
+         * Example:
+         * - `tw='w-full h-full bg-blue-200'`
+         * - `tw='text-9xl'`
+         * - `tw='text-[80px]'`
+         *
+         * @type {string}
+         */
+        tw?: string;
+    }
+}
+
+export { ImageResponseOptions as I, ImageResponseNodeOptions as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
   "type": "module",
   "main": "./dist/index.node.js",
@@ -44,8 +44,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "pnpm typecheck && tsup && pnpm types && pnpm copy",
-    "types": "tsc --project tsconfig.json",
+    "build": "pnpm typecheck && tsup --dts && pnpm copy",
     "copy": "node scripts/copy-vendors.js"
   },
   "keywords": [

package/dist/emoji/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
- */
-export declare function getIconCode(char: string): string;
-declare const apis: {
-    twemoji: (code: any) => string;
-    openmoji: string;
-    blobmoji: string;
-    noto: string;
-    fluent: (code: any) => string;
-    fluentFlat: (code: any) => string;
-};
-export type EmojiType = keyof typeof apis;
-export declare function loadEmoji(code: string, type?: EmojiType): Promise<Response>;
-export {};

package/dist/emoji/index.js

@@ -1,49 +0,0 @@
-/**
- * Modified version of https://unpkg.com/twemoji@13.1.0/dist/twemoji.esm.js.
- */
-/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */
-const U200D = String.fromCharCode(8205);
-const UFE0Fg = /\uFE0F/g;
-export function getIconCode(char) {
-    return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, '') : char);
-}
-function toCodePoint(unicodeSurrogates) {
-    var r = [], c = 0, p = 0, i = 0;
-    while (i < unicodeSurrogates.length) {
-        c = unicodeSurrogates.charCodeAt(i++);
-        if (p) {
-            r.push((65536 + ((p - 55296) << 10) + (c - 56320)).toString(16));
-            p = 0;
-        }
-        else if (55296 <= c && c <= 56319) {
-            p = c;
-        }
-        else {
-            r.push(c.toString(16));
-        }
-    }
-    return r.join('-');
-}
-const apis = {
-    twemoji: (code) => 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/' + code.toLowerCase() + '.svg',
-    openmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/',
-    blobmoji: 'https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/',
-    noto: 'https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/',
-    fluent: (code) => 'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +
-        code.toLowerCase() +
-        '_color.svg',
-    fluentFlat: (code) => 'https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/' +
-        code.toLowerCase() +
-        '_flat.svg',
-};
-export function loadEmoji(code, type) {
-    // https://github.com/svgmoji/svgmoji
-    if (!type || !apis[type]) {
-        type = 'twemoji';
-    }
-    const api = apis[type];
-    if (typeof api === 'function') {
-        return fetch(api(code));
-    }
-    return fetch(`${api}${code.toUpperCase()}.svg`);
-}

package/dist/language/index.d.ts

@@ -1,28 +0,0 @@
-export declare class FontDetector {
-    private rangesByLang;
-    detect(text: string, fonts: string[]): Promise<{
-        [lang: string]: string;
-    }>;
-    private detectSegment;
-    private load;
-    private addDetectors;
-}
-export declare const languageFontMap: {
-    'ja-JP': string;
-    'ko-KR': string;
-    'zh-CN': string;
-    'zh-TW': string;
-    'zh-HK': string;
-    'th-TH': string;
-    'bn-IN': string;
-    'ar-AR': string;
-    'ta-IN': string;
-    'ml-IN': string;
-    'he-IL': string;
-    'te-IN': string;
-    devanagari: string;
-    kannada: string;
-    symbol: string[];
-    math: string;
-    unknown: string;
-};

package/dist/language/index.js

@@ -1,103 +0,0 @@
-export class FontDetector {
-    constructor() {
-        this.rangesByLang = {};
-    }
-    async detect(text, fonts) {
-        await this.load(fonts);
-        const result = {};
-        for (const segment of text) {
-            const lang = this.detectSegment(segment, fonts);
-            if (lang) {
-                result[lang] = result[lang] || '';
-                result[lang] += segment;
-            }
-        }
-        return result;
-    }
-    detectSegment(segment, fonts) {
-        for (const font of fonts) {
-            const range = this.rangesByLang[font];
-            if (range && checkSegmentInRange(segment, range)) {
-                return font;
-            }
-        }
-        return null;
-    }
-    async load(fonts) {
-        let params = '';
-        const existingLang = Object.keys(this.rangesByLang);
-        const langNeedsToLoad = fonts.filter((font) => !existingLang.includes(font));
-        if (langNeedsToLoad.length === 0) {
-            return;
-        }
-        for (const font of langNeedsToLoad) {
-            params += `family=${font}&`;
-        }
-        params += 'display=swap';
-        const API = `https://fonts.googleapis.com/css2?${params}`;
-        const fontFace = await (await fetch(API, {
-            headers: {
-                // Make sure it returns TTF.
-                'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36',
-            },
-        })).text();
-        this.addDetectors(fontFace);
-    }
-    addDetectors(input) {
-        const regex = /font-family:\s*'(.+?)';.+?unicode-range:\s*(.+?);/gms;
-        const matches = input.matchAll(regex);
-        for (const [, _lang, range] of matches) {
-            const lang = _lang.replaceAll(' ', '+');
-            if (!this.rangesByLang[lang]) {
-                this.rangesByLang[lang] = [];
-            }
-            this.rangesByLang[lang].push(...convert(range));
-        }
-    }
-}
-function convert(input) {
-    return input.split(', ').map((range) => {
-        range = range.replaceAll('U+', '');
-        const [start, end] = range.split('-').map((hex) => parseInt(hex, 16));
-        if (isNaN(end)) {
-            return start;
-        }
-        return [start, end];
-    });
-}
-function checkSegmentInRange(segment, range) {
-    const codePoint = segment.codePointAt(0);
-    if (!codePoint)
-        return false;
-    return range.some((val) => {
-        if (typeof val === 'number') {
-            return codePoint === val;
-        }
-        else {
-            const [start, end] = val;
-            return start <= codePoint && codePoint <= end;
-        }
-    });
-}
-// @TODO: Support font style and weights, and make this option extensible rather
-// than built-in.
-// @TODO: Cover most languages with Noto Sans.
-export const languageFontMap = {
-    'ja-JP': 'Noto+Sans+JP',
-    'ko-KR': 'Noto+Sans+KR',
-    'zh-CN': 'Noto+Sans+SC',
-    'zh-TW': 'Noto+Sans+TC',
-    'zh-HK': 'Noto+Sans+HK',
-    'th-TH': 'Noto+Sans+Thai',
-    'bn-IN': 'Noto+Sans+Bengali',
-    'ar-AR': 'Noto+Sans+Arabic',
-    'ta-IN': 'Noto+Sans+Tamil',
-    'ml-IN': 'Noto+Sans+Malayalam',
-    'he-IL': 'Noto+Sans+Hebrew',
-    'te-IN': 'Noto+Sans+Telugu',
-    devanagari: 'Noto+Sans+Devanagari',
-    kannada: 'Noto+Sans+Kannada',
-    symbol: ['Noto+Sans+Symbols', 'Noto+Sans+Symbols+2'],
-    math: 'Noto+Sans+Math',
-    unknown: 'Noto+Sans',
-};

package/dist/og.d.ts

@@ -1 +0,0 @@
-export default function render(satori: any, resvg: typeof import('@resvg/resvg-wasm'), opts: any, defaultFonts: any, element: any): Promise<Uint8Array>;

package/dist/og.js

@@ -1,91 +0,0 @@
-import { loadEmoji, getIconCode } from './emoji';
-import { FontDetector, languageFontMap } from './language';
-async function loadGoogleFont(font, text) {
-    if (!font || !text)
-        return;
-    const API = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
-    const css = await (await fetch(API, {
-        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',
-        },
-    })).text();
-    const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-    if (!resource)
-        throw new Error('Failed to download dynamic font');
-    const res = await fetch(resource[1]);
-    if (!res.ok) {
-        throw new Error('Failed to download dynamic font. Status: ' + res.status);
-    }
-    return res.arrayBuffer();
-}
-const detector = new FontDetector();
-const assetCache = new Map();
-const loadDynamicAsset = ({ emoji }) => {
-    const fn = async (code, text) => {
-        if (code === 'emoji') {
-            // It's an emoji, load the image.
-            return (`data:image/svg+xml;base64,` +
-                btoa(await (await loadEmoji(getIconCode(text), emoji)).text()));
-        }
-        const codes = code.split('|');
-        // Try to load from Google Fonts.
-        const names = codes
-            .map((code) => languageFontMap[code])
-            .filter(Boolean)
-            .flat();
-        if (names.length === 0)
-            return [];
-        try {
-            const textByFont = await detector.detect(text, names);
-            const fonts = Object.keys(textByFont);
-            const fontData = await Promise.all(fonts.map((font) => loadGoogleFont(font, textByFont[font])));
-            return fontData.map((data, index) => ({
-                name: `satori_${codes[index]}_fallback_${text}`,
-                data,
-                weight: 400,
-                style: 'normal',
-                lang: codes[index] === 'unknown' ? undefined : codes[index],
-            }));
-        }
-        catch (e) {
-            console.error('Failed to load dynamic font for', text, '. Error:', e);
-        }
-    };
-    return async (...args) => {
-        const key = JSON.stringify(args);
-        const cache = assetCache.get(key);
-        if (cache)
-            return cache;
-        const asset = await fn(...args);
-        assetCache.set(key, asset);
-        return asset;
-    };
-};
-export default async function render(satori, resvg, opts, defaultFonts, element) {
-    const options = Object.assign({
-        width: 1200,
-        height: 630,
-        debug: false,
-    }, opts);
-    const svg = await satori(element, {
-        width: options.width,
-        height: options.height,
-        debug: options.debug,
-        fonts: options.fonts || defaultFonts,
-        loadAdditionalAsset: loadDynamicAsset({
-            emoji: options.emoji,
-        }),
-    });
-    const resvgJS = new resvg.Resvg(svg, {
-        fitTo: {
-            mode: 'width',
-            value: options.width,
-        },
-    });
-    const pngData = resvgJS.render();
-    const pngBuffer = pngData.asPng();
-    pngData.free();
-    resvgJS.free();
-    return pngBuffer;
-}

package/dist/types.d.ts

@@ -1,118 +0,0 @@
-/// <reference types="node" />
-/// <reference types="react" />
-/// <reference types="node" />
-/// <reference types="node" />
-import type { SatoriOptions } from 'satori';
-import type { EmojiType } from './emoji';
-import type { OutgoingHttpHeader } from 'http';
-type ImageOptions = {
-    /**
-     * The width of the image.
-     *
-     * @type {number}
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the image.
-     *
-     * @type {number}
-     * @default 630
-     */
-    height?: number;
-    /**
-     * Display debug information on the image.
-     *
-     * @type {boolean}
-     * @default false
-     */
-    debug?: boolean;
-    /**
-     * A list of fonts to use.
-     *
-     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
-     * @default Noto Sans Latin Regular.
-     */
-    fonts?: SatoriOptions['fonts'];
-    /**
-     * Using a specific Emoji style. Defaults to `twemoji`.
-     *
-     * @type {EmojiType}
-     * @default 'twemoji'
-     */
-    emoji?: EmojiType;
-};
-export type ImageResponseNodeOptions = ImageOptions & {
-    status?: number;
-    statusText?: string;
-    headers?: OutgoingHttpHeader[];
-};
-export type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
-export interface FigmaImageResponseProps {
-    /**
-     * Link to the Figma template frame.
-     *
-     * You can get the URL in Figma by right-clicking a frame and selecting "Copy link".
-     * @example https://www.figma.com/file/QjGNQixWnhu300e1Xzdl2y/OG-Images?type=design&node-id=11356-2443&mode=design&t=yLROd7ro8mP1PxMY-4
-     */
-    url: string;
-    /**
-     * A mapping between Figma layer name and the value you want to replace it with.
-     *
-     * @example Sets Figma text layer named "Title" to "How to create OG Images"
-     * ```js
-     *  { "Title": "How to create OG Images" }
-     * ```
-     *
-     * @example Sets multiple Figma text layers and provides custom styles
-     * ```js
-     * {
-     *   "Title": { value: "How to create OG Images", props: { color: "red", centerHorizontally: true } },
-     *   "Description": { value: "A short story", props: { centerHorizontally: true } },
-     * }
-     * ```
-     *
-     * `centerHorizontally` centers text layer horizontally.
-     */
-    template: Record<string, FigmaComplexTemplate | string>;
-    /**
-     * The font names must match the font names in Figma.
-     */
-    fonts?: FontOptions[];
-    /**
-     * The same as {@link ImageResponseOptions} except `width` and `height`. `width` and `height` are automatically set from the Figma frame's size.
-     */
-    imageResponseOptions?: Omit<ImageResponseOptions, 'width' | 'height'>;
-}
-export interface FigmaComplexTemplate {
-    value: string;
-    props?: {
-        centerHorizontally?: boolean;
-    } & React.CSSProperties;
-}
-type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type Style = 'normal' | 'italic';
-interface FontOptions {
-    data: Buffer | ArrayBuffer;
-    name: string;
-    weight?: Weight;
-    style?: Style;
-    lang?: string;
-}
-declare module 'react' {
-    interface HTMLAttributes<T> {
-        /**
-         * Specify styles using Tailwind CSS classes. This feature is currently experimental.
-         * If `style` prop is also specified, styles generated with `tw` prop will be overridden.
-         *
-         * Example:
-         * - `tw='w-full h-full bg-blue-200'`
-         * - `tw='text-9xl'`
-         * - `tw='text-[80px]'`
-         *
-         * @type {string}
-         */
-        tw?: string;
-    }
-}
-export {};

package/dist/types.js

@@ -1 +0,0 @@
-export {};