summaryrefslogtreecommitdiff
path: root/docs/src/components/DocSidebar/TableOfContents.tsx
diff options
context:
space:
mode:
authorGravatar Fred K. Schott <fkschott@gmail.com> 2021-07-30 22:39:15 -0700
committerGravatar GitHub <noreply@github.com> 2021-07-30 22:39:15 -0700
commit7c744961494ca80f82b3ad66c98ff0a1c0496db7 (patch)
tree6f0ed586edd85076b2660b3b00c0fbb91f470449 /docs/src/components/DocSidebar/TableOfContents.tsx
parentd0b8485ddfd8dca1376ea0d417ce37282d092cd9 (diff)
downloadastro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.gz
astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.zst
astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.zip
Docs site cleanup (#948)
* add language selector * docs site cleanup * review feedback * code review comments
Diffstat (limited to 'docs/src/components/DocSidebar/TableOfContents.tsx')
-rw-r--r--docs/src/components/DocSidebar/TableOfContents.tsx55
1 files changed, 0 insertions, 55 deletions
diff --git a/docs/src/components/DocSidebar/TableOfContents.tsx b/docs/src/components/DocSidebar/TableOfContents.tsx
deleted file mode 100644
index 803b05568..000000000
--- a/docs/src/components/DocSidebar/TableOfContents.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-
-const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({
- headers = [],
-}) => {
- const itemOffsets = useRef([]);
- const [activeId, setActiveId] = useState<string>(undefined);
-
- useEffect(() => {
- const getItemOffsets = () => {
- const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
- itemOffsets.current = Array.from(titles).map((title) => ({
- id: title.id,
- topOffset: title.getBoundingClientRect().top + window.scrollY,
- }));
- };
-
- getItemOffsets();
- window.addEventListener('resize', getItemOffsets);
-
- return () => {
- window.removeEventListener('resize', getItemOffsets);
- };
- }, []);
-
- return (
- <>
- <h2 class="heading">On this page</h2>
- <ul>
- <li
- class={`header-link depth-2 ${
- activeId === 'overview' ? 'active' : ''
- }`.trim()}
- >
- <a href="#overview">Overview</a>
- </li>
- {headers
- .filter(({ depth }) => depth > 1 && depth < 4)
- .map((header) => (
- <li
- class={`header-link depth-${header.depth} ${
- activeId === header.slug ? 'active' : ''
- }`.trim()}
- >
- <a href={`#${header.slug}`}>{header.text}</a>
- </li>
- ))}
- </ul>
- </>
- );
-};
-
-export default TableOfContents;