-
-
-
{title}
-
+export default async function OGImage(req: NextRequest) {
+ const [interRegularFont, interBoldFont] = await Promise.all([
+ interRegularFontP,
+ interBoldFontP
+ ])
-
- {authorImage && (
-
- )}
+ const { searchParams } = new URL(req.url)
+ const pageId = searchParams.get('id')
+ if (!pageId) {
+ return new Response('Invalid notion page id', { status: 400 })
+ }
- {(author || detail) && (
-
- {author &&
{author}
}
- {detail &&
{detail}
}
-
- )}
-
-
+ const pageInfoRes = await fetch(`${host}${api.getNotionPageInfo}`, {
+ method: 'POST',
+ body: JSON.stringify({ pageId }),
+ headers: { 'Content-Type': 'application/json' }
+ })
+ const pageInfo: NotionPageInfo = await pageInfoRes.json()
+
+ return new ImageResponse(
+ (
+
+ {pageInfo.image && (
+

+ )}
+
+
+
+ {pageInfo.detail && (
+
{pageInfo.detail}
+ )}
+
+
+ {pageInfo.title}
+
- {image && (
-

- )}
+ {pageInfo.detail && (
+
+ {pageInfo.detail}
-
-
-
- )
+ )}
+
+
+
+ {pageInfo.authorImage && (
+
+

+
+ )}
+
+ ),
+ {
+ width: 1200,
+ height: 600,
+ fonts: [
+ {
+ name: 'Inter',
+ data: interRegularFont,
+ style: 'normal',
+ weight: 400
+ },
+ {
+ name: 'Inter',
+ data: interBoldFont,
+ style: 'normal',
+ weight: 700
+ }
+ ]
}
- },
- cacheControl: 'max-age=0, s-maxage=86400, stale-while-revalidate=3600',
- type: 'jpeg',
- quality: 75,
- dev: {
- inspectHtml: debugInspectHtml
- }
-})
-
-const style = `
-@font-face {
- font-family: 'Inter';
- font-style: normal;
- font-weight: normal;
- src: url(data:font/woff2;charset=utf-8;base64,${interRegular}) format('woff2');
-}
-
-:root {
- --padding: 8vmin;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Inter', sans-serif;
- padding: 0;
- margin: 0;
-}
-
-.container {
- width: 100vw;
- height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: var(--padding);
- background: #1F2027;
- color: #fff;
-}
-
-.horiz {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- gap: var(--padding);
- width: 100%;
- height: 100%;
-}
-
-.lhs {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.rhs {
- width: 35%;
- height: 100%;
- border-radius: 4px;
- object-fit: cover;
-}
-
-.title {
- font-size: 3.2em;
- line-height: 1.3;
-}
-
-.metadata {
- color: #A9ACC0;
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: calc(var(--padding) * 0.7);
- font-size: 1.5em;
-}
-
-.author {
- font-size: 1.75em;
-}
-
-.author-image {
- background-size: cover;
- width: 20vmin;
- min-width: 20vmin;
- max-width: 20vmin;
- height: 20vmin;
- min-height: 20vmin;
- max-height: 20vmin;
- border-radius: 50%;
- border: 1.5vmin solid #fff;
-}
-
-.metadata-rhs {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 0.5em;
-}
-
-.detail {
- overflow-wrap: break-word;
+ )
}
-`
diff --git a/public/fonts/Inter-Regular.ttf b/public/fonts/Inter-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..8d4eebf20665d5ae746c622a2bd42274b54d2bf1
GIT binary patch
literal 309828
zcmcG%4_sAM);E6kIp>~xK{8NKrWgYyp$5wlP%5fxX+y;{JQEca6)GAk+Evk*k&=oU
z%s-JaN=6PD8B=6dSkzE4MMgypGcgU*-09(Qcqf{