Bump web deps, improve mdx handling

web/package.json

@@ -21,50 +21,49 @@
     "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\""
   },
   "dependencies": {
-    "@fontsource-variable/fira-code": "^5.0.15",
-    "@fontsource-variable/inter": "^5.0.15",
-    "@fontsource-variable/newsreader": "^5.0.16",
-    "@headlessui/react": "^1.7.17",
-    "@mapbox/rehype-prism": "^0.8.0",
-    "@netlify/plugin-nextjs": "^4.41.1",
+    "@fontsource-variable/fira-code": "^5.0.16",
+    "@fontsource-variable/inter": "^5.0.16",
+    "@fontsource-variable/newsreader": "^5.0.17",
+    "@headlessui/react": "^1.7.18",
+    "@netlify/plugin-nextjs": "^4.41.3",
     "@tailwindcss/typography": "^0.5.10",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "colord": "^2.9.3",
     "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",
-    "inter-ui": "^3.19.3",
-    "next": "^14.0.1",
-    "prismjs": "^1.29.0",
+    "inter-ui": "^4.0.2",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-feather": "^2.0.10"
+    "react-feather": "^2.0.10",
+    "rehype-parse": "^9.0.0",
+    "rehype-react": "^8.0.0"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.7",
+    "@types/eslint": "^8.56.3",
     "@types/js-yaml": "^4.0.9",
-    "@types/mapbox__rehype-prism": "^0.8.1",
-    "@types/node": "^20.9.0",
-    "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "autoprefixer": "^10.4.16",
-    "cypress": "^13.4.0",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.1",
-    "eslint-config-prettier": "^9.0.0",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "autoprefixer": "^10.4.17",
+    "cypress": "^13.6.6",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-mdx": "^3.1.5",
     "js-yaml": "^4.1.0",
     "netlify-plugin-cypress": "^2.2.1",
-    "next-mdx-remote": "^4.4.1",
     "next-remote-watch": "2.0.0",
-    "postcss": "^8.4.31",
-    "rehype-stringify": "^9.0.4",
-    "remark-gfm": "^3.0.1",
-    "start-server-and-test": "^2.0.2",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.2.2"
+    "postcss": "^8.4.35",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "start-server-and-test": "^2.0.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
   }
 }

web/pages/documents/[slug].tsx

@@ -5,26 +5,19 @@ import {
   documentFilePaths,
 } from '../../utils/mdx-utils'
 
-import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote'
-import Head from 'next/head'
 import Layout from '../../components/Layout'
 import SEO from '../../components/SEO'
 import { GetStaticProps } from 'next'
 import { getSearchIndex, SearchIndex } from '../../utils/search'
 import Link from 'next/link'
-import { MDXComponents } from 'mdx/types'
+import { unified } from 'unified'
+import rehypeReact from 'rehype-react'
+import * as prod from 'react/jsx-runtime'
+import rehypeParse from 'rehype-parse'
+import { createElement, Fragment, useEffect, useState } from 'react'
 
-// Custom components/renderers to pass to MDX.
-// Since the MDX files aren't loaded by webpack, they have no knowledge of how
-// to handle import statements. Instead, you must include components in scope
-// here.
-const components = {
-  a: Link,
-  // It also works with dynamically-imported components, which is especially
-  // useful for conditionally loading components for certain routes.
-  // See the notes in README.md for more details.
-  Head,
-}
+// @ts-expect-error: the react types are missing.
+const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs }
 
 interface FrontMatter {
   title: string
@@ -32,7 +25,7 @@ interface FrontMatter {
 }
 
 interface DocumentPageProps {
-  source: MDXRemoteProps
+  source: string
   frontMatter: FrontMatter
   searchIndex: SearchIndex
 }
@@ -42,6 +35,23 @@ export default function DocumentPage({
   frontMatter,
   searchIndex,
 }: DocumentPageProps) {
+  const [children, setChildren] = useState(createElement(Fragment))
+
+  useEffect(
+    function () {
+      ;(async function () {
+        const file = await unified()
+          .use(rehypeParse, { fragment: true })
+          // @ts-expect-error: the react types are missing.
+          .use(rehypeReact, { ...production, components: { a: Link } })
+          .process(source)
+
+        setChildren(file.result)
+      })()
+    },
+    [source]
+  )
+
   return (
     <Layout searchIndex={searchIndex}>
       <SEO
@@ -58,9 +68,7 @@ export default function DocumentPage({
           )}
         </header>
         <main>
-          <article className="prose dark:prose-invert">
-            <MDXRemote {...source} components={components as MDXComponents} />
-          </article>
+          <article className="prose dark:prose-invert">{children}</article>
         </main>
       </article>
     </Layout>
@@ -69,7 +77,7 @@ export default function DocumentPage({
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   if (params) {
-    const { mdxSource, data } = await getDocumentBySlug(params.slug as string)
+    const { source, data } = await getDocumentBySlug(params.slug as string)
     const prevDocument = getPreviousDocumentBySlug(params.slug as string)
     const nextDocument = getNextDocumentBySlug(params.slug as string)
     const searchIndex = getSearchIndex()
@@ -77,7 +85,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     return {
       props: {
         searchIndex,
-        source: mdxSource,
+        source,
         frontMatter: data,
         prevDocument,
         nextDocument,

web/utils/mdx-utils.ts

@@ -1,9 +1,11 @@
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
-import { serialize } from 'next-mdx-remote/serialize'
-import rehypePrism from '@mapbox/rehype-prism'
+import { unified } from 'unified'
 import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
 
 // DOCUMENTS_PATH is useful when you want to get the path to a specific file
 export const DOCUMENTS_PATH = path.join(process.cwd(), 'documents')
@@ -16,7 +18,7 @@ export const documentFilePaths = fs
 
 export interface Document {
   content: string
-  data: any
+  data: object
   filePath: string
 }
 
@@ -51,16 +53,15 @@ export const getDocumentBySlug = async (slug: string) => {
 
   const { content, data } = matter(source)
 
-  const mdxSource = await serialize(content, {
-    // Optionally pass remark/rehype plugins
-    mdxOptions: {
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypePrism],
-    },
-    scope: data,
-  })
+  const result = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype)
+    // .use(rehypePrism)
+    .use(rehypeStringify)
+    .process(content)
 
-  return { mdxSource, data, documentFilePath }
+  return { source: result.value, data, documentFilePath }
 }
 
 export const getNextDocumentBySlug = (slug: string) => {