feat: Generate OG and Twitter images from local files and explicitly link them in metadata.

Author: printf("bosshudsawat.com")

src/app/layout.tsx

@@ -19,11 +19,20 @@ export const metadata: Metadata = {
     siteName: "Boss Hudsawat Portfolio",
     title: "Boss Hudsawat - Full Stack Developer & Tech Speaker",
     description: "Portfolio of Boss Hudsawat, a passionate software engineer, tech speaker, and robotics enthusiast. Explore my work experience, achievements, and technical expertise.",
+    images: [
+      {
+        url: "/opengraph-image",
+        width: 1200,
+        height: 630,
+        alt: "Boss Hudsawat - Full Stack Developer & Tech Speaker",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "Boss Hudsawat - Full Stack Developer & Tech Speaker",
     description: "Portfolio of Boss Hudsawat, a passionate software engineer, tech speaker, and robotics enthusiast.",
+    images: ["/twitter-image"],
     creator: "@bosshudsawat", // Add your Twitter handle if you have one
   },
   icons: {

src/app/opengraph-image.tsx

@@ -1,6 +1,6 @@
 import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
+import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
 
 export const alt = 'Boss Hudsawat - Full Stack Developer & Tech Speaker'
 export const contentType = 'image/png'
@@ -10,10 +10,9 @@ export const size = {
 }
 
 export default async function Image() {
-  // Fetch the profile image
-  const profileImageSrc = await fetch('https://bosshudsawat.com/img/boss-3.jpg').then(
-    (res) => res.arrayBuffer()
-  )
+  // Read the profile image from the filesystem
+  const profileImageDetails = join(process.cwd(), 'public/img/boss-3.jpg')
+  const profileImageSrc = readFileSync(profileImageDetails).buffer
 
   return new ImageResponse(
     (

src/app/twitter-image.tsx

@@ -1,6 +1,6 @@
 import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
+import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
 
 export const alt = 'Boss Hudsawat - Full Stack Developer & Tech Speaker'
 export const contentType = 'image/png'
@@ -10,10 +10,9 @@ export const size = {
 }
 
 export default async function Image() {
-  // Fetch the profile image
-  const profileImageSrc = await fetch('https://bosshudsawat.com/img/boss-3.jpg').then(
-    (res) => res.arrayBuffer()
-  )
+  // Read the profile image from the filesystem
+  const profileImageDetails = join(process.cwd(), 'public/img/boss-3.jpg')
+  const profileImageSrc = readFileSync(profileImageDetails).buffer
 
   return new ImageResponse(
     (
@@ -153,4 +152,4 @@ export default async function Image() {
       ...size,
     }
   )
-} 
+}