From 8da6a3f5eddb87227d4433321952b85f4d1c0026 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Tue, 2 Jun 2026 01:09:33 -0500
Subject: [PATCH] posts: replace MDXRemote with @next/mdx dynamic import,
 remove remark/rehype plugin config from page

---
 app/posts/[slug]/page.tsx | 77 ++-------------------------------------
 1 file changed, 3 insertions(+), 74 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index e60e0d5..86321de 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -1,17 +1,4 @@
 import { notFound } from 'next/navigation'
-import { MDXRemote } from 'next-mdx-remote/rsc'
-import { getMDXComponents } from '@/mdx-components'
-import remarkMath from 'remark-math'
-import remarkGfm from 'remark-gfm'
-import smartypants from 'remark-smartypants'
-import rehypePrettyCode from 'rehype-pretty-code'
-import { transformerCopyButton } from '@rehype-pretty/transformers'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypeKatex from 'rehype-katex'
-import rehypeSlug from 'rehype-slug'
-import rehypeExternalLinks from 'rehype-external-links'
-import type { Element } from 'hast'
-import type { LineElement } from 'rehype-pretty-code'
 import { getPosts, getPost } from '@/lib/posts'
 import { TableOfContents } from '@/components/blog/TableOfContents'
 import { ScrollToTop } from '@/components/ui/ScrollToTop'
@@ -38,6 +25,8 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
 
   if (!post) notFound()
 
+  const { default: PostContent } = await import(`@/content/posts/${slug}.mdx`)
+
   return (
     <>
       <ScrollToTop />
@@ -73,67 +62,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
               )}
             </header>
             <div className="prose prose-lg max-w-none">
-              <MDXRemote
-                source={post.source}
-                components={getMDXComponents({})}
-                options={{
-                  mdxOptions: {
-                    remarkPlugins: [smartypants, remarkMath, remarkGfm],
-                    rehypePlugins: [
-                      rehypeSlug,
-                      [rehypeExternalLinks, {
-                        target: '_blank',
-                        rel: ['nofollow', 'noopener', 'noreferrer'],
-                      }],
-                      rehypeAutolinkHeadings,
-                      [rehypePrettyCode, {
-                        theme: {
-                          light: 'github-light',
-                          dark: 'github-dark-dimmed',
-                        },
-                        keepBackground: false,
-                        lineNumbers: true,
-                        filterMetaString: (metaString: string | undefined) => (metaString || '') + ' showLineNumbers',
-                        grid: true,
-                        onVisitLine(node: LineElement) {
-                          if (node.children.length === 0) {
-                            node.children = [{ type: 'text', value: ' ' }];
-                          }
-                        },
-                        onVisitTitle(element: Element) {
-                          const existingClassNames = Array.isArray(element.properties.className)
-                            ? element.properties.className
-                            : [];
-                          element.properties.className = [
-                            ...existingClassNames,
-                            'vscode-title',
-                          ];
-                          element.children = [
-                            {
-                              type: 'element',
-                              tagName: 'span',
-                              properties: { className: ['vscode-dots'] },
-                              children: [
-                                { type: 'element', tagName: 'span', properties: { className: ['dot-red'] }, children: [] },
-                                { type: 'element', tagName: 'span', properties: { className: ['dot-yellow'] }, children: [] },
-                                { type: 'element', tagName: 'span', properties: { className: ['dot-green'] }, children: [] },
-                              ],
-                            },
-                            element.children[0],
-                          ];
-                        },
-                        transformers: [
-                          transformerCopyButton({
-                            visibility: 'hover',
-                            feedbackDuration: 2_500,
-                          }),
-                        ],
-                      }],
-                      rehypeKatex,
-                    ],
-                  },
-                }}
-              />
+              <PostContent />
             </div>
           </article>
           <aside className="hidden lg:block">