V2

app/editor/DocsLayout.tsx

@@ -8,14 +8,16 @@ export const DocsLayout: FC<{
 }> = ({ nav, pageNav, content }) => {
   return (
     <div className="md:flex gap-4 p-4">
-      <div className="w-56 [&_dt]:mb-3 [&_dd]:mb-3 [&_li]:mb-3 leading-5 text-sm [&_nav>a]:mb-4 flex-shrink-0">
+      <div className="w-64 [&_dt]:mb-3 [&_dd]:mb-3 [&_li]:mb-3 leading-5 text-sm [&_nav>a]:mb-4 flex-shrink-0">
         <NavToggle>{nav}</NavToggle>
       </div>
-      <div className="flex-grow prose max-w-[unset] flex-wrap overflow-x-auto">{content}</div>
+      <div className="flex-grow prose max-w-[unset] flex-wrap overflow-x-auto doc-content">{content}</div>
 
-      <div className="w-48 flex-shrink-0 hidden md:block">
-        <div className="in-page-nav">{pageNav}</div>
-      </div>
+      {pageNav && (
+        <div className="w-48 flex-shrink-0 hidden md:block">
+          <div className="in-page-nav">{pageNav}</div>
+        </div>
+      )}
     </div>
   )
 }

app/editor/NavToggle.tsx

@@ -14,14 +14,17 @@ export const NavToggle: React.FC<{ children: ReactNode }> = ({ children }) => {
           e.preventDefault()
           setShowNav((v) => !v)
         }}
-        className="block md:hidden fixed top-4 right-4 z-10"
+        className="block md:hidden fixed top-4 right-4 z-40"
       >
         <Menu width={24} height={24} />
       </button>
       <div
-        className={classNames('md:block absolute min-h-screen p-4 pr-12 top-0 right-0 md:static md:p-0 md:min-h-fit bg-white', {
-          hidden: !showNav,
-        })}
+        className={classNames(
+          'z-30 max-h-screen md:block fixed min-h-screen p-4 pr-12 top-0 right-0 md:sticky md:top-[92px] md:p-0 md:min-h-fit bg-white md:max-h-[calc(100vh-92px)] overflow-auto',
+          {
+            hidden: !showNav,
+          }
+        )}
       >
         {children}
       </div>

app/editor/api/NavGroup.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { ApiRefNode, TypeFieldMap, RefNodeField, MarkdownApiRefDocument } from '@/app/apiDocsStructures'
+import React, { useEffect } from 'react'
+import ExpandMoreIcon from '@/app/images/expand_more.svg'
+import ExpandLessIcon from '@/app/images/expand_less.svg'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+
+interface NavLink {
+  label: string
+  location: string
+}
+
+interface NavGroup {
+  title: string
+  links: NavLink[]
+}
+
+export default function NavGroup({ group }: { group: NavGroup }) {
+  let slugParam = useParams().slug
+  if (typeof slugParam === 'string') {
+    slugParam = [slugParam]
+  }
+  const slug = (slugParam ?? []).join('/')
+
+  const [expanded, setExpanded] = React.useState(() => {
+    const currentLocation = `/editor/api/${slug}`
+    return group.links.some(({ location }) => location === currentLocation)
+  })
+
+  return (
+    <dl>
+      <dt className="flex items-center cursor-pointer" onClick={() => setExpanded((v) => !v)}>
+        {group.title}
+        {expanded ? <ExpandLessIcon className="ml-auto" /> : <ExpandMoreIcon className="ml-auto" />}
+      </dt>
+      {expanded &&
+        group.links.map(({ location, label }, index) => {
+          return (
+            <dd key={index}>
+              <Link href={location}>{label}</Link>
+            </dd>
+          )
+        })}
+    </dl>
+  )
+}

app/editor/api/[[...slug]]/page.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react-refresh/only-export-components */
+import { getApiDocs } from '@/app/getApiDocs'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import rehypePrism from 'rehype-prism-plus'
+import rehypeSlug from 'rehype-slug'
+import rehypeRewrite from 'rehype-rewrite'
+import { Root, RootContent } from 'hast'
+import remarkGfm from 'remark-gfm'
+import * as fs from 'fs'
+import * as path from 'path'
+import classNames from 'classnames'
+
+interface SlugParam {
+  slug: string[]
+}
+
+export function generateStaticParams() {
+  const files: SlugParam[] = []
+
+  function readFilesRecursively(currentPath: string) {
+    const entries = fs.readdirSync(currentPath)
+
+    for (const entry of entries) {
+      const entryPath = path.join(currentPath, entry)
+      const stat = fs.statSync(entryPath)
+
+      if (stat.isDirectory()) {
+        readFilesRecursively(entryPath)
+      } else if (stat.isFile() && path.extname(entryPath) === '.md') {
+        const slugParts = entryPath.replace('api-ref/', '').replace('.md', '').replace('README', '').split('/')
+
+        files.push({
+          slug: slugParts,
+        })
+      }
+    }
+  }
+
+  readFilesRecursively('./api-ref')
+
+  return files
+}
+
+interface PageParams {
+  slug: string[]
+}
+
+export function generateMetadata({ params }: { params: PageParams }) {
+  return {}
+  const { docs } = getApiDocs('./api-ref')
+  const doc = docs.find((file) => file.slug === params.slug)
+  return {
+    title: `${doc?.title} | MDXEditor`,
+    description:
+      'MDXEditor is an open-source React component that lets your users edit markdown documents naturally, just like in Google docs or Notion.',
+  }
+}
+
+export default function Page({ params }: { params: PageParams }) {
+  let slug = params.slug
+  if (!slug) {
+    slug = ['README']
+  }
+
+  const pageContent = fs.readFileSync(`./api-ref/${slug.join('/')}.md`, 'utf-8')
+
+  return (
+    <div className={classNames({ homepage: slug[0] === 'README' })}>
+      <MDXRemote
+        source={pageContent}
+        options={{
+          mdxOptions: {
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [
+              rehypeSlug,
+              rehypePrism,
+              [
+                rehypeRewrite,
+                {
+                  selector: 'a',
+                  rewrite(node: Root | RootContent) {
+                    if (node.type == 'element' && node.tagName === 'a') {
+                      node.properties!.href = (node.properties!.href as string).replace(/\.md$/, '').replace('README.md', '')
+                    }
+                  },
+                },
+              ],
+            ],
+            format: 'md',
+          },
+          parseFrontmatter: true,
+        }}
+      />
+    </div>
+  )
+}