mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-14 19:35:41 +00:00
Add og metadata to posts
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m43s
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m43s
This commit is contained in:
parent
de968c4ed9
commit
6f1152b87a
@ -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!
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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=""/>
|
||||||
|
@ -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=""/>
|
||||||
|
@ -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=""/>
|
||||||
|
@ -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)
|
||||||
}
|
}
|
@ -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,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user