summaryrefslogtreecommitdiff
path: root/docs/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/components')
-rw-r--r--docs/src/components/Card.astro62
-rw-r--r--docs/src/components/Footer/AvatarList.astro176
-rw-r--r--docs/src/components/Footer/Footer.astro16
-rw-r--r--docs/src/components/HeadCommon.astro49
-rw-r--r--docs/src/components/HeadSEO.astro52
-rw-r--r--docs/src/components/Header/AstroLogo.astro36
-rw-r--r--docs/src/components/Header/Header.astro184
-rw-r--r--docs/src/components/Header/LanguageSelect.css50
-rw-r--r--docs/src/components/Header/LanguageSelect.tsx102
-rw-r--r--docs/src/components/Header/Search.css75
-rw-r--r--docs/src/components/Header/Search.tsx93
-rw-r--r--docs/src/components/Header/SidebarToggle.tsx44
-rw-r--r--docs/src/components/Header/SkipToContent.astro22
-rw-r--r--docs/src/components/LeftSidebar/LeftSidebar.astro186
-rw-r--r--docs/src/components/PageContent/PageContent.astro78
-rw-r--r--docs/src/components/RightSidebar/MoreMenu.astro91
-rw-r--r--docs/src/components/RightSidebar/RightSidebar.astro29
-rw-r--r--docs/src/components/RightSidebar/TableOfContents.tsx55
-rw-r--r--docs/src/components/RightSidebar/ThemeToggleButton.css38
-rw-r--r--docs/src/components/RightSidebar/ThemeToggleButton.tsx83
20 files changed, 0 insertions, 1521 deletions
diff --git a/docs/src/components/Card.astro b/docs/src/components/Card.astro
deleted file mode 100644
index 21b5deb68..000000000
--- a/docs/src/components/Card.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-const { data, index } = Astro.props;
-const hasScreenshot = !!data.demo;
-const backgroundStyle = hasScreenshot
- ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(
- data.demo
- )}/medium/9:16/')`
- : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`;
----
-
-<article
- class={`card ${hasScreenshot ? 'has-screenshot' : ''}`}
- style={`background: ${backgroundStyle}; background-size: cover;`}
->
- {hasScreenshot && <div class="background-dimmer"></div>}
- <div class="card-body">
- <a href={data.github} class="card-header" target="_blank">
- {data.name}
- <span>{` →`}</span>
- </a>
- </div>
-</article>
-
-<style>
- .card {
- position: relative;
- display: flex;
- flex-direction: column;
- grid-column: span 1;
- flex-grow: 1;
- height: 200px;
- justify-content: center;
- align-items: center;
- padding: 1rem;
- text-align: center;
- }
- .card-header {
- flex-grow: 1;
- font-weight: bold;
- font-size: 1.8rem;
- }
- .background-dimmer {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: linear-gradient(45deg, #0004, #000b);
- z-index: 2;
- }
- .card-body,
- .card-header {
- color: var(--text-color);
- }
- .card-body {
- z-index: 3;
- }
- .card.has-screenshot .card-header,
- .card.has-screenshot .card-body {
- color: white;
- }
-</style>
diff --git a/docs/src/components/Footer/AvatarList.astro b/docs/src/components/Footer/AvatarList.astro
deleted file mode 100644
index 5eb0c3692..000000000
--- a/docs/src/components/Footer/AvatarList.astro
+++ /dev/null
@@ -1,176 +0,0 @@
----
-// fetch all commits for just this page's path
-
-export interface Props {
- path: string;
-}
-
-const { path } = Astro.props as Props;
-const commitPath = 'docs/' + path;
-const url = `https://api.github.com/repos/withastro/astro/commits?path=${commitPath}`;
-const commitsURL = `https://github.com/withastro/astro/commits/main/${commitPath}`;
-
-async function getCommits(url) {
- try {
- const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
- if (!token) {
- throw new Error(
- 'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
- );
- }
-
- const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
-
- const res = await fetch(url, {
- method: 'GET',
- headers: {
- Authorization: auth,
- 'User-Agent': 'astro-docs/1.0',
- },
- });
-
- const data = await res.json();
-
- if (!res.ok) {
- throw new Error(
- `Request to fetch commits failed. Reason: ${res.statusText}
- Message: ${data.message}`
- );
- }
-
- return data;
- } catch (e) {
- console.warn(`[error] /src/components/AvatarList.astro
- ${e?.message ?? e}`);
- return new Array();
- }
-}
-
-function removeDups(arr) {
- if (!arr) {
- return new Array();
- }
- let map = new Map();
-
- for (let item of arr) {
- let author = item.author;
- // Deduplicate based on author.id
- map.set(author.id, { login: author.login, id: author.id });
- }
-
- return Array.from(map.values());
-}
-
-const data = await getCommits(url);
-const unique = removeDups(data);
-const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
-const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
----
-
-<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
-<div class="contributors">
- <ul
- class="avatar-list"
- style={`--avatar-count: ${recentContributors.length}`}
- >
- {recentContributors.map((item) => (
- <li>
- <a href={`https://github.com/${item.login}`}>
- <img
- alt={`Contributor ${item.login}`}
- title={`Contributor ${item.login}`}
- width="64"
- height="64"
- src={`https://avatars.githubusercontent.com/u/${item.id}`}
- />
- </a>
- </li>
- ))}
- </ul>
- {additionalContributors > 0 && (
- <span>
- <a
- href={commitsURL}
- >{`and ${additionalContributors} additional contributor${
- additionalContributors > 1 ? 's' : ''
- }.`}</a>
- </span>
- )}
- {unique.length === 0 && <a href={commitsURL}>Contributors</a>}
-</div>
-
-<style>
- .avatar-list {
- --avatar-size: 2.5rem;
- --avatar-count: 3;
-
- display: grid;
- list-style: none;
- /* Default to displaying most of the avatar to
- enable easier access on touch devices, ensuring
- the WCAG touch target size is met or exceeded */
- grid-template-columns: repeat(
- var(--avatar-count),
- max(44px, calc(var(--avatar-size) / 1.15))
- );
- /* `padding` matches added visual dimensions of
- the `box-shadow` to help create a more accurate
- computed component size */
- padding: 0.08em;
- font-size: var(--avatar-size);
- }
-
- @media (any-hover: hover) and (any-pointer: fine) {
- .avatar-list {
- /* We create 1 extra cell to enable the computed
- width to match the final visual width */
- grid-template-columns: repeat(
- calc(var(--avatar-count) + 1),
- calc(var(--avatar-size) / 1.75)
- );
- }
- }
-
- .avatar-list li {
- width: var(--avatar-size);
- height: var(--avatar-size);
- }
-
- .avatar-list li:hover ~ li a,
- .avatar-list li:focus-within ~ li a {
- transform: translateX(33%);
- }
-
- .avatar-list img,
- .avatar-list a {
- display: block;
- border-radius: 50%;
- }
-
- .avatar-list a {
- transition: transform 180ms ease-in-out;
- }
-
- .avatar-list img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- background-color: #fff;
- box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
- }
-
- .avatar-list a:focus {
- outline: 2px solid transparent;
- /* Double-layer trick to work for dark and light backgrounds */
- box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
- }
-
- .contributors {
- display: flex;
- align-items: center;
- }
-
- .contributors > * + * {
- margin-left: 0.75rem;
- }
-</style>
diff --git a/docs/src/components/Footer/Footer.astro b/docs/src/components/Footer/Footer.astro
deleted file mode 100644
index d13f832e5..000000000
--- a/docs/src/components/Footer/Footer.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import AvatarList from './AvatarList.astro';
-const { path } = Astro.props;
----
-
-<footer>
- <AvatarList {path} />
-</footer>
-
-<style>
- footer {
- margin-top: auto;
- padding: 2rem 0;
- border-top: 3px solid var(--theme-divider);
- }
-</style>
diff --git a/docs/src/components/HeadCommon.astro b/docs/src/components/HeadCommon.astro
deleted file mode 100644
index ca0782b60..000000000
--- a/docs/src/components/HeadCommon.astro
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<meta name="theme-color" content="#ff5e00" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="sitemap" href="/sitemap.xml" />
-
-<!-- Global CSS -->
-<link rel="stylesheet" href="/theme.css" />
-<link rel="stylesheet" href="/code.css" />
-<link rel="stylesheet" href="/index.css" />
-
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
- rel="stylesheet"
-/>
-
-<!-- Scrollable a11y code helper -->
-<script type="module" src="/make-scrollable-code-focusable.js"></script>
-
-<!-- This is intentionally inlined to avoid FOUC -->
-<script>
- const root = document.documentElement;
- const theme = localStorage.getItem('theme');
- if (
- theme === 'dark' ||
- (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
- ) {
- root.classList.add('theme-dark');
- } else {
- root.classList.remove('theme-dark');
- }
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-15"
-></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag() {
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', 'UA-130280175-15');
-</script>
diff --git a/docs/src/components/HeadSEO.astro b/docs/src/components/HeadSEO.astro
deleted file mode 100644
index 6b62c9d1f..000000000
--- a/docs/src/components/HeadSEO.astro
+++ /dev/null
@@ -1,52 +0,0 @@
----
-import { SITE, OPEN_GRAPH } from '../config.ts';
-import { getLanguageFromURL } from '../util.ts';
-export interface Props {
- content: any;
- site: any;
- canonicalURL: URL;
-}
-const { content = {}, canonicalURL } = Astro.props;
-const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
-const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
-const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
----
-
-<!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
-
-<!-- Algolia docsearch language facet -->
-<meta name="docsearch:language" content={lang} />
-
-<!-- OpenGraph Tags -->
-<meta property="og:title" content={content.title ?? SITE.title} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale} />
-<meta property="og:image" content={canonicalImageSrc} />
-<meta property="og:image:alt" content={imageAlt} />
-<meta
- name="description"
- property="og:description"
- content={content.description ? content.description : SITE.description}
-/>
-<meta property="og:site_name" content={SITE.title} />
-
-<!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={content.title ?? SITE.title} />
-<meta
- name="twitter:description"
- content={content.description ? content.description : SITE.description}
-/>
-<meta name="twitter:image" content={canonicalImageSrc} />
-<meta name="twitter:image:alt" content={imageAlt} />
-
-<!--
- TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
- Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
- https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
- Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
--->
diff --git a/docs/src/components/Header/AstroLogo.astro b/docs/src/components/Header/AstroLogo.astro
deleted file mode 100644
index 860b2d2b1..000000000
--- a/docs/src/components/Header/AstroLogo.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-const { size } = Astro.props;
----
-
-<svg
- class="logo"
- width={size}
- height={size}
- viewBox="0 0 256 256"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
->
- <style>
- #flame {
- /* fill: #ff5d01; */
- fill: #3894ff;
- }
- #a {
- /* fill: #000014; */
- fill: #3894ff;
- }
- </style>
- <title>Logo</title>
- <path
- id="a"
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
- ></path>
- <path
- id="flame"
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
- ></path>
-</svg>
diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro
deleted file mode 100644
index 2196670c8..000000000
--- a/docs/src/components/Header/Header.astro
+++ /dev/null
@@ -1,184 +0,0 @@
----
-import SkipToContent from './SkipToContent.astro';
-import SidebarToggle from './SidebarToggle.tsx';
-import LanguageSelect from './LanguageSelect.tsx';
-import Search from './Search.tsx';
-import { getLanguageFromURL } from '../../util.ts';
-const { currentPage } = Astro.props;
-const lang = currentPage && getLanguageFromURL(currentPage);
----
-
-<header>
- <SkipToContent />
- <nav class="nav-wrapper" title="Top Navigation">
- <div class="menu-toggle">
- <SidebarToggle client:idle />
- </div>
- <div class="logo flex">
- <a href="https://astro.build/">
- <h1 class="sr-only">Astro</h1>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="363"
- height="102"
- viewBox="0 0 363 102"
- fill="none"
- >
- <style>
- .text {
- fill: var(--theme-text);
- }
- .hover {
- fill: var(--theme-accent);
- }
- </style>
- <path
- class="text"
- fill-rule="evenodd"
- d="M55.07 14.216l16.81 54.865a72.6 72.6 0 00-20.765-6.984L39.808 24.135a1.475 1.475 0 00-2.827.005L25.81 62.078a72.598 72.598 0 00-20.859 6.995L21.847 14.2c.998-3.243 1.497-4.865 2.47-6.066a8 8 0 013.239-2.392c1.434-.576 3.13-.576 6.524-.576h8.751c3.398 0 5.097 0 6.532.577a8 8 0 013.241 2.397c.972 1.203 1.47 2.827 2.465 6.076z"
- clip-rule="evenodd"></path>
- <path
- fill="#FF5D01"
- fill-rule="evenodd"
- d="M54.618 71.779c-2.863 2.432-8.578 4.091-15.161 4.091-8.08 0-14.852-2.499-16.649-5.86-.642 1.926-.786 4.13-.786 5.539 0 0-.423 6.915 4.418 11.725 0-2.498 2.037-4.522 4.551-4.522 4.309 0 4.304 3.734 4.3 6.764v.27c0 4.6 2.829 8.541 6.852 10.203a9.22 9.22 0 01-.938-4.064c0-4.386 2.592-6.02 5.604-7.917 2.396-1.51 5.06-3.188 6.894-6.554a12.297 12.297 0 001.502-5.905c0-1.314-.206-2.581-.587-3.77z"
- clip-rule="evenodd"></path>
- <path
- class="text"
- d="M126.554 69c13.115 0 21.047-3.14 25.68-9.654 0 2.904.157 5.651.55 8.163h7.774c-.706-4.082-.863-6.75-.863-14.128V43.334c0-10.831-8.403-16.56-24.424-16.56-15.47 0-25.522 5.964-26.779 14.598h8.246c1.256-5.808 7.774-8.87 18.533-8.87 10.602 0 16.885 3.69 16.885 9.969v.785l-24.502 1.413c-9.974.549-13.665 1.962-16.492 4.003-2.67 1.962-4.162 5.023-4.162 8.555C107 64.683 114.696 69 126.554 69zm2.513-5.573c-9.109 0-14.135-2.119-14.135-6.357 0-4.553 3.141-6.593 14.214-7.3l23.01-1.412v1.805c0 8.241-9.66 13.264-23.089 13.264zM196.086 69c16.256 0 22.775-5.337 22.775-13.108 0-6.436-4.006-9.732-14.215-10.596l-19.083-1.49c-5.183-.393-8.088-1.884-8.088-5.102 0-4.082 4.476-6.201 14.135-6.201 10.995 0 16.727 2.198 20.497 7.064l6.361-3.061c-3.927-6.122-12.644-9.733-26.151-9.733-13.9 0-22.224 4.631-22.224 12.244 0 6.829 4.947 10.125 14.292 10.91l18.926 1.492c6.204.47 8.089 1.726 8.089 4.944 0 4.631-4.79 6.829-14.293 6.829-11.544 0-18.847-3.14-22.381-8.87l-6.204 3.376C173.312 64.918 181.715 69 196.086 69zM234.929 34.151v18.916c0 7.77 2.67 15.54 17.198 15.54 3.691 0 8.167-.706 10.131-1.57V60.68c-2.749.628-6.047 1.1-9.267 1.1-6.832 0-10.523-2.67-10.523-9.42V34.151h19.633v-5.887h-19.633V15l-7.539 3.061v10.204h-12.33v5.886h12.33zM280.823 28.265h-6.911v39.244h7.461V52.83c0-5.65 1.099-10.439 4.24-13.735 2.749-3.061 6.283-4.788 12.487-4.788 2.12 0 3.455.157 5.262.471v-7.22c-1.65-.393-3.063-.472-5.184-.472-8.402 0-15.078 4.945-17.355 12.558v-11.38zM334.807 69C351.534 69 363 60.523 363 47.887c0-12.637-11.466-21.114-28.193-21.114-16.727 0-28.193 8.477-28.193 21.114C306.614 60.523 318.08 69 334.807 69zm0-6.2c-12.329 0-20.261-5.809-20.261-14.913 0-9.105 7.932-14.913 20.261-14.913 12.251 0 20.261 5.808 20.261 14.913 0 9.104-8.01 14.912-20.261 14.912z"
- ></path>
- </svg>
- </a>
- <a href="https://docs.astro.build/">
- <h1 class="sr-only">Docs</h1>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="226"
- height="102"
- viewBox="0 0 226 102"
- fill="none"
- >
- <path
- fill="currentColor"
- d="M25.805 68c14.688 0 24.883-8.41 24.883-21.14 0-12.786-9.62-19.756-24.653-19.756H0V68h25.805zm-14.17-33.005H24.25c8.352 0 14.17 4.09 14.17 12.039 0 8.236-5.3 13.075-14.113 13.075H11.635V34.995zM82.673 69.382c16.704 0 27.418-8.582 27.418-21.83 0-13.248-10.771-21.83-27.418-21.83-16.589 0-27.418 8.582-27.418 21.83 0 13.19 10.83 21.83 27.418 21.83zm0-8.64c-9.1 0-15.149-5.299-15.149-13.19 0-7.891 6.048-13.19 15.15-13.19 9.1 0 15.205 5.299 15.205 13.19 0 7.891-6.105 13.19-15.206 13.19zM141.497 69.382c13.306 0 22.637-5.299 25.978-14.572l-11.866-2.535c-1.67 5.415-6.393 8.295-13.709 8.295-9.216 0-15.033-5.127-15.033-13.018 0-8.006 5.702-13.018 14.918-13.018 7.43 0 12.154 3.053 13.709 8.64l12.038-2.13c-2.707-9.562-12.268-15.322-25.574-15.322-16.128 0-27.302 9.043-27.302 22.003 0 13.133 10.425 21.657 26.841 21.657zM194.94 69.382c14.745 0 23.212-5.01 23.212-14.054 0-7.603-4.665-10.944-15.955-12.096l-11.289-1.094c-5.242-.576-6.97-1.556-6.97-4.09 0-2.765 3.456-4.262 9.792-4.262 7.834 0 13.709 2.476 16.762 6.508l7.315-6.163c-5.069-5.702-13.133-8.41-23.501-8.41-13.997 0-21.888 4.781-21.888 12.903 0 7.546 4.781 11.232 14.803 12.326l12.557 1.383c4.896.518 6.624 1.555 6.624 4.09 0 3.225-3.456 4.723-10.886 4.723-8.352 0-14.688-3.226-18.087-8.007l-8.294 5.818c4.205 6.451 13.709 10.425 25.805 10.425z"
- ></path>
- </svg>
- </a>
- </div>
- <div style="flex-grow: 1;"></div>
- {lang && <LanguageSelect lang={lang} client:idle />}
- <div class="search-item"><Search {lang} client:idle /></div>
- </nav>
-</header>
-
-<style>
- header {
- z-index: 11;
- height: var(--theme-navbar-height);
- width: 100%;
- background-color: var(--theme-navbar-bg);
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- position: sticky;
- top: 0;
- }
-
- .logo {
- direction: ltr;
- display: flex;
- overflow: hidden;
- width: 30px;
- font-size: 1rem;
- flex-shrink: 0;
- font-weight: 600;
- line-height: 1;
- color: hsla(var(--color-base-white), 100%, 1);
- text-decoration: none;
- gap: 0.5em;
- z-index: -1;
- }
-
- .logo a {
- padding: 0.5em 0.25em;
- margin: -0.5em -0.25em;
- }
-
- .logo svg {
- height: 40px;
- width: auto;
- display: block;
- color: var(--theme-accent);
- }
-
- .logo .hover {
- opacity: 0;
- }
- .logo a {
- transition: transform 180ms ease-out;
- }
-
- .logo a:hover,
- .logo a:focus {
- outline: none;
- opacity: 1;
- transform: translateY(-2px);
- }
-
- .logo h1 {
- font: inherit;
- color: inherit;
- margin: 0;
- }
-
- .nav-wrapper {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 1em;
- width: 100%;
- max-width: 82em;
- padding: 0 1rem;
- }
- @media (min-width: 50em) {
- header {
- position: static;
- padding: 2rem 0rem 0 2rem;
- }
- .logo {
- width: auto;
- margin: 0;
- z-index: 0;
- }
- .menu-toggle {
- display: none;
- }
- .logo {
- width: auto;
- }
- }
-
- /** Style Algolia */
- :root {
- --docsearch-primary-color: var(--theme-accent);
- --docsearch-logo-color: var(--theme-text);
- }
-
- .search-item {
- display: none;
- position: relative;
- z-index: 10;
- flex-grow: 1;
- padding-right: 0.7rem;
- display: flex;
- max-width: 200px;
- }
- :global(.search-item > *) {
- flex-grow: 1;
- }
- @media (min-width: 50em) {
- .search-item {
- max-width: 400px;
- }
- }
-</style>
diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css
deleted file mode 100644
index 4c6cf6123..000000000
--- a/docs/src/components/Header/LanguageSelect.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.language-select {
- flex-grow: 1;
- width: 48px;
- box-sizing: border-box;
- margin: 0;
- padding: 0.33em 2rem;
- overflow: visible;
- font-weight: 500;
- font-size: 1rem;
- font-family: inherit;
- line-height: inherit;
- background-color: var(--theme-bg);
- border-color: var(--theme-text-lighter);
- color: var(--theme-text-light);
- border-style: solid;
- border-width: 1px;
- border-radius: 0.25rem;
- outline: 0;
- cursor: pointer;
- transition-timing-function: ease-out;
- transition-duration: 0.2s;
- transition-property: border-color, color;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
- background-position: 97%;
- background-repeat: no-repeat;
- background-size: 1.5em 1.5em;
- -webkit-font-smoothing: antialiased;
- -webkit-appearance: none;
-}
-.language-select-wrapper .language-select:hover,
-.language-select-wrapper .language-select:focus {
- color: var(--theme-text);
- border-color: var(--theme-text-light);
-}
-.language-select-wrapper {
- color: var(--theme-text-light);
- position: relative;
-}
-.language-select-wrapper > svg {
- position: absolute;
- top: 8px;
- left: 8px;
- pointer-events: none;
-}
-
-@media (min-width: 50em) {
- .language-select {
- width: 100%;
- }
-}
diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx
deleted file mode 100644
index 70fb405a4..000000000
--- a/docs/src/components/Header/LanguageSelect.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h } from 'preact';
-import './LanguageSelect.css';
-
-const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => {
- return (
- <div class="language-select-wrapper">
- <svg
- aria-hidden="true"
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 88.6 77.3"
- height="1.2em"
- width="1.2em"
- >
- <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>
- <select
- class="language-select"
- value={lang}
- aria-label="Select language"
- onChange={(e) => {
- const newLang = e.target.value;
- window.location.pathname = `/${newLang}/getting-started`;
- // TODO: Preserve the current page, if it exists:
- // const oldPathname = window.location.pathname;
- // const oldPathnameParts = oldPathname.split('/');
- // oldPathnameParts.shift();
- // if (/^[a-z]{2}$/.test(oldPathnameParts[0])) {
- // oldPathnameParts.shift();
- // }
- // if (newLang !== 'en') {
- // oldPathnameParts.unshift(newLang);
- // }
- // window.location.pathname = '/' + oldPathnameParts.join('/');
- }}
- >
- <option value="en">
- <span>English</span>
- </option>
- <option value="de">
- <span>Deutsch</span>
- </option>
- <option value="nl">
- <span>Nederlands</span>
- </option>
- <option value="pt-br">
- <span>Português do Brasil</span>
- </option>
- <option value="fi">
- <span>Suomi</span>
- </option>
- <option value="es">
- <span>Español</span>
- </option>
- <option value="zh-CN">
- <span>简体中文</span>
- </option>
- <option value="zh-TW">
- <span>正體中文</span>
- </option>
- <option value="bg">
- <span>Български</span>
- </option>
- <option value="fr">
- <span>Français</span>
- </option>
- <option value="bn">
- <span>বাংলা</span>
- </option>
- <option value="kr">
- <span>한국어</span>
- </option>
- <option value="ar">
- <span>العربية</span>
- </option>
- <option value="da">
- <span>Dansk</span>
- </option>
- <option value="ja">
- <span>日本語</span>
- </option>
- <option value="ru">
- <span>Русский</span>
- </option>
- <option value="it">
- <span>Italiano</span>
- </option>
- </select>
- </div>
- );
-};
-
-export default LanguageSelect;
diff --git a/docs/src/components/Header/Search.css b/docs/src/components/Header/Search.css
deleted file mode 100644
index 42da3832c..000000000
--- a/docs/src/components/Header/Search.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/** Style Algolia */
-:root {
- --docsearch-primary-color: var(--theme-accent);
- --docsearch-logo-color: var(--theme-text);
-}
-
-.DocSearch-Modal .DocSearch-Hit a {
- box-shadow: none;
- border: 1px solid var(--theme-accent);
-}
-
-/** Style Search Bar */
-.search-placeholder {
- flex-grow: 1;
- text-align: initial;
-}
-.search-input {
- flex-grow: 1;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- padding: 0.33em 0.5em;
- overflow: visible;
- font-weight: 500;
- font-size: 1rem;
- font-family: inherit;
- line-height: inherit;
- background-color: var(--theme-divider);
- border-color: var(--theme-divider);
- color: var(--theme-text-light);
- border-style: solid;
- border-width: 1px;
- border-radius: 0.25rem;
- outline: 0;
- cursor: pointer;
- transition-timing-function: ease-out;
- transition-duration: 0.2s;
- transition-property: border-color, color;
- -webkit-font-smoothing: antialiased;
-}
-.search-input:hover,
-.search-input:focus {
- color: var(--theme-text);
- border-color: var(--theme-text-light);
-}
-.search-input:hover::placeholder,
-.search-input:focus::placeholder {
- color: var(--theme-text-light);
-}
-.search-input::placeholder {
- color: var(--theme-text-light);
-}
-.search-hint {
- padding: 3px 5px;
- display: none;
- display: none;
- align-items: center;
- justify-content: center;
- letter-spacing: 0.125em;
- font-size: 13px;
- font-family: var(--font-mono);
- pointer-events: none;
- border-color: var(--theme-text-lighter);
- color: var(--theme-text-light);
- border-style: solid;
- border-width: 1px;
- border-radius: 0.25rem;
- line-height: 14px;
-}
-
-@media (min-width: 50em) {
- .search-hint {
- display: flex;
- }
-}
diff --git a/docs/src/components/Header/Search.tsx b/docs/src/components/Header/Search.tsx
deleted file mode 100644
index 8f2cfe649..000000000
--- a/docs/src/components/Header/Search.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/* jsxImportSource: react */
-import { useState, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import * as docsearch from '@docsearch/react';
-import '@docsearch/css/dist/style.css';
-import './Search.css';
-
-const { DocSearchModal, useDocSearchKeyboardEvents } =
- (docsearch as unknown as { default: typeof docsearch }).default || docsearch;
-
-export default function Search(props) {
- const [isOpen, setIsOpen] = useState(false);
- const searchButtonRef = useRef();
- const [initialQuery, setInitialQuery] = useState(null);
- const { lang = 'en' } = props;
-
- const onOpen = useCallback(() => {
- setIsOpen(true);
- }, [setIsOpen]);
-
- const onClose = useCallback(() => {
- setIsOpen(false);
- }, [setIsOpen]);
-
- const onInput = useCallback(
- (e) => {
- setIsOpen(true);
- setInitialQuery(e.key);
- },
- [setIsOpen, setInitialQuery]
- );
-
- useDocSearchKeyboardEvents({
- isOpen,
- onOpen,
- onClose,
- onInput,
- searchButtonRef,
- });
-
- return (
- <>
- <button
- type="button"
- ref={searchButtonRef}
- onClick={onOpen}
- className="search-input"
- >
- <svg width="24" height="24" fill="none">
- <path
- d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- </svg>
- <span className="search-placeholder">Search</span>
- <span className="search-hint">
- <span className="sr-only">Press </span>
- <kbd>/</kbd>
- <span className="sr-only"> to search</span>
- </span>
- </button>
- {isOpen &&
- createPortal(
- <DocSearchModal
- initialQuery={initialQuery}
- initialScrollY={window.scrollY}
- onClose={onClose}
- indexName="astro"
- apiKey="0f387260ad74f9cbf4353facd29c919c"
- // Set facetFilters once Astro docs have been indexed by language
- // searchParameters={{ facetFilters: [`lang:${lang}`] }}
- transformItems={(items) => {
- return items.map((item) => {
- // We transform the absolute URL into a relative URL to
- // work better on localhost, preview URLS.
- const a = document.createElement('a');
- a.href = item.url;
- const hash = a.hash === '#overview' ? '' : a.hash;
- return {
- ...item,
- url: `${a.pathname}${hash}`,
- };
- });
- }}
- />,
- document.body
- )}
- </>
- );
-}
diff --git a/docs/src/components/Header/SidebarToggle.tsx b/docs/src/components/Header/SidebarToggle.tsx
deleted file mode 100644
index 2be9dee9a..000000000
--- a/docs/src/components/Header/SidebarToggle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-
-const MenuToggle: FunctionalComponent = () => {
- const [sidebarShown, setSidebarShown] = useState(false);
-
- useEffect(() => {
- const body = document.getElementsByTagName('body')[0];
- if (sidebarShown) {
- body.classList.add('mobile-sidebar-toggle');
- } else {
- body.classList.remove('mobile-sidebar-toggle');
- }
- }, [sidebarShown]);
-
- return (
- <button
- type="button"
- aria-pressed={sidebarShown ? 'true' : 'false'}
- id="menu-toggle"
- onClick={() => setSidebarShown(!sidebarShown)}
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="1em"
- height="1em"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M4 6h16M4 12h16M4 18h16"
- />
- </svg>
- <span className="sr-only">Toggle sidebar</span>
- </button>
- );
-};
-
-export default MenuToggle;
diff --git a/docs/src/components/Header/SkipToContent.astro b/docs/src/components/Header/SkipToContent.astro
deleted file mode 100644
index 9e3844e6f..000000000
--- a/docs/src/components/Header/SkipToContent.astro
+++ /dev/null
@@ -1,22 +0,0 @@
-<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
-
-<style>
- .skiplink,
- .skiplink:focus,
- .skiplink:focus-visible {
- position: absolute;
- padding: 0.25em;
- font-size: larger;
- top: 0;
- left: 0;
- right: 0;
- z-index: 9;
- display: block;
- text-align: center;
- background-color: var(--theme-text-accent);
- color: var(--theme-bg);
- border-radius: 0.25em;
- outline: var(--theme-bg) solid 1px;
- outline-offset: 0;
- }
-</style>
diff --git a/docs/src/components/LeftSidebar/LeftSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro
deleted file mode 100644
index a37b04d53..000000000
--- a/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ /dev/null
@@ -1,186 +0,0 @@
----
-import { SIDEBAR } from '../../config.ts';
-import {
- getLanguageFromURL,
- removeLeadingSlash,
- removeTrailingSlash,
-} from '../../util.ts';
-const { currentPage } = Astro.props;
-
-// Get the slug w/o a leading or trailing slash
-const currentPageMatch = removeLeadingSlash(removeTrailingSlash(currentPage));
-const langCode = getLanguageFromURL(currentPage);
-// SIDEBAR is a flat array. Group it by sections to properly render.
-const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
- if (item.header) {
- col.push({ ...item, children: [] });
- } else {
- col[col.length - 1].children.push(item);
- }
- return col;
-}, []);
----
-
-<nav aria-labelledby="grid-left">
- <ul class="nav-groups">
- <li>
- <div class="nav-group">
- <h2 class="sponsors-title">Sponsored by</h2>
- <div class="sponsors">
- <a href="https://www.netlify.com/" aria-label="Go to Netlify website">
- <svg
- class="sponsor-logo__netlify"
- viewBox="0 0 147 40"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- ><radialGradient
- id="netlify-gradient"
- cx="-779.0521"
- cy="1839.7205"
- gradientTransform="matrix(0 38.301 44.1228 0 -81154.2578 29839.2441)"
- gradientUnits="userSpaceOnUse"
- r="1.0011"
- ><stop offset="0" stop-color="#20c6b7"></stop><stop
- offset="1"
- stop-color="#4d9abf"></stop></radialGradient
- ><path
- clip-rule="evenodd"
- d="m53.37 12.98.12 2.2c1.4-1.7 3.24-2.55 5.53-2.55 3.95 0 5.96 2.27 6.03 6.8v12.57h-4.26v-12.32c0-1.21-.26-2.1-.78-2.68s-1.37-.87-2.55-.87c-1.72 0-3 .78-3.84 2.34v13.53h-4.26v-19.02zm24.38 19.37c-2.7 0-4.89-.85-6.57-2.56-1.68-1.7-2.52-3.98-2.52-6.81v-.53c0-1.9.36-3.59 1.1-5.09.73-1.49 1.76-2.66 3.08-3.49s2.79-1.25 4.42-1.25c2.58 0 4.58.83 5.99 2.48s2.11 3.99 2.11 7.01v1.72h-12.4c.13 1.57.65 2.81 1.57 3.73s2.07 1.37 3.46 1.37c1.95 0 3.54-.79 4.77-2.37l2.3 2.2c-.76 1.14-1.77 2.02-3.04 2.65s-2.69.94-4.27.94zm-.51-16.29c-1.17 0-2.11.41-2.83 1.23s-1.18 1.96-1.38 3.43h8.12v-.32c-.09-1.43-.47-2.51-1.14-3.24-.67-.74-1.59-1.1-2.77-1.1zm16.76-7.7v4.62h3.35v3.16h-3.35v10.62c0 .73.14 1.25.43 1.57s.8.48 1.54.48c.5 0 1-.06 1.49-.18v3.31c-.97.27-1.9.4-2.81.4-3.27 0-4.91-1.81-4.91-5.43v-10.77h-3.12v-3.16h3.12v-4.63zm11.14 23.64h-4.26v-27h4.26zm9.17 0h-4.26v-19.02h4.26zm-4.52-23.96c0-.65.21-1.2.62-1.63.42-.43 1.01-.65 1.78-.65s1.37.22 1.79.65.63.98.63 1.64c0 .64-.21 1.18-.63 1.61s-1.02.64-1.79.64-1.36-.21-1.78-.64c-.41-.44-.62-.98-.62-1.62zm10.66 23.96v-15.86h-2.89v-3.16h2.89v-1.74c0-2.11.58-3.74 1.75-4.89s2.81-1.72 4.91-1.72c.75 0 1.54.11 2.39.32l-.1 3.34c-.54-.1-1.08-.15-1.63-.14-2.04 0-3.05 1.05-3.05 3.15v1.69h3.86v3.16h-3.86v15.85zm17.87-6.12 3.86-12.9h4.54l-7.54 21.9c-1.16 3.2-3.12 4.8-5.89 4.8-.62 0-1.3-.11-2.05-.32v-3.31l.81.05c1.07 0 1.88-.2 2.43-.59.54-.39.97-1.05 1.29-1.98l.61-1.64-6.66-18.93h4.6z"
- fill-rule="evenodd"></path><path
- d="m27.89 14.14-.01-.01c-.01 0-.02-.01-.02-.01-.02-.02-.03-.06-.03-.09l.77-4.73 3.62 3.63-3.77 1.6c-.01 0-.02.01-.03.01h-.02s-.01-.01-.02-.02c-.14-.16-.31-.29-.49-.38zm5.26-.29 3.88 3.88c.81.81 1.21 1.21 1.35 1.67.02.07.04.14.05.21l-9.26-3.92s-.01 0-.01-.01c-.04-.02-.08-.03-.08-.07s.04-.06.08-.07l.01-.01zm5.12 7c-.2.38-.59.77-1.25 1.43l-4.37 4.37-5.65-1.18-.03-.01c-.05-.01-.1-.02-.1-.06-.04-.47-.28-.9-.66-1.19-.02-.02-.02-.06-.01-.09v-.01l1.06-6.53v-.02c.01-.05.01-.11.06-.11.46-.06.88-.3 1.16-.67.01-.01.01-.02.03-.03.03-.01.07 0 .1.01zm-6.62 6.8-7.19 7.19 1.23-7.56v-.01c0-.01 0-.02.01-.03.01-.02.04-.03.06-.04h.01c.27-.11.51-.29.69-.52.02-.03.05-.06.09-.06h.03zm-8.71 8.71-.81.81-8.95-12.94s-.01-.01-.01-.01c-.01-.02-.03-.04-.03-.06s.01-.03.02-.04l.01-.01c.03-.04.05-.08.07-.12l.02-.03c.01-.02.03-.05.05-.06s.05-.01.07 0l9.92 2.05c.03 0 .05.02.08.03.01.01.02.03.02.04.14.53.52.97 1.03 1.17.03.01.02.05 0 .08-.01.01-.01.03-.01.05-.12.74-1.19 7.27-1.48 9.04zm-1.69 1.69c-.6.59-.95.9-1.35 1.03-.39.12-.81.12-1.21 0-.47-.15-.87-.55-1.67-1.36l-8.99-8.99 2.35-3.64c.01-.02.02-.03.04-.05s.06-.01.09 0c.54.16 1.12.13 1.64-.08.03-.01.05-.02.07 0l.03.03zm-14.09-10.19-2.06-2.06 4.07-1.74c.01 0 .02-.01.03-.01.03 0 .05.03.07.07.04.06.08.12.13.18l.01.02c.01.02 0 .03-.01.05zm-2.98-2.97-2.61-2.61c-.44-.44-.77-.77-.99-1.04l7.94 1.65h.03c.05.01.1.02.1.06 0 .05-.06.07-.11.09l-.02.01zm-4.05-5c.01-.17.04-.33.09-.5.15-.47.55-.87 1.36-1.67l3.34-3.34c1.54 2.23 3.08 4.46 4.63 6.69.03.04.06.08.03.11-.15.16-.29.34-.4.53-.01.02-.03.05-.05.06-.01.01-.03 0-.04 0zm5.68-6.4 4.49-4.49c.42.19 1.96.83 3.33 1.41 1.04.44 1.99.84 2.29.97.03.01.06.02.07.05.01.02 0 .04 0 .06-.14.66.05 1.35.52 1.83.03.03 0 .07-.03.11l-.01.02-4.56 7.06c-.01.02-.02.04-.04.05s-.06.01-.09 0c-.18-.05-.36-.07-.54-.07-.16 0-.34.03-.52.06-.02 0-.04.01-.05 0-.02-.01-.03-.03-.05-.05zm5.4-5.4 5.81-5.81c.81-.81 1.21-1.21 1.67-1.36.39-.12.81-.12 1.21 0 .47.15.87.55 1.67 1.36l1.26 1.26-4.14 6.4c-.01.02-.02.03-.04.05s-.06.01-.09 0c-.66-.2-1.38-.06-1.92.37-.03.03-.07.01-.1 0-.53-.24-4.73-2.01-5.33-2.27zm12.5-3.67 3.82 3.82-.92 5.7v.02c0 .01 0 .03-.01.04-.01.02-.03.02-.05.03-.2.06-.38.15-.55.27-.01.01-.01.01-.02.02s-.02.02-.04.02c-.01 0-.03 0-.04-.01l-5.82-2.47-.01-.01c-.04-.02-.08-.03-.08-.07-.03-.32-.14-.64-.31-.91-.03-.05-.06-.09-.03-.14zm-3.93 8.6 5.45 2.31c.03.01.06.03.08.06.01.02.01.04 0 .06-.02.08-.03.17-.03.26v.15c0 .04-.04.05-.08.07h-.01c-.86.37-12.13 5.17-12.15 5.17s-.03 0-.05-.02c-.03-.03 0-.07.03-.11 0-.01.01-.01.01-.02l4.48-6.94.01-.01c.03-.04.06-.09.1-.09l.05.01c.1.01.19.03.28.03.68 0 1.31-.33 1.69-.9.01-.02.02-.03.03-.04.04-.01.08 0 .11.01zm-6.25 9.19 12.28-5.24s.02 0 .03.02c.07.07.12.11.18.15l.03.02c.02.01.05.03.05.06v.02l-1.05 6.46v.03c-.01.05-.01.11-.06.11-.57.04-1.08.36-1.37.85v.01c-.01.02-.03.05-.05.06s-.05.01-.07 0l-9.79-2.02c-.02-.02-.16-.53-.18-.53z"
- fill="url(#netlify-gradient)"></path></svg
- >
- </a>
- </div>
- </div>
- </li>
- {sidebarSections.map((section) => (
- <li>
- <div class="nav-group">
- <h2 class="nav-group-title">{section.text}</h2>
- <ul>
- {section.children.map((child) => (
- <li class="nav-link">
- <a
- href={`${Astro.site.pathname}${child.link}`}
- aria-current={`${
- currentPageMatch === child.link ? 'page' : 'false'
- }`}
- >
- {child.text}
- </a>
- </li>
- ))}
- </ul>
- </div>
- </li>
- ))}
- </ul>
-</nav>
-
-<script>
- window.addEventListener('DOMContentLoaded', (event) => {
- var target = document.querySelector('[aria-current="page"]');
- if (target && target.offsetTop > window.innerHeight - 100) {
- document.querySelector('.nav-groups').scrollTop = target.offsetTop;
- }
- });
-</script>
-
-<style lang="scss">
- nav {
- width: 100%;
- margin-right: 1rem;
- }
- .nav-groups {
- height: 100%;
- padding: 2rem 0;
- overflow-x: visible;
- overflow-y: auto;
- max-height: 100vh;
-
- > li + li {
- margin-top: 1.75rem;
- }
-
- > :first-child {
- padding-top: var(--doc-padding);
- }
-
- > :last-child {
- padding-bottom: 2rem;
- margin-bottom: var(--theme-navbar-height);
- }
-
- @media (min-width: 50em) {
- padding: 0;
- }
- }
-
- .nav-group-title {
- font-size: 1rem;
- font-weight: 700;
- padding: 0.1rem 1rem;
- text-transform: uppercase;
- margin-bottom: 0.5rem;
- }
-
- .nav-link a {
- font-size: 1rem;
- margin: 1px;
- padding: 0.3rem 1rem;
- font: inherit;
- color: inherit;
- text-decoration: none;
- display: block;
-
- &:hover,
- &:focus {
- background-color: var(--theme-bg-hover);
- }
-
- &[aria-current='page'] {
- color: var(--theme-text-accent);
- background-color: var(--theme-bg-accent);
- font-weight: 600;
- }
- }
-
- :global(:root.theme-dark) .nav-link a[aria-current='page'] {
- color: hsla(var(--color-base-white), 100%, 1);
- }
-
- .sponsors {
- display: grid;
- padding-left: 1rem;
- padding-top: 0.25rem;
- margin-bottom: -0.375rem; // logo overshoot creates extra perceived space
- grid-gap: 0.5rem;
- grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-
- svg {
- color: var(--theme-text);
- fill: currentColor;
- }
- }
-
- .sponsor-logo__netlify {
- width: 90px;
- }
-
- .sponsor-logo__vercel {
- width: 90px;
- }
- :global(:root.theme-dark .sponsors-title) {
- color: hsl(var(--color-base-gray), 75%);
- }
- .sponsors-title {
- color: hsl(var(--color-base-gray), 25%);
- font-size: 0.8em;
- font-weight: 300;
- letter-spacing: 0.0625em;
- margin: 0 0 0.5rem;
- padding-left: 1rem;
- text-transform: uppercase;
- }
-</style>
diff --git a/docs/src/components/PageContent/PageContent.astro b/docs/src/components/PageContent/PageContent.astro
deleted file mode 100644
index da9939e50..000000000
--- a/docs/src/components/PageContent/PageContent.astro
+++ /dev/null
@@ -1,78 +0,0 @@
----
-import MoreMenu from '../RightSidebar/MoreMenu.astro';
-import TableOfContents from '../RightSidebar/TableOfContents.tsx';
-import { getLanguageFromURL } from '../../util.ts';
-import { SIDEBAR } from '../../config.ts';
-const { content, githubEditUrl, currentPage } = Astro.props;
-const title = content.title;
-const headers = content.astro?.headers;
-const langCode = getLanguageFromURL(currentPage);
-const links = SIDEBAR[langCode].filter(
- (x) => x.link && typeof x.header === 'undefined'
-);
-// handle cases with a trailing slash or not
-const index = links.findIndex(
- (x) => `/${x.link}/` === currentPage || `/${x.link}` === currentPage
-);
-const next =
- index !== -1 ? (index === links.length - 1 ? null : links[index + 1]) : null;
-const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null;
----
-
-<article id="article" class="content">
- <section class="main-section">
- <h1 class="content-title" id="overview">{title}</h1>
- {headers && (
- <nav class="block sm:hidden">
- <TableOfContents client:media="(max-width: 50em)" headers={headers} />
- </nav>
- )}
- <slot />
- </section>
- <nav class="block sm:hidden">
- <MoreMenu editHref={githubEditUrl} />
- </nav>
- {(previous || next) && (
- <aside>
- {previous && (
- <div>
- Previous Article:{' '}
- <a rel="prev" href={new URL(previous.link, Astro.site).pathname}>
- {previous.text}
- </a>
- </div>
- )}
- {next && (
- <div>
- Next Article:{' '}
- <a rel="next" href={new URL(next.link, Astro.site).pathname}>
- {next.text}
- </a>
- </div>
- )}
- </aside>
- )}
-</article>
-
-<style>
- .content {
- padding: 0;
- max-width: 75ch;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- }
- .content > section {
- margin-bottom: 4rem;
- }
- .block {
- display: block;
- }
-
- @media (min-width: 50em) {
- .sm\:hidden {
- display: none;
- }
- }
-</style>
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;
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-11 16:05:23 +0000