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'
import { mdxComponents } from '../../lib/posts-edge'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
export async function getStaticPaths() {
return {
paths: (await getPostSlugs()).map((slug) => ({
params: {
slug,
}
})),
fallback: false,
}
}
export async function getStaticProps({ params }) {
return {
props: {
postData: await getPostBySlug(params.slug, serialize),
}
}
}
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 />
<HeroImage image={postData.hero} credit={generateCredit(postData)} withGradient="top-black">
{postData.title}
</HeroImage>
<Head>
<title>{postData.title} | Luke Granger-Brown</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.post}>
<MDXRemote {...postData.contentMdx} components={mdxComponents} />
</div>
</main>
</div>
)
}