Fix canonical tags

app/about/page.tsx

@@ -15,7 +15,10 @@ const meta = {
     description: 'I\'ve always had an affinity for technology, and loved making things for as long as I can remember. ' +
         'My first computer was an Amstrad CPC 464 way back in the 90s, which is ancient by modern standards. ' +
         'My passion for tinkering continued through my teens and into adulthood where I eventually found my way into software engineering.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/about'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

app/api/og-image/route.tsx

@@ -25,7 +25,7 @@ export async function GET(request: Request) {
                 style={{
                     fontSize: 64,
                     fontFamily: 'Inter',
-                    background: 'black',
+                    background: '#0a0a0a',
                     width: '100%',
                     height: '100%',
                     display: 'flex',

app/layout.tsx

@@ -11,10 +11,7 @@ export const metadata = {
         template: '%s - Ryan Freeman'
     },
     description: 'Full-stack software engineer who enjoys building cloud-native applications.',
-    metadataBase: new URL('https://ryanfreeman.dev'),
+    metadataBase: new URL('https://ryanfreeman.dev')
-    alternates: {
-        canonical: '/'
-    }
 }
 
 export default function RootLayout({children}: { children: ReactNode }) {

app/page.tsx

@@ -16,7 +16,10 @@ const meta = {
     description: 'Hi. I\'m Ryan, a software engineer based in Dublin, Ireland. I\'m currently working in the aviation industry for Aer Lingus. ' +
         'I am passionate about personal growth and progressing in my career. ' +
         'This is my personal website where you can learn more about me, read articles I\'ve written and see projects I\'ve worked on.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

app/projects/page.tsx

@@ -11,7 +11,10 @@ const meta = {
     title: 'Projects',
     heading: 'Things I\'ve made and projects I\'ve worked on.',
     description: 'Here\'s a selection of academic and personal projects that I have worked on. Many of them are open-source, so if you see something that piques your interest, check out the code and contribute if you have ideas for how it can be improved.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/projects'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

app/reading/page.tsx

@@ -7,7 +7,10 @@ const meta = {
     title: 'Reading',
     heading: 'Books I\'m reading at the moment',
     description: 'Take a look at my curated reading list.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/reading'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

app/services/page.tsx

@@ -16,7 +16,10 @@ const meta = {
     heading: 'I offer a wide range of digital services to elevate and transform your business',
     description: 'Whether you need a WordPress website, React app, AWS support or odd coding jobs, I\'m here to help. ' +
         'As an experienced software engineer, I produce high-quality software that will deliver immediate value for you and your customers.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/services'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

app/uses/page.tsx

@@ -8,7 +8,10 @@ const meta = {
     title: 'Uses',
     heading: 'Software I use, equipment that makes my job easier, and other things I recommend.',
     description: 'I get asked a lot about the things I use to build software and stay productive. Here’s a big list of all of my favourite gear.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/uses'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

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

@@ -6,10 +6,19 @@ 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.'
+    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.',
+    alternates: {
+        canonical: `/writing/${createSlug('A personal journey in software engineering')}`
+    }
 }
 
-export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+export const metadata = _metadata({
+    title: meta.title,
+    heading: meta.title,
+    description: meta.description,
+    type: 'article',
+    alternates: meta.alternates
+})
 
 export default (props) => <ArticleLayout
     title={meta.title}

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

@@ -8,10 +8,19 @@ export const meta = {
     authors: 'Ryan Freeman',
     title: 'Generating dynamic Open Graph images with Next.js',
     date: '2024-10-10',
-    description: 'In this post I\'ll talk about how I created dynamic, eye-catching Open Graph images with Next.js for this website.'
+    description: 'In this post I\'ll talk about how I created dynamic, eye-catching Open Graph images with Next.js for this website.',
+    alternates: {
+        canonical: `/writing/${createSlug('Generating dynamic Open Graph images with Next.js')}`
+    }
 }
 
-export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+export const metadata = _metadata({
+    title: meta.title,
+    heading: meta.title,
+    description: meta.description,
+    type: 'article',
+    alternates: meta.alternates
+})
 
 export default (props) => <ArticleLayout
     title={meta.title}

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

@@ -9,10 +9,19 @@ 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.'
+    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')}`
+    }
 }
 
-export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+export const metadata = _metadata({
+    title: meta.title,
+    heading: meta.title,
+    description: meta.description,
+    type: 'article',
+    alternates: meta.alternates
+})
 
 export default (props) => <ArticleLayout
     title={meta.title}

app/writing/page.tsx

@@ -11,7 +11,10 @@ const meta = {
     title: 'Writing',
     heading: 'Writing on software engineering, and everything in between.',
     description: 'All of my long-form thoughts on software engineering, and more, displayed in chronological order.',
-    type: 'website'
+    type: 'website',
+    alternates: {
+        canonical: '/writing'
+    }
 }
 
 export const metadata = _metadata({...meta, heading: meta.heading})

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

@@ -11,10 +11,19 @@ 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.'
+    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')}`
+    }
 }
 
-export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+export const metadata = _metadata({
+    title: meta.title,
+    heading: meta.title,
+    description: meta.description,
+    type: 'article',
+    alternates: meta.alternates
+})
 
 export default (props) => <ArticleLayout
     title={meta.title}

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

@@ -8,10 +8,19 @@ 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.'
+    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')}`
+    }
 }
 
-export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
+export const metadata = _metadata({
+    title: meta.title,
+    heading: meta.title,
+    description: meta.description,
+    type: 'article',
+    alternates: meta.alternates
+})
 
 export default (props) => <ArticleLayout
     title={meta.title}