diff --git a/app/(landing)/opengraph-image.tsx b/app/(landing)/opengraph-image.tsx index f46971d..cfa2e90 100644 --- a/app/(landing)/opengraph-image.tsx +++ b/app/(landing)/opengraph-image.tsx @@ -1,27 +1,20 @@ import { ImageResponse } from 'next/og'; -import { env } from '@/env'; - export const runtime = 'edge'; export const contentType = 'image/png'; -const interRegularFontP = fetch( - new URL('https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff'), -).then((res) => res.arrayBuffer()); - -const interBoldFontP = fetch( - new URL('https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff'), -).then((res) => res.arrayBuffer()); - -const publicUrl = - env.SITE_URL || - (env.VERCEL_URL && `https://${env.VERCEL_URL}`) || - 'http://localhost:3000'; +const fetchArrayBuffer = async (url: string | URL) => + fetch(url).then((res) => res.arrayBuffer()); export const handler = async () => { - const [interRegularFont, interBoldFont] = await Promise.all([ - interRegularFontP, - interBoldFontP, + const [interRegularFont, interBoldFont, globeImage] = await Promise.all([ + fetchArrayBuffer( + 'https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff', + ), + fetchArrayBuffer( + 'https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff', + ), + fetchArrayBuffer(new URL('@/assets/globe.png', import.meta.url)), ]); return new ImageResponse( @@ -158,8 +151,7 @@ export const handler = async () => { {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */} res.arrayBuffer()); - -const interBoldFontP = fetch( - new URL('https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff'), -).then((res) => res.arrayBuffer()); - -const publicUrl = - env.SITE_URL || - (env.VERCEL_URL && `https://${env.VERCEL_URL}`) || - 'http://localhost:3000'; +const fetchArrayBuffer = async (url: string | URL) => + fetch(url).then((res) => res.arrayBuffer()); type OGImageProps = { params: Promise<{ @@ -27,9 +16,14 @@ type OGImageProps = { export const handler = async ({ params: paramsPromise }: OGImageProps) => { const params = await paramsPromise; - const [interRegularFont, interBoldFont] = await Promise.all([ - interRegularFontP, - interBoldFontP, + const [interRegularFont, interBoldFont, globeImage] = await Promise.all([ + fetchArrayBuffer( + 'https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff', + ), + fetchArrayBuffer( + 'https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff', + ), + fetchArrayBuffer(new URL('@/assets/globe.png', import.meta.url)), ]); return new ImageResponse( @@ -166,8 +160,7 @@ export const handler = async ({ params: paramsPromise }: OGImageProps) => { {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}