Got the headers to load properly for sidebar

gatsby-config.js

@@ -103,7 +103,6 @@ module.exports = {
 							enableCustomId: true
 						}
 					},
-					`remarked-autolink-headers-and-add-id`,
 					{
 						resolve: `gatsby-remark-prismjs`,
 						options: {
@@ -118,6 +117,7 @@ module.exports = {
 			}
 		},
 		`count-inline-code`,
+		`remarked-autolink-headers-and-add-id`,
 		`gatsby-transformer-sharp`,
 		`gatsby-plugin-sharp`,
 		{

package.json

@@ -55,6 +55,8 @@
     "gatsby-transformer-json": "^2.3.1",
     "gatsby-transformer-remark": "^2.7.1",
     "gatsby-transformer-sharp": "^2.4.2",
+    "github-slugger": "^1.3.0",
+    "lodash": "^4.17.15",
     "medium-zoom": "^1.0.5",
     "node-sass": "^4.13.0",
     "prismjs": "^1.17.1",
@@ -124,7 +126,6 @@
     "build": "gatsby build",
     "debug": "gatsby clean && node --nolazy --inspect-brk --max-old-space-size=2000 ./node_modules/gatsby/dist/bin/gatsby.js develop",
     "develop": "gatsby develop",
-    "debug": "gatsby clean && node --nolazy --inspect-brk --max-old-space-size=2000 ./node_modules/gatsby/dist/bin/gatsby.js develop",
     "format": "run-s format:**",
     "format:ts": "eslint --fix ./src/**/*.{ts,tsx}",
     "format:css": "stylelint --syntax=scss --fix \"./src/**/*.scss\"",

plugins/count-inline-code/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "count-inline-code-2",
+  "name": "count-inline-code",
   "version": "0.0.1",
   "description": "",
   "main": "index.js",

plugins/remarked-autolink-headers-and-add-id/gatsby-node.js

@@ -0,0 +1,85 @@
+const flatFilter = require("unist-util-flat-filter");
+const parse = require("@textlint/markdown-to-ast").parse;
+const deburr = require(`lodash/deburr`);
+
+/**
+ * While I would much MUCH rather utilize the existing AST manipulation from
+ * the remarked plugin, we've hit a bit of a snag. The problem is explained here:
+ * https://github.com/gatsbyjs/gatsby/issues/22287
+ *
+ * Once this issue is resolved/workedaround, we can move back to the code that
+ * was previously confirmed working here:
+ * https://github.com/unicorn-utterances/unicorn-utterances/tree/4efc6216f0efc228ced5c6e5491cb8b77cb64c55/plugins/remarked-autolink-headers-and-add-id
+ */
+
+/**
+ * Copied directly from the plugin source:
+ * https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers/src/index.js#L30-L49
+ */
+const getId = node => {
+	let id;
+	if (node.children.length > 0) {
+		const last = node.children[node.children.length - 1];
+		// This regex matches to preceding spaces and {#custom-id} at the end of a string.
+		// Also, checks the text of node won't be empty after the removal of {#custom-id}.
+		const match = /^(.*?)\s*\{#([\w-]+)\}$/.exec(toString(last));
+		if (match && (match[1] || node.children.length > 1)) {
+			id = match[2];
+			// Remove the custom ID from the original text.
+			if (match[1]) {
+				last.value = match[1];
+			} else {
+				node.children.pop();
+			}
+		}
+	}
+	if (!id) {
+		const slug = slugs.slug(toString(node), true);
+		id = deburr(slug);
+	}
+	return id;
+};
+
+// Hand-written regex
+const anchorRegex = /^(.*?)(?:\s*\{#([\w-]+)\})?$/;
+
+exports.sourceNodes = ({ getNodesByType, actions }) => {
+	const postNodes = getNodesByType(`MarkdownRemark`);
+	const { createNodeField } = actions;
+
+	postNodes.forEach(postNode => {
+		const slugs = require(`github-slugger`)();
+
+		const markdownAST = parse(postNode.rawMarkdownBody);
+		const values = flatFilter(markdownAST, node => node.type === "Header");
+
+		const headings = values.children.map(node => {
+			const headingText = node.children
+				.filter(child => child.value)
+				.map(child => child.value)
+				.join("");
+
+			let [_, headingTrueText, headerId] =
+				anchorRegex.exec(headingText) || [];
+
+			if (!headerId) {
+				const slug = slugs.slug(headingTrueText, true);
+				headerId = deburr(slug);
+			}
+
+			return {
+				value: headingTrueText,
+				depth: node.depth,
+				// This is added by the `gatsby-remark-autolink-headers` plugin, we're just using it here
+				// This means that it must come after that plugin in your config file
+				slug: headerId
+			};
+		});
+
+		createNodeField({
+			name: `headingsWithId`,
+			node: postNode,
+			value: headings
+		});
+	});
+};

plugins/remarked-autolink-headers-and-add-id/index.js

@@ -1,29 +0,0 @@
-const flatFilter = require("unist-util-flat-filter");
-
-module.exports = ({ markdownAST, actions, markdownNode }) => {
-	const { createNodeField } = actions;
-
-	const values = flatFilter(markdownAST, node => node.type === "heading");
-
-	const headings = values.children.map(node => {
-		const headingText = node.children
-			.filter(child => child.value)
-			.map(child => child.value)
-			.join("");
-
-		return {
-			value: headingText,
-			depth: node.depth,
-			// This is added by the `gatsby-remark-autolink-headers` plugin, we're just using it here
-			// This means that it must come after that plugin in your config file
-			slug: node.data.id
-		};
-	});
-
-	createNodeField({
-		name: `headingsWithId`,
-		node: markdownNode,
-		value: headings
-	});
-	return markdownAST;
-};

src/components/table-of-contents/use-heading-intersection-observer.ts

@@ -68,9 +68,11 @@ export const useHeadingIntersectionObserver = ({
 			return document.getElementById(headingToDisplay.slug);
 		});
 
-		headingsEls.forEach(heading => {
-			observer.observe(heading!);
-		});
+		headingsEls
+			.filter(a => a)
+			.forEach(heading => {
+				observer.observe(heading!);
+			});
 
 		return () => observer.disconnect();
 	}, [linkRefs, handleObserver, headingsToDisplay]);