fix(og images): fix dynamic og route

app/og/route.tsx

@@ -2,15 +2,15 @@ import {ImageResponse} from 'next/og'
 import {NextRequest} from 'next/server'
 import {META} from '~/constants/metadata'
 
+
 export const runtime = 'edge'
 
+
 export async function GET(req: NextRequest) {
 	const {searchParams} = req.nextUrl
 	const postTitle = searchParams.get('title')
-	const font = fetch(
-		new URL('../../public/fonts/GeistMono-Regular.otf', import.meta.url)
-	).then(res => res.arrayBuffer())
-	const fontData = await font
+
+
 	const size = {
 		width: 1200,
 		height: 630
@@ -22,39 +22,35 @@ export async function GET(req: NextRequest) {
 				style={{
 					height: '100%',
 					width: '100%',
+					backgroundSize: 'cover',
 					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-					justifyContent: 'center',
+
 					position: 'relative',
-					overflowY: 'hidden',
+					overflow: 'hidden',
 					color: '#FFFFFF',
 					backgroundImage: `url(${META.domain.prod}images/og-bg-text.jpg)`
 				}}>
-					<div
+
+				<div
 					style={{
-						fontFamily: 'Geist Mono',
-						display: 'flex',
-						fontSize: 80,
+
 						position: 'absolute',
-						right: 133,
-						bottom: 70,
+						bottom: 24,
+						transform: 'translateX(-50%)',
+						left: '50%',
+						display: 'flex',
+						fontWeight: 'bold',
+						fontSize: 24,
+						fontFamily: 'monospace',
 						color: '#FFFFFF',
 						whiteSpace: 'nowrap'
 					}}>
-					{postTitle}
+					 {postTitle}
 				</div>
 			</div>
 		),
 		{
 			...size,
-			fonts: [
-				{
-					name: 'Geist Mono',
-					data: fontData,
-					style: 'normal'
-				}
-			]
 		}
 	)
 }

app/page.tsx

@@ -16,7 +16,9 @@ export default async function Page() {
 	const {
 		data: {session}
 	} = await supabase.auth.getSession()
+
 	if (session) redirect(`/loading`)
+
 	return (
 		<div className='flex h-screen w-full flex-col items-center justify-center gap-10 p-5'>
 			 <Hero />