Skip to content

Commit

Permalink
feat: home og
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Mar 10, 2024
1 parent 29231d6 commit 015ca83
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/app/(app)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const generateMetadata = async () => {
type: 'website',
url: url.webUrl,
images: {
url: user.avatar,
url: `${url.webUrl}/api/og`,
username: user.name,
},
},
Expand Down
121 changes: 97 additions & 24 deletions src/app/api/og/route.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { ImageResponse } from 'next/og'
import uniqolor from 'uniqolor'
import type { AggregateRoot } from '@mx-space/api-client'
import type { NextRequest } from 'next/server'
import type { ImageResponseOptions, NextRequest } from 'next/server'
import type { FC } from 'react'

import {
AggregateController,
Expand All @@ -27,10 +28,90 @@ export const runtime = 'edge'

export const revalidate = 60 * 60 * 24 // 24 hours

const resOptions = {
width: 1200,
height: 600,
emoji: 'twemoji',
headers: new Headers([
[
'cache-control',
'max-age=3600, s-maxage=3600, stale-while-revalidate=600',
],
['cdn-cache-control', 'max-age=3600, stale-while-revalidate=600'],
]),
} as ImageResponseOptions

const HomeOGImage: FC<AggregateRoot> = ({ seo, user: { avatar } }) => {
const seed = Math.random().toString(36).substring(7)
const bgAccent = uniqolor(seed, {
saturation: [30, 35],
lightness: [60, 70],
}).color

const bgAccentLight = uniqolor(seed, {
saturation: [30, 35],
lightness: [80, 90],
}).color

const bgAccentUltraLight = uniqolor(seed, {
saturation: [30, 35],
lightness: [95, 96],
}).color

return (
<div
style={{
display: 'flex',
height: '100%',
width: '100%',

background: `linear-gradient(37deg, ${bgAccent} 27.82%, ${bgAccentLight} 79.68%, ${bgAccentUltraLight} 100%)`,

fontFamily: 'Noto Sans, Inter, "Material Icons"',

padding: '5rem 15rem',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<img
src={avatar}
style={{
borderRadius: '50%',
}}
height={256}
width={256}
/>

<p
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<h3
style={{
color: '#ffffff99',
fontSize: '3.5rem',
}}
>
{seo.title}
</h3>
<p
style={{
fontSize: '1.8rem',

color: '#ffffff89',
}}
>
{seo.description}
</p>
</p>
</div>
)
}
export const GET = async (req: NextRequest) => {
try {
// const fontData = await fontNormal

const { searchParams } = req.nextUrl

const dataString = searchParams.get('data') as string
Expand All @@ -43,6 +124,16 @@ export const GET = async (req: NextRequest) => {
slug: string
}

const aggregation = await fetch(apiClient.aggregate.proxy.toString(true), {
next: {
revalidate: 3600,
},
}).then((res) => res.json() as Promise<AggregateRoot>)

if (!dataString) {
return new ImageResponse(<HomeOGImage {...aggregation} />, resOptions)
}

try {
data = JSON.parse(decodeURIComponent(dataString))
} catch {
Expand Down Expand Up @@ -78,12 +169,6 @@ export const GET = async (req: NextRequest) => {
}
const { title, subtitle } = document

const aggregation = await fetch(apiClient.aggregate.proxy.toString(true), {
next: {
revalidate: 60 * 60 * 24,
},
}).then((res) => res.json() as Promise<AggregateRoot>)

const {
user: { avatar },
seo,
Expand Down Expand Up @@ -164,8 +249,8 @@ export const GET = async (req: NextRequest) => {
style={{
borderRadius: '50%',
}}
height={120}
width={120}
height={128}
width={128}
/>

<span
Expand Down Expand Up @@ -211,19 +296,7 @@ export const GET = async (req: NextRequest) => {
</div>
</div>
),
{
width: 1200,
height: 600,
emoji: 'twemoji',
// fonts: [
// {
// name: 'LXGW WenKai Screen R',
// // data: fontData,
// weight: 400,
// style: 'normal',
// },
// ],
},
resOptions,
)
} catch (e: any) {
return new Response(`Failed to generate the OG image. Error ${e.message}`, {
Expand Down
45 changes: 31 additions & 14 deletions vercel.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=300"
"value": "max-age=300"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=300"
"value": "max-age=300"
}
]
},
Expand All @@ -26,11 +26,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
}
]
},
Expand All @@ -43,11 +43,28 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=300"
"value": "max-age=300"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=300"
"value": "max-age=300"
}
]
},
{
"source": "/api/og",
"headers": [
{
"key": "Cache-Control",
"value": "s-maxage=3600, stale-while-revalidate=30"
},
{
"key": "CDN-Cache-Control",
"value": "max-age=3600"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "max-age=3600"
}
]
},
Expand All @@ -60,11 +77,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
}
]
},
Expand All @@ -77,11 +94,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
}
]
},
Expand All @@ -94,11 +111,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=60"
"value": "max-age=60"
}
]
},
Expand All @@ -111,11 +128,11 @@
},
{
"key": "CDN-Cache-Control",
"value": "maxage=86400"
"value": "max-age=86400"
},
{
"key": "Vercel-CDN-Cache-Control",
"value": "maxage=86400"
"value": "max-age=86400"
}
]
}
Expand Down

0 comments on commit 015ca83

Please sign in to comment.