Use accessible indentation (#2253)

36 files changed, 1824 insertions, 1637 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;
diff --git a/docs/src/config.ts b/docs/src/config.ts
index 57cfada7d..88e41aad4 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -1,204 +1,204 @@
 export const SIDEBAR = {
-  en: [
-    { text: 'Setup', header: true },
-    { text: 'Getting Started', link: 'getting-started' },
-    { text: 'Quickstart', link: 'quick-start' },
-    { text: 'Installation', link: 'installation' },
-    { text: 'Themes', link: 'themes' },
-    { text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
-    { text: 'Migrate to v0.21', link: 'migration/0.21.0' },
+	en: [
+		{ text: 'Setup', header: true },
+		{ text: 'Getting Started', link: 'getting-started' },
+		{ text: 'Quickstart', link: 'quick-start' },
+		{ text: 'Installation', link: 'installation' },
+		{ text: 'Themes', link: 'themes' },
+		{ text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
+		{ text: 'Migrate to v0.21', link: 'migration/0.21.0' },
 
-    { text: 'Basics', header: true },
-    { text: 'Project Structure', link: 'core-concepts/project-structure' },
-    { text: 'Component Syntax', link: 'core-concepts/astro-components' },
-    { text: 'Pages', link: 'core-concepts/astro-pages' },
-    { text: 'Layouts', link: 'core-concepts/layouts' },
-    { text: 'Routing', link: 'core-concepts/routing' },
-    { text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
+		{ text: 'Basics', header: true },
+		{ text: 'Project Structure', link: 'core-concepts/project-structure' },
+		{ text: 'Component Syntax', link: 'core-concepts/astro-components' },
+		{ text: 'Pages', link: 'core-concepts/astro-pages' },
+		{ text: 'Layouts', link: 'core-concepts/layouts' },
+		{ text: 'Routing', link: 'core-concepts/routing' },
+		{ text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
 
-    { text: 'Guides', header: true },
-    { text: 'Styling & CSS', link: 'guides/styling' },
-    { text: 'Markdown', link: 'guides/markdown-content' },
-    { text: 'Debugging', link: 'guides/debugging' },
-    { text: 'Data Fetching', link: 'guides/data-fetching' },
-    { text: 'Pagination', link: 'guides/pagination' },
-    { text: 'RSS', link: 'guides/rss' },
-    { text: 'Supported Imports', link: 'guides/imports' },
-    { text: 'Aliases', link: 'guides/aliases' },
-    { text: 'Environment Variables', link: 'guides/environment-variables' },
-    { text: 'Deploy to the web', link: 'guides/deploy' },
-    { text: 'Publish to npm', link: 'guides/publish-to-npm' },
+		{ text: 'Guides', header: true },
+		{ text: 'Styling & CSS', link: 'guides/styling' },
+		{ text: 'Markdown', link: 'guides/markdown-content' },
+		{ text: 'Debugging', link: 'guides/debugging' },
+		{ text: 'Data Fetching', link: 'guides/data-fetching' },
+		{ text: 'Pagination', link: 'guides/pagination' },
+		{ text: 'RSS', link: 'guides/rss' },
+		{ text: 'Supported Imports', link: 'guides/imports' },
+		{ text: 'Aliases', link: 'guides/aliases' },
+		{ text: 'Environment Variables', link: 'guides/environment-variables' },
+		{ text: 'Deploy to the web', link: 'guides/deploy' },
+		{ text: 'Publish to npm', link: 'guides/publish-to-npm' },
 
-    { text: 'Reference', header: true },
-    { text: 'Built-In Components', link: 'reference/builtin-components' },
-    { text: 'API Reference', link: 'reference/api-reference' },
-    { text: 'CLI Reference', link: 'reference/cli-reference' },
-    {
-      text: 'Configuration Reference',
-      link: 'reference/configuration-reference',
-    },
-    { text: 'Renderer Reference', link: 'reference/renderer-reference' },
-  ],
-  de: [
-    { text: 'Einrichtung', header: true },
-    { text: 'Erste Schritte', link: 'de/getting-started' },
-    { text: 'Schnellstart', link: 'de/quick-start' },
-    { text: 'Installation', link: 'de/installation' },
-    { text: 'Vorlagen', link: 'de/themes' },
-    { text: 'Astro vs. X', link: 'de/comparing-astro-vs-other-tools' },
-    { text: 'Umstellung auf v0.21', link: 'de/migration/0.21.0' },
+		{ text: 'Reference', header: true },
+		{ text: 'Built-In Components', link: 'reference/builtin-components' },
+		{ text: 'API Reference', link: 'reference/api-reference' },
+		{ text: 'CLI Reference', link: 'reference/cli-reference' },
+		{
+			text: 'Configuration Reference',
+			link: 'reference/configuration-reference',
+		},
+		{ text: 'Renderer Reference', link: 'reference/renderer-reference' },
+	],
+	de: [
+		{ text: 'Einrichtung', header: true },
+		{ text: 'Erste Schritte', link: 'de/getting-started' },
+		{ text: 'Schnellstart', link: 'de/quick-start' },
+		{ text: 'Installation', link: 'de/installation' },
+		{ text: 'Vorlagen', link: 'de/themes' },
+		{ text: 'Astro vs. X', link: 'de/comparing-astro-vs-other-tools' },
+		{ text: 'Umstellung auf v0.21', link: 'de/migration/0.21.0' },
 
-    { text: 'Grundlagen', header: true },
-    { text: 'Projektstruktur', link: 'de/core-concepts/project-structure' },
-    { text: 'Astro-Komponenten', link: 'de/core-concepts/astro-components' },
-    { text: 'Astro-Seiten', link: 'de/core-concepts/astro-pages' },
-    { text: 'Layouts', link: 'de/core-concepts/layouts' },
-    { text: 'Routing', link: 'de/core-concepts/routing' },
-    { text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' },
+		{ text: 'Grundlagen', header: true },
+		{ text: 'Projektstruktur', link: 'de/core-concepts/project-structure' },
+		{ text: 'Astro-Komponenten', link: 'de/core-concepts/astro-components' },
+		{ text: 'Astro-Seiten', link: 'de/core-concepts/astro-pages' },
+		{ text: 'Layouts', link: 'de/core-concepts/layouts' },
+		{ text: 'Routing', link: 'de/core-concepts/routing' },
+		{ text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' },
 
-    { text: 'Anleitungen', header: true },
-    { text: 'Styling & CSS', link: 'de/guides/styling' },
+		{ text: 'Anleitungen', header: true },
+		{ text: 'Styling & CSS', link: 'de/guides/styling' },
 
-    { text: 'Referenz', header: true },
-  ],
-  nl: [
-    { text: 'Welkom', header: true },
-    { text: 'Beginnen', link: 'nl/getting-started' },
-    { text: 'Snel start', link: 'nl/quick-start' },
-  ],
-  fi: [
-    { text: 'Tervetuloa', header: true },
-    { text: 'Aloittaminen', link: 'fi/getting-started' },
-    { text: 'Pika-aloitus', link: 'fi/quick-start' },
-    { text: 'Asennus', link: 'fi/installation' },
-  ],
-  es: [
-    { text: 'Configuración', header: true },
-    { text: 'Empezando', link: 'es/getting-started' },
-    { text: 'Comienzo rápido', link: 'es/quick-start' },
-    { text: 'Instalación', link: 'es/installation' },
-    { text: 'Astro vs. X', link: 'es/comparing-astro-vs-other-tools' },
+		{ text: 'Referenz', header: true },
+	],
+	nl: [
+		{ text: 'Welkom', header: true },
+		{ text: 'Beginnen', link: 'nl/getting-started' },
+		{ text: 'Snel start', link: 'nl/quick-start' },
+	],
+	fi: [
+		{ text: 'Tervetuloa', header: true },
+		{ text: 'Aloittaminen', link: 'fi/getting-started' },
+		{ text: 'Pika-aloitus', link: 'fi/quick-start' },
+		{ text: 'Asennus', link: 'fi/installation' },
+	],
+	es: [
+		{ text: 'Configuración', header: true },
+		{ text: 'Empezando', link: 'es/getting-started' },
+		{ text: 'Comienzo rápido', link: 'es/quick-start' },
+		{ text: 'Instalación', link: 'es/installation' },
+		{ text: 'Astro vs. X', link: 'es/comparing-astro-vs-other-tools' },
 
-    { text: 'Fundamentos', header: true },
-    {
-      text: 'Estructura del Proyecto',
-      link: 'es/core-concepts/project-structure',
-    },
-    {
-      text: 'Sintaxis del Componente',
-      link: 'es/core-concepts/astro-components',
-    },
-    { text: 'Páginas', link: 'es/core-concepts/astro-pages' },
-    { text: 'Maquetas', link: 'es/core-concepts/layouts' },
-    { text: 'Enrutamiento', link: 'es/core-concepts/routing' },
-    {
-      text: 'Hidratación parcial',
-      link: 'es/core-concepts/component-hydration',
-    },
+		{ text: 'Fundamentos', header: true },
+		{
+			text: 'Estructura del Proyecto',
+			link: 'es/core-concepts/project-structure',
+		},
+		{
+			text: 'Sintaxis del Componente',
+			link: 'es/core-concepts/astro-components',
+		},
+		{ text: 'Páginas', link: 'es/core-concepts/astro-pages' },
+		{ text: 'Maquetas', link: 'es/core-concepts/layouts' },
+		{ text: 'Enrutamiento', link: 'es/core-concepts/routing' },
+		{
+			text: 'Hidratación parcial',
+			link: 'es/core-concepts/component-hydration',
+		},
 
-    { text: 'Guías', header: true },
-    { text: 'Estilo y CSS', link: 'es/guides/styling' },
-    { text: 'Markdown', link: 'es/guides/markdown-content' },
-    { text: 'Depuración', link: 'es/guides/debugging' },
-    { text: 'Obtención de datos', link: 'es/guides/data-fetching' },
-    { text: 'Paginación', link: 'es/guides/pagination' },
-    { text: 'RSS', link: 'es/guides/rss' },
-    { text: 'Importaciones admitidas', link: 'es/guides/imports' },
-    { text: 'Alias', link: 'es/guides/aliases' },
-    { text: 'Desplegar en la web', link: 'es/guides/deploy' },
-    { text: 'Publicar en npm', link: 'es/guides/publish-to-npm' },
+		{ text: 'Guías', header: true },
+		{ text: 'Estilo y CSS', link: 'es/guides/styling' },
+		{ text: 'Markdown', link: 'es/guides/markdown-content' },
+		{ text: 'Depuración', link: 'es/guides/debugging' },
+		{ text: 'Obtención de datos', link: 'es/guides/data-fetching' },
+		{ text: 'Paginación', link: 'es/guides/pagination' },
+		{ text: 'RSS', link: 'es/guides/rss' },
+		{ text: 'Importaciones admitidas', link: 'es/guides/imports' },
+		{ text: 'Alias', link: 'es/guides/aliases' },
+		{ text: 'Desplegar en la web', link: 'es/guides/deploy' },
+		{ text: 'Publicar en npm', link: 'es/guides/publish-to-npm' },
 
-    { text: 'Referencia', header: true },
-    {
-      text: 'Componentes incorporados',
-      link: 'es/reference/builtin-components',
-    },
-    { text: 'Referencia de API', link: 'es/reference/api-reference' },
-    { text: 'Referencia de CLI', link: 'es/reference/cli-reference' },
-    {
-      text: 'Referencia de configuración',
-      link: 'es/reference/configuration-reference',
-    },
-    {
-      text: 'Referencia de renderizador',
-      link: 'es/reference/renderer-reference',
-    },
-  ],
-  'zh-CN': [
-    { text: '起步', header: true },
-    { text: '入门指南', link: 'zh-CN/getting-started' },
-    { text: '快速入门', link: 'zh-CN/quick-start' },
-    { text: '安装指南', link: 'zh-CN/installation' },
-    { text: '模板样例', link: 'zh-CN/examples' },
-    {
-      text: 'Astro 对比其他框架',
-      link: 'zh-CN/comparing-astro-vs-other-tools',
-    },
-  ],
-  'zh-TW': [
-    { text: '設定', header: true },
-    { text: '新手上路', link: 'zh-TW/getting-started' },
-    { text: '快速開始', link: 'zh-TW/quick-start' },
-    { text: '安裝', link: 'zh-TW/installation' },
-    { text: '佈景主題', link: 'zh-TW/themes' },
-  ],
-  bg: [
-    { text: 'Главни', header: true },
-    { text: 'Започваме!', link: 'bg/getting-started' },
-  ],
-  fr: [
-    { text: 'Bienvenue', header: true },
-    { text: 'Bien démarrer', link: 'fr/getting-started' },
-    { text: 'Démarrage rapide', link: 'fr/quick-start' },
-    { text: 'Installation', link: 'fr/installation' },
-  ],
-  bn: [
-    { text: 'সেটআপ', header: true },
-    { text: 'শুরু করুন', link: 'bn/getting-started' },
-  ],
-  kr: [
-    { text: '환영합니다', header: true },
-    { text: '시작하기', link: 'kr/getting-started' },
-  ],
-  ar: [
-    { text: 'التهيئة', header: true },
-    { text: 'باشر البدأ', link: 'ar/getting-started' },
-  ],
-  da: [
-    { text: 'Velkommen', header: true },
-    { text: 'Introduktion', link: 'da/getting-started' },
-  ],
-  ja: [
-    { text: 'セットアップ', header: true },
-    { text: 'はじめに', link: 'ja/getting-started' },
-    { text: 'クイックスタート', link: 'ja/quick-start' },
-    { text: 'インストール', link: 'ja/installation' },
-    { text: 'テーマ', link: 'ja/themes' },
-    { text: 'Astro vs. X', link: 'ja/comparing-astro-vs-other-tools' },
-  ],
-  ru: [
-    { text: 'Введение', header: true },
-    { text: 'Начало работы', link: 'ru/getting-started' },
-    { text: 'Быстрый старт', link: 'ru/quick-start' },
-  ],
-  it: [
-    { text: 'Impostare', header: true },
-    { text: 'Come iniziare', link: 'it/getting-started' },
-  ],
+		{ text: 'Referencia', header: true },
+		{
+			text: 'Componentes incorporados',
+			link: 'es/reference/builtin-components',
+		},
+		{ text: 'Referencia de API', link: 'es/reference/api-reference' },
+		{ text: 'Referencia de CLI', link: 'es/reference/cli-reference' },
+		{
+			text: 'Referencia de configuración',
+			link: 'es/reference/configuration-reference',
+		},
+		{
+			text: 'Referencia de renderizador',
+			link: 'es/reference/renderer-reference',
+		},
+	],
+	'zh-CN': [
+		{ text: '起步', header: true },
+		{ text: '入门指南', link: 'zh-CN/getting-started' },
+		{ text: '快速入门', link: 'zh-CN/quick-start' },
+		{ text: '安装指南', link: 'zh-CN/installation' },
+		{ text: '模板样例', link: 'zh-CN/examples' },
+		{
+			text: 'Astro 对比其他框架',
+			link: 'zh-CN/comparing-astro-vs-other-tools',
+		},
+	],
+	'zh-TW': [
+		{ text: '設定', header: true },
+		{ text: '新手上路', link: 'zh-TW/getting-started' },
+		{ text: '快速開始', link: 'zh-TW/quick-start' },
+		{ text: '安裝', link: 'zh-TW/installation' },
+		{ text: '佈景主題', link: 'zh-TW/themes' },
+	],
+	bg: [
+		{ text: 'Главни', header: true },
+		{ text: 'Започваме!', link: 'bg/getting-started' },
+	],
+	fr: [
+		{ text: 'Bienvenue', header: true },
+		{ text: 'Bien démarrer', link: 'fr/getting-started' },
+		{ text: 'Démarrage rapide', link: 'fr/quick-start' },
+		{ text: 'Installation', link: 'fr/installation' },
+	],
+	bn: [
+		{ text: 'সেটআপ', header: true },
+		{ text: 'শুরু করুন', link: 'bn/getting-started' },
+	],
+	kr: [
+		{ text: '환영합니다', header: true },
+		{ text: '시작하기', link: 'kr/getting-started' },
+	],
+	ar: [
+		{ text: 'التهيئة', header: true },
+		{ text: 'باشر البدأ', link: 'ar/getting-started' },
+	],
+	da: [
+		{ text: 'Velkommen', header: true },
+		{ text: 'Introduktion', link: 'da/getting-started' },
+	],
+	ja: [
+		{ text: 'セットアップ', header: true },
+		{ text: 'はじめに', link: 'ja/getting-started' },
+		{ text: 'クイックスタート', link: 'ja/quick-start' },
+		{ text: 'インストール', link: 'ja/installation' },
+		{ text: 'テーマ', link: 'ja/themes' },
+		{ text: 'Astro vs. X', link: 'ja/comparing-astro-vs-other-tools' },
+	],
+	ru: [
+		{ text: 'Введение', header: true },
+		{ text: 'Начало работы', link: 'ru/getting-started' },
+		{ text: 'Быстрый старт', link: 'ru/quick-start' },
+	],
+	it: [
+		{ text: 'Impostare', header: true },
+		{ text: 'Come iniziare', link: 'it/getting-started' },
+	],
 };
 
 export const SITE = {
-  title: 'Astro Documentation',
-  description: 'Build faster websites with less client-side Javascript.',
+	title: 'Astro Documentation',
+	description: 'Build faster websites with less client-side Javascript.',
 };
 
 export const OPEN_GRAPH = {
-  locale: 'en_US',
-  image: {
-    src: '/default-og-image.png?v=1',
-    alt:
-      'astro logo on a starry expanse of space,' +
-      ' with a purple saturn-like planet floating in the right foreground',
-  },
-  twitter: 'astrodotbuild',
+	locale: 'en_US',
+	image: {
+		src: '/default-og-image.png?v=1',
+		alt:
+			'astro logo on a starry expanse of space,' +
+			' with a purple saturn-like planet floating in the right foreground',
+	},
+	twitter: 'astrodotbuild',
 };
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
index 12cdedd85..b439b139f 100644
--- a/docs/src/layouts/MainLayout.astro
+++ b/docs/src/layouts/MainLayout.astro
@@ -1,122 +1,126 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
-import HeadSEO from "../components/HeadSEO.astro";
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
 import Header from '../components/Header/Header.astro';
 import Footer from '../components/Footer/Footer.astro';
 import PageContent from '../components/PageContent/PageContent.astro';
 import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
 import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
-import { SITE } from "../config.ts";
+import { SITE } from '../config.ts';
 
-const { content = {}, hideRightSidebar = false} = Astro.props;
+const { content = {}, hideRightSidebar = false } = Astro.props;
 const currentPage = Astro.request.url.pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
 const githubEditUrl = `https://github.com/withastro/astro/blob/main/docs/${currentFile}`;
-const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
+const formatTitle = (content, SITE) =>
+	content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
 ---
+
 <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
-  <head>
-    <HeadCommon />
-    <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />
-    <title>{formatTitle(content, SITE)}</title>
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: var(--theme-navbar-height) 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: 
-          minmax(var(--gutter), 1fr) 
-          minmax(0, var(--max-width)) 
-          minmax(var(--gutter), 1fr);
-        overflow-x: hidden;
-      }
-      .layout :global(> *) {
-        width: 100%;
-        height: 100%;
-      }
-      .grid-sidebar {
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        padding: 0;
-      }
-      #grid-left {
-        position: fixed;
-        background-color: var(--theme-bg);
-        z-index: 10;
-        display: none;
-      }
-      #grid-main {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-      #grid-right {
-        display: none;
-      }   
-      :global(.mobile-sidebar-toggle) {
-        overflow: hidden;
-      }
-      :global(.mobile-sidebar-toggle #grid-left) {
-        display: block;
-        top: 2rem;
-      }
-      @media (min-width: 50em) {
-        .layout {
-          overflow: initial;
-          grid-template-columns: 
-            20rem 
-            minmax(0, var(--max-width));
-          gap: 1em;
-        }
-        #grid-left {
-          display: flex;
-          padding-left: 2rem;
-          position: sticky;
-          grid-column: 1;
-        }
-      }
+	<head>
+		<HeadCommon />
+		<HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />
+		<title>{formatTitle(content, SITE)}</title>
+		<style>
+			body {
+				width: 100%;
+				display: grid;
+				grid-template-rows: var(--theme-navbar-height) 1fr;
+				--gutter: 0.5rem;
+				--doc-padding: 2rem;
+			}
+			.layout {
+				display: grid;
+				grid-auto-flow: column;
+				grid-template-columns:
+					minmax(var(--gutter), 1fr)
+					minmax(0, var(--max-width))
+					minmax(var(--gutter), 1fr);
+				overflow-x: hidden;
+			}
+			.layout :global(> *) {
+				width: 100%;
+				height: 100%;
+			}
+			.grid-sidebar {
+				height: 100vh;
+				position: sticky;
+				top: 0;
+				padding: 0;
+			}
+			#grid-left {
+				position: fixed;
+				background-color: var(--theme-bg);
+				z-index: 10;
+				display: none;
+			}
+			#grid-main {
+				padding: var(--doc-padding) var(--gutter);
+				grid-column: 2;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+			#grid-right {
+				display: none;
+			}
+			:global(.mobile-sidebar-toggle) {
+				overflow: hidden;
+			}
+			:global(.mobile-sidebar-toggle #grid-left) {
+				display: block;
+				top: 2rem;
+			}
+			@media (min-width: 50em) {
+				.layout {
+					overflow: initial;
+					grid-template-columns:
+						20rem
+						minmax(0, var(--max-width));
+					gap: 1em;
+				}
+				#grid-left {
+					display: flex;
+					padding-left: 2rem;
+					position: sticky;
+					grid-column: 1;
+				}
+			}
 
-      @media (min-width: 72em) {
-        .layout {
-          grid-template-columns: 
-            20rem 
-            minmax(0, var(--max-width)) 
-            18rem;
-          padding-left: 0;
-          padding-right: 0;
-          margin: 0 auto;
-        }
-        #grid-right {
-          grid-column: 3;
-          display: flex;
-        }
-      }
-    </style>
-  </head>
+			@media (min-width: 72em) {
+				.layout {
+					grid-template-columns:
+						20rem
+						minmax(0, var(--max-width))
+						18rem;
+					padding-left: 0;
+					padding-right: 0;
+					margin: 0 auto;
+				}
+				#grid-right {
+					grid-column: 3;
+					display: flex;
+				}
+			}
+		</style>
+	</head>
 
-  <body>
-    <Header currentPage={currentPage} />
-    <main class="layout">
-      <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-        <LeftSidebar currentPage={currentPage} />
-      </aside>
-      <div id="grid-main">
-        <PageContent content={content} githubEditUrl={githubEditUrl} currentPage={currentPage}>
-          <slot />
-        </PageContent>
-      </div>
-      <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        {!hideRightSidebar && <RightSidebar content={content} githubEditUrl={githubEditUrl} />}
-      </aside>
-    </main>
-  </body>
+	<body>
+		<Header {currentPage} />
+		<main class="layout">
+			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+				<LeftSidebar {currentPage} />
+			</aside>
+			<div id="grid-main">
+				<PageContent {content} {githubEditUrl} {currentPage}>
+					<slot />
+				</PageContent>
+			</div>
+			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
+				{!hideRightSidebar && (
+					<RightSidebar content={content} githubEditUrl={githubEditUrl} />
+				)}
+			</aside>
+		</main>
+	</body>
 </html>
diff --git a/docs/src/layouts/SplashLayout.astro b/docs/src/layouts/SplashLayout.astro
index d2b00e9bc..7e4ea55b6 100644
--- a/docs/src/layouts/SplashLayout.astro
+++ b/docs/src/layouts/SplashLayout.astro
@@ -1,48 +1,48 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
+import HeadCommon from '../components/HeadCommon.astro';
 import Header from '../components/Header/Header.astro';
-import { SITE } from "../config.ts";
+import { SITE } from '../config.ts';
 
 const { title } = Astro.props;
 ---
 
 <html dir="ltr" lang="en-us" class="initial">
-  <head>
-    <HeadCommon />
-    <title>{`${title} 🚀 ${SITE.title}`}</title>
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: var(--theme-navbar-height) 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: 
-          minmax(var(--gutter), 1fr) 
-          minmax(0, var(--max-width)) 
-          minmax(var(--gutter), 1fr);
-        overflow-x: hidden;
-      }
-      article {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-    </style>
-  </head>
+	<head>
+		<HeadCommon />
+		<title>{`${title} 🚀 ${SITE.title}`}</title>
+		<style>
+			body {
+				width: 100%;
+				display: grid;
+				grid-template-rows: var(--theme-navbar-height) 1fr;
+				--gutter: 0.5rem;
+				--doc-padding: 2rem;
+			}
+			.layout {
+				display: grid;
+				grid-auto-flow: column;
+				grid-template-columns:
+					minmax(var(--gutter), 1fr)
+					minmax(0, var(--max-width))
+					minmax(var(--gutter), 1fr);
+				overflow-x: hidden;
+			}
+			article {
+				padding: var(--doc-padding) var(--gutter);
+				grid-column: 2;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+		</style>
+	</head>
 
-  <body>
-    <Header />
-    <main class="layout splash-layout">
-      <article>
-        <slot />
-      </article>
-    </main>
-  </body>
+	<body>
+		<Header />
+		<main class="layout splash-layout">
+			<article>
+				<slot />
+			</article>
+		</main>
+	</body>
 </html>
diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
index 242cbf594..8a0bfbb5b 100644
--- a/docs/src/pages/404.astro
+++ b/docs/src/pages/404.astro
@@ -3,7 +3,7 @@ import SplashLayout from '../layouts/SplashLayout.astro';
 ---
 
 <SplashLayout title="Not Found">
-  <h1>404</h1>
-  <p>This page isn't in our solar system.</p>
-  <a href="/">Take me home.</a>
+	<h1>404</h1>
+	<p>This page isn't in our solar system.</p>
+	<a href="/">Take me home.</a>
 </SplashLayout>
diff --git a/docs/src/pages/de/404.astro b/docs/src/pages/de/404.astro
index fe950b41d..7107cc49a 100644
--- a/docs/src/pages/de/404.astro
+++ b/docs/src/pages/de/404.astro
@@ -3,7 +3,7 @@ import SplashLayout from '../../layouts/SplashLayout.astro';
 ---
 
 <SplashLayout title="Nicht gefunden">
-  <h1>404</h1>
-  <p>Diese Seite befindet sich nicht in unserem Sonnensystem.</p>
-  <a href="/">Bring mich nach Hause.</a>
+	<h1>404</h1>
+	<p>Diese Seite befindet sich nicht in unserem Sonnensystem.</p>
+	<a href="/">Bring mich nach Hause.</a>
 </SplashLayout>
diff --git a/docs/src/pages/de/themes.astro b/docs/src/pages/de/themes.astro
index 81db14520..b33fe3c03 100644
--- a/docs/src/pages/de/themes.astro
+++ b/docs/src/pages/de/themes.astro
@@ -5,48 +5,49 @@ import { Markdown } from 'astro/components';
 import themes from '../../data/themes.json';
 import components from '../../data/components.json';
 ---
-<Layout content={{title: 'Vorlagen'}} hideRightSidebar>
-    <style>
-        .card-grid {
-            display: grid;
-            grid-column-gap: 15px;
-            grid-row-gap: 15px;
-            grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
-        }
-    </style>
-    <Markdown>
-        ## Vorgestellte Vorlagen
-    </Markdown>
-    <div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Offizielle Vorlagen
 
-        Astro pflegt verschiedene offizielle Vorlagen für Dokumentationssites, Portfolios und mehr.
-    </Markdown>
-    <div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Vorlagen aus der Community
+<Layout content={{ title: 'Vorlagen' }} hideRightSidebar>
+	<style>
+		.card-grid {
+			display: grid;
+			grid-column-gap: 15px;
+			grid-row-gap: 15px;
+			grid-auto-flow: dense;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		}
+	</style>
+	<Markdown>
+		## Vorgestellte Vorlagen
+	</Markdown>
+	<div class="card-grid">
+		{themes.featured.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Offizielle Vorlagen
 
-        Sieh dir einige von unserer Community entwickelte Vorlagen an!
-    </Markdown>
-    <div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Vorgestellte Packages
+		Astro pflegt verschiedene offizielle Vorlagen für Dokumentationssites, Portfolios und mehr.
+	</Markdown>
+	<div class="card-grid">
+		{themes.official.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Vorlagen aus der Community
 
-        Unser Package-Ökosystem wächst stetig! Sieh dir die hier vorgestellten Packages unserer Community an. Durchsuche unsere vollständige Sammlung [auf npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
-    </Markdown>
-    <div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        > Möchtest du deine eigene Arbeit hier sehen? [Teile sie in Discord!](https://astro.build/chat)
-        Wir teilen hier regelmäßig unsere Favoriten aus dem #showcase-Channel.
-    </Markdown>
+		Sieh dir einige von unserer Community entwickelte Vorlagen an!
+	</Markdown>
+	<div class="card-grid">
+		{themes.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Vorgestellte Packages
+
+		Unser Package-Ökosystem wächst stetig! Sieh dir die hier vorgestellten Packages unserer Community an. Durchsuche unsere vollständige Sammlung [auf npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
+	</Markdown>
+	<div class="card-grid">
+		{components.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		> Möchtest du deine eigene Arbeit hier sehen? [Teile sie in Discord!](https://astro.build/chat)
+		> Wir teilen hier regelmäßig unsere Favoriten aus dem #showcase-Channel.
+	</Markdown>
 </Layout>
diff --git a/docs/src/pages/es/guides/markdown-content.astro b/docs/src/pages/es/guides/markdown-content.astro
index 562511baf..ca2c5574d 100644
--- a/docs/src/pages/es/guides/markdown-content.astro
+++ b/docs/src/pages/es/guides/markdown-content.astro
@@ -4,10 +4,9 @@ import MainLayout from '~/layouts/MainLayout.astro';
 const [content] = Astro.fetchContent('/src/pages/guides/markdown-content.md');
 ---
 
-<MainLayout content="{content}">
-  <Markdown>
-    > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-  </Markdown>
-  {content.astro.html}
+<MainLayout {content}>
+	<Markdown>
+		> Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
+	</Markdown>
+	{content.astro.html}
 </MainLayout>
-
diff --git a/docs/src/pages/es/guides/pagination.astro b/docs/src/pages/es/guides/pagination.astro
index 65c0fe3c4..ad7682695 100644
--- a/docs/src/pages/es/guides/pagination.astro
+++ b/docs/src/pages/es/guides/pagination.astro
@@ -4,10 +4,9 @@ import MainLayout from '~/layouts/MainLayout.astro';
 const [content] = Astro.fetchContent('/src/pages/guides/pagination.md');
 ---
 
-<MainLayout content="{content}">
-  <Markdown>
-    > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-  </Markdown>
-  {content.astro.html}
+<MainLayout {content}>
+	<Markdown>
+		> Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
+	</Markdown>
+	{content.astro.html}
 </MainLayout>
-
diff --git a/docs/src/pages/es/guides/publish-to-npm.astro b/docs/src/pages/es/guides/publish-to-npm.astro
index a1ffac93c..d745b8b7c 100644
--- a/docs/src/pages/es/guides/publish-to-npm.astro
+++ b/docs/src/pages/es/guides/publish-to-npm.astro
@@ -4,10 +4,9 @@ import MainLayout from '~/layouts/MainLayout.astro';
 const [content] = Astro.fetchContent('/src/pages/guides/publish-to-npm.md');
 ---
 
-<MainLayout content="{content}">
-  <Markdown>
-    > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-  </Markdown>
-  {content.astro.html}
+<MainLayout {content}>
+	<Markdown>
+		> Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
+	</Markdown>
+	{content.astro.html}
 </MainLayout>
-
diff --git a/docs/src/pages/es/guides/styling.astro b/docs/src/pages/es/guides/styling.astro
index d15e6298f..b153798c3 100644
--- a/docs/src/pages/es/guides/styling.astro
+++ b/docs/src/pages/es/guides/styling.astro
@@ -4,10 +4,9 @@ import MainLayout from '~/layouts/MainLayout.astro';
 const [content] = Astro.fetchContent('/src/pages/guides/styling.md');
 ---
 
-<MainLayout content="{content}">
-  <Markdown>
-    > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-  </Markdown>
-  {content.astro.html}
+<MainLayout {content}>
+	<Markdown>
+		> Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
+	</Markdown>
+	{content.astro.html}
 </MainLayout>
-
diff --git a/docs/src/pages/es/reference/renderer-reference.astro b/docs/src/pages/es/reference/renderer-reference.astro
index f3c703a60..131b95ab4 100644
--- a/docs/src/pages/es/reference/renderer-reference.astro
+++ b/docs/src/pages/es/reference/renderer-reference.astro
@@ -1,13 +1,14 @@
 ---
 import { Markdown } from 'astro/components';
 import MainLayout from '~/layouts/MainLayout.astro';
-const [content] = Astro.fetchContent('/src/pages/reference/renderer-reference.md');
+const [content] = Astro.fetchContent(
+	'/src/pages/reference/renderer-reference.md'
+);
 ---
 
-<MainLayout content="{content}">
-  <Markdown>
-    > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-  </Markdown>
-  {content.astro.html}
+<MainLayout {content}>
+	<Markdown>
+		> Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
+	</Markdown>
+	{content.astro.html}
 </MainLayout>
-
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index 74bf80c9c..ed0831cbd 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -3,19 +3,37 @@ import Layout from '../layouts/MainLayout.astro';
 ---
 
 <script>
-  // WIP: trigger a client-side redirect based on the browser language.
-  // A vercel.json redirect is enforced in production, so no user should ever see this page.
-  // Remove the vercel.json redirect when this is ready.
-  const KNOWN_LANGUAGES = ['bg', 'de','en','es','fi','nl','pt-br','zh-CN','zh-TW', 'fr', 'kr', 'da', 'ja'];
-  let newLangWithRegion = (window.navigator.userLanguage || window.navigator.language || 'en-US').substr(0, 5);
-  let newLang = newLangWithRegion.substr(0, 2);
-  if (newLang === 'en') {
-    window.location.pathname = '/getting-started';
-  } else if (KNOWN_LANGUAGES.includes(newLangWithRegion)) {
-    window.location.pathname = '/' + newLangWithRegion + '/getting-started';
-  } else if (KNOWN_LANGUAGES.includes(newLang)) {
-    window.location.pathname = '/' + newLang + '/getting-started';
-  } else {
-    window.location.pathname = '/getting-started';
-  }
+	// WIP: trigger a client-side redirect based on the browser language.
+	// A vercel.json redirect is enforced in production, so no user should ever see this page.
+	// Remove the vercel.json redirect when this is ready.
+	const KNOWN_LANGUAGES = [
+		'bg',
+		'de',
+		'en',
+		'es',
+		'fi',
+		'nl',
+		'pt-br',
+		'zh-CN',
+		'zh-TW',
+		'fr',
+		'kr',
+		'da',
+		'ja',
+	];
+	let newLangWithRegion = (
+		window.navigator.userLanguage ||
+		window.navigator.language ||
+		'en-US'
+	).substr(0, 5);
+	let newLang = newLangWithRegion.substr(0, 2);
+	if (newLang === 'en') {
+		window.location.pathname = '/getting-started';
+	} else if (KNOWN_LANGUAGES.includes(newLangWithRegion)) {
+		window.location.pathname = '/' + newLangWithRegion + '/getting-started';
+	} else if (KNOWN_LANGUAGES.includes(newLang)) {
+		window.location.pathname = '/' + newLang + '/getting-started';
+	} else {
+		window.location.pathname = '/getting-started';
+	}
 </script>
diff --git a/docs/src/pages/ja/themes.astro b/docs/src/pages/ja/themes.astro
index 56810054d..5a64cf826 100644
--- a/docs/src/pages/ja/themes.astro
+++ b/docs/src/pages/ja/themes.astro
@@ -1,52 +1,53 @@
 ---
 import Layout from '../../layouts/MainLayout.astro';
 import Card from '../../components/Card.astro';
-import {Markdown} from 'astro/components';
+import { Markdown } from 'astro/components';
 import themes from '../../data/themes.json';
 import components from '../../data/components.json';
 ---
-<Layout content={{title: 'テーマ'}} hideRightSidebar>
-    <style>
-        .card-grid {
-            display: grid;
-            grid-column-gap: 15px;
-            grid-row-gap: 15px;
-            grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
-        }
-    </style>
-    <Markdown>
-        ## 注目のテーマ
-    </Markdown>
-    <div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## 公式テーマ
 
-        Astroでは、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。
-    </Markdown>
-    <div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## コミュニティテーマ
+<Layout content={{ title: 'テーマ' }} hideRightSidebar>
+	<style>
+		.card-grid {
+			display: grid;
+			grid-column-gap: 15px;
+			grid-row-gap: 15px;
+			grid-auto-flow: dense;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		}
+	</style>
+	<Markdown>
+		## 注目のテーマ
+	</Markdown>
+	<div class="card-grid">
+		{themes.featured.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## 公式テーマ
 
-        コミュニティが開発したテーマをご覧ください。
-    </Markdown>
-    <div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## 注目のパッケージ
+		Astro では、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。
+	</Markdown>
+	<div class="card-grid">
+		{themes.official.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## コミュニティテーマ
 
-        私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。
-    </Markdown>
-    <div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        > 自分のテーマを紹介したい場合は、[Discordでシェアしてください！](https://astro.build/chat)  
-        `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。
-    </Markdown>
+		コミュニティが開発したテーマをご覧ください。
+	</Markdown>
+	<div class="card-grid">
+		{themes.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## 注目のパッケージ
+
+		私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。
+	</Markdown>
+	<div class="card-grid">
+		{components.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		> 自分のテーマを紹介したい場合は、[Discord でシェアしてください！](https://astro.build/chat)  
+		> `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。
+	</Markdown>
 </Layout>
diff --git a/docs/src/pages/themes.astro b/docs/src/pages/themes.astro
index 697335298..a8a84a48a 100644
--- a/docs/src/pages/themes.astro
+++ b/docs/src/pages/themes.astro
@@ -5,48 +5,49 @@ import { Markdown } from 'astro/components';
 import themes from '../data/themes.json';
 import components from '../data/components.json';
 ---
-<Layout content={{title: 'Themes'}} hideRightSidebar>
-    <style>
-        .card-grid {
-            display: grid;
-            grid-column-gap: 15px;
-            grid-row-gap: 15px;
-            grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
-        }
-    </style>
-    <Markdown>
-        ## Featured Theme
-    </Markdown>
-    <div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Official Themes
 
-        Astro maintains several official themes for documentation sites, portfolios, and more.
-    </Markdown>
-    <div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Community Themes
+<Layout content={{ title: 'Themes' }} hideRightSidebar>
+	<style>
+		.card-grid {
+			display: grid;
+			grid-column-gap: 15px;
+			grid-row-gap: 15px;
+			grid-auto-flow: dense;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		}
+	</style>
+	<Markdown>
+		## Featured Theme
+	</Markdown>
+	<div class="card-grid">
+		{themes.featured.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Official Themes
 
-        Checkout some themes developed by our community!
-    </Markdown>
-    <div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## Featured Packages
+		Astro maintains several official themes for documentation sites, portfolios, and more.
+	</Markdown>
+	<div class="card-grid">
+		{themes.official.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Community Themes
 
-        Our package ecosystem is growing! Check out these featured community packages. Search the entire collection [on npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
-    </Markdown>
-    <div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        > Want to see your own work featured? [Share it to Discord!](https://astro.build/chat)
-        We'll often take our favorites from the `#showcase` channel and post them here.
-    </Markdown>
+		Checkout some themes developed by our community!
+	</Markdown>
+	<div class="card-grid">
+		{themes.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## Featured Packages
+
+		Our package ecosystem is growing! Check out these featured community packages. Search the entire collection [on npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
+	</Markdown>
+	<div class="card-grid">
+		{components.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		> Want to see your own work featured? [Share it to Discord!](https://astro.build/chat)
+		> We'll often take our favorites from the `#showcase` channel and post them here.
+	</Markdown>
 </Layout>
diff --git a/docs/src/pages/zh-TW/themes.astro b/docs/src/pages/zh-TW/themes.astro
index 7f4a8fa34..c1908fbc8 100644
--- a/docs/src/pages/zh-TW/themes.astro
+++ b/docs/src/pages/zh-TW/themes.astro
@@ -5,48 +5,49 @@ import { Markdown } from 'astro/components';
 import themes from '../../data/themes.json';
 import components from '../../data/components.json';
 ---
-<Layout content={{title: '佈景主題'}} hideRightSidebar>
-    <style>
-        .card-grid {
-            display: grid;
-            grid-column-gap: 15px;
-            grid-row-gap: 15px;
-            grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
-        }
-    </style>
-    <Markdown>
-        ## 精選佈景主題
-    </Markdown>
-    <div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## 官方佈景主題
 
-        Astro 維護的文件網站、作品集⋯等官方佈景主題。
-    </Markdown>
-    <div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## 社群佈景主題
+<Layout content={{ title: '佈景主題' }} hideRightSidebar>
+	<style>
+		.card-grid {
+			display: grid;
+			grid-column-gap: 15px;
+			grid-row-gap: 15px;
+			grid-auto-flow: dense;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		}
+	</style>
+	<Markdown>
+		## 精選佈景主題
+	</Markdown>
+	<div class="card-grid">
+		{themes.featured.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## 官方佈景主題
 
-        趕緊來看看社群開發的佈景主題！
-    </Markdown>
-    <div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        ## 精選套件
+		Astro 維護的文件網站、作品集 ⋯ 等官方佈景主題。
+	</Markdown>
+	<div class="card-grid">
+		{themes.official.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## 社群佈景主題
 
-        我們的套件生態持續成長！所有精選社群套件都可以在 [npm](https://www.npmjs.com/search?q=keywords%3Aastro-component) 發掘。
-    </Markdown>
-    <div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
-    </div>
-    <Markdown>
-        > 想要讓自己的作品成為精選嗎？[在 Discord 分享！](https://astro.build/chat)  
-        我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。
-    </Markdown>
+		趕緊來看看社群開發的佈景主題！
+	</Markdown>
+	<div class="card-grid">
+		{themes.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		## 精選套件
+
+		我們的套件生態持續成長！所有精選社群套件都可以在 [npm](https://www.npmjs.com/search?q=keywords%3Aastro-component) 發掘。
+	</Markdown>
+	<div class="card-grid">
+		{components.community.map((item) => <Card data={item} />)}
+	</div>
+	<Markdown>
+		> 想要讓自己的作品成為精選嗎？[在 Discord 分享！](https://astro.build/chat)  
+		> 我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。
+	</Markdown>
 </Layout>
diff --git a/docs/src/util.ts b/docs/src/util.ts
index 269373735..c20b0713e 100644
--- a/docs/src/util.ts
+++ b/docs/src/util.ts
@@ -1,14 +1,14 @@
 export function getLanguageFromURL(pathname: string) {
-  const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//);
-  return langCodeMatch ? langCodeMatch[1] : 'en';
+	const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//);
+	return langCodeMatch ? langCodeMatch[1] : 'en';
 }
 
 /** Remove \ and / from beginning of string */
 export function removeLeadingSlash(path: string) {
-  return path.replace(/^[/\\]+/, '');
+	return path.replace(/^[/\\]+/, '');
 }
 
 /** Remove \ and / from end of string */
 export function removeTrailingSlash(path: string) {
-  return path.replace(/[/\\]+$/, '');
+	return path.replace(/[/\\]+$/, '');
 }