fix: sync table of content anchors and anchors

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 (