87 lines
1.9 KiB
TypeScript
87 lines
1.9 KiB
TypeScript
import { BlitzPage, GetStaticPaths, GetStaticProps, Head, useRouter } from "blitz";
|
|
import ErrorPage from "next/error";
|
|
|
|
import type { Post } from "integrations/datocms";
|
|
import { getAllPostsWithSlug, getPostAndMorePosts, markdownToHtml } from "integrations/datocms";
|
|
|
|
type Props = {
|
|
post: Post;
|
|
morePosts: Post[];
|
|
preview: boolean;
|
|
};
|
|
|
|
const PostPage: BlitzPage<Props> = ({ post, morePosts, preview }) => {
|
|
const router = useRouter();
|
|
if (!router.isFallback && !post?.slug) {
|
|
return <ErrorPage statusCode={404} />;
|
|
}
|
|
|
|
console.log("post", post);
|
|
|
|
// TODO
|
|
/*return (
|
|
<Layout preview={preview}>
|
|
<Container>
|
|
<Header />
|
|
{router.isFallback ? (
|
|
<PostTitle>Loading…</PostTitle>
|
|
) : (
|
|
<>
|
|
<article>
|
|
<Head>
|
|
<title>
|
|
{post.title} | Next.js Blog Example with {CMS_NAME}
|
|
</title>
|
|
<meta property="og:image" content={post.ogImage.url} />
|
|
</Head>
|
|
<PostHeader
|
|
title={post.title}
|
|
coverImage={post.coverImage}
|
|
date={post.date}
|
|
author={post.author}
|
|
/>
|
|
<PostBody content={post.content} />
|
|
</article>
|
|
<SectionSeparator />
|
|
{morePosts.length > 0 && <MoreStories posts={morePosts} />}
|
|
</>
|
|
)}
|
|
</Container>
|
|
</Layout>
|
|
);*/
|
|
|
|
return null;
|
|
};
|
|
|
|
export default PostPage;
|
|
|
|
export const getStaticProps: GetStaticProps = async ({ params, preview = false }) => {
|
|
if (!params || !params.slug || Array.isArray(params.slug)) {
|
|
return {
|
|
notFound: true,
|
|
};
|
|
}
|
|
|
|
const data = await getPostAndMorePosts(params.slug, preview);
|
|
const content = await markdownToHtml(data.post.content || "");
|
|
|
|
return {
|
|
props: {
|
|
preview,
|
|
post: {
|
|
...data.post,
|
|
content,
|
|
},
|
|
morePosts: data.morePosts,
|
|
},
|
|
};
|
|
};
|
|
|
|
export const getStaticPaths: GetStaticPaths = async () => {
|
|
const allPosts = await getAllPostsWithSlug();
|
|
return {
|
|
paths: allPosts.map((post) => `/articles/${post.slug}`),
|
|
fallback: true,
|
|
};
|
|
};
|