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'
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),
}
}
}
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={true}>
{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} dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</main>
</div>
)
}