生成 OG 图片

使用 Deno 和 Supabase Edge Functions 生成 Open Graph 图片。在 GitHub 上查看。

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

代码 #

🌐 Code

创建一个 handler.tsx 文件来在 React 中构建 OG 图片：

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

1
import { ImageResponse } from 'npm:@vercel/og@^0'
2
import React from 'npm:react@^19'
3
4
export default function handler(req: Request) {
5
  return new ImageResponse(
6
    <div
7
      style={{
8
        width: '100%',
9
        height: '100%',
10
        display: 'flex',
11
        alignItems: 'center',
12
        justifyContent: 'center',
13
        fontSize: 128,
14
        background: 'lavender',
15
      }}
16
    >
17
      Hello OG Image!
18
    </div>
19
  )
20
}

创建一个 index.ts 文件来处理传入请求：

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

1
import { withSupabase } from 'npm:@supabase/server@^1'
2
3
import handler from './handler.tsx'
4
5
console.log('Hello from og-image Function!')
6
7
// Public image endpoint, so deploy with --no-verify-jwt.
8
export default { fetch: withSupabase({ auth: 'none' }, handler) }