123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
import type { ReactElement } from "https://esm.sh/react@18.2.0";
import type { SatoriOptions } from "https://esm.sh/satori@0.4.0";
import satori, { init as initSatori } from "https://esm.sh/satori@0.4.0/wasm";import { initStreaming } from "https://esm.sh/yoga-wasm-web@0.3.0";
import {  initWasm,  Resvg,} from "https://esm.sh/@resvg/resvg-wasm@2.0.0-alpha.4";import { EmojiType, getIconCode, loadEmoji } from "./emoji.ts";
declare module "https://esm.sh/react@18.2.0" {  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;  }}
const resvg_wasm = fetch(  "https://cdn.jsdelivr.net/npm/@vercel/og@0.1.0/vendor/resvg.simd.wasm",).then((res) => res.arrayBuffer());
const yoga_wasm = fetch(  "https://cdn.jsdelivr.net/npm/@vercel/og@0.1.0/vendor/yoga.wasm",);
const fallbackFont = fetch(  "https://cdn.jsdelivr.net/npm/@vercel/og@0.1.0/vendor/noto-sans-v27-latin-regular.ttf",).then((a) => a.arrayBuffer());
const initializedResvg = initWasm(resvg_wasm);const initializedYoga = initStreaming(yoga_wasm).then((yoga: unknown) =>  initSatori(yoga));
const isDev = Boolean(Deno.env.get("NETLIFY_LOCAL"));
type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & {  /**   * 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`.   *   * @link https://github.com/vercel/og#emoji   * @type {EmojiType}   * @default 'twemoji'   */  emoji?: EmojiType;};
// @TODO: Support font style and weights, and make this option extensible rather// than built-in.// @TODO: Cover most languages with Noto Sans.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",};
async function loadGoogleFont(fonts: string | string[], text: string) {  // @TODO: Support multiple fonts.  const font = Array.isArray(fonts) ? fonts.at(-1) : fonts;  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 load font");
  return fetch(resource[1]).then((res) => res.arrayBuffer());}
type Asset = SatoriOptions["fonts"][0] | string;
const assetCache = new Map<string, Asset | undefined>();const loadDynamicAsset = ({ emoji }: { emoji?: EmojiType }) => {  const fn = async (    code: keyof typeof languageFontMap | "emoji",    text: string,  ): Promise<Asset | undefined> => {    if (code === "emoji") {      // It's an emoji, load the image.      return (        `data:image/svg+xml;base64,` +        btoa(await (await loadEmoji(getIconCode(text), emoji)).text())      );    }
    // Try to load from Google Fonts.    if (!languageFontMap[code]) code = "unknown";
    try {      const data = await loadGoogleFont(languageFontMap[code], text);
      if (data) {        return {          name: `satori_${code}_fallback_${text}`,          data,          weight: 400,          style: "normal",        };      }    } catch (e) {      console.error("Failed to load dynamic font for", text, ". Error:", e);    }  };
  return async (...args: Parameters<typeof fn>) => {    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 class ImageResponse extends Response {  constructor(element: ReactElement, options: ImageResponseOptions = {}) {    const extendedOptions = Object.assign(      {        width: 1200,        height: 630,        debug: false,      },      options,    );
    const result = new ReadableStream({      async start(controller) {        await initializedYoga;        await initializedResvg;        const fontData = await fallbackFont;
        const svg = await satori(element, {          width: extendedOptions.width,          height: extendedOptions.height,          debug: extendedOptions.debug,          fonts: extendedOptions.fonts || [            {              name: "sans serif",              data: fontData,              weight: 700,              style: "normal",            },          ],          loadAdditionalAsset: loadDynamicAsset({            emoji: extendedOptions.emoji,          }),        });
        const resvgJS = new Resvg(svg, {          fitTo: {            mode: "width",            value: extendedOptions.width,          },        });
        controller.enqueue(resvgJS.render());        controller.close();      },    });
    super(result, {      headers: {        "content-type": "image/png",        "cache-control": isDev          ? "no-cache, no-store"          : "public, max-age=31536000, no-transform, immutable",        ...extendedOptions.headers,      },      status: extendedOptions.status,      statusText: extendedOptions.statusText,    });  }}