fix: sync table of content anchors and anchors

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",

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 (