From 6f1152b87a8bbf18ad75268bcc5add5fab83c629 Mon Sep 17 00:00:00 2001 From: Ryan Freeman Date: Sat, 12 Oct 2024 22:10:18 +0100 Subject: [PATCH] Add og metadata to posts --- .../page.mdx | 13 +++++---- .../page.mdx | 29 +++++-------------- .../page.mdx | 13 +++++---- .../page.mdx | 13 +++++---- .../page.mdx | 13 +++++---- lib/generateMetadata.ts | 6 +++- lib/getAllArticles.ts | 4 +-- 7 files changed, 46 insertions(+), 45 deletions(-) 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 8ae6324..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: 'article' - } -} +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/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 index 6ffb003..bd938f1 100644 --- a/lib/generateMetadata.ts +++ b/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) } \ 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, } }