update to follow layouts refactor for card/font

pages/api/og.js

@@ -1,13 +1,11 @@
-import React from 'react'
 import { ImageResponse } from 'next/og'
-import { BlogPostOG, getBlogPostFonts } from '@carbonplan/layouts'
+import { getBlogPostCard } from '@carbonplan/layouts'
 import { postMetadata } from '../../utils/post-metadata'
 
 export const runtime = 'edge'
 
 export default async function handler(req) {
   try {
-    const fonts = await getBlogPostFonts()
     const { searchParams } = new URL(req.url)
     const id = searchParams.get('id')
 
@@ -26,21 +24,17 @@ export default async function handler(req) {
     )
     const forceWrapAuthors = searchParams.get('forceWrapAuthors') === 'true'
 
-    return new ImageResponse(
-      (
-        <BlogPostOG
-          title={title}
-          date={date}
-          authors={authors}
-          forceWrapAuthors={forceWrapAuthors}
-        />
-      ),
-      {
-        width: 1200,
-        height: 630,
-        fonts,
-      }
-    )
+    const { component, fonts, options } = await getBlogPostCard({
+      title,
+      date,
+      authors,
+      forceWrapAuthors,
+    })
+
+    return new ImageResponse(component, {
+      ...options,
+      fonts,
+    })
   } catch (error) {
     console.log(`${error.message}`)
     return new Response('Failed to generate the image', {