diff options
Diffstat (limited to 'docs/src/components/DocSidebar')
-rw-r--r-- | docs/src/components/DocSidebar/DocSidebar.tsx | 22 | ||||
-rw-r--r-- | docs/src/components/DocSidebar/EditOnGithub.tsx | 29 | ||||
-rw-r--r-- | docs/src/components/DocSidebar/More.tsx | 69 | ||||
-rw-r--r-- | docs/src/components/DocSidebar/TableOfContents.tsx | 55 |
4 files changed, 0 insertions, 175 deletions
diff --git a/docs/src/components/DocSidebar/DocSidebar.tsx b/docs/src/components/DocSidebar/DocSidebar.tsx deleted file mode 100644 index ebf3dbf0d..000000000 --- a/docs/src/components/DocSidebar/DocSidebar.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import More from './More'; -import TableOfContents from './TableOfContents'; - -export const DocSidebar: FunctionalComponent<{ - headers: any[]; - editHref: string; -}> = ({ headers = [], editHref }) => { - return ( - <nav class="sidebar-nav" aria-labelledby="sidebar-content"> - <div class="sidebar-nav-inner"> - <TableOfContents headers={headers} /> - <More editHref={editHref} /> - </div> - </nav> - ); -}; - -export default DocSidebar; -export { default as More } from './More'; -export { default as TableOfContents } from './TableOfContents'; diff --git a/docs/src/components/DocSidebar/EditOnGithub.tsx b/docs/src/components/DocSidebar/EditOnGithub.tsx deleted file mode 100644 index e6e757f5f..000000000 --- a/docs/src/components/DocSidebar/EditOnGithub.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; - -const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => { - return ( - <a class="edit-on-github" href={href} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="pen" - class="svg-inline--fa fa-pen fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" - ></path> - </svg> - <span>Edit this page</span> - </a> - ); -}; - -export default EditOnGithub; diff --git a/docs/src/components/DocSidebar/More.tsx b/docs/src/components/DocSidebar/More.tsx deleted file mode 100644 index 6b0c5145c..000000000 --- a/docs/src/components/DocSidebar/More.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import EditOnGithub from './EditOnGithub'; -import ThemeToggle from '../ThemeToggle'; - -const More: FunctionalComponent<{ editHref: string }> = ({ editHref }) => { - return ( - <> - <h2 class="heading">More</h2> - <ul> - <li class={`header-link depth-2`}> - <EditOnGithub href={editHref} /> - </li> - <li class={`header-link depth-2`}> - <a - href="https://github.com/snowpackjs/astro/issues/new/choose" - target="_blank" - > - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="bug" - class="svg-inline--fa fa-bug fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z" - ></path> - </svg> - <span>Report a bug</span> - </a> - </li> - <li class={`header-link depth-2`}> - <a href="https://astro.build/chat" target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="comment-alt" - class="svg-inline--fa fa-comment-alt fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" - ></path> - </svg> - <span>Join the community</span> - </a> - </li> - </ul> - <div style={{ margin: '2rem 0', textAlign: 'center' }}> - <ThemeToggle /> - </div> - </> - ); -}; - -export default More; 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; |