summaryrefslogtreecommitdiff
path: root/examples/doc/src/components/DocSidebar.tsx
diff options
context:
space:
mode:
authorGravatar Fred K. Schott <fkschott@gmail.com> 2021-06-08 08:10:56 -0700
committerGravatar GitHub <noreply@github.com> 2021-06-08 11:10:56 -0400
commit6bca7c83a7e2d62015f45f873b0f69f11b4d902b (patch)
tree5662630e51c6e6e743785d308785cff2e47568f0 /examples/doc/src/components/DocSidebar.tsx
parent9594447335b7fa15f82c0789f18a3fe02ec20d70 (diff)
downloadastro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.gz
astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.zst
astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.zip
redesign create-astro (#301)
* redesign create astro * add changeset * Use npm start * Update the astro version * Adds the changeset Co-authored-by: Fred Schott <fks@Freds-MBP.attlocal.net> Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Diffstat (limited to 'examples/doc/src/components/DocSidebar.tsx')
-rw-r--r--examples/doc/src/components/DocSidebar.tsx61
1 files changed, 0 insertions, 61 deletions
diff --git a/examples/doc/src/components/DocSidebar.tsx b/examples/doc/src/components/DocSidebar.tsx
deleted file mode 100644
index 076d460cc..000000000
--- a/examples/doc/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;