2022-04-03 23:32:57 +00:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import styles from '../../styles/Post.module.scss'
|
|
|
|
|
import HeaderNav from '../../lib/HeaderNav'
|
|
|
|
|
import HeroImage from '../../lib/HeroImage'
|
|
|
|
|
import { getPostSlugs, getPostBySlug } from '../../lib/posts'
|
2022-04-05 02:18:57 +00:00
|
|
|
import { mdxComponents } from '../../lib/posts-edge'
|
|
|
|
|
import { MDXRemote } from 'next-mdx-remote'
|
|
|
|
|
import { serialize } from 'next-mdx-remote/serialize'
|
2022-04-03 23:32:57 +00:00
|
|
|
|
|
|
|
|
export async function getStaticPaths() {
|
|
|
|
|
return {
|
|
|
|
|
paths: (await getPostSlugs()).map((slug) => ({
|
|
|
|
|
params: {
|
|
|
|
|
slug,
|
|
|
|
|
}
|
|
|
|
|
})),
|
|
|
|
|
fallback: false,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps({ params }) {
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
2022-04-05 02:18:57 +00:00
|
|
|
postData: await getPostBySlug(params.slug, serialize),
|
2022-04-03 23:32:57 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function generateCredit(postData) {
|
|
|
|
|
if (!postData['hero credit']) return null;
|
|
|
|
|
return {
|
|
|
|
|
url: postData['hero credit'],
|
|
|
|
|
text: postData['hero credit text'],
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function Post({ postData }) {
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
<HeaderNav />
|
2022-04-05 02:18:57 +00:00
|
|
|
<HeroImage image={postData.hero} credit={generateCredit(postData)} withGradient="top-black">
|
2022-04-03 23:32:57 +00:00
|
|
|
{postData.title}
|
|
|
|
|
</HeroImage>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{postData.title} | Luke Granger-Brown</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<main className={styles.main}>
|
2022-04-05 02:18:57 +00:00
|
|
|
<div className={styles.post}>
|
|
|
|
|
<MDXRemote {...postData.contentMdx} components={mdxComponents} />
|
|
|
|
|
</div>
|
2022-04-03 23:32:57 +00:00
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
