diff --git a/assets/Inter-Regular.ttf b/assets/Inter-Regular.ttf new file mode 100644 index 0000000..8d4eebf Binary files /dev/null and b/assets/Inter-Regular.ttf differ diff --git a/assets/Lora-Regular.ttf b/assets/Lora-Regular.ttf new file mode 100644 index 0000000..5306a94 Binary files /dev/null and b/assets/Lora-Regular.ttf differ diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx index c42d25b..dc3b369 100644 --- a/src/components/SEO/SEO.tsx +++ b/src/components/SEO/SEO.tsx @@ -58,11 +58,7 @@ export default function SEO({ /> - {image ? ( - - ) : ( - - )} + diff --git a/src/pages/api/og.tsx b/src/pages/api/og.tsx index 605721e..4881947 100644 --- a/src/pages/api/og.tsx +++ b/src/pages/api/og.tsx @@ -8,11 +8,20 @@ export const config = { } // Doc: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-a-local-image +// Font: https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-custom-font export default async function handler(request: NextRequest) { const { href } = request.nextUrl + const lora = await fetch( + new URL('../../../assets/Lora-Regular.ttf', import.meta.url), + ).then((res) => res.arrayBuffer()) + + const inter = await fetch( + new URL('../../../assets/Inter-Regular.ttf', import.meta.url), + ).then((res) => res.arrayBuffer()) + const searchParams = new URL(href).searchParams - const title = searchParams.get('title') + const title = searchParams.get('title') || 'LOGOS→PRESS ENGINE' const image = searchParams.get('image') || '' const alt = searchParams.get('alt') || '' const contentType = searchParams.get('contentType') @@ -34,9 +43,10 @@ export default async function handler(request: NextRequest) { src={imgSrc} alt={alt} style={{ - objectFit: 'cover', width: '1200px', height: '630px', + objectFit: 'contain', + backgroundColor: '#000', }} /> ) : ( @@ -90,6 +100,7 @@ export default async function handler(request: NextRequest) {
- {contentType && ( -
-

{contentType}

- {date &&

} - {date &&

{`${day} ${month} ${year}`}

} -
- )} +
+

{contentType ?? '/'}

+ {date &&

} + {date &&

{`${day} ${month} ${year}`}

} +
{imgSrc && ( @@ -134,6 +145,18 @@ export default async function handler(request: NextRequest) { { width: 1200, height: 630, + fonts: [ + { + name: 'Lora', + data: lora, + style: 'normal', + }, + { + name: 'Inter', + data: inter, + style: 'normal', + }, + ], }, ) }