diff --git a/apps/landing/src/components/table-of-contents/index.tsx b/apps/landing/src/components/table-of-contents/index.tsx index 866576e..3bc1497 100644 --- a/apps/landing/src/components/table-of-contents/index.tsx +++ b/apps/landing/src/components/table-of-contents/index.tsx @@ -6,6 +6,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react' export interface Content { label: string value: string + pathname: string } function sortContentsByDomOrder(items: Content[]): Content[] { @@ -44,13 +45,15 @@ export function TableOfContentsProvider({ children: React.ReactNode }) { const pathname = usePathname() - const [contents, setContents] = useState<{ label: string; value: string }[]>( + const [contents, setContents] = useState([]) + const [intersectingContents, setIntersectingContents] = useState( [], ) - - const [intersectingContents, setIntersectingContents] = useState< - { label: string; value: string }[] - >([]) + if (intersectingContents.some((content) => content.pathname !== pathname)) { + setIntersectingContents((prev) => + prev.filter((content) => content.pathname === pathname), + ) + } const highlightedContent = intersectingContents[0] ?? null @@ -62,6 +65,7 @@ export function TableOfContentsProvider({ const item = { label: entry.target.innerText ?? '', value: entry.target.id ?? '', + pathname, } setContents((prev) => prev.some((content) => content.value === item.value) @@ -81,7 +85,7 @@ export function TableOfContentsProvider({ } }) }) - }, []) + }, [pathname]) useEffect(() => { if (!io) return