85 lines
1.8 KiB
JavaScript
85 lines
1.8 KiB
JavaScript
|
import { useRouter } from 'next/router'
|
||
|
|
import ErrorPage from 'next/error'
|
||
|
|
import Comment from '../../components/comment'
|
||
|
|
import Container from '../../components/container'
|
||
|
|
import distanceToNow from '../../lib/dateRelative'
|
||
|
|
import { getAllPosts, getPostBySlug } from '../../lib/getPost'
|
||
|
|
import markdownToHtml from '../../lib/markdownToHtml'
|
||
|
|
import Head from 'next/head'
|
||
|
|
|
||
|
|
export default function PostPage({ post }) {
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
if (!router.isFallback && !post?.slug) {
|
||
|
|
return <ErrorPage statusCode={404} />
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<Head>
|
||
|
|
<title>{post.title} | My awesome blog</title>
|
||
|
|
</Head>
|
||
|
|
|
||
|
|
{router.isFallback ? (
|
||
|
|
<div>Loading…</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<article>
|
||
|
|
<header>
|
||
|
|
<h1 className="text-4xl font-bold">{post.title}</h1>
|
||
|
|
{post.excerpt ? (
|
||
|
|
<p className="mt-2 text-xl">{post.excerpt}</p>
|
||
|
|
) : null}
|
||
|
|
<time className="flex mt-2 text-gray-400">
|
||
|
|
{distanceToNow(new Date(post.date))}
|
||
|
|
</time>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="prose mt-10"
|
||
|
|
dangerouslySetInnerHTML={{ __html: post.content }}
|
||
|
|
/>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<Comment />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function getStaticProps({ params }) {
|
||
|
|
const post = getPostBySlug(params.slug, [
|
||
|
|
'slug',
|
||
|
|
'title',
|
||
|
|
'excerpt',
|
||
|
|
'date',
|
||
|
|
'content',
|
||
|
|
])
|
||
|
|
const content = await markdownToHtml(post.content || '')
|
||
|
|
|
||
|
|
return {
|
||
|
|
props: {
|
||
|
|
post: {
|
||
|
|
...post,
|
||
|
|
content,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function getStaticPaths() {
|
||
|
|
const posts = getAllPosts(['slug'])
|
||
|
|
|
||
|
|
return {
|
||
|
|
paths: posts.map(({ slug }) => {
|
||
|
|
return {
|
||
|
|
params: {
|
||
|
|
slug,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
fallback: false,
|
||
|
|
}
|
||
|
|
}
|