refactor: migrate to rsc and app dir

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

@@ -0,0 +1,21 @@
+'use client'
+
+import { MDXLayoutRenderer } from 'pliny/mdx-components'
+import { MDXComponents } from '@/components/MDXComponents'
+import type { Blog } from 'contentlayer/generated'
+
+const DEFAULT_LAYOUT = 'PostLayout'
+
+export default function Blog({ post, authorDetails, prev, next }) {
+  return (
+    <MDXLayoutRenderer
+      layout={post.layout || DEFAULT_LAYOUT}
+      content={post}
+      MDXComponents={MDXComponents}
+      toc={post.toc}
+      authorDetails={authorDetails}
+      prev={prev}
+      next={next}
+    />
+  )
+}

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

@@ -0,0 +1,44 @@
+import PageTitle from '@/components/PageTitle'
+import { sortedBlogPost, coreContent } from 'pliny/utils/contentlayer'
+import { allBlogs, allAuthors } from 'contentlayer/generated'
+import type { Authors, Blog } from 'contentlayer/generated'
+import BlogPage from './Blog'
+
+export const generateStaticParams = async () => {
+  const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }))
+
+  return paths
+}
+
+export default function Page({ params }: { params: { slug: string[] } }) {
+  const slug = params.slug.join('/')
+  const sortedPosts = sortedBlogPost(allBlogs) as Blog[]
+  const postIndex = sortedPosts.findIndex((p) => p.slug === slug)
+  const prevContent = sortedPosts[postIndex + 1] || null
+  const prev = prevContent ? coreContent(prevContent) : null
+  const nextContent = sortedPosts[postIndex - 1] || null
+  const next = nextContent ? coreContent(nextContent) : null
+  const post = sortedPosts.find((p) => p.slug === slug)
+  const authorList = post?.authors || ['default']
+  const authorDetails = authorList.map((author) => {
+    const authorResults = allAuthors.find((p) => p.slug === author)
+    return coreContent(authorResults as Authors)
+  })
+
+  return (
+    <>
+      {post && 'draft' in post && post.draft === true ? (
+        <div className="mt-24 text-center">
+          <PageTitle>
+            Under Construction{' '}
+            <span role="img" aria-label="roadwork sign">
+              🚧
+            </span>
+          </PageTitle>
+        </div>
+      ) : (
+        <BlogPage post={post} authorDetails={authorDetails} prev={prev} next={next} />
+      )}
+    </>
+  )
+}

app/blog/page.tsx

@@ -0,0 +1,31 @@
+import ListLayout from '@/layouts/ListLayout'
+import { sortedBlogPost } from 'pliny/utils/contentlayer'
+import { allBlogs } from 'contentlayer/generated'
+import type { Blog } from 'contentlayer/generated'
+
+const POSTS_PER_PAGE = 5
+
+export default function BlogPage() {
+  const posts = sortedBlogPost(allBlogs) as Blog[]
+  const pageNumber = 1
+  const initialDisplayPosts = posts.slice(
+    POSTS_PER_PAGE * (pageNumber - 1),
+    POSTS_PER_PAGE * pageNumber
+  )
+  const pagination = {
+    currentPage: pageNumber,
+    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
+  }
+
+  return (
+    <>
+      {/* <PageSEO title={`Blog - ${siteMetadata.author}`} description={siteMetadata.description} /> */}
+      <ListLayout
+        posts={posts}
+        initialDisplayPosts={initialDisplayPosts}
+        pagination={pagination}
+        title="All Posts"
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+// import { PageSEO } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+import ListLayout from '@/layouts/ListLayout'
+import { allCoreContent, sortedBlogPost } 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 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 pageNumber = parseInt(params.page as string)
+  const initialDisplayPosts = posts.slice(
+    POSTS_PER_PAGE * (pageNumber - 1),
+    POSTS_PER_PAGE * pageNumber
+  )
+  const pagination = {
+    currentPage: pageNumber,
+    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
+  }
+
+  return (
+    <>
+      {/* <PageSEO title={siteMetadata.title} description={siteMetadata.description} /> */}
+      <ListLayout
+        posts={allCoreContent(posts)}
+        initialDisplayPosts={allCoreContent(initialDisplayPosts)}
+        pagination={pagination}
+        title="All Posts"
+      />
+    </>
+  )
+}