@vercel/og 0.8.1 → 0.8.3

package/dist/language/index.js

@@ -0,0 +1,103 @@
+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.js

@@ -0,0 +1,91 @@
+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,7 +1,4 @@
 /// <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';
@@ -48,57 +45,6 @@ export type ImageResponseNodeOptions = ImageOptions & {
     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> {
         /**

package/dist/types.js

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

package/package.json

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