diff options
Diffstat (limited to 'docs/src/components/RightSidebar')
5 files changed, 0 insertions, 296 deletions
diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro deleted file mode 100644 index 981a1a9b8..000000000 --- a/docs/src/components/RightSidebar/MoreMenu.astro +++ /dev/null @@ -1,91 +0,0 @@ ---- -import ThemeToggleButton from './ThemeToggleButton.tsx'; -const { editHref } = Astro.props; ---- - -<h2 class="heading">More</h2> -<ul> - <li class={`header-link depth-2`}> - <a class="edit-on-github" href={editHref} 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> - </li> - <li class={`header-link depth-2`}> - <a - href="https://github.com/withastro/astro/blob/main/CONTRIBUTING.md#translations" - target="_blank" - > - <svg - aria-hidden="true" - focusable="false" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 88.6 77.3" - height="1.24em" - width="1.24em" - style="margin: -2px;" - > - <path - fill="currentColor" - d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" - ></path> - <path - fill="currentColor" - d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" - ></path> - </svg> - <span>Translate this page</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 our community</span> - </a> - </li> -</ul> -<div style="margin: 2rem 0; text-align: center;"> - <ThemeToggleButton client:visible /> -</div> - -<style> - .edit-on-github { - text-decoration: none; - font: inherit; - color: inherit; - font-size: 1rem; - } -</style> diff --git a/docs/src/components/RightSidebar/RightSidebar.astro b/docs/src/components/RightSidebar/RightSidebar.astro deleted file mode 100644 index f447f4408..000000000 --- a/docs/src/components/RightSidebar/RightSidebar.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import TableOfContents from './TableOfContents.tsx'; -import MoreMenu from './MoreMenu.astro'; -const { content, githubEditUrl } = Astro.props; -const headers = content.astro?.headers; ---- - -<nav class="sidebar-nav" aria-labelledby="grid-right"> - <div class="sidebar-nav-inner"> - {headers && ( - <TableOfContents client:media="(min-width: 50em)" headers={headers} /> - )} - <MoreMenu editHref={githubEditUrl} /> - </div> -</nav> - -<style> - .sidebar-nav { - width: 100%; - position: sticky; - top: 0; - } - .sidebar-nav-inner { - height: 100%; - padding: 0; - padding-top: var(--doc-padding); - overflow: auto; - } -</style> diff --git a/docs/src/components/RightSidebar/TableOfContents.tsx b/docs/src/components/RightSidebar/TableOfContents.tsx deleted file mode 100644 index 64ed93ba1..000000000 --- a/docs/src/components/RightSidebar/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; diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.css b/docs/src/components/RightSidebar/ThemeToggleButton.css deleted file mode 100644 index d8cd7c2ac..000000000 --- a/docs/src/components/RightSidebar/ThemeToggleButton.css +++ /dev/null @@ -1,38 +0,0 @@ -.theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; - background-color: var(--theme-code-inline-bg); -} - -.theme-toggle > label:focus-within { - outline: 2px solid transparent; - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; -} - -.theme-toggle > label { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; - cursor: pointer; -} - -.theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; -} - -input[name='theme-toggle'] { - position: absolute; - opacity: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; -} diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx deleted file mode 100644 index 3cdc5bc0c..000000000 --- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import { useState, useEffect } from 'preact/hooks'; -import './ThemeToggleButton.css'; - -const themes = ['light', 'dark']; - -const icons = [ - <svg - xmlns="http://www.w3.org/2000/svg" - width="20" - height="20" - viewBox="0 0 20 20" - fill="currentColor" - > - <path - fill-rule="evenodd" - d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" - clip-rule="evenodd" - /> - </svg>, - <svg - xmlns="http://www.w3.org/2000/svg" - width="20" - height="20" - viewBox="0 0 20 20" - fill="currentColor" - > - <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /> - </svg>, -]; - -function ThemeToggle() { - const [theme, setTheme] = useState(() => { - if (import.meta.env.SSR) { - return undefined; - } - if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { - return localStorage.getItem('theme'); - } - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark'; - } - return 'light'; - }); - - useEffect(() => { - const root = document.documentElement; - if (theme === 'light') { - root.classList.remove('theme-dark'); - } else { - root.classList.add('theme-dark'); - } - }, [theme]); - - return ( - <div class="theme-toggle"> - {themes.map((t, i) => { - const icon = icons[i]; - const checked = t === theme; - return ( - <label class={checked ? 'checked' : ''}> - {icon} - <input - type="radio" - name="theme-toggle" - checked={checked} - value={t} - title={`Use ${t} theme`} - aria-label={`Use ${t} theme`} - onChange={() => { - localStorage.setItem('theme', t); - setTheme(t); - }} - /> - </label> - ); - })} - </div> - ); -} - -export default ThemeToggle; |