diff --git a/src/components/Toc/index.tsx b/src/components/Toc/index.tsx index 8926a03..f1dff38 100644 --- a/src/components/Toc/index.tsx +++ b/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 = ({ 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 = ({ header, items }) => { return ( {header} - {cleanedItems.map((item) => { + {items.map((item) => { const { prefix, title } = extractTitle(item.title) return ( diff --git a/src/utils/index.ts b/src/utils/index.ts index a61d301..5db36f4 100644 --- a/src/utils/index.ts +++ b/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!, } })