refactor: use mdx rsc

app/Main.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import Link from '@/components/Link'
 // import { PageSEO } from '@/components/SEO'
 import Tag from '@/components/Tag'

app/about/About.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import { MDXLayoutRenderer } from 'pliny/mdx-components'
-import { MDXComponents } from '@/components/MDXComponents'
-
-const DEFAULT_LAYOUT = 'AuthorLayout'
-
-export default function About({ author }) {
-  return (
-    <MDXLayoutRenderer
-      layout={author.layout || DEFAULT_LAYOUT}
-      content={author}
-      MDXComponents={MDXComponents}
-    />
-  )
-}

app/about/page.tsx

@@ -1,7 +1,17 @@
-import { allAuthors } from 'contentlayer/generated'
-import About from './About'
+import { Authors, allAuthors } from 'contentlayer/generated'
+import { Mdx } from '@/components/MDXComponents'
+import AuthorLayout from '@/layouts/AuthorLayout'
+import { coreContent } from 'pliny/utils/contentlayer'
 
 export default function Page() {
-  const author = allAuthors.find((p) => p.slug === 'default')
-  return <About author={author} />
+  const author = allAuthors.find((p) => p.slug === 'default') as Authors
+  const mainContent = coreContent(author)
+
+  return (
+    <>
+      <AuthorLayout content={mainContent}>
+        <Mdx code={author.body.code} />
+      </AuthorLayout>
+    </>
+  )
 }

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

@@ -1,21 +0,0 @@
-'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

@@ -1,8 +1,9 @@
 import PageTitle from '@/components/PageTitle'
+import { Mdx } from '@/components/MDXComponents'
 import { sortedBlogPost, coreContent } from 'pliny/utils/contentlayer'
 import { allBlogs, allAuthors } from 'contentlayer/generated'
 import type { Authors, Blog } from 'contentlayer/generated'
-import BlogPage from './Blog'
+import PostLayout from '@/layouts/PostLayout'
 
 export const generateStaticParams = async () => {
   const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }))
@@ -10,20 +11,19 @@ export const generateStaticParams = async () => {
   return paths
 }
 
-export default function Page({ params }: { params: { slug: string[] } }) {
+export default async 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 prev = coreContent(sortedPosts[postIndex + 1])
+  const next = coreContent(sortedPosts[postIndex - 1])
+  const post = sortedPosts.find((p) => p.slug === slug) as Blog
   const authorList = post?.authors || ['default']
   const authorDetails = authorList.map((author) => {
     const authorResults = allAuthors.find((p) => p.slug === author)
     return coreContent(authorResults as Authors)
   })
+  const mainContent = coreContent(post)
 
   return (
     <>
@@ -37,7 +37,9 @@ export default function Page({ params }: { params: { slug: string[] } }) {
           </PageTitle>
         </div>
       ) : (
-        <BlogPage post={post} authorDetails={authorDetails} prev={prev} next={next} />
+        <PostLayout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>
+          <Mdx code={post.body.code} toc={post.toc} />
+        </PostLayout>
       )}
     </>
   )

app/projects/page.tsx

@@ -1,4 +1,3 @@
-import siteMetadata from '@/data/siteMetadata'
 import projectsData from '@/data/projectsData'
 import Card from '@/components/Card'