Add og metadata to posts

app/writing/a-personal-journey-in-software-engineering/page.mdx

@@ -1,18 +1,21 @@
 import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
 import {createSlug} from '../../../lib/createSlug'
+import {metadata as _metadata} from '../../../lib/generateMetadata'
 
-export const metadata = {
+export const meta = {
     authors: 'Ryan Freeman',
     title: 'A personal journey in software engineering',
     date: '2022-12-04',
     description: 'Hello there! If you\'re reading this, you\'ve likely stumbled upon my website — welcome! My name is Ryan Freeman, and I\'m a full-stack developer with a passion for creating intuitive and dynamic web applications.'
 }
 
+export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+
 export default (props) => <ArticleLayout
-    title={metadata.title}
-    date={metadata.date}
-    description={metadata.description}
-    slug={createSlug(metadata.title)}
+    title={meta.title}
+    date={meta.date}
+    description={meta.description}
+    slug={createSlug(meta.title)}
     {...props} />
 
 Hello there!

app/writing/generating-dynamic-open-graph-images-with-nextjs/page.mdx

@@ -2,6 +2,7 @@ import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
 import {createSlug} from '../../../lib/createSlug'
 import Image from 'next/image'
 import ogMetaTags from './open-graph-meta-tags.png'
+import {metadata as _metadata} from '../../../lib/generateMetadata'
 
 export const meta = {
     authors: 'Ryan Freeman',
@@ -10,29 +11,13 @@ export const meta = {
     description: 'In this post I\'ll talk about how I created dynamic, eye-catching Open Graph images with Next.js for this website.'
 }
 
-export const metadata = {
-    ...meta,
-    openGraph: {
-        title: meta.title,
-        description: meta.description,
-        images: [
-            {
-                url: `/api/og-image?text=${meta.title}`,
-                width: 1200,
-                height: 600,
-                alt: meta.title,
-                type: 'image/png'
-            }
-        ],
-        type: 'article'
-    }
-}
+export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
 
 export default (props) => <ArticleLayout
-    title={metadata.title}
-    date={metadata.date}
-    description={metadata.description}
-    slug={createSlug(metadata.title)}
+    title={meta.title}
+    date={meta.date}
+    description={meta.description}
+    slug={createSlug(meta.title)}
     {...props} />
 
 In this post I\'ll talk about how I created dynamic, eye-catching Open Graph images with Next.js for this website.
@@ -138,7 +123,7 @@ By exporting the `metadata` object, I was able to specify the Open Graph meta ta
 
 <Image src={ogMetaTags} alt=""/>
 
-Lastly, I can verify everything is working correctly by loading the page in the browser.
+Lastly, I can verify everything is working correctly by loading the Services page in the browser and examining the Open Graph meta tags.
 
 ## Conclusion
 

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

@@ -1,21 +1,24 @@
 import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
 import {createSlug} from '../../../lib/createSlug'
+import {metadata as _metadata} from '../../../lib/generateMetadata'
 import raspberryPi from './vishnu-mohanan-rZKdS0wI8Ks-unsplash.jpg'
 import casaOS from './casaos.png'
 import Image from 'next/image'
 
-export const metadata = {
+export const meta = {
     authors: 'Ryan Freeman',
     title: 'Migrating from Vercel to Raspberry Pi 5',
     date: '2024-08-23',
     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.'
 }
 
+export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+
 export default (props) => <ArticleLayout
-    title={metadata.title}
-    date={metadata.date}
-    description={metadata.description}
-    slug={createSlug(metadata.title)}
+    title={meta.title}
+    date={meta.date}
+    description={meta.description}
+    slug={createSlug(meta.title)}
     {...props} />
 
 <Image src={raspberryPi} alt=""/>

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

@@ -1,23 +1,26 @@
 import Image from 'next/image'
 import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
 import {createSlug} from '../../../lib/createSlug'
+import {metadata as _metadata} from '../../../lib/generateMetadata'
 import locks from './mariia-shalabaieva-zVC8A0CrTZ0-unsplash.jpg'
 import namecheap from './namecheap-change-nameservers.png'
 import nginx from './nginx-proxy-manager.png'
 import starshipTroopers from './starship-troopers.gif'
 
-export const metadata = {
+export const meta = {
     authors: 'Ryan Freeman',
     title: 'Secure your websites with Let\'s Encrypt, NPM and Cloudflare',
     date: '2024-09-21',
     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.'
 }
 
+export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+
 export default (props) => <ArticleLayout
-    title={metadata.title}
-    date={metadata.date}
-    description={metadata.description}
-    slug={createSlug(metadata.title)}
+    title={meta.title}
+    date={meta.date}
+    description={meta.description}
+    slug={createSlug(meta.title)}
     {...props} />
 
 <Image src={locks} alt=""/>

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

@@ -1,20 +1,23 @@
 import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
 import {createSlug} from '../../../lib/createSlug'
+import {metadata as _metadata} from '../../../lib/generateMetadata'
 import steamLibrary from './024a06f7b503c5ae8f9442ac521e06b9c9bc21e8.png'
 import Image from 'next/image'
 
-export const metadata = {
+export const meta = {
     authors: 'Ryan Freeman',
     title: 'Using Tailscale to bypass Steam Families restrictions',
     date: '2024-09-14',
     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.'
 }
 
+export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+
 export default (props) => <ArticleLayout
-    title={metadata.title}
-    date={metadata.date}
-    description={metadata.description}
-    slug={createSlug(metadata.title)}
+    title={meta.title}
+    date={meta.date}
+    description={meta.description}
+    slug={createSlug(meta.title)}
     {...props} />
 
 <Image src={steamLibrary} alt=""/>

lib/generateMetadata.ts

@@ -6,7 +6,7 @@ type Meta = {
     [name: string]: string | Object
 }
 
-export async function generateMetadata(meta: Meta) {
+export const metadata = (meta: Meta) => {
     return {
         ...meta,
         openGraph: {
@@ -24,4 +24,8 @@ export async function generateMetadata(meta: Meta) {
             type: meta.type
         }
     }
+}
+
+export async function generateMetadata(meta: Meta) {
+    return metadata(meta)
 }

lib/getAllArticles.ts

@@ -2,12 +2,12 @@ import glob from 'fast-glob'
 import * as path from 'path'
 
 async function importArticle(articleFilename: string) {
-    let {metadata, default: component} = await import(
+    let {meta, default: component} = await import(
         `/app/writing/${articleFilename}`
         )
     return {
         slug: articleFilename.replace(/(\/page)?\.mdx$/, ''),
-        ...metadata,
+        ...meta,
         component,
     }
 }