summaryrefslogtreecommitdiff
path: root/examples/doc/src/components/DocSidebar.tsx
diff options
context:
space:
mode:
authorGravatar natemoo-re <natemoo-re@users.noreply.github.com> 2021-05-27 14:17:27 +0000
committerGravatar GitHub Actions <actions@github.com> 2021-05-27 14:17:27 +0000
commita5782a37c8c72b0a926107552649b5adc30eb7aa (patch)
tree8e06ccdcfd1bd489ff2aa1f45da88e95d5db41f9 /examples/doc/src/components/DocSidebar.tsx
parent5247a23cbe534d79cdf4abe4c200a351dddc5dc2 (diff)
downloadastro-a5782a37c8c72b0a926107552649b5adc30eb7aa.tar.gz
astro-a5782a37c8c72b0a926107552649b5adc30eb7aa.tar.zst
astro-a5782a37c8c72b0a926107552649b5adc30eb7aa.zip
[ci] yarn format
Diffstat (limited to 'examples/doc/src/components/DocSidebar.tsx')
-rw-r--r--examples/doc/src/components/DocSidebar.tsx30
1 files changed, 18 insertions, 12 deletions
diff --git a/examples/doc/src/components/DocSidebar.tsx b/examples/doc/src/components/DocSidebar.tsx
index e792851bc..076d460cc 100644
--- a/examples/doc/src/components/DocSidebar.tsx
+++ b/examples/doc/src/components/DocSidebar.tsx
@@ -3,29 +3,29 @@ 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 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 => ({
+ itemOffsets.current = Array.from(titles).map((title) => ({
id: title.id,
- topOffset: title.getBoundingClientRect().top + window.scrollY
+ topOffset: title.getBoundingClientRect().top + window.scrollY,
}));
- }
+ };
const onScroll = () => {
- const itemIndex = itemOffsets.current.findIndex(item => item.topOffset > window.scrollY + (window.innerHeight / 3));
+ 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)
+ setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id);
} else {
- setActiveId(itemOffsets.current[itemIndex - 1].id)
+ setActiveId(itemOffsets.current[itemIndex - 1].id);
}
- }
+ };
getItemOffsets();
window.addEventListener('resize', getItemOffsets);
@@ -34,7 +34,7 @@ const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string; }> = (
return () => {
window.removeEventListener('resize', getItemOffsets);
window.removeEventListener('scroll', onScroll);
- }
+ };
}, []);
return (
@@ -42,14 +42,20 @@ const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string; }> = (
<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>)}
+ {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>
+ </nav>
);
-}
+};
export default DocSidebar;