refact: move slugger logic to utils

src/components/Toc/index.tsx

@@ -1,5 +1,4 @@
-import React, { FC, useMemo } from "react"
-import GithubSlugger from "github-slugger"
+import React, { FC } from "react"
 import { PageSidebarLink } from "../PageSidebarLink"
 import { ITocItem } from "../../types"
 import * as SC from "./styles"
@@ -24,27 +23,9 @@ 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
@@ -54,7 +35,7 @@ export const Toc: FC<ITocProps> = ({ header, items }) => {
   return (
     <SC.TocWrapper>
       {header}
-      {cleanedItems.map((item) => {
+      {items.map((item) => {
         const { prefix, title } = extractTitle(item.title)
 
         return (

src/utils/index.ts

@@ -1,4 +1,4 @@
-import kebabCase from "lodash/kebabCase"
+import GithubSlugger from "github-slugger"
 import chain from "ramda/es/chain"
 import partition from "ramda/es/partition"
 import pipe from "ramda/es/pipe"
@@ -7,6 +7,8 @@ import sort from "ramda/es/sort"
 import { IFile, IFileOrFolder, IFolder, ITocItem } from "../types"
 import { MarkdownRemark } from "../../generated/graphql"
 
+const slugger = new GithubSlugger()
+
 function specificWordsToUpper(str: string): string {
   const wordsToUpper = ["pdo", "c"]
   const toUpper = (word: string) =>
@@ -144,12 +146,18 @@ export function buildToc(headings: MarkdownRemark["headings"]): ITocItem[] {
     return []
   }
 
+  const strip = (value: string) => value.replace(/^(\d*\-)(.*)/, "$2")
+
+  slugger.reset()
+
   return headings
     .filter((h) => h?.depth === 2)
     .map((h) => {
+      const slug = slugger.slug(h!.value!)
+
       return {
         depth: h!.depth!,
-        link: `#${kebabCase(h!.value!)}`,
+        link: `#${strip(slug)}`,
         title: h!.value!,
       }
     })