lib/mdx.js

@@ -6,8 +6,6 @@ import readingTime from 'reading-time'
 import { visit } from 'unist-util-visit'
 import getAllFilesRecursively from './utils/files'
 // Remark packages
-import remarkSlug from 'remark-slug'
-import remarkAutolinkHeadings from 'remark-autolink-headings'
 import remarkGfm from 'remark-gfm'
 import remarkFootnotes from 'remark-footnotes'
 import remarkMath from 'remark-math'
@@ -15,6 +13,8 @@ import remarkCodeTitles from './remark-code-title'
 import remarkTocHeadings from './remark-toc-headings'
 import remarkImgToJsx from './remark-img-to-jsx'
 // Rehype packages
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
 import rehypePrismPlus from 'rehype-prism-plus'
 
@@ -87,8 +87,6 @@ export async function getFileBySlug(type, slug) {
       // plugins in the future.
       options.remarkPlugins = [
         ...(options.remarkPlugins ?? []),
-        remarkSlug,
-        remarkAutolinkHeadings,
         [remarkTocHeadings, { exportRef: toc }],
         remarkGfm,
         remarkCodeTitles,
@@ -98,6 +96,8 @@ export async function getFileBySlug(type, slug) {
       ]
       options.rehypePlugins = [
         ...(options.rehypePlugins ?? []),
+        rehypeSlug,
+        rehypeAutolinkHeadings,
         rehypeKatex,
         [rehypePrismPlus, { ignoreMissing: true }],
         () => {

lib/remark-toc-headings.js

@@ -1,11 +1,12 @@
 import { visit } from 'unist-util-visit'
+import { slug } from 'github-slugger'
 
 export default function remarkTocHeadings(options) {
   return (tree) =>
     visit(tree, 'heading', (node, index, parent) => {
       options.exportRef.push({
-        value: node.children[0].value || node.children[1].value,
-        url: node.children[0].url || node.children[1].url,
+        value: node.children[0].value,
+        url: '#' + slug(node.children[0].value),
         depth: node.depth,
       })
     })

package-lock.json

@@ -4645,6 +4645,19 @@
         "web-namespaces": "^2.0.0"
       }
     },
+    "hast-util-has-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz",
+      "integrity": "sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w=="
+    },
+    "hast-util-heading-rank": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-2.1.0.tgz",
+      "integrity": "sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ==",
+      "requires": {
+        "@types/hast": "^2.0.0"
+      }
+    },
     "hast-util-is-element": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.1.tgz",
@@ -8119,6 +8132,19 @@
         }
       }
     },
+    "rehype-autolink-headings": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-6.0.0.tgz",
+      "integrity": "sha512-fY5HbOTg/S7VD+CQV1cI8t+vZTUNaQuMiswKBqKTPeCiUU/SS+jHPhp9emJ9zEx4J3MjrfymASNgr/UjhPkkig==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "extend": "^3.0.0",
+        "hast-util-has-property": "^2.0.0",
+        "hast-util-heading-rank": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "rehype-katex": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-6.0.0.tgz",
@@ -8156,14 +8182,16 @@
         "unist-util-visit": "^4.0.0"
       }
     },
-    "remark-autolink-headings": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/remark-autolink-headings/-/remark-autolink-headings-7.0.0.tgz",
-      "integrity": "sha512-8pC6GzOny0vOfBxwl1jnAcMG/r5+XR1mbSKiGBgQYnsmSyFBGvEuukEaSNplbxyOOdUAjNRRhfTkXeutYXNUUw==",
+    "rehype-slug": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-5.0.0.tgz",
+      "integrity": "sha512-jnYsFKxRh+/tQa1L+SU/ykAPGOSVCqd0BwaOBPUANcvCu8d0/SZB4IalJkdJ+n6d1eAAS2YkvjUPi+2EGYtfCQ==",
       "requires": {
         "@types/hast": "^2.0.0",
-        "@types/mdast": "^3.0.0",
-        "extend": "^3.0.0",
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^2.0.0",
+        "hast-util-heading-rank": "^2.0.0",
+        "hast-util-to-string": "^2.0.0",
         "unified": "^10.0.0",
         "unist-util-visit": "^4.0.0"
       }
@@ -8270,19 +8298,6 @@
         "unified": "^10.0.0"
       }
     },
-    "remark-slug": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-7.0.0.tgz",
-      "integrity": "sha512-ZUb1t/o2TxhdHidOsN6DVq8zVO/RiX2zBz/zXnW9cY6U7lLxcAMCxVf5DIoPToIZCGpJIE/g/vUbghlPKaDXMg==",
-      "requires": {
-        "@types/hast": "^2.3.2",
-        "@types/mdast": "^3.0.0",
-        "github-slugger": "^1.0.0",
-        "mdast-util-to-string": "^3.0.0",
-        "unified": "^10.0.0",
-        "unist-util-visit": "^4.0.0"
-      }
-    },
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",

package.json

@@ -27,13 +27,13 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "reading-time": "1.3.0",
+    "rehype-autolink-headings": "^6.0.0",
     "rehype-katex": "^6.0.0",
     "rehype-prism-plus": "^0.0.5",
-    "remark-autolink-headings": "^7.0.0",
+    "rehype-slug": "^5.0.0",
     "remark-footnotes": "^4.0.0",
     "remark-gfm": "^2.0.0",
     "remark-math": "^5.0.0",
-    "remark-slug": "^7.0.0",
     "sharp": "^0.28.3",
     "tailwindcss": "^2.2.2",
     "unist-util-visit": "^4.0.0"