From 66070e152d418cbed6e57363ffcb809f9ea1d5a9 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 22 May 2020 00:29:50 -0400
Subject: [PATCH] fix: sync table of content anchors and anchors

---
 package.json                 |  1 +
 src/components/Toc/index.tsx | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b0c5093..6ecb0df 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "gatsby-source-filesystem": "^2.3.5",
     "gatsby-transformer-remark": "^2.8.10",
     "gatsby-transformer-sharp": "^2.5.2",
+    "github-slugger": "^1.3.0",
     "lodash": "^4.17.15",
     "polished": "^3.6.3",
     "prismjs": "^1.20.0",
diff --git a/src/components/Toc/index.tsx b/src/components/Toc/index.tsx
index f1dff38..8926a03 100644
--- a/src/components/Toc/index.tsx
+++ b/src/components/Toc/index.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from "react"
+import React, { FC, useMemo } from "react"
+import GithubSlugger from "github-slugger"
 import { PageSidebarLink } from "../PageSidebarLink"
 import { ITocItem } from "../../types"
 import * as SC from "./styles"
@@ -23,9 +24,27 @@ function extractTitle(title: string): ITitle {
   }
 }
 
+// needs to match the anchors generated by gatsby-remark-auto-headers-improved
+// maybe extract logic
+function cleanAnchors(items: ITocItem[]): ITocItem[] {
+  const slugger = new GithubSlugger()
+  slugger.reset()
+
+  const strip = (value: string) => value.replace(/^(\d*\-)(.*)/, "$2")
+
+  return items.map((item) => ({
+    ...item,
+    link: `#${strip(slugger.slug(item.title))}`,
+  }))
+}
+
 export const Toc: FC<ITocProps> = ({ header, items }) => {
   const windowGlobal = typeof window !== "undefined" && window
 
+  const cleanedItems = useMemo(() => {
+    return cleanAnchors(items)
+  }, [items])
+
   // window is not available on build
   if (!windowGlobal) {
     return null
@@ -35,7 +54,7 @@ export const Toc: FC<ITocProps> = ({ header, items }) => {
   return (
     <SC.TocWrapper>
       {header}
-      {items.map((item) => {
+      {cleanedItems.map((item) => {
         const { prefix, title } = extractTitle(item.title)
 
         return (