From 9bf1a5aaa54e3485b98d420cad92d83f295dc7ec Mon Sep 17 00:00:00 2001 From: Haruaki OTAKE Date: Fri, 30 Dec 2022 17:46:38 +0900 Subject: [PATCH 1/3] chore: update to the latest version of satori --- README.md | 2 +- emoji.ts | 2 +- mod.ts | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 22ed0d8..94dcd8d 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ async function handler(req: Request) { serve(handler); ``` -Then run `deno run --allow-net=:8000 --allow-env og.tsx` +Then run `deno run --allow-net=:8000,fonts.googleapis.com,fonts.gstatic.com,cdn.jsdelivr.net --allow-env og.tsx` Read more about the API, supported features and check out the examples in the following sections. diff --git a/emoji.ts b/emoji.ts index 5bf3f66..96dadaf 100644 --- a/emoji.ts +++ b/emoji.ts @@ -1,6 +1,6 @@ const apis = { twemoji: (code: string) => - "https://twemoji.maxcdn.com/v/latest/svg/" + code.toLowerCase() + ".svg", + "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/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: diff --git a/mod.ts b/mod.ts index 67ea656..053b90d 100644 --- a/mod.ts +++ b/mod.ts @@ -1,7 +1,7 @@ import type { ReactElement } from "https://esm.sh/react@18.2.0"; -import type { SatoriOptions } from "https://esm.sh/satori@0.0.40"; +import type { SatoriOptions } from "https://esm.sh/satori@0.0.44"; -import satori, { init as initSatori } from "https://esm.sh/satori@0.0.40/wasm"; +import satori, { init as initSatori } from "https://esm.sh/satori@0.0.44/wasm"; import { initStreaming } from "https://esm.sh/yoga-wasm-web@0.1.2"; import { @@ -28,15 +28,15 @@ declare module "https://esm.sh/react@18.2.0" { } const resvg_wasm = fetch( - "https://unpkg.com/@vercel/og@0.0.18/vendor/resvg.simd.wasm", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/resvg.simd.wasm", ).then((res) => res.arrayBuffer()); const yoga_wasm = fetch( - "https://unpkg.com/@vercel/og@0.0.18/vendor/yoga.wasm", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/yoga.wasm", ); const fallbackFont = fetch( - "https://unpkg.com/@vercel/og@0.0.18/vendor/noto-sans-v27-latin-regular.ttf", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/noto-sans-v27-latin-regular.ttf", ).then((a) => a.arrayBuffer()); const initializedResvg = initWasm(resvg_wasm); From c44113c0058fa0a2b35cba66cf75c585d980c8da Mon Sep 17 00:00:00 2001 From: Haruaki OTAKE Date: Tue, 10 Jan 2023 21:49:49 +0900 Subject: [PATCH 2/3] chore: update to the latest version of satori --- mod.ts | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/mod.ts b/mod.ts index 053b90d..51d937f 100644 --- a/mod.ts +++ b/mod.ts @@ -1,8 +1,8 @@ import type { ReactElement } from "https://esm.sh/react@18.2.0"; -import type { SatoriOptions } from "https://esm.sh/satori@0.0.44"; +import type { SatoriOptions } from "https://esm.sh/satori@0.0.46"; -import satori, { init as initSatori } from "https://esm.sh/satori@0.0.44/wasm"; -import { initStreaming } from "https://esm.sh/yoga-wasm-web@0.1.2"; +import satori, { init as initSatori } from "https://esm.sh/satori@0.0.46/wasm"; +import { initStreaming } from "https://esm.sh/yoga-wasm-web@0.3.0"; import { initWasm, @@ -28,15 +28,15 @@ declare module "https://esm.sh/react@18.2.0" { } const resvg_wasm = fetch( - "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/resvg.simd.wasm", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.25/vendor/resvg.simd.wasm", ).then((res) => res.arrayBuffer()); const yoga_wasm = fetch( - "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/yoga.wasm", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.25/vendor/yoga.wasm", ); const fallbackFont = fetch( - "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.21/vendor/noto-sans-v27-latin-regular.ttf", + "https://cdn.jsdelivr.net/npm/@vercel/og@0.0.25/vendor/noto-sans-v27-latin-regular.ttf", ).then((a) => a.arrayBuffer()); const initializedResvg = initWasm(resvg_wasm); @@ -89,17 +89,22 @@ type ImageResponseOptions = ConstructorParameters[1] & { // than built-in. // @TODO: Cover most languages with Noto Sans. const languageFontMap = { - zh: "Noto+Sans+SC", - ja: "Noto+Sans+JP", - ko: "Noto+Sans+KR", - th: "Noto+Sans+Thai", - he: "Noto+Sans+Hebrew", - ar: "Noto+Sans+Arabic", - bn: "Noto+Sans+Bengali", - ta: "Noto+Sans+Tamil", - te: "Noto+Sans+Telugu", - ml: "Noto+Sans+Malayalam", + "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", }; @@ -150,7 +155,7 @@ const loadDynamicAsset = ({ emoji }: { emoji?: EmojiType }) => { if (!languageFontMap[code]) code = "unknown"; try { - const data = await loadGoogleFont(languageFontMap[code], text); + const data = await loadGoogleFont(Array.isArray(languageFontMap[code]) ? languageFontMap[code].at(-1) : languageFontMap[code], text); if (data) { return { From 7f194321f2184596031f50ff7ee1ea12bc2e1efa Mon Sep 17 00:00:00 2001 From: Haruaki OTAKE Date: Tue, 10 Jan 2023 22:02:29 +0900 Subject: [PATCH 3/3] refactor: loadGoogleFont --- mod.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/mod.ts b/mod.ts index 51d937f..88aa096 100644 --- a/mod.ts +++ b/mod.ts @@ -108,7 +108,9 @@ const languageFontMap = { unknown: "Noto+Sans", }; -async function loadGoogleFont(font: string, text: string) { +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=${ @@ -155,7 +157,7 @@ const loadDynamicAsset = ({ emoji }: { emoji?: EmojiType }) => { if (!languageFontMap[code]) code = "unknown"; try { - const data = await loadGoogleFont(Array.isArray(languageFontMap[code]) ? languageFontMap[code].at(-1) : languageFontMap[code], text); + const data = await loadGoogleFont(languageFontMap[code], text); if (data) { return {