diff options
author | 2021-06-29 13:12:27 -0700 | |
---|---|---|
committer | 2021-06-29 13:12:27 -0700 | |
commit | 9c7921300c5aae35ee947be5fc515e5b3fdaf1a2 (patch) | |
tree | 94dc4d802341e827466f641de97acf74905c706c /docs-www/src/components/DocSidebar.tsx | |
parent | 4df98a79f8d5f14e9e049322a6eef2db4f985ae4 (diff) | |
parent | 279a25246260ef95459d29c8029b18bd89adc206 (diff) | |
download | astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.tar.gz astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.tar.zst astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.zip |
Merge branch 'docs-sync-1'
Diffstat (limited to 'docs-www/src/components/DocSidebar.tsx')
-rw-r--r-- | docs-www/src/components/DocSidebar.tsx | 61 |
1 files changed, 0 insertions, 61 deletions
diff --git a/docs-www/src/components/DocSidebar.tsx b/docs-www/src/components/DocSidebar.tsx deleted file mode 100644 index 076d460cc..000000000 --- a/docs-www/src/components/DocSidebar.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import { useState, useEffect, useRef } from 'preact/hooks'; -import EditOnGithub from './EditOnGithub'; - -const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], editHref }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState<string>(undefined); - - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; - - const onScroll = () => { - const itemIndex = itemOffsets.current.findIndex((item) => item.topOffset > window.scrollY + window.innerHeight / 3); - if (itemIndex === 0) { - setActiveId(undefined); - } else if (itemIndex === -1) { - setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id); - } else { - setActiveId(itemOffsets.current[itemIndex - 1].id); - } - }; - - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); - window.addEventListener('scroll', onScroll); - - return () => { - window.removeEventListener('resize', getItemOffsets); - window.removeEventListener('scroll', onScroll); - }; - }, []); - - return ( - <nav> - <div> - <h4>Contents</h4> - <ul> - {headers - .filter(({ depth }) => depth > 1 && depth < 5) - .map((header) => ( - <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}> - <a href={`#${header.slug}`}>{header.text}</a> - </li> - ))} - </ul> - </div> - <div> - <EditOnGithub href={editHref} /> - </div> - </nav> - ); -}; - -export default DocSidebar; |