5142c0e542
* initial commit
* delete comment
* env name fix
* Update README.md
* remove hapi-boom
* use next-image
* fix alt attr
* date fix for blog posts
* reset gitignore
* fix react best-practices
* prettier
* mdx to md
* fix prettier config. lint 👍
* Update examples/blog-with-comment/components/comment/list.js
Co-authored-by: Lee Robinson <me@leerob.io>
* refactor api methods
* fix: blog title
* fix: html lang
* next-mdx to gray-matter
Co-authored-by: Noah Fischer <78238464+noahfschr@users.noreply.github.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Enes Akar <enesakar@gmail.com>
84 lines
1.8 KiB
JavaScript
84 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,
|
|
}
|
|
}
|