From ae3ecfec2f6da81bc469a6bd08a44170ae17006b Mon Sep 17 00:00:00 2001
From: James Walsh <jamesandersonwalsh@gmail.com>
Date: Fri, 4 Jul 2025 11:37:59 -0600
Subject: [PATCH 1/3] refactor: fetch previous post slug only

---
 app/posts/[slug]/actions.test.ts | 11 +++++------
 app/posts/[slug]/actions.ts      |  6 ++++--
 app/posts/[slug]/page.tsx        |  9 ++++-----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/posts/[slug]/actions.test.ts b/app/posts/[slug]/actions.test.ts
index c710a65..673c7db 100644
--- a/app/posts/[slug]/actions.test.ts
+++ b/app/posts/[slug]/actions.test.ts
@@ -1,6 +1,6 @@
 import * as postsActions from '../actions'
 
-import { fetchPostBySlug, fetchPreviousPost } from './actions'
+import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
 
 import * as mdx from '@/lib/mdx'
 import type { Post } from '@/lib/types'
@@ -57,7 +57,7 @@ describe('/posts/[slug]/actions', () => {
     })
   })
 
-  describe('fetchPreviousPost', () => {
+  describe('fetchPreviousPostBySlug', () => {
     const mockPosts: Post[] = [
       { slug: 'slug-1', ...getMockFrontmatter(), source: getMockSource() },
       { slug: 'slug-2', ...getMockFrontmatter(), source: getMockSource() },
@@ -66,15 +66,14 @@ describe('/posts/[slug]/actions', () => {
     it('returns the next index of results returned from fetchPublishedPosts()', async () => {
       vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
 
-      const actual = await fetchPreviousPost('slug-1')
-      expect(actual).toBeTruthy()
-      expect(actual?.slug).toEqual('slug-2')
+      const actual = await fetchPreviousPostSlug('slug-1')
+      expect(actual).toEqual('slug-2')
     })
 
     it('returns undefined when the bottom of the list is reached', async () => {
       vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
 
-      const actual = await fetchPreviousPost('slug-2')
+      const actual = await fetchPreviousPostSlug('slug-2')
       expect(actual).toBeUndefined()
     })
   })
diff --git a/app/posts/[slug]/actions.ts b/app/posts/[slug]/actions.ts
index 50da01b..b410364 100644
--- a/app/posts/[slug]/actions.ts
+++ b/app/posts/[slug]/actions.ts
@@ -23,11 +23,13 @@ export async function fetchPostBySlug(slug: string): Promise<Post> {
   }
 }
 
-export async function fetchPreviousPost(slug: string): Promise<Post | undefined> {
+export async function fetchPreviousPostSlug(slug: string): Promise<string | undefined> {
   const publishedPosts = await fetchPublishedPosts()
   const postIndex = publishedPosts.findIndex((post) => post.slug === slug)
 
   if (postIndex === publishedPosts.length - 1) return undefined
 
-  return publishedPosts[postIndex + 1]
+  const previousPost = publishedPosts.at(postIndex + 1)
+
+  return previousPost && previousPost.slug
 }
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 1d9482c..2c435fd 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 import { fetchPublishedPosts } from '../actions'
 
-import { fetchPostBySlug, fetchPreviousPost } from './actions'
+import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
 import MDXContent from './mdx-content'
 import TimeInformation from './time-information'
 
@@ -49,8 +49,7 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
 
 export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
-  const post = await fetchPostBySlug(slug)
-  const previousPost = await fetchPreviousPost(slug)
+  const [post, previousPostSlug] = await Promise.all([fetchPostBySlug(slug), fetchPreviousPostSlug(slug)])
 
   return (
     <div className="mx-0 my-10 flex flex-col items-center md:mx-20">
@@ -74,9 +73,9 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
           <ChevronLeft width={16} height={16} />
           &nbsp;All posts
         </Link>
-        {!!previousPost && (
+        {previousPostSlug && (
           <Link
-            href={`/posts/${previousPost.slug}`}
+            href={`/posts/${previousPostSlug}`}
             className={cn(buttonVariants({ variant: 'outline' }), 'w-2/5 md:w-1/2')}
           >
             <ChevronRight width={16} height={16} />

From 213d7d65b6b014956675d8dabae6f081135c9f0f Mon Sep 17 00:00:00 2001
From: James Walsh <jamesandersonwalsh@gmail.com>
Date: Fri, 4 Jul 2025 11:42:38 -0600
Subject: [PATCH 2/3] chore: config non-dynamic params in slug page

---
 app/posts/[slug]/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 2c435fd..9e08f84 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -24,6 +24,8 @@ export async function generateStaticParams() {
   }))
 }
 
+export const dynamicParams = false
+
 export const generateMetadata = async ({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> => {
   const { slug } = await params
   const post = await fetchPostBySlug(slug)

From fee4dcdec7e733277818b472c6342786b817eed9 Mon Sep 17 00:00:00 2001
From: James Walsh <jamesandersonwalsh@gmail.com>
Date: Fri, 4 Jul 2025 21:22:45 -0600
Subject: [PATCH 3/3] refactor: eject from next-mdx-remote

---
 app/posts/[slug]/actions.test.ts |  26 +---
 app/posts/[slug]/actions.ts      |  13 --
 app/posts/[slug]/mdx-content.tsx |  68 ---------
 app/posts/[slug]/page.tsx        |  26 ++--
 mdx-components.tsx               |  39 +++++
 next.config.mjs                  |  24 ---
 next.config.ts                   |  59 ++++++++
 package.json                     |  15 +-
 pnpm-lock.yaml                   | 241 +++++++++++++++++++++++--------
 tailwind.config.ts               |   2 +-
 10 files changed, 304 insertions(+), 209 deletions(-)
 delete mode 100644 app/posts/[slug]/mdx-content.tsx
 create mode 100644 mdx-components.tsx
 delete mode 100644 next.config.mjs
 create mode 100644 next.config.ts

diff --git a/app/posts/[slug]/actions.test.ts b/app/posts/[slug]/actions.test.ts
index 673c7db..d61bf90 100644
--- a/app/posts/[slug]/actions.test.ts
+++ b/app/posts/[slug]/actions.test.ts
@@ -1,11 +1,8 @@
-import * as postsActions from '../actions'
-
-import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
+import { fetchPostBySlug } from './actions'
 
 import * as mdx from '@/lib/mdx'
 import type { Post } from '@/lib/types'
 import { getMockFrontmatter } from '@/test/mocks/frontmatter'
-import { getMockSource } from '@/test/mocks/source'
 
 vi.mock('@/lib/mdx')
 vi.mock('../actions')
@@ -56,25 +53,4 @@ describe('/posts/[slug]/actions', () => {
       })
     })
   })
-
-  describe('fetchPreviousPostBySlug', () => {
-    const mockPosts: Post[] = [
-      { slug: 'slug-1', ...getMockFrontmatter(), source: getMockSource() },
-      { slug: 'slug-2', ...getMockFrontmatter(), source: getMockSource() },
-    ]
-
-    it('returns the next index of results returned from fetchPublishedPosts()', async () => {
-      vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
-
-      const actual = await fetchPreviousPostSlug('slug-1')
-      expect(actual).toEqual('slug-2')
-    })
-
-    it('returns undefined when the bottom of the list is reached', async () => {
-      vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
-
-      const actual = await fetchPreviousPostSlug('slug-2')
-      expect(actual).toBeUndefined()
-    })
-  })
 })
diff --git a/app/posts/[slug]/actions.ts b/app/posts/[slug]/actions.ts
index b410364..09fa2d8 100644
--- a/app/posts/[slug]/actions.ts
+++ b/app/posts/[slug]/actions.ts
@@ -4,8 +4,6 @@ import path from 'path'
 
 import { notFound } from 'next/navigation'
 
-import { fetchPublishedPosts } from '../actions'
-
 import { getPostFromMDX } from '@/lib/mdx'
 import type { Post } from '@/lib/types'
 
@@ -22,14 +20,3 @@ export async function fetchPostBySlug(slug: string): Promise<Post> {
     }
   }
 }
-
-export async function fetchPreviousPostSlug(slug: string): Promise<string | undefined> {
-  const publishedPosts = await fetchPublishedPosts()
-  const postIndex = publishedPosts.findIndex((post) => post.slug === slug)
-
-  if (postIndex === publishedPosts.length - 1) return undefined
-
-  const previousPost = publishedPosts.at(postIndex + 1)
-
-  return previousPost && previousPost.slug
-}
diff --git a/app/posts/[slug]/mdx-content.tsx b/app/posts/[slug]/mdx-content.tsx
deleted file mode 100644
index 35c47a1..0000000
--- a/app/posts/[slug]/mdx-content.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Image, { ImageProps } from 'next/image'
-import { MDXRemote, type MDXRemoteProps } from 'next-mdx-remote/rsc'
-import { HTMLAttributes, PropsWithChildren } from 'react'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypePrettyCode from 'rehype-pretty-code'
-import rehypeSlug from 'rehype-slug'
-import remarkGfm from 'remark-gfm'
-import { HighlighterCoreOptions, getSingletonHighlighter } from 'shiki'
-
-import { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyP } from '@/components/ui/typography'
-import { cn } from '@/lib/utils'
-
-const components: MDXRemoteProps['components'] = {
-  img: (props: HTMLAttributes<HTMLImageElement>) => (
-    <Image
-      {...(props as ImageProps)}
-      alt="article image"
-      className="my-4 aspect-video rounded-lg object-center"
-      width={1600}
-      height={900}
-    />
-  ),
-  h1: (props: PropsWithChildren) => <TypographyH1 className="my-5" {...props} />,
-  h2: (props: PropsWithChildren) => <TypographyH2 className="my-4" {...props} />,
-  h3: (props: PropsWithChildren) => <TypographyH3 className="my-3" {...props} />,
-  p: (props: PropsWithChildren) => <TypographyP className="w-prose mb-1.5" {...props} />,
-  ol: (props: PropsWithChildren) => <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props} />,
-  ul: (props: PropsWithChildren) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props} />,
-  blockquote: (props: PropsWithChildren) => <TypographyBlockquote {...props} />,
-  code: (props: PropsWithChildren) => (
-    <code className="bg-muted relative rounded-lg px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" {...props} />
-  ),
-  pre: ({ className, ...rest }: HTMLAttributes<HTMLElement>) => (
-    <pre className={cn(className, 'my-5 whitespace-pre-wrap', '[&>code:nth-child(1)]:p-3')} {...rest} />
-  ),
-  a: (props: PropsWithChildren) => <a className="text-md text-primary p-0 underline underline-offset-2" {...props} />,
-}
-const options: MDXRemoteProps['options'] = {
-  mdxOptions: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [
-      rehypeSlug,
-      rehypeAutolinkHeadings,
-      [
-        rehypePrettyCode,
-        {
-          theme: 'one-dark-pro',
-          keepBackground: false,
-          getHighlighter: (options: HighlighterCoreOptions) => {
-            return getSingletonHighlighter({
-              ...options,
-              themes: ['one-dark-pro'],
-              langs: ['js', 'ts', 'jsx', 'tsx', 'json', 'json5', 'shell', 'bash', 'astro', 'markdown'],
-            })
-          },
-        },
-      ],
-    ],
-  },
-}
-
-type MdxContentProps = {
-  source: string
-}
-
-export default function MDXContent({ source }: MdxContentProps) {
-  return <MDXRemote source={source} components={components} options={options} />
-}
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 9e08f84..f385487 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -1,12 +1,11 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { Metadata } from 'next'
+import { ChevronLeft } from 'lucide-react'
+import { type Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 
 import { fetchPublishedPosts } from '../actions'
 
-import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
-import MDXContent from './mdx-content'
+import { fetchPostBySlug } from './actions'
 import TimeInformation from './time-information'
 
 import { Tag } from '@/components/tag'
@@ -19,8 +18,8 @@ import { cn } from '@/lib/utils'
 export async function generateStaticParams() {
   const publishedPosts = await fetchPublishedPosts()
 
-  return publishedPosts.map((post) => ({
-    slug: post.slug,
+  return publishedPosts.map(({ slug }) => ({
+    slug,
   }))
 }
 
@@ -51,7 +50,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
 
 export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
-  const [post, previousPostSlug] = await Promise.all([fetchPostBySlug(slug), fetchPreviousPostSlug(slug)])
+  const post = await fetchPostBySlug(slug)
+
+  const { default: Post } = await import(`@/posts/${slug}.mdx`)
 
   return (
     <div className="mx-0 my-10 flex flex-col items-center md:mx-20">
@@ -68,22 +69,13 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
         <TimeInformation metadata={{ publishedAt: post.publishedAt, source: post.source }} />
       </div>
       <article className="mt-8">
-        <MDXContent source={post.source} />
+        <Post />
       </article>
       <div className="border-color mt-8 flex w-full flex-row justify-center gap-4 border-t pt-8">
         <Link href="/posts" className={cn(buttonVariants({ variant: 'outline' }), 'w-2/5 md:w-1/2')}>
           <ChevronLeft width={16} height={16} />
           &nbsp;All posts
         </Link>
-        {previousPostSlug && (
-          <Link
-            href={`/posts/${previousPostSlug}`}
-            className={cn(buttonVariants({ variant: 'outline' }), 'w-2/5 md:w-1/2')}
-          >
-            <ChevronRight width={16} height={16} />
-            &nbsp;Next
-          </Link>
-        )}
       </div>
     </div>
   )
diff --git a/mdx-components.tsx b/mdx-components.tsx
new file mode 100644
index 0000000..2d6ff49
--- /dev/null
+++ b/mdx-components.tsx
@@ -0,0 +1,39 @@
+import type { MDXComponents } from 'mdx/types'
+import Image, { type ImageProps } from 'next/image'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...{
+      img: (props: HTMLAttributes<HTMLImageElement>) => (
+        <Image
+          {...(props as ImageProps)}
+          alt="article image"
+          className="my-4 aspect-video rounded-lg object-center"
+          width={1600}
+          height={900}
+        />
+      ),
+      h1: (props: PropsWithChildren) => <h1 className="prose my-8 text-4xl font-semibold md:my-12" {...props} />,
+      h2: (props: PropsWithChildren) => <h2 className="prose my-6 text-3xl font-semibold md:my-8" {...props} />,
+      h3: (props: PropsWithChildren) => <h3 className="prose my-6 text-2xl font-semibold md:my-8" {...props} />,
+      p: (props: PropsWithChildren) => <h4 className="text-normal w-prose my-2 font-normal" {...props} />,
+      ol: (props: PropsWithChildren) => <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props} />,
+      ul: (props: PropsWithChildren) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props} />,
+      blockquote: (props: PropsWithChildren) => <blockquote className="my-6 border-l-2 pl-6 italic" {...props} />,
+      code: (props: PropsWithChildren) => (
+        <code
+          className="bg-muted relative rounded-lg px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+          {...props}
+        />
+      ),
+      pre: ({ className, ...rest }: HTMLAttributes<HTMLElement>) => (
+        <pre className="my-5 whitespace-pre-wrap [&>code:nth-child(1)]:p-3" {...rest} />
+      ),
+      a: (props: PropsWithChildren) => (
+        <a className="text-md text-primary/75 p-0 underline underline-offset-2" {...props} />
+      ),
+    },
+    ...components,
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
deleted file mode 100644
index 49cc52e..0000000
--- a/next.config.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  images: {
-    remotePatterns: [],
-  },
-  transpilePackages: ['next-mdx-remote'],
-  async rewrites() {
-    return [
-      {
-        source: '/ingest/static/:path*',
-        destination: 'https://us-assets.i.posthog.com/static/:path*',
-      },
-      {
-        source: '/ingest/:path*',
-        destination: 'https://us.i.posthog.com/:path*',
-      },
-    ]
-  },
-  // ? NOTE: This is required to support PostHog trailing slash API requests
-  skipTrailingSlashRedirect: true,
-}
-
-export default nextConfig
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..b48b08a
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,59 @@
+import createMDX from '@next/mdx'
+import { type NextConfig } from 'next'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypePrettyCode from 'rehype-pretty-code'
+import rehypeSlug from 'rehype-slug'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import { type HighlighterCoreOptions, getSingletonHighlighter } from 'shiki'
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [],
+  },
+  transpilePackages: ['next-mdx-remote'],
+  pageExtensions: ['md', 'mdx', 'ts', 'tsx'],
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/static/:path*',
+        destination: 'https://us-assets.i.posthog.com/static/:path*',
+      },
+      {
+        source: '/ingest/:path*',
+        destination: 'https://us.i.posthog.com/:path*',
+      },
+    ]
+  },
+  // ? NOTE: This is required to support PostHog trailing slash API requests
+  skipTrailingSlashRedirect: true,
+}
+
+const withMDX = createMDX({
+  extension: /\.(md|mdx)$/,
+  options: {
+    remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeAutolinkHeadings,
+      [
+        rehypePrettyCode,
+        {
+          theme: 'one-dark-pro',
+          keepBackground: false,
+          getHighlighter: (options: HighlighterCoreOptions) => {
+            return getSingletonHighlighter({
+              ...options,
+              themes: ['one-dark-pro'],
+              langs: ['js', 'ts', 'jsx', 'tsx', 'json', 'json5', 'shell', 'bash', 'astro', 'markdown'],
+            })
+          },
+        },
+      ],
+    ],
+  },
+})
+
+export default withMDX(nextConfig)
diff --git a/package.json b/package.json
index b523275..cd51639 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,10 @@
     }
   },
   "lint-staged": {
-    "*.{ts,tsx}": ["next lint --fix", "pnpm format"],
+    "*.{ts,tsx}": [
+      "next lint --fix",
+      "pnpm format"
+    ],
     "*.md": "prettier --list-different"
   },
   "scripts": {
@@ -39,6 +42,9 @@
     "typecheck": "tsc --pretty"
   },
   "dependencies": {
+    "@mdx-js/loader": "3.1.0",
+    "@mdx-js/react": "3.1.0",
+    "@next/mdx": "15.3.5",
     "@radix-ui/react-accordion": "1.2.11",
     "@radix-ui/react-aspect-ratio": "1.1.7",
     "@radix-ui/react-avatar": "1.1.10",
@@ -56,7 +62,6 @@
     "geist": "1.4.2",
     "lucide-react": "0.511.0",
     "next": "15.3.3",
-    "next-mdx-remote": "5.0.0",
     "next-themes": "0.4.6",
     "posthog-js": "1.255.0",
     "posthog-node": "4.17.2",
@@ -64,7 +69,6 @@
     "react-dom": "19.1.0",
     "rss": "1.2.2",
     "sharp": "0.34.2",
-    "shiki": "3.4.2",
     "tailwind-merge": "3.3.1"
   },
   "devDependencies": {
@@ -74,9 +78,11 @@
     "@next/eslint-plugin-next": "15.3.4",
     "@playwright/test": "1.53.0",
     "@tailwindcss/postcss": "4.1.11",
+    "@tailwindcss/typography": "0.5.16",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
+    "@types/mdx": "2.0.13",
     "@types/node": "22.7.5",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.5",
@@ -104,7 +110,10 @@
     "rehype-autolink-headings": "7.1.0",
     "rehype-pretty-code": "0.14.1",
     "rehype-slug": "6.0.0",
+    "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
+    "remark-mdx-frontmatter": "5.2.0",
+    "shiki": "3.4.2",
     "tailwindcss": "4.1.10",
     "tailwindcss-animate": "1.0.7",
     "tw-animate-css": "1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9045f9..3baf016 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@mdx-js/loader':
+        specifier: 3.1.0
+        version: 3.1.0(acorn@8.14.1)
+      '@mdx-js/react':
+        specifier: 3.1.0
+        version: 3.1.0(@types/react@19.1.8)(react@19.1.0)
+      '@next/mdx':
+        specifier: 15.3.5
+        version: 15.3.5(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.8)(react@19.1.0))
       '@radix-ui/react-accordion':
         specifier: 1.2.11
         version: 1.2.11(@types/react-dom@19.1.5(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -59,9 +68,6 @@ importers:
       next:
         specifier: 15.3.3
         version: 15.3.3(@babel/core@7.27.1)(@playwright/test@1.53.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      next-mdx-remote:
-        specifier: 5.0.0
-        version: 5.0.0(@types/react@19.1.8)(acorn@8.14.1)(react@19.1.0)
       next-themes:
         specifier: 0.4.6
         version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -83,9 +89,6 @@ importers:
       sharp:
         specifier: 0.34.2
         version: 0.34.2
-      shiki:
-        specifier: 3.4.2
-        version: 3.4.2
       tailwind-merge:
         specifier: 3.3.1
         version: 3.3.1
@@ -108,6 +111,9 @@ importers:
       '@tailwindcss/postcss':
         specifier: 4.1.11
         version: 4.1.11
+      '@tailwindcss/typography':
+        specifier: 0.5.16
+        version: 0.5.16(tailwindcss@4.1.10)
       '@testing-library/jest-dom':
         specifier: 6.6.3
         version: 6.6.3
@@ -117,6 +123,9 @@ importers:
       '@testing-library/user-event':
         specifier: 14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
+      '@types/mdx':
+        specifier: 2.0.13
+        version: 2.0.13
       '@types/node':
         specifier: 22.7.5
         version: 22.7.5
@@ -198,9 +207,18 @@ importers:
       rehype-slug:
         specifier: 6.0.0
         version: 6.0.0
+      remark-frontmatter:
+        specifier: 5.0.0
+        version: 5.0.0
       remark-gfm:
         specifier: 4.0.1
         version: 4.0.1
+      remark-mdx-frontmatter:
+        specifier: 5.2.0
+        version: 5.2.0
+      shiki:
+        specifier: 3.4.2
+        version: 3.4.2
       tailwindcss:
         specifier: 4.1.10
         version: 4.1.10
@@ -1062,6 +1080,14 @@ packages:
   '@jridgewell/trace-mapping@0.3.29':
     resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
 
+  '@mdx-js/loader@3.1.0':
+    resolution: {integrity: sha512-xU/lwKdOyfXtQGqn3VnJjlDrmKXEvMi1mgYxVmukEUtVycIz1nh7oQ40bKTd4cA7rLStqu0740pnhGYxGoqsCg==}
+    peerDependencies:
+      webpack: '>=5'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
   '@mdx-js/mdx@3.1.0':
     resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
@@ -1087,6 +1113,17 @@ packages:
   '@next/eslint-plugin-next@15.3.4':
     resolution: {integrity: sha512-lBxYdj7TI8phbJcLSAqDt57nIcobEign5NYIKCiy0hXQhrUbTqLqOaSDi568U6vFg4hJfBdZYsG4iP/uKhCqgg==}
 
+  '@next/mdx@15.3.5':
+    resolution: {integrity: sha512-/2rRCgPKNp2ttQscU13auI+cYYACdPa80Okgi/1+NNJJeWn9yVxwGnqZc3SX30T889bZbLqcY4oUjqYGAygL4g==}
+    peerDependencies:
+      '@mdx-js/loader': '>=0.15.0'
+      '@mdx-js/react': '>=0.15.0'
+    peerDependenciesMeta:
+      '@mdx-js/loader':
+        optional: true
+      '@mdx-js/react':
+        optional: true
+
   '@next/swc-darwin-arm64@15.3.3':
     resolution: {integrity: sha512-WRJERLuH+O3oYB4yZNVahSVFmtxRNjNF1I1c34tYMoJb0Pve+7/RaLAJJizyYiFhjYNGHRAE1Ri2Fd23zgDqhg==}
     engines: {node: '>= 10'}
@@ -1811,6 +1848,11 @@ packages:
   '@tailwindcss/postcss@4.1.11':
     resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
 
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2534,6 +2576,11 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -2900,6 +2947,9 @@ packages:
   estree-util-to-js@2.0.0:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
+  estree-util-value-to-estree@3.4.0:
+    resolution: {integrity: sha512-Zlp+gxis+gCfK12d3Srl2PdX2ybsEA8ZYy6vQGVQTNNYLEGRQQ56XB64bjemN8kxIKXP1nC9ip4Z+ILy9LGzvQ==}
+
   estree-util-visit@2.0.0:
     resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
 
@@ -2950,6 +3000,9 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fault@2.0.1:
+    resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
+
   fdir@6.4.4:
     resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
     peerDependencies:
@@ -3025,6 +3078,10 @@ packages:
     resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
     engines: {node: '>= 6'}
 
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+
   front-matter@4.0.2:
     resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
 
@@ -3595,6 +3652,9 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -3678,6 +3738,9 @@ packages:
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
+  mdast-util-frontmatter@2.0.1:
+    resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
+
   mdast-util-gfm-autolink-literal@2.0.1:
     resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
 
@@ -3731,6 +3794,9 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
+  micromark-extension-frontmatter@2.0.0:
+    resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
@@ -3918,12 +3984,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  next-mdx-remote@5.0.0:
-    resolution: {integrity: sha512-RNNbqRpK9/dcIFZs/esQhuLA8jANqlH694yqoDBK8hkVdJUndzzGmnPHa2nyi90N4Z9VmzuSWNRpr5ItT3M7xQ==}
-    engines: {node: '>=14', npm: '>=7'}
-    peerDependencies:
-      react: '>=16'
-
   next-themes@0.4.6:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -4106,6 +4166,10 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4332,9 +4396,15 @@ packages:
   rehype@13.0.2:
     resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
 
+  remark-frontmatter@5.0.0:
+    resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-mdx-frontmatter@5.2.0:
+    resolution: {integrity: sha512-U/hjUYTkQqNjjMRYyilJgLXSPF65qbLPdoESOkXyrwz2tVyhAnm4GUKhfXqOOS9W34M3545xEMq+aMpHgVjEeQ==}
+
   remark-mdx@3.1.0:
     resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
 
@@ -4690,6 +4760,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toml@3.0.0:
+    resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
+
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -4775,27 +4848,21 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unist-util-is@5.2.1:
-    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
-
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
+  unist-util-mdx-define@1.1.2:
+    resolution: {integrity: sha512-9ncH7i7TN5Xn7/tzX5bE3rXgz1X/u877gYVAUB3mLeTKYJmQHmqKTDBi6BTGXV7AeolBCI9ErcVsOt2qryoD0g==}
+
   unist-util-position-from-estree@2.0.0:
     resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
 
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
-  unist-util-remove@3.1.1:
-    resolution: {integrity: sha512-kfCqZK5YVY5yEa89tvpl7KnBBHu2c6CzMkqHUrlOqaRgGOMp0sMvwWOVrbAtj03KhovQB7i96Gda72v/EFE0vw==}
-
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
-  unist-util-visit-parents@5.1.3:
-    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
-
   unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
@@ -4846,12 +4913,12 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
-  vfile-matter@5.0.1:
-    resolution: {integrity: sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw==}
-
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
@@ -5880,6 +5947,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.2
 
+  '@mdx-js/loader@3.1.0(acorn@8.14.1)':
+    dependencies:
+      '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - acorn
+      - supports-color
+
   '@mdx-js/mdx@3.1.0(acorn@8.14.1)':
     dependencies:
       '@types/estree': 1.0.7
@@ -5942,6 +6017,13 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
+  '@next/mdx@15.3.5(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.8)(react@19.1.0))':
+    dependencies:
+      source-map: 0.7.4
+    optionalDependencies:
+      '@mdx-js/loader': 3.1.0(acorn@8.14.1)
+      '@mdx-js/react': 3.1.0(@types/react@19.1.8)(react@19.1.0)
+
   '@next/swc-darwin-arm64@15.3.3':
     optional: true
 
@@ -6574,6 +6656,14 @@ snapshots:
       postcss: 8.5.6
       tailwindcss: 4.1.11
 
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.1.10)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.1.10
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -7409,6 +7499,8 @@ snapshots:
 
   css.escape@1.5.1: {}
 
+  cssesc@3.0.0: {}
+
   csstype@3.1.3: {}
 
   damerau-levenshtein@1.0.8: {}
@@ -7964,6 +8056,10 @@ snapshots:
       astring: 1.9.0
       source-map: 0.7.4
 
+  estree-util-value-to-estree@3.4.0:
+    dependencies:
+      '@types/estree': 1.0.7
+
   estree-util-visit@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -8013,6 +8109,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fault@2.0.1:
+    dependencies:
+      format: 0.2.2
+
   fdir@6.4.4(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
@@ -8078,6 +8178,8 @@ snapshots:
       es-set-tostringtag: 2.1.0
       mime-types: 2.1.35
 
+  format@0.2.2: {}
+
   front-matter@4.0.2:
     dependencies:
       js-yaml: 3.14.1
@@ -8689,6 +8791,8 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
+  lodash.castarray@4.4.0: {}
+
   lodash.isplainobject@4.0.6: {}
 
   lodash.kebabcase@4.1.1: {}
@@ -8779,6 +8883,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-frontmatter@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      escape-string-regexp: 5.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-frontmatter: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -8941,6 +9056,13 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-frontmatter@2.0.0:
+    dependencies:
+      fault: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.1
@@ -9262,20 +9384,6 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next-mdx-remote@5.0.0(@types/react@19.1.8)(acorn@8.14.1)(react@19.1.0):
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
-      '@mdx-js/react': 3.1.0(@types/react@19.1.8)(react@19.1.0)
-      react: 19.1.0
-      unist-util-remove: 3.1.1
-      vfile: 6.0.3
-      vfile-matter: 5.0.1
-    transitivePeerDependencies:
-      - '@types/react'
-      - acorn
-      - supports-color
-
   next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -9466,6 +9574,11 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.11
@@ -9690,6 +9803,15 @@ snapshots:
       rehype-stringify: 10.0.1
       unified: 11.0.5
 
+  remark-frontmatter@5.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-frontmatter: 2.0.1
+      micromark-extension-frontmatter: 2.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9701,6 +9823,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-mdx-frontmatter@5.2.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      estree-util-value-to-estree: 3.4.0
+      toml: 3.0.0
+      unified: 11.0.5
+      unist-util-mdx-define: 1.1.2
+      yaml: 2.8.0
+
   remark-mdx@3.1.0:
     dependencies:
       mdast-util-mdx: 3.0.0
@@ -10136,6 +10267,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toml@3.0.0: {}
+
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.15.0
@@ -10232,14 +10365,20 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
-  unist-util-is@5.2.1:
-    dependencies:
-      '@types/unist': 2.0.11
-
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-mdx-define@1.1.2:
+    dependencies:
+      '@types/estree': 1.0.7
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      vfile: 6.0.3
+
   unist-util-position-from-estree@2.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -10248,21 +10387,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-remove@3.1.1:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
-
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-visit-parents@5.1.3:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-
   unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
@@ -10334,16 +10462,13 @@ snapshots:
     dependencies:
       react: 19.1.0
 
+  util-deprecate@1.0.2: {}
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
       vfile: 6.0.3
 
-  vfile-matter@5.0.1:
-    dependencies:
-      vfile: 6.0.3
-      yaml: 2.8.0
-
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.3
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b58a201..16eee27 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -95,5 +95,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 }