Merge pull request #52 from bensmithett/table-of-contents

Extract table of contents from MDX and add basic TableOfContents component

package.json

@@ -6,6 +6,7 @@
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/react": "^2.1.2",
     "@mdx-js/rollup": "^2.0.0-rc.1",
+    "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@vitejs/plugin-react": "^2.0.0",
     "dayjs": "^1.10.6",
     "express": "^4.17.1",

src/components/tropical/TableOfContents/TableOfContents.jsx

@@ -0,0 +1,16 @@
+export function TableOfContents({ tableOfContents }) {
+  return tableOfContents.length && <List list={tableOfContents} />
+}
+
+function List({ list }) {
+  return (
+    <ul>
+      {list.map(({ value, id, children }) => (
+        <li>
+          <a href={`#${id}`}>{value}</a>
+          {children && <List list={children} />}
+        </li>
+      ))}
+    </ul>
+  )
+}

src/components/tropical/TableOfContents/TableOfContents.stories.jsx

@@ -0,0 +1,6 @@
+import { TableOfContents } from './TableOfContents'
+import { tableOfContents } from './example.mdx'
+
+export default { title: 'tropical/TableOfContents' }
+
+export const Basic = () => <TableOfContents tableOfContents={tableOfContents} />

src/components/tropical/TableOfContents/example.mdx

@@ -0,0 +1,11 @@
+# Heading 1
+
+# Heading 2
+
+## Heading 2.1
+
+## Heading 2.2
+
+### Heading 2.2.1
+
+# Heading 3

src/components/tropical/TableOfContents/index.js

@@ -0,0 +1 @@
+export * from './TableOfContents'

src/entry-server.jsx

@@ -41,7 +41,11 @@ export class Renderer {
     const headTags = []
     const felaRenderer = createFelaRenderer()
     cssReset(felaRenderer)
-    const { Component, meta = {} } = this.pages[pathname] || this.pages['/404/']
+    const {
+      Component,
+      meta = {},
+      tableOfContents = []
+    } = this.pages[pathname] || this.pages['/404/']
     const Layout = meta.Layout || DefaultLayout
 
     const html = ReactDOMServer.renderToString(
@@ -59,8 +63,8 @@ export class Renderer {
             {Object.entries(this.feeds).map(([pathname, { type }]) => (
               <Link rel='alternate' type={type} href={pathname} key={pathname} />
             ))}
-            <Layout meta={meta} pages={this.pages}>
-              <Component meta={meta} pages={this.pages} />
+            <Layout meta={meta} tableOfContents={tableOfContents} pages={this.pages}>
+              <Component meta={meta} tableOfContents={tableOfContents} pages={this.pages} />
             </Layout>
           </MDXProvider>
         </RendererProvider>
@@ -87,6 +91,7 @@ function gatherPages() {
     pages[urlPath] = {
       Component: page.default,
       meta: page.meta,
+      tableOfContents: page.tableOfContents,
       filePath,
       modulePath,
       urlPath

vite.config.js

@@ -2,14 +2,16 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import mdx from '@mdx-js/rollup'
 import rehypeSlug from 'rehype-slug'
+import rehypeExtractToc from '@stefanprobst/rehype-extract-toc'
+import rehypeExtractTocMdx from '@stefanprobst/rehype-extract-toc/mdx'
 import remarkGfm from 'remark-gfm'
 import imagePresetsPlugin from 'vite-plugin-image-presets'
 import imagePresetsConfig from './src/imagePresets'
 
 export const plugins = [
   react(),
   mdx({
-    rehypePlugins: [rehypeSlug],
+    rehypePlugins: [rehypeSlug, rehypeExtractToc, rehypeExtractTocMdx],
     remarkPlugins: [remarkGfm],
     providerImportSource: '@mdx-js/react'
   }),