Update metatags

app/about/page.tsx

@@ -21,7 +21,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 function SocialLink({
                         className,

app/page.tsx

@@ -22,7 +22,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 function Article(article: Article) {
     return (

app/projects/page.tsx

@@ -17,7 +17,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 export const revalidate = 0
 

app/reading/page.tsx

@@ -13,7 +13,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 type Book = {
     title: string

app/services/page.tsx

@@ -22,7 +22,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 type Services = {
     title: string

app/uses/page.tsx

@@ -14,7 +14,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 function ToolsSection({children, title}: { children: ReactNode, title: string }) {
     return (

app/writing/migrating-from-vercel-to-raspberry-pi-5/page.mdx

@@ -12,7 +12,16 @@ export const meta = {
     description: 'Recently, I decided to migrate this website from Vercel to a self-hosted environment using a Raspberry Pi 5. This transition was driven by several motivations, such as lowering costs and having greater control over the software and hardware that I run.',
     alternates: {
         canonical: `/writing/${createSlug('Migrating from Vercel to Raspberry Pi 5')}`
-    }
+    },
+    images: [
+        {
+            url: `/images/vishnu-mohanan-rZKdS0wI8Ks-unsplash.jpg`,
+            width: 1200,
+            height: 600,
+            alt: 'Migrating from Vercel to Raspberry Pi 5',
+            type: 'image/jpg'
+        }
+    ]
 }
 
 export const metadata = _metadata({
@@ -20,7 +29,8 @@ export const metadata = _metadata({
     heading: meta.title,
     description: meta.description,
     type: 'article',
-    alternates: meta.alternates
+    alternates: meta.alternates,
+    images: meta.images
 })
 
 export default (props) => <ArticleLayout

app/writing/page.tsx

@@ -17,7 +17,21 @@ const meta = {
     }
 }
 
-export const metadata = _metadata({...meta, heading: meta.heading})
+export let metadata: {
+    [p: string]: string | Object
+    heading: string
+    description: string
+    title: string
+    type: string
+    openGraph: {
+        images: string | Object
+        description: string
+        title: string
+        type: string
+    }
+}
+
+metadata = _metadata({...meta, heading: meta.heading})
 
 function Article({article}: { article: Article }) {
     return (

app/writing/secure-your-websites-with-lets-encrypt-npm-and-cloudflare/page.mdx

@@ -14,7 +14,16 @@ export const meta = {
     description: 'SSL/TLS is the encryption standard or protocol which encrypts the session between a website (server) and the browser (client). This protects us from potential man-in-the-middle attacks whereby an attacker could eavesdrop on the session and see all the traffic and data exchanged in the clear.',
     alternates: {
         canonical: `/writing/${createSlug('Secure your websites with Let\'s Encrypt, NPM and Cloudflare')}`
-    }
+    },
+    images: [
+        {
+            url: `/images/mariia-shalabaieva-zVC8A0CrTZ0-unsplash.jpg`,
+            width: 1200,
+            height: 600,
+            alt: 'Secure your websites with Let\'s Encrypt, NPM and Cloudflare',
+            type: 'image/jpg'
+        }
+    ]
 }
 
 export const metadata = _metadata({
@@ -22,7 +31,8 @@ export const metadata = _metadata({
     heading: meta.title,
     description: meta.description,
     type: 'article',
-    alternates: meta.alternates
+    alternates: meta.alternates,
+    images: meta.images
 })
 
 export default (props) => <ArticleLayout

app/writing/using-tailscale-to-bypass-steam-families-restrictions/page.mdx

@@ -11,7 +11,16 @@ export const meta = {
     description: 'This past week, Steam launched Steam Families, which allows Steam account owners to share their game library with up to six members of their family.',
     alternates: {
         canonical: `/writing/${createSlug('Using Tailscale to bypass Steam Families restrictions')}`
-    }
+    },
+    images: [
+        {
+            url: `/images/024a06f7b503c5ae8f9442ac521e06b9c9bc21e8.png`,
+            width: 1200,
+            height: 600,
+            alt: 'Using Tailscale to bypass Steam Families restrictions',
+            type: 'image/png'
+        }
+    ]
 }
 
 export const metadata = _metadata({
@@ -19,7 +28,8 @@ export const metadata = _metadata({
     heading: meta.title,
     description: meta.description,
     type: 'article',
-    alternates: meta.alternates
+    alternates: meta.alternates,
+    images: meta.images
 })
 
 export default (props) => <ArticleLayout

lib/generateMetadata.ts

@@ -12,15 +12,17 @@ export const metadata = (meta: Meta) => {
         openGraph: {
             title: meta.title,
             description: meta.description,
-            images: [
+            images: meta.images
-                {
+                ? meta.images
-                    url: `/api/og-image?text=${meta.heading}`,
+                : [
-                    width: 1200,
+                    {
-                    height: 600,
+                        url: `/api/og-image?text=${meta.heading}`,
-                    alt: meta.heading,
+                        width: 1200,
-                    type: 'image/png'
+                        height: 600,
-                }
+                        alt: meta.heading,
-            ],
+                        type: 'image/png'
+                    }
+                ],
             type: meta.type
         }
     }