summaryrefslogtreecommitdiff
path: root/docs/src/components/RightSidebar
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/components/RightSidebar')
-rw-r--r--docs/src/components/RightSidebar/MoreMenu.astro143
-rw-r--r--docs/src/components/RightSidebar/RightSidebar.astro40
-rw-r--r--docs/src/components/RightSidebar/TableOfContents.tsx84
-rw-r--r--docs/src/components/RightSidebar/ThemeToggleButton.css48
-rw-r--r--docs/src/components/RightSidebar/ThemeToggleButton.tsx134
5 files changed, 238 insertions, 211 deletions
diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro
index 1b39cff10..981a1a9b8 100644
--- a/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,68 +1,91 @@
---
import ThemeToggleButton from './ThemeToggleButton.tsx';
-const {editHref} = Astro.props;
+const { editHref } = Astro.props;
---
-<style>
- .edit-on-github {
- text-decoration: none;
- font: inherit;
- color: inherit;
- font-size: 1rem;
- }
-</style>
+
<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 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" /> </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>
+ <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 />
+ <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
index 5415d4cef..f447f4408 100644
--- a/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/docs/src/components/RightSidebar/RightSidebar.astro
@@ -1,25 +1,29 @@
---
import TableOfContents from './TableOfContents.tsx';
import MoreMenu from './MoreMenu.astro';
-const {content, githubEditUrl} = Astro.props;
+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;
- }
+ .sidebar-nav {
+ width: 100%;
+ position: sticky;
+ top: 0;
+ }
+ .sidebar-nav-inner {
+ height: 100%;
+ padding: 0;
+ padding-top: var(--doc-padding);
+ overflow: auto;
+ }
</style>
-<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> \ No newline at end of file
diff --git a/docs/src/components/RightSidebar/TableOfContents.tsx b/docs/src/components/RightSidebar/TableOfContents.tsx
index 803b05568..64ed93ba1 100644
--- a/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/docs/src/components/RightSidebar/TableOfContents.tsx
@@ -3,53 +3,53 @@ import { h, Fragment } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';
const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({
- headers = [],
+ headers = [],
}) => {
- const itemOffsets = useRef([]);
- const [activeId, setActiveId] = useState<string>(undefined);
+ 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,
- }));
- };
+ 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);
+ getItemOffsets();
+ window.addEventListener('resize', getItemOffsets);
- return () => {
- window.removeEventListener('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>
- </>
- );
+ 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
index b0f1b535b..d8cd7c2ac 100644
--- a/docs/src/components/RightSidebar/ThemeToggleButton.css
+++ b/docs/src/components/RightSidebar/ThemeToggleButton.css
@@ -1,38 +1,38 @@
.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);
+ 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;
+ 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;
+ 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;
+ 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;
+ 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
index 68927fad2..3cdc5bc0c 100644
--- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
@@ -6,78 +6,78 @@ 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>,
+ <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';
- });
+ 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]);
+ 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>
- );
+ 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;
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-08 16:35:30 +0000