feature dynamic open graph img

Full-Stack-Collective · Sep 26, 2023 · de27e9f · de27e9f
1 parent 73ad82f
commit de27e9f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/src/app/[practiceCode]/book/opengraph-image.tsx b/src/app/[practiceCode]/book/opengraph-image.tsx
@@ -1,11 +1,13 @@
+/* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from 'next/server';
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
 import { cookies } from 'next/headers';
-import Image from 'next/image';
+
 export const size = {
-  width: 400,
-  height: 400,
+  width: 800,
+  height: 500,
 };
+
 // Route segment config
 export const runtime = 'edge';
 export const contentType = 'image/png';
@@ -33,16 +35,34 @@ export default async function og({
 
     return new ImageResponse(
       (
-        <div className="relative flex flex-col items-center">
-          <div className="relative">
-            <Image
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flexWrap: 'nowrap',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              justifyItems: 'center',
+            }}
+          >
+            <img
               src={imageUrl}
               alt={name}
               width={size.width}
               height={size.height}
             />
           </div>
-          <div className="mt-2 text-center">{name}</div>
+          <div style={{ fontSize: 40, color: 'black' }}>{name}</div>
         </div>
       ),
     );

diff --git a/src/app/[practiceCode]/book/page.tsx b/src/app/[practiceCode]/book/page.tsx
@@ -30,18 +30,20 @@ export async function generateMetadata({
       };
 
     const [{ name, logo }] = practice;
+    const imageUrl = logo || '/connectient-logo.png';
 
     return {
       title: name,
       description: `Appointments Made Easy at ${name}`,
-      images: [
-        {
-          url: logo || '/connectient-logo.png',
-          width: '400',
-          height: '400',
-          alt: `${name} Logo`,
-        },
-      ],
+      openGraph: {
+        images: [
+          {
+            url: imageUrl,
+
+            alt: `${name} Logo`,
+          },
+        ],
+      },
       alternates: {
         canonical: `/${practiceCode}/book`,
       },