fix draft post display and improve typings

app/blog/[...slug]/page.tsx

@@ -1,13 +1,21 @@
 import PageTitle from '@/components/PageTitle'
 import { components } from '@/components/MDXComponents'
 import { MDXLayoutRenderer } from 'pliny/mdx-components'
-import { sortedBlogPost, coreContent } from 'pliny/utils/contentlayer'
+import { sortPosts, coreContent } from 'pliny/utils/contentlayer'
 import { allBlogs, allAuthors } from 'contentlayer/generated'
 import type { Authors, Blog } from 'contentlayer/generated'
+import PostSimple from '@/layouts/PostSimple'
 import PostLayout from '@/layouts/PostLayout'
 import { Metadata } from 'next'
 import siteMetadata from '@/data/siteMetadata'
 
+const isProduction = process.env.NODE_ENV === 'production'
+const defaultLayout = 'PostLayout'
+const layouts = {
+  PostSimple,
+  PostLayout,
+}
+
 export async function generateMetadata({
   params,
 }: {
@@ -69,7 +77,7 @@ export const generateStaticParams = async () => {
 
 export default async function Page({ params }: { params: { slug: string[] } }) {
   const slug = decodeURI(params.slug.join('/'))
-  const sortedPosts = sortedBlogPost(allBlogs) as Blog[]
+  const sortedPosts = sortPosts(allBlogs) as Blog[]
   const postIndex = sortedPosts.findIndex((p) => p.slug === slug)
   const prev = coreContent(sortedPosts[postIndex + 1])
   const next = coreContent(sortedPosts[postIndex - 1])
@@ -88,9 +96,11 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
     }
   })
 
+  const Layout = layouts[post.layout || defaultLayout]
+
   return (
     <>
-      {post && 'draft' in post && post.draft === true ? (
+      {isProduction && post && 'draft' in post && post.draft === true ? (
         <div className="mt-24 text-center">
           <PageTitle>
             Under Construction{' '}
@@ -104,9 +114,9 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
           <script type="application/ld+json" suppressHydrationWarning>
             {JSON.stringify(jsonLd)}
           </script>
-          <PostLayout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>
+          <Layout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>
             <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
-          </PostLayout>
+          </Layout>
         </>
       )}
     </>

app/blog/page.tsx

@@ -1,7 +1,6 @@
 import ListLayout from '@/layouts/ListLayout'
-import { sortedBlogPost } from 'pliny/utils/contentlayer'
+import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
 import { allBlogs } from 'contentlayer/generated'
-import type { Blog } from 'contentlayer/generated'
 import { genPageMetadata } from 'app/seo'
 
 const POSTS_PER_PAGE = 5
@@ -9,7 +8,7 @@ const POSTS_PER_PAGE = 5
 export const metadata = genPageMetadata({ title: 'Blog' })
 
 export default function BlogPage() {
-  const posts = sortedBlogPost(allBlogs) as Blog[]
+  const posts = allCoreContent(sortPosts(allBlogs))
   const pageNumber = 1
   const initialDisplayPosts = posts.slice(
     POSTS_PER_PAGE * (pageNumber - 1),

app/blog/page/[page]/page.tsx

@@ -1,20 +1,18 @@
 import ListLayout from '@/layouts/ListLayout'
-import { allCoreContent, sortedBlogPost } from 'pliny/utils/contentlayer'
+import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
 import { allBlogs } from 'contentlayer/generated'
-import type { Blog } from 'contentlayer/generated'
 
 const POSTS_PER_PAGE = 5
 
 export const generateStaticParams = async () => {
-  const totalPosts = allBlogs
-  const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
+  const totalPages = Math.ceil(allBlogs.length / POSTS_PER_PAGE)
   const paths = Array.from({ length: totalPages }, (_, i) => ({ page: (i + 1).toString() }))
 
   return paths
 }
 
 export default function Page({ params }: { params: { page: string } }) {
-  const posts = sortedBlogPost(allBlogs) as Blog[]
+  const posts = allCoreContent(sortPosts(allBlogs))
   const pageNumber = parseInt(params.page as string)
   const initialDisplayPosts = posts.slice(
     POSTS_PER_PAGE * (pageNumber - 1),
@@ -27,8 +25,8 @@ export default function Page({ params }: { params: { page: string } }) {
 
   return (
     <ListLayout
-      posts={allCoreContent(posts)}
-      initialDisplayPosts={allCoreContent(initialDisplayPosts)}
+      posts={posts}
+      initialDisplayPosts={initialDisplayPosts}
       pagination={pagination}
       title="All Posts"
     />