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} />
+      )}
+    </>
+  )
+}