diff options
Diffstat (limited to 'examples/docs/src/components/RightSidebar/TableOfContents.tsx')
| -rw-r--r-- | examples/docs/src/components/RightSidebar/TableOfContents.tsx | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx index 6348bdfd0..5c6851462 100644 --- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx +++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx @@ -1,13 +1,18 @@ import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; import { useState, useEffect, useRef } from 'preact/hooks'; -import { MarkdownHeading } from 'astro'; +import type { MarkdownHeading } from 'astro'; + +type ItemOffsets = { + id: string; + topOffset: number; +}; const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [], }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState<string>(undefined); + const itemOffsets = useRef<ItemOffsets[]>([]); + // FIXME: Not sure what this state is doing. It was never set to anything truthy. + const [activeId] = useState<string>(''); useEffect(() => { const getItemOffsets = () => { const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); @@ -27,16 +32,16 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ return ( <> - <h2 class="heading">On this page</h2> + <h2 className="heading">On this page</h2> <ul> - <li class={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}> + <li className={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}> <a href="#overview">Overview</a> </li> {headings .filter(({ depth }) => depth > 1 && depth < 4) .map((heading) => ( <li - class={`heading-link depth-${heading.depth} ${ + className={`heading-link depth-${heading.depth} ${ activeId === heading.slug ? 'active' : '' }`.trim()} > |