Add og metadata to posts
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m43s

This commit is contained in:
Ryan Freeman 2024-10-12 22:10:18 +01:00
parent de968c4ed9
commit 6f1152b87a
7 changed files with 46 additions and 45 deletions

View File

@ -1,18 +1,21 @@
import {ArticleLayout} from '../../../components/layouts/ArticleLayout' import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
import {createSlug} from '../../../lib/createSlug' import {createSlug} from '../../../lib/createSlug'
import {metadata as _metadata} from '../../../lib/generateMetadata'
export const metadata = { export const meta = {
authors: 'Ryan Freeman', authors: 'Ryan Freeman',
title: 'A personal journey in software engineering', title: 'A personal journey in software engineering',
date: '2022-12-04', 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.'
} }
export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
export default (props) => <ArticleLayout export default (props) => <ArticleLayout
title={metadata.title} title={meta.title}
date={metadata.date} date={meta.date}
description={metadata.description} description={meta.description}
slug={createSlug(metadata.title)} slug={createSlug(meta.title)}
{...props} /> {...props} />
Hello there! Hello there!

View File

@ -2,6 +2,7 @@ import {ArticleLayout} from '../../../components/layouts/ArticleLayout'
import {createSlug} from '../../../lib/createSlug' import {createSlug} from '../../../lib/createSlug'
import Image from 'next/image' import Image from 'next/image'
import ogMetaTags from './open-graph-meta-tags.png' import ogMetaTags from './open-graph-meta-tags.png'
import {metadata as _metadata} from '../../../lib/generateMetadata'
export const meta = { export const meta = {
authors: 'Ryan Freeman', 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.' 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 = { export const metadata = _metadata({title: meta.title, heading: meta.title, description: meta.description, type: 'article'})
...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 default (props) => <ArticleLayout export default (props) => <ArticleLayout
title={metadata.title} title={meta.title}
date={metadata.date} date={meta.date}
description={metadata.description} description={meta.description}
slug={createSlug(metadata.title)} slug={createSlug(meta.title)}
{...props} /> {...props} />
In this post I\'ll talk about how I created dynamic, eye-catching Open Graph images with Next.js for this website. 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=""/> <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 ## Conclusion

View File

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

View File

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

View File

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

View File

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

View File

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