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}
- {date &&•
} - {date &&{`${day} ${month} ${year}`}
} -{contentType ?? '/'}
+ {date &&∙
} + {date &&{`${day} ${month} ${year}`}
} +