feat(freesewing.dev): ToC and layout changes

packages/freesewing.shared/mdx/loader.js

@@ -10,6 +10,7 @@ import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkCopyLinkedFiles from 'remark-copy-linked-files'
 import { remarkIntroPlugin } from './remark-intro-plugin.mjs'
+import mdxPluginToc from './mdx-plugin-toc.mjs'
 import smartypants from 'remark-smartypants'
 // Rehype plugins we want to use
 import rehypeHighlight from 'rehype-highlight'
@@ -61,7 +62,27 @@ const mdxLoader = async (language, site, slug) => {
     })
   )
 
-  return {mdx, intro}
+  // This is not ideal as we're adding a second pass but for now it will do
+  // See: https://github.com/remarkjs/remark-toc/issues/37
+  const toc = String(
+    await compile(md, {
+      outputFormat: 'function-body',
+      remarkPlugins: [
+        remarkFrontmatter,
+        remarkGfm,
+        smartypants,
+        [
+          mdxPluginToc,
+          { language: 'en' }
+        ]
+      ],
+      rehypePlugins: [
+        rehypeSlug,
+      ],
+    })
+  )
+
+  return {mdx, intro, toc}
 }
 
 export default mdxLoader

packages/freesewing.shared/mdx/mdx-plugin-toc.mjs

@@ -0,0 +1,30 @@
+import {toc} from 'mdast-util-toc'
+
+const headings = {
+  en: 'Table of contents',
+  fr: 'Table des matières',
+  nl: 'Inhoudsopgave',
+  es: 'Tabla de contenido',
+  de: 'Inhaltsverzeichnis'
+}
+
+export default function mdxToc(options = {}) {
+  return (node) => {
+    const result = toc(node, { heading: false })
+
+    if (result.map) node.children = [
+      {
+        type: 'heading',
+        depth: 4,
+        children: [{
+          type: 'text',
+          value: headings[options.language || 'en']
+        }]
+      },
+      result.map
+    ]
+    else node.children = []
+
+    return
+  }
+}