-
Notifications
You must be signed in to change notification settings - Fork 19
/
opengraph-image.tsx
51 lines (46 loc) 路 1.09 KB
/
opengraph-image.tsx
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
47
48
49
50
51
import { ImageResponse } from 'next/og'
import { db } from '@/db'
import { contentResource } from '@/db/schema'
import { and, eq, or, sql } from 'drizzle-orm'
export const runtime = 'edge'
export const revalidate = 60
export const contentType = 'image/png'
export const size = {
width: 1200,
height: 630,
}
export default async function TipOG({ params }: { params: { slug: string } }) {
const resource = await db.query.contentResource.findFirst({
where: and(
or(
eq(
sql`JSON_EXTRACT (${contentResource.fields}, "$.slug")`,
params.slug,
),
eq(contentResource.id, params.slug),
),
eq(contentResource.type, 'tip'),
),
})
return new ImageResponse(
(
<div
tw="flex p-10 h-full w-full bg-white flex-col"
style={{
...font('sans'),
}}
>
<main tw="flex flex-col gap-5 h-full flex-grow items-start pb-24 justify-center px-16">
<div tw="text-[60px] text-white">{resource?.fields?.title}</div>
</main>
</div>
),
{
...size,
},
)
}
// lil helper for more succinct styles
function font(fontFamily: string) {
return { fontFamily }
}