Edge Functions

Generating OG Images

Generate Open Graph images with Deno and Supabase Edge Functions. View on GitHub.

Code

Create a handler.tsx file to construct the OG image in React:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'https://esm.sh/[email protected]'import { ImageResponse } from 'https://deno.land/x/[email protected]/mod.ts'export default function handler(req: Request) {  return new ImageResponse(    (      <div        style={{          width: '100%',          height: '100%',          display: 'flex',          alignItems: 'center',          justifyContent: 'center',          fontSize: 128,          background: 'lavender',        }}      >        Hello OG Image!      </div>    )  )}

Create an index.ts file to execute the handler on incoming requests:

1
2
3
4
5
import handler from './handler.tsx'console.log('Hello from og-image Function!')Deno.serve(handler)