Use accessible indentation (#2253)

20 files changed, 1246 insertions, 1082 deletions

diff --git a/docs/src/components/Card.astro b/docs/src/components/Card.astro
index c024981ff..21b5deb68 100644
--- a/docs/src/components/Card.astro
+++ b/docs/src/components/Card.astro
@@ -1,52 +1,62 @@
 ---
-const {data, index} = Astro.props;
+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))`
+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;
-    }
+	.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>
-<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>
\ No newline at end of file
diff --git a/docs/src/components/Footer/AvatarList.astro b/docs/src/components/Footer/AvatarList.astro
index 06ac2cd0b..5eb0c3692 100644
--- a/docs/src/components/Footer/AvatarList.astro
+++ b/docs/src/components/Footer/AvatarList.astro
@@ -2,7 +2,7 @@
 // fetch all commits for just this page's path
 
 export interface Props {
-  path: string;
+	path: string;
 }
 
 const { path } = Astro.props as Props;
@@ -11,147 +11,166 @@ const url = `https://api.github.com/repos/withastro/astro/commits?path=${commitP
 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}
+	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 
+		return data;
+	} catch (e) {
+		console.warn(`[error]  /src/components/AvatarList.astro 
     ${e?.message ?? e}`);
-    return new Array();
-  }
+		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());
+	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>}
+	<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;
+	.avatar-list {
+		--avatar-size: 2.5rem;
+		--avatar-count: 3;
 
-  display: grid;
-  list-style: none;
-  /* Default to displaying most of the avatar to
+		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
+		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);
-}
+		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 
+	@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: .75rem;
-}
+			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
index 48de51054..d13f832e5 100644
--- a/docs/src/components/Footer/Footer.astro
+++ b/docs/src/components/Footer/Footer.astro
@@ -4,13 +4,13 @@ const { path } = Astro.props;
 ---
 
 <footer>
-  <AvatarList path={path} />
+	<AvatarList {path} />
 </footer>
 
 <style>
-footer {
-  margin-top: auto;
-  padding: 2rem 0;
-  border-top: 3px solid var(--theme-divider);
-}
+	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
index 222c17ac2..ca0782b60 100644
--- a/docs/src/components/HeadCommon.astro
+++ b/docs/src/components/HeadCommon.astro
@@ -1,10 +1,10 @@
 <!-- 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"/>
+<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"/>
+<link rel="sitemap" href="/sitemap.xml" />
 
 <!-- Global CSS -->
 <link rel="stylesheet" href="/theme.css" />
@@ -12,29 +12,38 @@
 <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">
+<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 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');
-  }
+	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 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');
+	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
index d3cd80901..6b62c9d1f 100644
--- a/docs/src/components/HeadSEO.astro
+++ b/docs/src/components/HeadSEO.astro
@@ -1,43 +1,48 @@
 ---
-import {SITE, OPEN_GRAPH} from '../config.ts';
+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;
+	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}/>
+<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}/>
+<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}/>
+<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?
diff --git a/docs/src/components/Header/AstroLogo.astro b/docs/src/components/Header/AstroLogo.astro
index ff1939ad9..860b2d2b1 100644
--- a/docs/src/components/Header/AstroLogo.astro
+++ b/docs/src/components/Header/AstroLogo.astro
@@ -1,20 +1,36 @@
 ---
-const {size} = Astro.props;
+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 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" />
-</svg>
\ No newline at end of file
+
+<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
index 06954bd7f..2196670c8 100644
--- a/docs/src/components/Header/Header.astro
+++ b/docs/src/components/Header/Header.astro
@@ -2,158 +2,183 @@
 import SkipToContent from './SkipToContent.astro';
 import SidebarToggle from './SidebarToggle.tsx';
 import LanguageSelect from './LanguageSelect.tsx';
-import Search from "./Search.tsx";
+import Search from './Search.tsx';
 import { getLanguageFromURL } from '../../util.ts';
-const {currentPage} = Astro.props;
+const { currentPage } = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);
 ---
-<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;
-    }
+<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>
 
-    .logo a {
-    padding: 0.5em 0.25em;
-    margin: -0.5em -0.25em;
-    }
+<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 svg {
-    height: 40px;
-    width: auto;
-    display: block;
-    color: var(--theme-accent);
-    }
+	.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 .hover {
-    opacity: 0.0;
-    }
-    .logo a {
-      transition: transform 180ms ease-out;
-    }
+	.logo a {
+		padding: 0.5em 0.25em;
+		margin: -0.5em -0.25em;
+	}
 
-    .logo a:hover,
-    .logo a:focus {
-    outline: none;
-    opacity: 1.0;
-    transform: translateY(-2px);
-    }
+	.logo svg {
+		height: 40px;
+		width: auto;
+		display: block;
+		color: var(--theme-accent);
+	}
 
-    .logo h1 {
-    font: inherit;
-    color: inherit;
-    margin: 0;
-    }
+	.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;
-        }
-    }
+	.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);
-}
+	/** 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;
-  }
-}
+	.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>
-<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 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 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"/>
-        </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"/>
-        </svg>
-        </a>
-    </div>
-    <div style="flex-grow: 1;"></div>
-    {lang && <LanguageSelect lang={lang} client:idle />}
-    <div class="search-item"><Search lang={lang} client:idle /></div>
-    </nav>
-</header>
diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css
index f7b42c1e7..4c6cf6123 100644
--- a/docs/src/components/Header/LanguageSelect.css
+++ b/docs/src/components/Header/LanguageSelect.css
@@ -1,50 +1,50 @@
 .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;
+	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);
+	color: var(--theme-text);
+	border-color: var(--theme-text-light);
 }
 .language-select-wrapper {
-  color: var(--theme-text-light);
-  position: relative;
+	color: var(--theme-text-light);
+	position: relative;
 }
 .language-select-wrapper > svg {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  pointer-events: none;
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	pointer-events: none;
 }
 
 @media (min-width: 50em) {
-  .language-select {
-    width: 100%;
-  }
+	.language-select {
+		width: 100%;
+	}
 }
diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx
index f88c559f2..37fef6d08 100644
--- a/docs/src/components/Header/LanguageSelect.tsx
+++ b/docs/src/components/Header/LanguageSelect.tsx
@@ -3,104 +3,104 @@ 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;
-          if (newLang === 'en') {
-            window.location.pathname = `/getting-started`;
-          } else {
-            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>
-  );
+	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;
+					if (newLang === 'en') {
+						window.location.pathname = `/getting-started`;
+					} else {
+						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
index 563f67bc5..42da3832c 100644
--- a/docs/src/components/Header/Search.css
+++ b/docs/src/components/Header/Search.css
@@ -1,75 +1,75 @@
 /** Style Algolia */
 :root {
-  --docsearch-primary-color: var(--theme-accent);
-  --docsearch-logo-color: var(--theme-text);
+	--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);
+	box-shadow: none;
+	border: 1px solid var(--theme-accent);
 }
 
 /** Style Search Bar */
 .search-placeholder {
-  flex-grow: 1;
-  text-align: initial;
+	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;
+	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);
+	color: var(--theme-text);
+	border-color: var(--theme-text-light);
 }
 .search-input:hover::placeholder,
 .search-input:focus::placeholder {
-  color: var(--theme-text-light);
+	color: var(--theme-text-light);
 }
 .search-input::placeholder {
-  color: var(--theme-text-light);
+	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;
+	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;
-  }
+	.search-hint {
+		display: flex;
+	}
 }
diff --git a/docs/src/components/Header/Search.tsx b/docs/src/components/Header/Search.tsx
index 6236b5806..8f2cfe649 100644
--- a/docs/src/components/Header/Search.tsx
+++ b/docs/src/components/Header/Search.tsx
@@ -6,88 +6,88 @@ import '@docsearch/css/dist/style.css';
 import './Search.css';
 
 const { DocSearchModal, useDocSearchKeyboardEvents } =
-  (docsearch as unknown as { default: typeof docsearch }).default || docsearch;
+	(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 [isOpen, setIsOpen] = useState(false);
+	const searchButtonRef = useRef();
+	const [initialQuery, setInitialQuery] = useState(null);
+	const { lang = 'en' } = props;
 
-  const onOpen = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
+	const onOpen = useCallback(() => {
+		setIsOpen(true);
+	}, [setIsOpen]);
 
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
+	const onClose = useCallback(() => {
+		setIsOpen(false);
+	}, [setIsOpen]);
 
-  const onInput = useCallback(
-    (e) => {
-      setIsOpen(true);
-      setInitialQuery(e.key);
-    },
-    [setIsOpen, setInitialQuery]
-  );
+	const onInput = useCallback(
+		(e) => {
+			setIsOpen(true);
+			setInitialQuery(e.key);
+		},
+		[setIsOpen, setInitialQuery]
+	);
 
-  useDocSearchKeyboardEvents({
-    isOpen,
-    onOpen,
-    onClose,
-    onInput,
-    searchButtonRef,
-  });
+	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
-        )}
-    </>
-  );
+	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
index 605581077..2be9dee9a 100644
--- a/docs/src/components/Header/SidebarToggle.tsx
+++ b/docs/src/components/Header/SidebarToggle.tsx
@@ -3,42 +3,42 @@ import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 const MenuToggle: FunctionalComponent = () => {
-  const [sidebarShown, setSidebarShown] = useState(false);
+	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]);
+	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>
-  );
+	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
index 6df3a72ed..91df15b93 100644
--- a/docs/src/components/Header/SkipToContent.astro
+++ b/docs/src/components/Header/SkipToContent.astro
@@ -1,21 +1,22 @@
+<a href="#article" class="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;
-}
+	.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>
-<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a>
diff --git a/docs/src/components/LeftSidebar/LeftSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro
index b4c2d1ed5..a37b04d53 100644
--- a/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -1,153 +1,186 @@
 ---
 import { SIDEBAR } from '../../config.ts';
-import { getLanguageFromURL, removeLeadingSlash, removeTrailingSlash } from '../../util.ts';
-const {currentPage} = Astro.props;
+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;
+	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 offset="1" stop-color="#4d9abf"/></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 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)"/></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>
+	<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;
-    }
-  });
+	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: 1.0rem;
-    font-weight: 700;
-    padding: 0.1rem 1rem;
-    text-transform: uppercase;
-    margin-bottom: 0.5rem;
-  }
-
-  .nav-link a {
-    font-size: 1.0rem;
-    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;
-  }
+	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
index 91ea90d62..da9939e50 100644
--- a/docs/src/components/PageContent/PageContent.astro
+++ b/docs/src/components/PageContent/PageContent.astro
@@ -1,59 +1,78 @@
 ---
 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;
+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');
+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 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;
-      }
+	.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;
-        }
-      }
+	@media (min-width: 50em) {
+		.sm\:hidden {
+			display: none;
+		}
+	}
 </style>
-<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>
\ No newline at end of file
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;