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(allBlogs.length / POSTS_PER_PAGE)
-  const totalPages = Math.ceil(totalPosts.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)}
+      posts={posts}
-      initialDisplayPosts={allCoreContent(initialDisplayPosts)}
+      initialDisplayPosts={initialDisplayPosts}
       pagination={pagination}
       title="All Posts"
     />

app/page.tsx

@@ -1,10 +1,9 @@
-import { sortedBlogPost, allCoreContent } from 'pliny/utils/contentlayer'
+import { sortPosts, allCoreContent } from 'pliny/utils/contentlayer'
 import { allBlogs } from 'contentlayer/generated'
-import type { Blog } from 'contentlayer/generated'
 import Main from './Main'
 
 export default async function Page() {
-  const sortedPosts = sortedBlogPost(allBlogs) as Blog[]
+  const sortedPosts = sortPosts(allBlogs)
   const posts = allCoreContent(sortedPosts)
   return <Main posts={posts} />
 }

package.json

@@ -14,18 +14,16 @@
     "@next/bundle-analyzer": "13.4.12",
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/mdx": "^2.0.5",
     "autoprefixer": "^10.4.13",
     "contentlayer": "0.3.4",
     "esbuild": "0.18.11",
     "github-slugger": "^1.4.0",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
-    "mdx-bundler": "^9.2.1",
     "next": "13.4.12",
     "next-contentlayer": "0.3.4",
     "next-themes": "^0.2.1",
-    "pliny": "0.1.0-beta.11",
+    "pliny": "0.1.0-beta.13",
     "postcss": "^8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -44,6 +42,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
+    "@types/mdx": "^2.0.5",
     "@types/react": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",

yarn.lock

@@ -8951,9 +8951,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pliny@npm:0.1.0-beta.11":
+"pliny@npm:0.1.0-beta.13":
-  version: 0.1.0-beta.11
+  version: 0.1.0-beta.13
-  resolution: "pliny@npm:0.1.0-beta.11"
+  resolution: "pliny@npm:0.1.0-beta.13"
   dependencies:
     "@docsearch/react": ^3.5.0
     "@giscus/react": ^2.3.0
@@ -8972,7 +8972,7 @@ __metadata:
     next: ">=13.0.0"
     react: ^17.0.2 || ^18.0.0
     react-dom: ^17.0.2 || ^18.0.0
-  checksum: 74d183bdf60b59793cf915c22a5b0153f650f2802d62c1db563dd4ac365ce4086ab705090333f1af4b8da53d62b28897fd5b75cefaeef3cbce03fc2f2145d1a4
+  checksum: 2fe4b10bb9b753de765eefcd8a1c9d7abebe941266bf18315a0156aaa2f096886df7743f1b3eadb64faf553cdae3b8c5733b74e8067cfb48972576fd92cf8c7a
   languageName: node
   linkType: hard
 
@@ -10725,11 +10725,10 @@ __metadata:
     husky: ^8.0.0
     image-size: 1.0.0
     lint-staged: ^13.0.0
-    mdx-bundler: ^9.2.1
     next: 13.4.12
     next-contentlayer: 0.3.4
     next-themes: ^0.2.1
-    pliny: 0.1.0-beta.11
+    pliny: 0.1.0-beta.13
     postcss: ^8.4.24
     prettier: ^3.0.0
     prettier-plugin-tailwindcss: ^0.4.1