Merge pull request #286 from iodigital-com/feature/og-image-api

feat(og): add new edge runtime function to generate updated OG image design

Author: DaveBitter

components/SEO.js

@@ -2,57 +2,31 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import removeMarkdown from 'markdown-to-text'
 import siteMetadata from '@/data/siteMetadata'
-import { useBrandingTheme } from '@/lib/hooks/useBrandingTheme'
 
-const getConstructedDynamicOGImageURL = ({ title, featuredImages, authorList, date }) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  let { theme } = useBrandingTheme()
+const getConstructedDynamicOGImageURL = ({ title, featuredImages, authorList }) => {
+  const dynamicOgImageURL = new URL(`${siteMetadata.siteUrl}/api/og`)
 
-  const dynamicOgImageURL = new URL('https://og-image-io.vercel.app/')
-  const fileType = 'png'
   const authorListFormatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
 
-  dynamicOgImageURL.pathname = `${encodeURIComponent(title)}.${fileType}`
-
   const searchParams = [
     {
-      key: 'teaserImage',
-      value: featuredImages?.length && featuredImages[0].url,
+      key: 'title',
+      value: title?.replaceAll('_', ''),
     },
     {
       key: 'author',
       value: authorList?.length && authorListFormatter.format(authorList.map(({ name }) => name)),
     },
     {
-      key: 'authorImage',
-      value:
-        authorList?.length &&
-        authorList[0].avatar &&
-        `https://techhub.iodigital.com${authorList[0].avatar}`,
-    },
-    {
-      key: 'blendTheme',
-      value: theme,
-    },
-    {
-      key: 'date',
-      value: date?.length && new Intl.DateTimeFormat('en').format(new Date(date)),
-    },
-    {
-      key: 'domain',
-      value: 'tech_hub',
+      key: 'image',
+      value: featuredImages?.[0]?.url,
     },
   ]
 
   searchParams.forEach(
     ({ key, value }) => value && dynamicOgImageURL.searchParams.append(key, value)
   )
 
-  /*** added to prevent development generated image to be used for prod ***/
-  if (process.env.NODE_ENV === 'development') {
-    dynamicOgImageURL.searchParams.append('isDevelopment', 'true')
-  }
-
   return dynamicOgImageURL
 }
 

package-lock.json

@@ -26,6 +26,7 @@
     "@supabase/supabase-js": "2.48.0",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/typography": "0.5.16",
+    "@vercel/og": "^0.6.5",
     "autoprefixer": "10.4.20",
     "date-fns": "3.6.0",
     "github-slugger": "1.5.0",
@@ -69,6 +70,7 @@
     "cross-env": "7.0.3",
     "dedent": "0.7.0",
     "dotenv": "16.4.7",
+    "esbuild": "^0.25.0",
     "eslint": "8.57.1",
     "eslint-config-next": "15.1.6",
     "eslint-config-prettier": "8.10.0",