1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/** @jsxImportSource https://esm.sh/react */
import { render } from "https://deno.land/x/resvg_wasm/mod.ts"
import satori from "npm:satori"
export async function ogImage(body) {
const svg = await satori(
body,
{
width: 1200,
height: 630,
fonts: await loadFonts(),
loadAdditionalAsset: async (code, segment) => {
console.log("loadAdditionalAsset", code, segment)
if (code === "emoji") {
const unicode = segment.codePointAt(0).toString(16).toUpperCase()
return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
}
return ""
},
},
)
return await render(svg)
}
export const loadFonts = async () => {
const fontsConfig = [
{ name: "Inter", weight: 400, fontFile: "Inter-Regular.otf" },
// { name: "Inter", weight: 500, fontFile: "Inter-Medium.otf" },
{ name: "Inter", weight: 600, fontFile: "Inter-SemiBold.otf" },
// { name: "Inter", weight: 700, fontFile: "Inter-Bold.otf" },
]
const fontPromises = fontsConfig.map(async (font) => {
const fontUrl = "https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/" + font.fontFile
const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer())
return { name: font.name, data: fontArrayBuf, weight: font.weight }
})
const fonts: any = await Promise.all(fontPromises)
return fonts
}
const loadEmoji = (code) => {
// const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`
const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`
return fetch(api).then((r) => r.text())
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
August 13, 2024