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 {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!

View File

@ -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

View File

@ -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=""/>

View File

@ -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=""/>

View File

@ -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=""/>

View File

@ -6,7 +6,7 @@ type Meta = {
[name: string]: string | Object
}
export async function generateMetadata(meta: Meta) {
export const metadata = (meta: Meta) => {
return {
...meta,
openGraph: {
@ -25,3 +25,7 @@ export async function generateMetadata(meta: Meta) {
}
}
}
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'
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,
}
}