fix(toc): 🐛 fix issue with table of contents not following properly

Sections generated by gatsby-remark-sectionize were nested, while spying nested sections is unsupported by react-scrollspy. Thus needed to fork remark-sectionize plugin and change it to take into account ToC depth.

gatsby-config.js

@@ -70,7 +70,12 @@ const plugins = [
           },
         },
         'gatsby-remark-graphviz',
-        'gatsby-remark-sectionize',
+        {
+          resolve: require.resolve(`./plugins/gatsby-remark-sectionize-toc`),
+          options: {
+            maxDepth: config.features.toc.depth
+          }
+        },
         {
           resolve: 'gatsby-remark-images',
           options: {

plugins/gatsby-remark-sectionize-toc/index.js

@@ -0,0 +1,8 @@
+const sectionizeToc = require('./sectionize-toc');
+
+const transform = sectionizeToc();
+
+module.exports = function ({ markdownAST }, pluginOptions ) {
+    transform(markdownAST, pluginOptions.maxDepth);
+};
+

plugins/gatsby-remark-sectionize-toc/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "gatsby-remark-sectionize-toc",
+    "description": "Forked sectionize plugin used to generate sections to make react-scrollspy work with Table of Contents",
+    "author": "Mateusz Filipowicz <[email protected]>",
+    "version": "0.1.0",
+    "dependencies": {
+        "remark": "^12.0.0"
+    },
+    "license": "MIT",
+    "main": "index.js"
+}

plugins/gatsby-remark-sectionize-toc/sectionize-toc.js

@@ -0,0 +1,42 @@
+const findAfter = require('unist-util-find-after');
+const visit = require('unist-util-visit-parents');
+
+const MAX_HEADING_DEPTH = 6;
+
+module.exports = () => transform;
+
+const transform = (tree, maxDepth) => {
+  const maxTocDepth = maxDepth ? maxDepth : MAX_HEADING_DEPTH;
+  const visitFunction = sectionize(maxTocDepth);
+  for (let depth = MAX_HEADING_DEPTH; depth > 0; depth--) {
+    visit(tree, (node) => node.type === 'heading' && node.depth === depth, visitFunction);
+  }
+};
+const sectionize = (maxTocDepth) => {
+  return (node, ancestors) => {
+    const start = node;
+    const depth = start.depth;
+    const parent = ancestors[ancestors.length - 1];
+
+    const isEnd = (node) =>
+      (node.type === 'heading' && node.depth <= depth) ||
+      (node.type === 'section' && node.depth > depth && node.depth <= maxTocDepth) ||
+      node.type === 'export';
+    const end = findAfter(parent, start, isEnd);
+
+    const startIndex = parent.children.indexOf(start);
+    const endIndex = parent.children.indexOf(end);
+
+    const between = parent.children.slice(startIndex, endIndex > 0 ? endIndex : undefined);
+
+    const section = {
+      type: 'section',
+      depth: depth,
+      children: between,
+      data: {
+        hName: 'section',
+      },
+    };
+    parent.children.splice(startIndex, section.children.length, section);
+  };
+};

src/components/tableOfContents/index.js

@@ -45,7 +45,6 @@ const Sidebar = styled.aside`
   }
   .currentItem {
     a {
-      padding-left: 13px !important;
       border-left: 2px solid ${(props) => props.theme.tableOfContents.font.current} !important;
       color: ${(props) => props.theme.tableOfContents.font.current} !important;
     }