diff --git a/app/about/page.tsx b/app/about/page.tsx index 3025c80..6ded084 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -4,15 +4,22 @@ import Image from 'next/image' import {Container} from '@/components/common/Container' import {MailIcon} from '@/components/icons/MailIcon' import {GitHubIcon, LinkedInIcon} from '@/components/icons/SocialIcons' +import {metadata as _metadata} from '@/lib/generateMetadata' import clsx from 'clsx' import me from '@/public/images/me.jpg' import awsCCPBadge from '@/public/images/aws-certified-cloud-practitioner-badge.png' -export const metadata = { - title: 'About - Ryan Freeman', - description: 'I’m Ryan. I live in Dublin, Ireland where I work as a software engineer.' +const meta = { + title: 'About', + heading: 'I\'m Ryan. I live in Dublin, Ireland where I work as a software engineer.', + 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' } +export const metadata = _metadata({...meta, heading: meta.heading}) + function SocialLink({ className, href, @@ -55,14 +62,11 @@ export default async function About() {

- I’m Ryan. I live in Dublin, Ireland where I work as a software engineer. + {meta.heading}

- 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. + {meta.description}

In terms of my experience to date, I have a strong foundation in both front-end and back-end diff --git a/app/api/og-image/route.tsx b/app/api/og-image/route.tsx index 4aa1d1d..4445f73 100644 --- a/app/api/og-image/route.tsx +++ b/app/api/og-image/route.tsx @@ -29,11 +29,11 @@ export async function GET(request: Request) { width: '100%', height: '100%', display: 'flex', - textAlign: 'center', + textAlign: 'left', alignItems: 'center', justifyContent: 'center', - lineHeight: '1', - padding: '0 128px' + lineHeight: '1.1', + padding: '0 64px' }} >

- Full-stack software engineer who enjoys building cloud-native applications. + {meta.heading}

- 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. + {meta.description}

        @@ -32,8 +37,8 @@ function Tool({title, href, children}: { title: string, href: string, children: export default function Uses() { return (
        diff --git a/app/writing/a-personal-journey-in-software-engineering/page.mdx b/app/writing/a-personal-journey-in-software-engineering/page.mdx index 4d635e2..4084012 100644 --- a/app/writing/a-personal-journey-in-software-engineering/page.mdx +++ b/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) => Hello there! diff --git a/app/writing/generating-dynamic-open-graph-images-with-nextjs/page.mdx b/app/writing/generating-dynamic-open-graph-images-with-nextjs/page.mdx index fd45941..b98d301 100644 --- a/app/writing/generating-dynamic-open-graph-images-with-nextjs/page.mdx +++ b/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: 'website' - } -} +export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'}) export default (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 -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 diff --git a/app/writing/migrating-from-vercel-to-raspberry-pi-5/page.mdx b/app/writing/migrating-from-vercel-to-raspberry-pi-5/page.mdx index ef13198..99a60bd 100644 --- a/app/writing/migrating-from-vercel-to-raspberry-pi-5/page.mdx +++ b/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) => diff --git a/app/writing/page.tsx b/app/writing/page.tsx index 66d163b..65aa680 100644 --- a/app/writing/page.tsx +++ b/app/writing/page.tsx @@ -4,31 +4,17 @@ import {Card} from '@/components/ui/Card' import {Views} from '@/components/ui/Views' import {formatDate} from '@/lib/formatDate' import {getAllArticles} from '@/lib/getAllArticles' +import {metadata as _metadata} from '@/lib/generateMetadata' import type {Article} from '@/types' const meta = { - title: 'Writing - Ryan Freeman', + 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.' + description: 'All of my long-form thoughts on software engineering, and more, displayed in chronological order.', + type: 'website' } -export const metadata = { - ...meta, - openGraph: { - title: meta.title, - description: meta.description, - images: [ - { - url: `/api/og-image?text=${meta.heading}`, - width: 1200, - height: 600, - alt: meta.heading, - type: 'image/png' - } - ], - type: 'website' - } -} +export const metadata = _metadata({...meta, heading: meta.heading}) function Article({article}: { article: Article }) { return ( @@ -57,8 +43,8 @@ export default async function Writing() { return (
        diff --git a/app/writing/secure-your-websites-with-lets-encrypt-npm-and-cloudflare/page.mdx b/app/writing/secure-your-websites-with-lets-encrypt-npm-and-cloudflare/page.mdx index 112309e..e476170 100644 --- a/app/writing/secure-your-websites-with-lets-encrypt-npm-and-cloudflare/page.mdx +++ b/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) => diff --git a/app/writing/using-tailscale-to-bypass-steam-families-restrictions/page.mdx b/app/writing/using-tailscale-to-bypass-steam-families-restrictions/page.mdx index cc032b4..53bb7d6 100644 --- a/app/writing/using-tailscale-to-bypass-steam-families-restrictions/page.mdx +++ b/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) => diff --git a/lib/generateMetadata.ts b/lib/generateMetadata.ts new file mode 100644 index 0000000..eca793f --- /dev/null +++ b/lib/generateMetadata.ts @@ -0,0 +1,27 @@ +type Meta = { + title: string + heading: string + description: string + type: string + [name: string]: string | Object +} + +export const metadata = (meta: Meta) => { + return { + ...meta, + openGraph: { + title: meta.title, + description: meta.description, + images: [ + { + url: `/api/og-image?text=${meta.heading}`, + width: 1200, + height: 600, + alt: meta.heading, + type: 'image/png' + } + ], + type: meta.type + } + } +} \ No newline at end of file diff --git a/lib/getAllArticles.ts b/lib/getAllArticles.ts index 3049f4d..d136bee 100644 --- a/lib/getAllArticles.ts +++ b/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, } } diff --git a/types/index.ts b/types/index.ts index fda6804..a7d74ce 100644 --- a/types/index.ts +++ b/types/index.ts @@ -22,18 +22,4 @@ export type Repo = { name: string color: string } -} - -export type Metric = { - title: string - value: number | string - group: string - href: string -} - -export type MetricGroup = [ - { - groupName: string, - groupItems: Metric[] - } -] +} \ No newline at end of file