Pickyzz

GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

Serverless service that generates dynamic Open Graph images that you can embed in your tags. For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached. See the image embedded in the tweet for a real use case.

https://github.com/vercel/og-image

สิ่งที่ผมทำก็คือ

1. ทำการโหลดฟ้อนต์ที่ต้องการ (ในที่นี้ผมใช้ NotoSansThai-Black) copy ไปวางไว้ที่ ../api/_fonts/NotoSansThai-Black.ttf

2. ที่ไฟล์ vercel.json แต่เดิมจะเป็นโค้ดดังนี้

{
"regions": ["all"],
"functions": {
"api/**": {
"memory": 3008
}
},
"rewrites": [
{ "source": "/(.+)", "destination": "/api" }
]

{
  "rewrites": [
    { "source": "/(.+)", "destination": "/api" }
  ]
}

3. ที่ไฟล์ api/_lib/template.ts และเพิ่มฟ้อนต์ที่เรานำไปวางในขั้นตอนที่ 1 ด้วยแพทเทิร์นเดียวกับที่มีอยู่แล้ว

const noto = readFileSync(`${__dirname}/../_fonts/NotoSansThai-Black.ttf`).toString('base64');

@font-face 
		{
        font-family: 'Noto Sans Thai';
        font-style: normal;
        font-weight: normal;
        src: url(data:font/otf;charset=utf-8;base64,${noto}) format('truetype');
    }

font-family: 'Inter', 'Noto Sans Thai', sans-serif;

GitHub - pickyzz/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

Serverless service that generates dynamic Open Graph images that you can embed in your tags. For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached. See the image embedded in the tweet for a real use case.

https://github.com/pickyzz/og-image