import type { BlitzPage, GetStaticPaths, GetStaticProps } from "blitz"; import { Head, useRouter } from "blitz"; import ErrorPage from "next/error"; import type { Post } from "integrations/datocms"; import { getAllPostsWithSlug, getPostAndMorePosts, markdownToHtml } from "integrations/datocms"; import Header from "../../../public-area/components/header"; import PostBody from "../../components/post-body"; import SectionSeparator from "../../components/section-separator"; import MoreStories from "../../components/more-stories"; type Props = { post: Post; morePosts: Post[]; preview: boolean; }; const formatter = Intl.DateTimeFormat("en-US", { day: "2-digit", month: "short", year: "numeric", }); const PostPage: BlitzPage = ({ post, morePosts, preview }) => { const router = useRouter(); if (!router.isFallback && !post?.slug) { return ; } console.log("post", post); return (
{/* Background image */}
{post.coverImage.responsiveImage.alt
{/* Article header */}
{/* Title and excerpt */}

{post.title}

{post.excerpt}

{/* Article meta */}
{/* Author meta */}
Author 04
By {post.author.name} {" "} · {formatter.format(new Date(post.date))}
{/* Article content */}
{morePosts.length > 0 && }
); /*return (
{router.isFallback ? ( Loading… ) : ( <>
{post.title} | Next.js Blog Example with {CMS_NAME}
{morePosts.length > 0 && } )} );*/ }; 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, }; };