@vercel/og 0.8.1 → 0.8.2

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.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "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"
   },