Use accessible indentation (#2253)

.editorconfig

@@ -4,9 +4,12 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = false
+end_of_line = lf
+indent_size = 2
+indent_style = tab
 insert_final_newline = true
+trim_trailing_whitespace = false
+
+[{.*,*.md,*.json,*.toml,*.yml,}]
+indent_style = space

.prettierrc.json

@@ -3,5 +3,14 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "useTabs": true,
+  "overrides": [
+    {
+      "files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
+      "options": {
+        "useTabs": false
+      }
+    }
+  ]
 }

docs/src/components/Card.astro

@@ -1,8 +1,26 @@
 ---
 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;
@@ -27,10 +45,11 @@ const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${e
 		left: 0;
 		height: 100%;
 		width: 100%;
-        background: linear-gradient(45deg, #0004, #000B);
+		background: linear-gradient(45deg, #0004, #000b);
 		z-index: 2;
 	}
-    .card-body, .card-header {
+	.card-body,
+	.card-header {
 		color: var(--text-color);
 	}
 	.card-body {
@@ -41,12 +60,3 @@ const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${e
 		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>

docs/src/components/Footer/AvatarList.astro

@@ -19,13 +19,13 @@ async function getCommits(url) {
 			);
 		}
 
-    const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
+		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
 
 		const res = await fetch(url, {
-      method: "GET",
+			method: 'GET',
 			headers: {
 				Authorization: auth,
-        "User-Agent": "astro-docs/1.0",
+				'User-Agent': 'astro-docs/1.0',
 			},
 		});
 
@@ -65,18 +65,37 @@ 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}`}>
+	<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>
+			<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>}
+	{additionalContributors > 0 && (
+		<span>
+			<a
+				href={commitsURL}
+			>{`and ${additionalContributors} additional contributor${
+				additionalContributors > 1 ? 's' : ''
+			}.`}</a>
+		</span>
+	)}
 	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
 </div>
 
@@ -152,6 +171,6 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 	}
 
 	.contributors > * + * {
-  margin-left: .75rem;
+		margin-left: 0.75rem;
 	}
 </style>

docs/src/components/Footer/Footer.astro

@@ -4,7 +4,7 @@ const { path } = Astro.props;
 ---
 
 <footer>
-  <AvatarList path={path} />
+	<AvatarList {path} />
 </footer>
 
 <style>

docs/src/components/HeadCommon.astro

@@ -1,6 +1,6 @@
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width">
+<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" />
@@ -12,18 +12,24 @@
 <link rel="stylesheet" href="/index.css" />
 
 <!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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
+	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) {
+	if (
+		theme === 'dark' ||
+		(!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+	) {
 		root.classList.add('theme-dark');
 	} else {
 		root.classList.remove('theme-dark');
@@ -31,10 +37,13 @@
 </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);}
+	function gtag() {
+		dataLayer.push(arguments);
+	}
 	gtag('js', new Date());
 	gtag('config', 'UA-130280175-15');
 </script>

docs/src/components/HeadSEO.astro

@@ -2,19 +2,17 @@
 import { SITE, OPEN_GRAPH } from '../config.ts';
 import { getLanguageFromURL } from '../util.ts';
 export interface Props {
-  content: any,
+	content: any;
-  site: any,
+	site: any;
-  canonicalURL: URL,
+	canonicalURL: URL;
-};
+}
-const {
+const { content = {}, canonicalURL } = Astro.props;
-        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} />
 
@@ -28,14 +26,21 @@ const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
 <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
+	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:description"
+	content={content.description ? content.description : SITE.description}
+/>
 <meta name="twitter:image" content={canonicalImageSrc} />
 <meta name="twitter:image:alt" content={imageAlt} />
 

docs/src/components/Header/AstroLogo.astro

@@ -1,7 +1,15 @@
 ---
 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">
+
+<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; */
@@ -13,8 +21,16 @@ const {size} = Astro.props;
 		}
 	</style>
 	<title>Logo</title>
-    <path id="a" fill-rule="evenodd" clip-rule="evenodd"
+	<path
-        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" />
+		id="a"
-    <path id="flame" fill-rule="evenodd" clip-rule="evenodd"
+		fill-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" />
+		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>

docs/src/components/Header/Header.astro

@@ -2,11 +2,74 @@
 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 lang = currentPage && getLanguageFromURL(currentPage);
 ---
+
+<header>
+	<SkipToContent />
+	<nav class="nav-wrapper" title="Top Navigation">
+		<div class="menu-toggle">
+			<SidebarToggle client:idle />
+		</div>
+		<div class="logo flex">
+			<a href="https://astro.build/">
+				<h1 class="sr-only">Astro</h1>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="363"
+					height="102"
+					viewBox="0 0 363 102"
+					fill="none"
+				>
+					<style>
+						.text {
+							fill: var(--theme-text);
+						}
+						.hover {
+							fill: var(--theme-accent);
+						}
+					</style>
+					<path
+						class="text"
+						fill-rule="evenodd"
+						d="M55.07 14.216l16.81 54.865a72.6 72.6 0 00-20.765-6.984L39.808 24.135a1.475 1.475 0 00-2.827.005L25.81 62.078a72.598 72.598 0 00-20.859 6.995L21.847 14.2c.998-3.243 1.497-4.865 2.47-6.066a8 8 0 013.239-2.392c1.434-.576 3.13-.576 6.524-.576h8.751c3.398 0 5.097 0 6.532.577a8 8 0 013.241 2.397c.972 1.203 1.47 2.827 2.465 6.076z"
+						clip-rule="evenodd"></path>
+					<path
+						fill="#FF5D01"
+						fill-rule="evenodd"
+						d="M54.618 71.779c-2.863 2.432-8.578 4.091-15.161 4.091-8.08 0-14.852-2.499-16.649-5.86-.642 1.926-.786 4.13-.786 5.539 0 0-.423 6.915 4.418 11.725 0-2.498 2.037-4.522 4.551-4.522 4.309 0 4.304 3.734 4.3 6.764v.27c0 4.6 2.829 8.541 6.852 10.203a9.22 9.22 0 01-.938-4.064c0-4.386 2.592-6.02 5.604-7.917 2.396-1.51 5.06-3.188 6.894-6.554a12.297 12.297 0 001.502-5.905c0-1.314-.206-2.581-.587-3.77z"
+						clip-rule="evenodd"></path>
+					<path
+						class="text"
+						d="M126.554 69c13.115 0 21.047-3.14 25.68-9.654 0 2.904.157 5.651.55 8.163h7.774c-.706-4.082-.863-6.75-.863-14.128V43.334c0-10.831-8.403-16.56-24.424-16.56-15.47 0-25.522 5.964-26.779 14.598h8.246c1.256-5.808 7.774-8.87 18.533-8.87 10.602 0 16.885 3.69 16.885 9.969v.785l-24.502 1.413c-9.974.549-13.665 1.962-16.492 4.003-2.67 1.962-4.162 5.023-4.162 8.555C107 64.683 114.696 69 126.554 69zm2.513-5.573c-9.109 0-14.135-2.119-14.135-6.357 0-4.553 3.141-6.593 14.214-7.3l23.01-1.412v1.805c0 8.241-9.66 13.264-23.089 13.264zM196.086 69c16.256 0 22.775-5.337 22.775-13.108 0-6.436-4.006-9.732-14.215-10.596l-19.083-1.49c-5.183-.393-8.088-1.884-8.088-5.102 0-4.082 4.476-6.201 14.135-6.201 10.995 0 16.727 2.198 20.497 7.064l6.361-3.061c-3.927-6.122-12.644-9.733-26.151-9.733-13.9 0-22.224 4.631-22.224 12.244 0 6.829 4.947 10.125 14.292 10.91l18.926 1.492c6.204.47 8.089 1.726 8.089 4.944 0 4.631-4.79 6.829-14.293 6.829-11.544 0-18.847-3.14-22.381-8.87l-6.204 3.376C173.312 64.918 181.715 69 196.086 69zM234.929 34.151v18.916c0 7.77 2.67 15.54 17.198 15.54 3.691 0 8.167-.706 10.131-1.57V60.68c-2.749.628-6.047 1.1-9.267 1.1-6.832 0-10.523-2.67-10.523-9.42V34.151h19.633v-5.887h-19.633V15l-7.539 3.061v10.204h-12.33v5.886h12.33zM280.823 28.265h-6.911v39.244h7.461V52.83c0-5.65 1.099-10.439 4.24-13.735 2.749-3.061 6.283-4.788 12.487-4.788 2.12 0 3.455.157 5.262.471v-7.22c-1.65-.393-3.063-.472-5.184-.472-8.402 0-15.078 4.945-17.355 12.558v-11.38zM334.807 69C351.534 69 363 60.523 363 47.887c0-12.637-11.466-21.114-28.193-21.114-16.727 0-28.193 8.477-28.193 21.114C306.614 60.523 318.08 69 334.807 69zm0-6.2c-12.329 0-20.261-5.809-20.261-14.913 0-9.105 7.932-14.913 20.261-14.913 12.251 0 20.261 5.808 20.261 14.913 0 9.104-8.01 14.912-20.261 14.912z"
+					></path>
+				</svg>
+			</a>
+			<a href="https://docs.astro.build/">
+				<h1 class="sr-only">Docs</h1>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="226"
+					height="102"
+					viewBox="0 0 226 102"
+					fill="none"
+				>
+					<path
+						fill="currentColor"
+						d="M25.805 68c14.688 0 24.883-8.41 24.883-21.14 0-12.786-9.62-19.756-24.653-19.756H0V68h25.805zm-14.17-33.005H24.25c8.352 0 14.17 4.09 14.17 12.039 0 8.236-5.3 13.075-14.113 13.075H11.635V34.995zM82.673 69.382c16.704 0 27.418-8.582 27.418-21.83 0-13.248-10.771-21.83-27.418-21.83-16.589 0-27.418 8.582-27.418 21.83 0 13.19 10.83 21.83 27.418 21.83zm0-8.64c-9.1 0-15.149-5.299-15.149-13.19 0-7.891 6.048-13.19 15.15-13.19 9.1 0 15.205 5.299 15.205 13.19 0 7.891-6.105 13.19-15.206 13.19zM141.497 69.382c13.306 0 22.637-5.299 25.978-14.572l-11.866-2.535c-1.67 5.415-6.393 8.295-13.709 8.295-9.216 0-15.033-5.127-15.033-13.018 0-8.006 5.702-13.018 14.918-13.018 7.43 0 12.154 3.053 13.709 8.64l12.038-2.13c-2.707-9.562-12.268-15.322-25.574-15.322-16.128 0-27.302 9.043-27.302 22.003 0 13.133 10.425 21.657 26.841 21.657zM194.94 69.382c14.745 0 23.212-5.01 23.212-14.054 0-7.603-4.665-10.944-15.955-12.096l-11.289-1.094c-5.242-.576-6.97-1.556-6.97-4.09 0-2.765 3.456-4.262 9.792-4.262 7.834 0 13.709 2.476 16.762 6.508l7.315-6.163c-5.069-5.702-13.133-8.41-23.501-8.41-13.997 0-21.888 4.781-21.888 12.903 0 7.546 4.781 11.232 14.803 12.326l12.557 1.383c4.896.518 6.624 1.555 6.624 4.09 0 3.225-3.456 4.723-10.886 4.723-8.352 0-14.688-3.226-18.087-8.007l-8.294 5.818c4.205 6.451 13.709 10.425 25.805 10.425z"
+					></path>
+				</svg>
+			</a>
+		</div>
+		<div style="flex-grow: 1;"></div>
+		{lang && <LanguageSelect lang={lang} client:idle />}
+		<div class="search-item"><Search {lang} client:idle /></div>
+	</nav>
+</header>
+
 <style>
 	header {
 		z-index: 11;
@@ -21,7 +84,6 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		top: 0;
 	}
 
-
 	.logo {
 		direction: ltr;
 		display: flex;
@@ -50,7 +112,7 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 	}
 
 	.logo .hover {
-    opacity: 0.0;
+		opacity: 0;
 	}
 	.logo a {
 		transition: transform 180ms ease-out;
@@ -59,7 +121,7 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 	.logo a:hover,
 	.logo a:focus {
 		outline: none;
-    opacity: 1.0;
+		opacity: 1;
 		transform: translateY(-2px);
 	}
 
@@ -69,8 +131,6 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		margin: 0;
 	}
 
-
-
 	.nav-wrapper {
 		display: flex;
 		align-items: center;
@@ -122,38 +182,3 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		}
 	}
 </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>

docs/src/components/Header/SkipToContent.astro

@@ -1,3 +1,5 @@
+<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a>
+
 <style>
 	.skiplink,
 	.skiplink:focus,
@@ -18,4 +20,3 @@
 		outline-offset: 0;
 	}
 </style>
-<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a>

docs/src/components/LeftSidebar/LeftSidebar.astro

@@ -1,6 +1,10 @@
 ---
 import { SIDEBAR } from '../../config.ts';
-import { getLanguageFromURL, removeLeadingSlash, removeTrailingSlash } from '../../util.ts';
+import {
+	getLanguageFromURL,
+	removeLeadingSlash,
+	removeTrailingSlash,
+} from '../../util.ts';
 const { currentPage } = Astro.props;
 
 // Get the slug w/o a leading or trailing slash
@@ -15,7 +19,6 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 	return col;
 }, []);
-
 ---
 
 <nav aria-labelledby="grid-left">
@@ -25,18 +28,48 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 				<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>
+						<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 => (
+		{sidebarSections.map((section) => (
 			<li>
 				<div class="nav-group">
 					<h2 class="nav-group-title">{section.text}</h2>
 					<ul>
-            {section.children.map(child => (
+						{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>
+							<li class="nav-link">
+								<a
+									href={`${Astro.site.pathname}${child.link}`}
+									aria-current={`${
+										currentPageMatch === child.link ? 'page' : 'false'
+									}`}
+								>
+									{child.text}
+								</a>
+							</li>
 						))}
 					</ul>
 				</div>
@@ -48,7 +81,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 <script>
 	window.addEventListener('DOMContentLoaded', (event) => {
 		var target = document.querySelector('[aria-current="page"]');
-    if (target && (target.offsetTop > (window.innerHeight - 100))) {
+		if (target && target.offsetTop > window.innerHeight - 100) {
 			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
 		}
 	});
@@ -85,7 +118,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 
 	.nav-group-title {
-    font-size: 1.0rem;
+		font-size: 1rem;
 		font-weight: 700;
 		padding: 0.1rem 1rem;
 		text-transform: uppercase;
@@ -93,7 +126,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 
 	.nav-link a {
-    font-size: 1.0rem;
+		font-size: 1rem;
 		margin: 1px;
 		padding: 0.3rem 1rem;
 		font: inherit;
@@ -106,14 +139,14 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 			background-color: var(--theme-bg-hover);
 		}
 
-    &[aria-current="page"] {
+		&[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"] {
+	:global(:root.theme-dark) .nav-link a[aria-current='page'] {
 		color: hsla(var(--color-base-white), 100%, 1);
 	}
 

docs/src/components/PageContent/PageContent.astro

@@ -7,12 +7,53 @@ 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 index = links.findIndex(
-const next = index !== -1 ? (index === links.length - 1 ? null : links[index + 1]) : null;
+	(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;
@@ -35,25 +76,3 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null;
 		}
 	}
 </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>

docs/src/components/RightSidebar/MoreMenu.astro

@@ -2,14 +2,7 @@
 import ThemeToggleButton from './ThemeToggleButton.tsx';
 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`}>
@@ -35,8 +28,29 @@ const {editHref} = Astro.props;
 		</a>
 	</li>
 	<li class={`header-link depth-2`}>
-    <a href="https://github.com/withastro/astro/blob/main/CONTRIBUTING.md#translations" target="_blank">
+		<a
-      <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>
+			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>
@@ -66,3 +80,12 @@ const {editHref} = Astro.props;
 <div style="margin: 2rem 0; text-align: center;">
 	<ThemeToggleButton client:visible />
 </div>
+
+<style>
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
+</style>

docs/src/components/RightSidebar/RightSidebar.astro

@@ -4,6 +4,16 @@ import MoreMenu from './MoreMenu.astro';
 const { content, githubEditUrl } = Astro.props;
 const headers = content.astro?.headers;
 ---
+
+<nav class="sidebar-nav" aria-labelledby="grid-right">
+	<div class="sidebar-nav-inner">
+		{headers && (
+			<TableOfContents client:media="(min-width: 50em)" headers={headers} />
+		)}
+		<MoreMenu editHref={githubEditUrl} />
+	</div>
+</nav>
+
 <style>
 	.sidebar-nav {
 		width: 100%;
@@ -17,9 +27,3 @@ const headers = content.astro?.headers;
 		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>

docs/src/layouts/MainLayout.astro

@@ -1,19 +1,21 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
+import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from "../components/HeadSEO.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 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 />
@@ -104,18 +106,20 @@ const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${
 	</head>
 
 	<body>
-    <Header currentPage={currentPage} />
+		<Header {currentPage} />
 		<main class="layout">
 			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-        <LeftSidebar currentPage={currentPage} />
+				<LeftSidebar {currentPage} />
 			</aside>
 			<div id="grid-main">
-        <PageContent content={content} githubEditUrl={githubEditUrl} currentPage={currentPage}>
+				<PageContent {content} {githubEditUrl} {currentPage}>
 					<slot />
 				</PageContent>
 			</div>
 			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        {!hideRightSidebar && <RightSidebar content={content} githubEditUrl={githubEditUrl} />}
+				{!hideRightSidebar && (
+					<RightSidebar content={content} githubEditUrl={githubEditUrl} />
+				)}
 			</aside>
 		</main>
 	</body>

docs/src/layouts/SplashLayout.astro

@@ -1,7 +1,7 @@
 ---
-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;
 ---

docs/src/pages/de/themes.astro

@@ -5,6 +5,7 @@ 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 {
@@ -12,14 +13,14 @@ import components from '../../data/components.json';
 			grid-column-gap: 15px;
 			grid-row-gap: 15px;
 			grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+			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} />))}
+		{themes.featured.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Offizielle Vorlagen
@@ -27,7 +28,7 @@ import components from '../../data/components.json';
 		Astro pflegt verschiedene offizielle Vorlagen für Dokumentationssites, Portfolios und mehr.
 	</Markdown>
 	<div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
+		{themes.official.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Vorlagen aus der Community
@@ -35,7 +36,7 @@ import components from '../../data/components.json';
 		Sieh dir einige von unserer Community entwickelte Vorlagen an!
 	</Markdown>
 	<div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
+		{themes.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Vorgestellte Packages
@@ -43,10 +44,10 @@ import components from '../../data/components.json';
 		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} />))}
+		{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.
+		> Wir teilen hier regelmäßig unsere Favoriten aus dem #showcase-Channel.
 	</Markdown>
 </Layout>

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}">
+<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>
-

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}">
+<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>
-

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}">
+<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>
-

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}">
+<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>
-

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}">
+<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>
-

docs/src/pages/index.astro

@@ -6,8 +6,26 @@ import Layout from '../layouts/MainLayout.astro';
 	// 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'];
+	const KNOWN_LANGUAGES = [
-  let newLangWithRegion = (window.navigator.userLanguage || window.navigator.language || 'en-US').substr(0, 5);
+		'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';

docs/src/pages/ja/themes.astro

@@ -5,6 +5,7 @@ import {Markdown} from 'astro/components';
 import themes from '../../data/themes.json';
 import components from '../../data/components.json';
 ---
+
 <Layout content={{ title: 'テーマ' }} hideRightSidebar>
 	<style>
 		.card-grid {
@@ -12,14 +13,14 @@ import components from '../../data/components.json';
 			grid-column-gap: 15px;
 			grid-row-gap: 15px;
 			grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 		}
 	</style>
 	<Markdown>
 		## 注目のテーマ
 	</Markdown>
 	<div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
+		{themes.featured.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## 公式テーマ
@@ -27,7 +28,7 @@ import components from '../../data/components.json';
 		Astro では、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。
 	</Markdown>
 	<div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
+		{themes.official.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## コミュニティテーマ
@@ -35,7 +36,7 @@ import components from '../../data/components.json';
 		コミュニティが開発したテーマをご覧ください。
 	</Markdown>
 	<div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
+		{themes.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## 注目のパッケージ
@@ -43,10 +44,10 @@ import components from '../../data/components.json';
 		私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。
 	</Markdown>
 	<div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
+		{components.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		> 自分のテーマを紹介したい場合は、[Discord でシェアしてください！](https://astro.build/chat)  
-        `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。
+		> `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。
 	</Markdown>
 </Layout>

docs/src/pages/themes.astro

@@ -5,6 +5,7 @@ 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 {
@@ -12,14 +13,14 @@ import components from '../data/components.json';
 			grid-column-gap: 15px;
 			grid-row-gap: 15px;
 			grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+			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} />))}
+		{themes.featured.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Official Themes
@@ -27,7 +28,7 @@ import components from '../data/components.json';
 		Astro maintains several official themes for documentation sites, portfolios, and more.
 	</Markdown>
 	<div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
+		{themes.official.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Community Themes
@@ -35,7 +36,7 @@ import components from '../data/components.json';
 		Checkout some themes developed by our community!
 	</Markdown>
 	<div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
+		{themes.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## Featured Packages
@@ -43,10 +44,10 @@ import components from '../data/components.json';
 		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} />))}
+		{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.
+		> We'll often take our favorites from the `#showcase` channel and post them here.
 	</Markdown>
 </Layout>

docs/src/pages/zh-TW/themes.astro

@@ -5,6 +5,7 @@ import { Markdown } from 'astro/components';
 import themes from '../../data/themes.json';
 import components from '../../data/components.json';
 ---
+
 <Layout content={{ title: '佈景主題' }} hideRightSidebar>
 	<style>
 		.card-grid {
@@ -12,14 +13,14 @@ import components from '../../data/components.json';
 			grid-column-gap: 15px;
 			grid-row-gap: 15px;
 			grid-auto-flow: dense;
-            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 		}
 	</style>
 	<Markdown>
 		## 精選佈景主題
 	</Markdown>
 	<div class="card-grid">
-        {themes.featured.map((item)=>(<Card data={item} />))}
+		{themes.featured.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## 官方佈景主題
@@ -27,7 +28,7 @@ import components from '../../data/components.json';
 		Astro 維護的文件網站、作品集 ⋯ 等官方佈景主題。
 	</Markdown>
 	<div class="card-grid">
-        {themes.official.map((item)=>(<Card data={item} />))}
+		{themes.official.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## 社群佈景主題
@@ -35,7 +36,7 @@ import components from '../../data/components.json';
 		趕緊來看看社群開發的佈景主題！
 	</Markdown>
 	<div class="card-grid">
-        {themes.community.map((item)=>(<Card data={item} />))}
+		{themes.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		## 精選套件
@@ -43,10 +44,10 @@ import components from '../../data/components.json';
 		我們的套件生態持續成長！所有精選社群套件都可以在 [npm](https://www.npmjs.com/search?q=keywords%3Aastro-component) 發掘。
 	</Markdown>
 	<div class="card-grid">
-        {components.community.map((item)=>(<Card data={item} />))}
+		{components.community.map((item) => <Card data={item} />)}
 	</div>
 	<Markdown>
 		> 想要讓自己的作品成為精選嗎？[在 Discord 分享！](https://astro.build/chat)  
-        我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。
+		> 我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。
 	</Markdown>
 </Layout>

examples/blog-multiple-authors/src/components/MainHead.astro

@@ -13,33 +13,33 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
 ---
 
 <!-- Common -->
-<meta charset="UTF-8">
+<meta charset="UTF-8" />
 <title>{title}</title>
-<meta name="description" content={description}>
+<meta name="description" content={description} />
-<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
 <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
 <!-- Sitemap -->
-<link rel="sitemap" href="/sitemap.xml">
+<link rel="sitemap" href="/sitemap.xml" />
 <!-- RSS -->
-<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml">
+<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml" />
 
 <!-- Favicon -->
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
 <!-- SEO -->
-<link rel="canonical" href={canonicalURL}>
+<link rel="canonical" href={canonicalURL} />
 {next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
 {prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>}
 
 <!-- OpenGraph -->
-<meta property="og:title" content={title}>
+<meta property="og:title" content={title} />
-<meta property="og:description" content={description}>
+<meta property="og:description" content={description} />
 {image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)}
 
 <!-- Twitter -->
-<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'}>
+<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
-<meta name="twitter:site" content="@astro">
+<meta name="twitter:site" content="@astro" />
-<meta name="twitter:title" content={title}>
+<meta name="twitter:title" content={title} />
-<meta name="twitter:description" content={description}>
+<meta name="twitter:description" content={description} />
 {image && (<meta name="twitter:image" content={image}>)}

examples/blog-multiple-authors/src/components/Nav.astro

@@ -5,6 +5,17 @@ export interface Props {
 const { title } = Astro.props;
 ---
 
+<nav class="header">
+	<h1 class="title">Don’s Blog</h1>
+	<ul class="nav">
+		<li><a href="/">Home</a></li>
+		<li><a href="/posts">All Posts</a></li>
+		<li><a href="/authors/don">Author: Don</a></li>
+		<li><a href="/authors/sancho">Author: Sancho</a></li>
+		<li><a href="/about">About</a></li>
+	</ul>
+</nav>
+
 <style lang="scss">
 	.header {
 		text-align: center;
@@ -50,14 +61,3 @@ a {
 		margin-right: 0.75em;
 	}
 </style>
-
-<nav class="header">
-  <h1 class="title">Don’s Blog</h1>
-  <ul class="nav">
-    <li><a href="/">Home</a></li>
-    <li><a href="/posts">All Posts</a></li>
-    <li><a href="/authors/don">Author: Don</a></li>
-    <li><a href="/authors/sancho">Author: Sancho</a></li>
-    <li><a href="/about">About</a></li>
-  </ul>
-</nav>

examples/blog-multiple-authors/src/components/Pagination.astro

@@ -7,6 +7,13 @@ export interface Props {
 const { prevUrl, nextUrl } = Astro.props;
 ---
 
+<div class="wrapper">
+	<nav class="nav">
+		<a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
+		<a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
+	</nav>
+</div>
+
 <style lang="scss">
 	.nav {
 		display: flex;
@@ -22,7 +29,7 @@ const { prevUrl, nextUrl } = Astro.props;
 		text-transform: uppercase;
 		font-size: 0.8em;
 
-  &[href="#"] {
+		&[href='#'] {
 			display: none;
 		}
 	}
@@ -35,10 +42,3 @@ const { prevUrl, nextUrl } = Astro.props;
 		margin-left: auto;
 	}
 </style>
-
-<div class="wrapper">
-  <nav class="nav">
-    <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
-    <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
-  </nav>
-</div>

examples/blog-multiple-authors/src/components/PostPreview.astro

@@ -10,6 +10,18 @@ function formatDate(date) {
 }
 ---
 
+<article class="post">
+	<div class="data">
+		<h2>{post.title}</h2>
+		<a class="author" href={`/authors/${post.author}`}>{author.name}</a>
+		<time class="date" datetime={post.date}>{formatDate(post.date)}</time>
+		<p class="description">
+			{post.description}
+			<a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a>
+		</p>
+	</div>
+</article>
+
 <style lang="scss">
 	.post {
 		padding-top: 6rem;
@@ -51,16 +63,3 @@ time {
 		margin-bottom: 0.5em;
 	}
 </style>
-
-<article class="post">
-
-  <div class="data">
-    <h2>{post.title}</h2>
-    <a class="author" href={`/authors/${post.author}`}>{author.name}</a>
-    <time class="date" datetime={post.date}>{formatDate(post.date)}</time>
-    <p class="description">
-      {post.description}
-      <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a>
-    </p>
-  </div>
-</article>

examples/blog-multiple-authors/src/layouts/post.astro

@@ -10,7 +10,7 @@ let canonicalURL = Astro.request.canonicalURL;
 <html lang={content.lang || 'en'}>
 	<head>
 		<title>{content.title}</title>
-    <MainHead title={content.title} description={content.description} image={content.image} canonicalURL={canonicalURL} />
+		<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />
 		<style lang="scss">
 			.title {
 				margin-top: 4rem;
@@ -64,7 +64,7 @@ let canonicalURL = Astro.request.canonicalURL;
 		<main class="wrapper">
 			<h2 class="title">{content.title}</h2>
 			<p class="description">{content.description}</p>
-      <img class="img" src={content.image} alt="">
+			<img class="img" src={content.image} alt="" />
 			<article class="article">
 				<slot />
 			</article>
@@ -73,7 +73,6 @@ let canonicalURL = Astro.request.canonicalURL;
 			</footer>
 		</main>
 
-    <footer>
+		<footer></footer>
-    </footer>
 	</body>
 </html>

examples/blog-multiple-authors/src/pages/about.astro

@@ -2,19 +2,15 @@
 import MainHead from '../components/MainHead.astro';
 import Nav from '../components/Nav.astro';
 
-let title = "About";
+let title = 'About';
-let description = "About page of an example blog on Astro";
+let description = 'About page of an example blog on Astro';
 let canonicalURL = Astro.request.canonicalURL;
 ---
+
 <html lang="en">
 	<head>
-    <MainHead
+		<MainHead {title} {description} {canonicalURL} />
-      title={title}
-      description={description}
-      canonicalURL={canonicalURL}
-    />
 		<style lang="scss">
-
 			.text {
 				padding-bottom: 6rem;
 
@@ -49,18 +45,26 @@ let canonicalURL = Astro.request.canonicalURL;
 		</style>
 	</head>
 	<body>
-    <Nav title={title} />
+		<Nav {title} />
 
 		<main class="wrapper">
 			<h2 class="title">{title}</h2>
 			<div class="hero">
-        <img class="hero-img" src="/images/chapter-01.jpg" alt="">
+				<img class="hero-img" src="/images/chapter-01.jpg" alt="" />
 			</div>
 			<div class="text">
-        <p>The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections from Motteaux.”</p>
+				<p>
-        <p>See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these woodcuts and steel engravings well match Quixote’s dreams.</p>
+					The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark,
+					illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections
+					from Motteaux.”
+				</p>
+				<p>
+					See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach
+					the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by
+					utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others
+					feel these woodcuts and steel engravings well match Quixote’s dreams.
+				</p>
 			</div>
 		</main>
-
 	</body>
 </html>

examples/blog-multiple-authors/src/pages/authors/[author].astro

@@ -1,5 +1,4 @@
 ---
-
 import MainHead from '../../components/MainHead.astro';
 import Nav from '../../components/Nav.astro';
 import PostPreview from '../../components/PostPreview.astro';
@@ -8,8 +7,8 @@ import authorData from '../../data/authors.json';
 
 export function getStaticPaths() {
 	const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md');
-  let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))];
+	let allAuthorsUnique = [...new Set(allPosts.map((p) => p.author))];
-  return allAuthorsUnique.map(author => ({params: {author}, props: {allPosts}}));
+	return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } }));
 }
 
 interface MarkdownFrontmatter {
@@ -25,21 +24,14 @@ const title = 'Don’s Blog';
 const description = 'An example blog on Astro';
 
 /** filter posts by author, sort by date */
-const posts = allPosts
+const posts = allPosts.filter((post) => post.author === params.author).sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
-  .filter((post) => post.author === params.author)
-  .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
 const author = authorData[posts[0].author];
 ---
 
 <html lang="en">
 	<head>
 		<title>{title}</title>
-    <MainHead
+		<MainHead {title} {description} image={posts[0].image} canonicalURL={canonicalURL.toString()} />
-      title={title}
-      description={description}
-      image={posts[0].image}
-      canonicalURL={canonicalURL.toString()}
-    />
 
 		<style lang="scss">
 			.title {
@@ -76,7 +68,7 @@ const author = authorData[posts[0].author];
 	</head>
 
 	<body>
-    <Nav title={title} />
+		<Nav {title} />
 
 		<main class="wrapper">
 			<h2 class="title">

examples/blog-multiple-authors/src/pages/index.astro

@@ -28,19 +28,15 @@ let firstPage = allPosts.slice(0, 2);
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<title>{title}</title>
-    <MainHead
+		<MainHead {title} {description} image={allPosts[0].image} {canonicalURL} />
-      title={title}
-      description={description}
-      image={allPosts[0].image}
-      canonicalURL={canonicalURL}
-    />
 	</head>
 
 	<body>
-    <Nav title={title} />
+		<Nav {title} />
 
 		<main class="wrapper">
 			{allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}

examples/blog-multiple-authors/src/pages/posts/[...page].astro

@@ -39,21 +39,13 @@ interface MarkdownFrontmatter {
 	title: string;
 }
 
-
 const { page } = Astro.props;
 ---
 
 <html lang="en">
 	<head>
 		<title>{title}</title>
-    <MainHead
+		<MainHead {title} {description} image={page.data[0].image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} />
-      title={title}
-      description={description}
-      image={page.data[0].image}
-      canonicalURL={canonicalURL.toString()}
-      prev={page.url.prev}
-      next={page.url.next}
-    />
 
 		<style lang="scss">
 			.title {
@@ -73,7 +65,7 @@ const { page } = Astro.props;
 	</head>
 
 	<body>
-    <Nav title={title} />
+		<Nav {title} />
 
 		<main class="wrapper">
 			<h2 class="title">All Posts</h2>

examples/blog/src/components/Author.astro

@@ -6,11 +6,13 @@ export interface Props {
 
 const { name, href } = Astro.props;
 ---
+
+<div class="author">
+	<p><a {href}>{name}</a></p>
+</div>
+
 <style>
 	.author {
 		margin-bottom: 0.75rem;
 	}
 </style>
-<div class="author">
-  <p><a href={href}>{name}</a></p>
-</div>

examples/blog/src/components/BaseHead.astro

@@ -12,7 +12,6 @@ const { title, description, permalink } = Astro.props;
 <meta name="viewport" content="width=device-width" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-
 <!-- Primary Meta Tags -->
 <title>{title}</title>
 <meta name="title" content={title} />
@@ -34,4 +33,4 @@ const { title, description, permalink } = Astro.props;
 
 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" />

examples/blog/src/components/BlogHeader.astro

@@ -1,3 +1,36 @@
+<header class="wrapper">
+	<article>
+		<h1>
+			<a href="/">
+				<svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<style>
+						#flame {
+							fill: #ff5d01;
+						}
+						#a {
+							fill: #000014;
+						}
+					</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>
+				<span>My Blog</span>
+			</a>
+		</h1>
+	</article>
+</header>
+
 <style>
 	header {
 		padding-top: 1rem;
@@ -55,36 +88,3 @@ h1 a {
 		display: inline-flex;
 	}
 </style>
-
-<header class="wrapper">
-  <article>
-    <h1>
-      <a href="/">
-        <svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <style>
-            #flame {
-              fill: #ff5d01;
-            }
-            #a {
-              fill: #000014;
-            }
-          </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>
-        <span>My Blog</span>
-      </a>
-    </h1>
-  </article>
-</header>

examples/blog/src/components/BlogPostPreview.astro

@@ -5,6 +5,7 @@ export interface Props {
 
 const { post } = Astro.props;
 ---
+
 <article class="post-preview">
 	<header>
 		<p class="publish-date">{post.publishDate}</p>

examples/blog/src/components/Logo.astro

@@ -1,12 +1,42 @@
 <svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z" fill="white" />
+	<path
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="#FF5D01" />
+		fill-rule="evenodd"
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="url(#paint1_linear)" />
+		clip-rule="evenodd"
-  <path d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z" fill="white" />
+		d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z"
-  <path d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z" fill="white" />
+		fill="white"
-  <path d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z" fill="white" />
+	/>
-  <path d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z" fill="white" />
+	<path
-  <path d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z" fill="white" />
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
+		fill="#FF5D01"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
+		fill="url(#paint1_linear)"
+	/>
+	<path
+		d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z"
+		fill="white"
+	/>
+	<path
+		d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z"
+		fill="white"
+	/>
+	<path
+		d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z"
+		fill="white"
+	/>
+	<path
+		d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z"
+		fill="white"
+	/>
+	<path
+		d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z"
+		fill="white"
+	/>
 	<defs>
 		<linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse">
 			<stop stop-color="#FF1639" />

examples/blog/src/layouts/BlogPost.astro

@@ -9,17 +9,16 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
 
 <html lang={content.lang || 'en'}>
 	<head>
-    <BaseHead title={title} description={description} permalink={permalink} />
+		<BaseHead {title} {description} {permalink} />
 		<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
 	</head>
 
 	<body>
 		<BlogHeader />
 		<div class="wrapper">
-      <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}>
+			<BlogPost {title} {author} {heroImage} {publishDate} {alt}>
 				<slot />
 			</BlogPost>
 		</div>
 	</body>
 </html>
-

examples/blog/src/pages/index.astro

@@ -24,9 +24,10 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
-    <BaseHead title={title} description={description} permalink={permalink} />
+		<BaseHead {title} {description} {permalink} />
 		<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
 
 		<style>
@@ -74,7 +75,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 					<p>{description}</p>
 				</section>
 				<section aria-label="Blog post list">
-          {allPosts.map(p => <BlogPostPreview post={p} />)}
+					{allPosts.map((p) => <BlogPostPreview post={p} />)}
 				</section>
 			</main>
 		</div>

examples/component/demo/src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import * as Component from '@example/my-component'
+import * as Component from '@example/my-component';
 ---
-<html lang="en">
 
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -18,12 +18,7 @@ import * as Component from '@example/my-component'
 	</head>
 
 	<body>
-	<Component.Heading>
+		<Component.Heading>Welcome to Astro</Component.Heading>
-		Welcome to Astro
+		<Component.Button>Plain Button</Component.Button>
-	</Component.Heading>
-	<Component.Button>
-		Plain Button
-	</Component.Button>
 	</body>
-
 </html>

examples/component/packages/my-component/Button.astro

@@ -1,15 +1,13 @@
 ---
 export interface Props extends Record<any, any> {
-	type?: string
+	type?: string;
 }
 
-const {
+const { type, ...props } = {
-	type,
+	...Astro.props,
-	...props
+} as Props;
-} = {
-	...Astro.props
-} as Props
 
-props.type = type || 'button'
+props.type = type || 'button';
 ---
+
 <button {...props}><slot /></button>

examples/component/packages/my-component/Heading.astro

@@ -1,18 +1,15 @@
 ---
 export interface Props extends Record<any, any> {
-	level?: number | string
+	level?: number | string;
-	role?: string
+	role?: string;
 }
 
-const {
+const { level, role, ...props } = {
-	level,
+	...Astro.props,
-	role,
+} as Props;
-	...props
-} = {
-	...Astro.props
-} as Props
 
-props.role = role || 'heading'
+props.role = role || 'heading';
-props['aria-level'] = level || '1'
+props['aria-level'] = level || '1';
 ---
+
 <h {...props}><slot /></h>

examples/docs/src/components/Footer/AvatarList.astro

@@ -1,6 +1,6 @@
 ---
 // fetch all commits for just this page's path
-const path = "docs/" + Astro.props.path;
+const path = 'docs/' + Astro.props.path;
 const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
 const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
 
@@ -8,18 +8,16 @@ async function getCommits(url) {
 	try {
 		const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
 		if (!token) {
-      throw new Error(
+			throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.');
-        'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
-      );
 		}
 
-    const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
+		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
 
 		const res = await fetch(url, {
-      method: "GET",
+			method: 'GET',
 			headers: {
 				Authorization: auth,
-        "User-Agent": "astro-docs/1.0",
+				'User-Agent': 'astro-docs/1.0',
 			},
 		});
 
@@ -59,18 +57,24 @@ 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>
+			<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>}
+	{additionalContributors > 0 && (
+		<span>
+			<a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a>
+		</span>
+	)}
 	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
 </div>
 
@@ -84,10 +88,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 		/* 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(
+		grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
-    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 */
@@ -99,10 +100,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 		.avatar-list {
 			/* We create 1 extra cell to enable the computed 
     width to match the final visual width */
-    grid-template-columns: repeat(
+			grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
-      calc(var(--avatar-count) + 1),
-      calc(var(--avatar-size) / 1.75)
-    );
 		}
 	}
 
@@ -146,6 +144,6 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 	}
 
 	.contributors > * + * {
-  margin-left: .75rem;
+		margin-left: 0.75rem;
 	}
 </style>

examples/docs/src/components/Footer/Footer.astro

@@ -4,7 +4,7 @@ const { path } = Astro.props;
 ---
 
 <footer>
-  <AvatarList path={path} />
+	<AvatarList {path} />
 </footer>
 
 <style>

examples/docs/src/components/HeadCommon.astro

@@ -1,6 +1,6 @@
 <!-- Global Metadata -->
-<meta charset="utf-8">
+<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width" />
 
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
@@ -13,18 +13,18 @@
 <link rel="stylesheet" href={Astro.resolve('../styles/index.css')} />
 
 <!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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 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) {
+	if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
 		root.classList.add('theme-dark');
 	} else {
 		root.classList.remove('theme-dark');

examples/docs/src/components/HeadSEO.astro

@@ -1,16 +1,17 @@
 ---
 import { SITE, OPEN_GRAPH } from '../config.ts';
 export interface Props {
-  content: any,
+	content: any;
-  site: any,
+	site: any;
-  canonicalURL: URL | string,
+	canonicalURL: URL | string;
-};
+}
 const { content = {}, canonicalURL } = Astro.props;
 const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
 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;
 ---
+
 <!-- Page Metadata -->
 <link rel="canonical" href={canonicalURL} />
 

examples/docs/src/components/Header/AstroLogo.astro

@@ -1,6 +1,7 @@
 ---
 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 {
@@ -11,8 +12,16 @@ const {size} = Astro.props;
 		}
 	</style>
 	<title>Logo</title>
-    <path id="a" fill-rule="evenodd" clip-rule="evenodd"
+	<path
-        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" />
+		id="a"
-    <path id="flame" fill-rule="evenodd" clip-rule="evenodd"
+		fill-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" />
+		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>

examples/docs/src/components/Header/Header.astro

@@ -5,11 +5,34 @@ import AstroLogo from './AstroLogo.astro';
 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';
 
 const { currentPage } = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);
 ---
+
+<header>
+	<SkipToContent />
+	<nav class="nav-wrapper" title="Top Navigation">
+		<div class="menu-toggle">
+			<SidebarToggle client:idle />
+		</div>
+		<div class="logo flex">
+			<AstroLogo size={40} />
+			<a href="/">
+				<h1>Documentation</h1>
+			</a>
+		</div>
+		<div style="flex-grow: 1;"></div>
+		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
+		{CONFIG.ALGOLIA && (
+			<div class="search-item">
+				<Search client:idle />
+			</div>
+		)}
+	</nav>
+</header>
+
 <style>
 	header {
 		z-index: 11;
@@ -24,7 +47,6 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		top: 0;
 	}
 
-
 	.logo {
 		display: flex;
 		overflow: hidden;
@@ -113,20 +135,3 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		}
 	}
 </style>
-<header>
-    <SkipToContent />
-    <nav class="nav-wrapper" title="Top Navigation">
-    <div class="menu-toggle">
-        <SidebarToggle client:idle/>
-    </div>
-    <div class="logo flex">
-        <AstroLogo size={40} />
-        <a href="/">
-          <h1>Documentation</h1>
-        </a>
-    </div>
-    <div style="flex-grow: 1;"></div>
-    {KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
-    {CONFIG.ALGOLIA && <div class="search-item"><Search client:idle /></div>}
-    </nav>
-</header>

examples/docs/src/components/Header/SkipToContent.astro

@@ -1,3 +1,5 @@
+<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a>
+
 <style>
 	.skiplink,
 	.skiplink:focus,
@@ -18,4 +20,3 @@
 		outline-offset: 0;
 	}
 </style>
-<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a>

examples/docs/src/components/LeftSidebar/LeftSidebar.astro

@@ -13,18 +13,21 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 	return col;
 }, []);
-
 ---
 
 <nav aria-labelledby="grid-left">
 	<ul class="nav-groups">
-    {sidebarSections.map(section => (
+		{sidebarSections.map((section) => (
 			<li>
 				<div class="nav-group">
 					<h2 class="nav-group-title">{section.text}</h2>
 					<ul>
-            {section.children.map(child => (
+						{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>
+							<li class="nav-link">
+								<a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>
+									{child.text}
+								</a>
+							</li>
 						))}
 					</ul>
 				</div>
@@ -36,7 +39,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 <script>
 	window.addEventListener('DOMContentLoaded', (event) => {
 		var target = document.querySelector('[aria-current="page"]');
-    if (target && (target.offsetTop > (window.innerHeight - 100))) {
+		if (target && target.offsetTop > window.innerHeight - 100) {
 			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
 		}
 	});
@@ -69,7 +72,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 
 	.nav-group-title {
-    font-size: 1.0rem;
+		font-size: 1rem;
 		font-weight: 700;
 		padding: 0.1rem 1rem;
 		text-transform: uppercase;
@@ -77,7 +80,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 	}
 
 	.nav-link a {
-    font-size: 1.0rem;
+		font-size: 1rem;
 		margin: 1px;
 		padding: 0.3rem 1rem;
 		font: inherit;
@@ -90,13 +93,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 		background-color: var(--theme-bg-hover);
 	}
 
-  .nav-link a[aria-current="page"] {
+	.nav-link a[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"] {
+	:global(:root.theme-dark) .nav-link a[aria-current='page'] {
 		color: hsla(var(--color-base-white), 100%, 1);
 	}
 
@@ -105,5 +108,4 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
 			padding: 0;
 		}
 	}
-
 </style>

examples/docs/src/components/PageContent/PageContent.astro

@@ -6,6 +6,20 @@ const {content, githubEditUrl} = Astro.props;
 const title = content.title;
 const headers = content.astro.headers;
 ---
+
+<article id="article" class="content">
+	<section class="main-section">
+		<h1 class="content-title" id="overview">{title}</h1>
+		<nav class="block sm:hidden">
+			<TableOfContents client:media="(max-width: 50em)" {headers} />
+		</nav>
+		<slot />
+	</section>
+	<nav class="block sm:hidden">
+		<MoreMenu editHref={githubEditUrl} />
+	</nav>
+</article>
+
 <style>
 	.content {
 		padding: 0;
@@ -28,15 +42,3 @@ const headers = content.astro.headers;
 		}
 	}
 </style>
-<article id="article" class="content">
-    <section class="main-section">
-        <h1 class="content-title" id="overview">{title}</h1>
-        <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>
-</article>

examples/docs/src/components/RightSidebar/MoreMenu.astro

@@ -2,19 +2,12 @@
 import ThemeToggleButton from './ThemeToggleButton.tsx';
 import * as CONFIG from '../../config';
 const { editHref } = Astro.props;
-const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
+const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
 ---
-<style>
+
-  .edit-on-github {
-    text-decoration: none;
-    font: inherit;
-    color: inherit;
-    font-size: 1rem;
-  }
-</style>
 {showMoreSection && <h2 class="heading">More</h2>}
 <ul>
-  {editHref &&
+	{editHref && (
 		<li class={`header-link depth-2`}>
 			<a class="edit-on-github" href={editHref} target="_blank">
 				<svg
@@ -37,8 +30,8 @@ const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
 				<span>Edit this page</span>
 			</a>
 		</li>
-  }
+	)}
-  {CONFIG.COMMUNITY_INVITE_URL && 
+	{CONFIG.COMMUNITY_INVITE_URL && (
 		<li class={`header-link depth-2`}>
 			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
 				<svg
@@ -61,8 +54,17 @@ const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
 				<span>Join our community</span>
 			</a>
 		</li>
-  }
+	)}
 </ul>
 <div style="margin: 2rem 0; text-align: center;">
 	<ThemeToggleButton client:visible />
 </div>
+
+<style>
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
+</style>

examples/docs/src/components/RightSidebar/RightSidebar.astro

@@ -4,6 +4,14 @@ import MoreMenu from './MoreMenu.astro';
 const { content, githubEditUrl } = Astro.props;
 const headers = content.astro.headers;
 ---
+
+<nav class="sidebar-nav" aria-labelledby="grid-right">
+	<div class="sidebar-nav-inner">
+		<TableOfContents client:media="(min-width: 50em)" {headers} />
+		<MoreMenu editHref={githubEditUrl} />
+	</div>
+</nav>
+
 <style>
 	.sidebar-nav {
 		width: 100%;
@@ -17,9 +25,3 @@ const headers = content.astro.headers;
 		overflow: auto;
 	}
 </style>
-<nav class="sidebar-nav" aria-labelledby="grid-right">
-  <div class="sidebar-nav-inner">
-    <TableOfContents client:media="(min-width: 50em)" headers={headers} />
-    <MoreMenu editHref={githubEditUrl} />
-  </div>
-</nav>

examples/docs/src/layouts/MainLayout.astro

@@ -1,17 +1,17 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
+import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from "../components/HeadSEO.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 * as CONFIG from "../config";
+import * as CONFIG from '../config';
 
 const { content = {} } = Astro.props;
 const currentPage = Astro.request.url.pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
-const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + currentFile);
+const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
 ---
 
 <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
@@ -104,18 +104,18 @@ const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + curren
 	</head>
 
 	<body>
-    <Header currentPage={currentPage} />
+		<Header {currentPage} />
 		<main class="layout">
 			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-        <LeftSidebar currentPage={currentPage} />
+				<LeftSidebar {currentPage} />
 			</aside>
 			<div id="grid-main">
-        <PageContent content={content} githubEditUrl={githubEditUrl}>
+				<PageContent {content} {githubEditUrl}>
 					<slot />
 				</PageContent>
 			</div>
 			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        <RightSidebar content={content} githubEditUrl={githubEditUrl} />
+				<RightSidebar {content} {githubEditUrl} />
 			</aside>
 		</main>
 	</body>

examples/fast-build/src/pages/index.astro

@@ -8,7 +8,9 @@ import Greeting from '../components/Greeting.vue';
 	<head>
 		<title>Demo app</title>
 		<style>
-    h1 { color: salmon; }
+			h1 {
+				color: salmon;
+			}
 		</style>
 	</head>
 	<body>

examples/framework-alpine/src/pages/index.astro

@@ -1,10 +1,11 @@
 ---
 // Component Imports
-import Counter from '../components/Counter.astro'
+import Counter from '../components/Counter.astro';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/framework-lit/src/components/Lorem.astro

@@ -1,31 +1,58 @@
-
+<p>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit.
+	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula
-
+	rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio.
-Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur.
+	Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh
-
+	posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit.
-Mauris laoreet sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante.
+	Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna
-
+	finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue
-Morbi cursus arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan.
+	mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
-
+	sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo
-Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere.
+	in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus
-
+	arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id
-Integer mi quam, faucibus et aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat.
+	ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
-
+	varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus
-Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu.
+	sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus.
-
+	Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce
-Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus. Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a.
+	at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies
-
+	luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et
-In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus.
+	aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum
-
+	iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a
-In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia. Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis.
+	velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus
-
+	sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel
-Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio.
+	neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo
-
+	lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc
-Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus elementum sed.
+	vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
-
+	Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium
-In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida neque.
+	quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet
-
+	congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi
-Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate, eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan. Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus.
+	non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum
-
+	iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat
-Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo.
+	laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec
+	dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia.
+	Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate
+	felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus
+	id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec
+	vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit
+	fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor
+	eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui
+	sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim
+	consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod
+	sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum
+	porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin
+	tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus
+	tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac
+	elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus
+	elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
+	blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in
+	laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat.
+	Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida
+	neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate,
+	eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan.
+	Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta
+	ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia
+	mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum
+	tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque
+	ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis
+	nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend
+	molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo.
 </p>

examples/framework-lit/src/pages/index.astro

@@ -4,7 +4,7 @@ import '../components/Test.js';
 import '../components/Counter.js';
 ---
 
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
@@ -12,8 +12,8 @@ import '../components/Counter.js';
 	</head>
 	<body>
 		<h1>Test app</h1>
-    <my-counter client:load />
+		<my-counter client:load></my-counter>
 		<Lorem />
-    <calc-add num={33} />
+		<calc-add num={33}></calc-add>
 	</body>
 </html>

examples/framework-multiple/src/pages/index.astro

@@ -11,16 +11,16 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
-    <meta charset="utf-8">
+		<meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width">
+		<meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}>
+		<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} />
 	</head>
 	<body>
 		<main>
-
 			<react.Counter client:visible>
 				<h1>Hello React!</h1>
 				<p>What's up?</p>
@@ -45,7 +45,6 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
 			<A />
 
 			<Renamed />
-
 		</main>
 	</body>
 </html>

examples/framework-preact/src/pages/index.astro

@@ -1,10 +1,11 @@
 ---
 // Component Imports
-import Counter from '../components/Counter.tsx'
+import Counter from '../components/Counter.tsx';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/framework-react/src/pages/index.astro

@@ -1,13 +1,14 @@
 ---
 // Component Imports
-import Counter from '../components/Counter.jsx'
+import Counter from '../components/Counter.jsx';
 const someProps = {
 	count: 0,
-}
+};
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/framework-solid/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Counter from '../components/Counter.jsx';
 ---
+
 <html>
 	<head>
 		<meta charset="utf-8" />

examples/framework-svelte/src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
 // Component Imports
-import Counter from '../components/Counter.svelte'
+import Counter from '../components/Counter.svelte';
-
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/framework-vue/src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
 // Component Imports
-import Counter from '../components/Counter.vue'
+import Counter from '../components/Counter.vue';
-
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/minimal/src/pages/index.astro

@@ -3,7 +3,6 @@
 ---
 
 <html lang="en">
-
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
@@ -18,5 +17,4 @@
 	<body>
 		<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
 	</body>
-
 </html>

examples/portfolio-svelte/src/components/MainHead.astro

@@ -2,12 +2,12 @@
 const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
 ---
 
-<meta charset="UTF-8">
+<meta charset="UTF-8" />
-<meta name="description" property="og:description" content={description}>
+<meta name="description" property="og:description" content={description} />
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width" />
 <title>{title}</title>
 
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}>
+<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')} />
-<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet" />

examples/portfolio-svelte/src/layouts/project.astro

@@ -6,6 +6,7 @@ import Nav from '../components/Nav.svelte';
 
 const { content } = Astro.props;
 ---
+
 <html lang={content.lang || 'en'}>
 	<head>
 		<MainHead title={content.title} description={content.description} />
@@ -73,14 +74,12 @@ const { content } = Astro.props;
 		</header>
 		<div class="leadIn">
 			<div class="wrapper pt8 pb8 mb8 tac">
-        {content.tags.map((t) => (
+				{content.tags.map((t) => <span class="tag">{t}</span>)}
-          <span class="tag">{t}</span>
-        ))}
 				<h3 class="tagline">{content.description}</h3>
 			</div>
 		</div>
 		<div class="wrapper wrapper__readable">
-      <div class="content"><slot></slot></div>
+			<div class="content"><slot /></div>
 		</div>
 		<footer class="tac mt6">
 			<a href="/projects">

examples/portfolio-svelte/src/pages/404.astro

@@ -2,7 +2,6 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer.svelte';
 import Nav from '../components/Nav.svelte';
-
 ---
 
 <html lang="en">
@@ -10,11 +9,11 @@ import Nav from '../components/Nav.svelte';
 		<MainHead title="Not Found" />
 	</head>
 	<body>
-    <Nav />
+		<nav />
 		<div class="wrapper mt4 mb4">
 			<h1>Page Not Found</h1>
 			<p>Not found</p>
 		</div>
-    <Footer />
+		<footer />
 	</body>
 </html>

examples/portfolio-svelte/src/pages/about.astro

@@ -2,7 +2,6 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer.svelte';
 import Nav from '../components/Nav.svelte';
-
 ---
 
 <html lang="en">

examples/portfolio-svelte/src/pages/index.astro

@@ -13,6 +13,7 @@ const featuredProject = projects[0];
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." />
@@ -196,8 +197,8 @@ const featuredProject = projects[0];
         https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w,"
 				sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
 			/>
-      <div class="gradient" />
+			<div class="gradient"></div>
-      <div class="gradient2" />
+			<div class="gradient2"></div>
 			<div class="overlay">
 				<h1 class="title">
 					<small class="subtitle">The personal site of </small>Jeanine White
@@ -231,9 +232,7 @@ const featuredProject = projects[0];
 					<h3 class="sectionTitle">About me</h3>
 					<p class="bio">
 						<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
-            <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow">
+						<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a>
-              Astro
-            </a>
 						, a new way to build static sites. This is just an example template for you to modify.
 					</p>
 					<p>

examples/portfolio-svelte/src/pages/projects.astro

@@ -28,9 +28,7 @@ const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md')
 		<div class="wrapper">
 			<h1 class="title mt4 mb4">All Projects</h1>
 			<div class="grid">
-        {projects.map((project) => (
+				{projects.map((project) => <PortfolioPreview project={project} />)}
-          <PortfolioPreview project={project} />
-        ))}
 			</div>
 		</div>
 		<Footer />

examples/portfolio/src/components/MainHead.astro

@@ -2,12 +2,12 @@
 const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
 ---
 
-<meta charset="UTF-8">
+<meta charset="UTF-8" />
-<meta name="description" property="og:description" content={description}>
+<meta name="description" property="og:description" content={description} />
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width" />
 <title>{title}</title>
 
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}>
+<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')} />
-<link rel="preconnect" href="https://fonts.gstatic.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet" />

examples/portfolio/src/layouts/project.astro

@@ -6,6 +6,7 @@ import Nav from '../components/Nav/index.jsx';
 
 const { content } = Astro.props;
 ---
+
 <html lang={content.lang || 'en'}>
 	<head>
 		<MainHead title={content.title} description={content.description} />
@@ -73,14 +74,12 @@ const { content } = Astro.props;
 		</header>
 		<div class="leadIn">
 			<div class="wrapper pt8 pb8 mb8 tac">
-        {content.tags.map((t) => (
+				{content.tags.map((t) => <span class="tag">{t}</span>)}
-          <span class="tag">{t}</span>
-        ))}
 				<h3 class="tagline">{content.description}</h3>
 			</div>
 		</div>
 		<div class="wrapper wrapper__readable">
-      <div class="content"><slot></slot></div>
+			<div class="content"><slot /></div>
 		</div>
 		<footer class="tac mt6">
 			<a href="/projects">

examples/portfolio/src/pages/404.astro

@@ -2,7 +2,6 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer/index.jsx';
 import Nav from '../components/Nav/index.jsx';
-
 ---
 
 <html lang="en">
@@ -10,11 +9,11 @@ import Nav from '../components/Nav/index.jsx';
 		<MainHead title="Not Found" />
 	</head>
 	<body>
-    <Nav />
+		<nav />
 		<div class="wrapper mt4 mb4">
 			<h1>Page Not Found</h1>
 			<p>Not found</p>
 		</div>
-    <Footer />
+		<footer />
 	</body>
 </html>

examples/portfolio/src/pages/about.astro

@@ -2,7 +2,6 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer/index.jsx';
 import Nav from '../components/Nav/index.jsx';
-
 ---
 
 <html lang="en">

examples/portfolio/src/pages/index.astro

@@ -7,12 +7,13 @@ import Footer from '../components/Footer/index.jsx';
 import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
 
 // Data Fetching: List all Markdown posts in the repo.
-const projects = Astro.fetchContent("./project/**/*.md");
+const projects = Astro.fetchContent('./project/**/*.md');
 const featuredProject = projects[0];
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." />
@@ -192,7 +193,7 @@ const featuredProject = projects[0];
 				src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
 				srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w"
 				sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
-      >
+			/>
 			<div class="gradient"></div>
 			<div class="gradient2"></div>
 			<div class="overlay">
@@ -222,9 +223,8 @@ const featuredProject = projects[0];
 					<h3 class="sectionTitle">About me</h3>
 					<p class="bio">
 						<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
-            <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow">
+						<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a>, a new way to build static sites. This is just an example template for you to
-              Astro
+						modify.
-            </a>, a new way to build static sites. This is just an example template for you to modify.
 					</p>
 					<p>
 						<a href="/about">Read more</a>

examples/portfolio/src/pages/projects.astro

@@ -28,9 +28,7 @@ const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md')
 		<div class="wrapper">
 			<h1 class="title mt4 mb4">All Projects</h1>
 			<div class="grid">
-        {projects.map((project) => (
+				{projects.map((project) => <PortfolioPreview project={project} />)}
-          <PortfolioPreview project={project} />
-        ))}
 			</div>
 		</div>
 		<Footer />

examples/starter/src/components/Tour.astro

@@ -1,6 +1,7 @@
 ---
 import { Markdown } from 'astro/components';
 ---
+
 <article>
 	<div class="banner">
 		<p><strong>🧑‍🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p>
@@ -38,7 +39,6 @@ import { Markdown } from 'astro/components';
 		<h2>👀 Want to learn more?</h2>
 		<p>Feel free to check <a href="https://github.com/withastro/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p>
 	</section>
-
 </article>
 
 <style>

examples/starter/src/pages/index.astro

@@ -20,7 +20,6 @@ let title = 'My Astro Site';
 	<title>{title}</title>
 
 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    
 	<link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
 	<link rel="stylesheet" href={Astro.resolve('../styles/home.css')}>
 
@@ -45,13 +44,16 @@ let title = 'My Astro Site';
 		<Tour />
 
 		<!--
-           - You can also use imported framework components directly in your markup!
+
-           -
+		You can also use imported framework components directly in your markup!
-           - Note: by default, these components are NOT interactive on the client.
+		
-           - The `:visible` directive tells Astro to make it interactive.
+		Note: by default, these components are NOT interactive on the client.
-           -
+		The `:visible` directive tells Astro to make it interactive.
-           - See https://docs.astro.build/core-concepts/component-hydration/ 
+		
+		See https://docs.astro.build/core-concepts/component-hydration/ 
+
 		-->
+
 		<!-- ASTRO:COMPONENT_MARKUP -->
 	</main>
 </body>

examples/subpath/src/pages/index.astro

@@ -1,13 +1,12 @@
 ---
-import Time from '../components/Time.jsx'
+import Time from '../components/Time.jsx';
 ---
 
 <html lang="en">
-
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-	<link rel="stylesheet" href={Astro.resolve('../styles/main.scss')}>
+		<link rel="stylesheet" href={Astro.resolve('../styles/main.scss')} />
 		<meta name="viewport" content="width=device-width" />
 		<title>Welcome to Astro</title>
 	</head>
@@ -28,5 +27,4 @@ import Time from '../components/Time.jsx'
 			</figure>
 		</article>
 	</body>
-
 </html>

examples/with-markdown-plugins/src/layouts/main.astro

@@ -9,7 +9,7 @@ const { content } = Astro.props;
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
 		<title>{content.title}</title>
-    <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
+		<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
 		<style>
 			.nav {
 				border-bottom: 1px solid #ccc;

examples/with-markdown-plugins/src/pages/about.astro

@@ -1,9 +1,9 @@
 ---
 import { Markdown } from 'astro/components';
-import MainLayout from '../layouts/main.astro'
+import MainLayout from '../layouts/main.astro';
 ---
 
-<MainLayout content={{ title: "About" }}>
+<MainLayout content={{ title: 'About' }}>
 	<Markdown>
 		# About
 

examples/with-markdown/src/layouts/main.astro

@@ -4,12 +4,12 @@ const { content } = Astro.props;
 
 <html lang={content.lang || 'en'}>
 	<head>
-    <meta charset="utf-8">
+		<meta charset="utf-8" />
 
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
 		<title>{content.title}</title>
-    <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
+		<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
 	</head>
 	<body>
 		<slot />

examples/with-markdown/src/pages/external.astro

@@ -9,7 +9,9 @@ const content = `Markdown *content* to render`;
 <Layout content={{ title }}>
 	<main>
 		<div>
-      <Markdown {content} />
+			<Markdown {content}>
+
+			</Markdown>
 			<p>Some other stuff</p>
 		</div>
 		<p>Lastly...</p>

examples/with-markdown/src/pages/index.astro

@@ -18,6 +18,7 @@ const items = ['A', 'B', 'C'];
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <Layout content={{ title }}>
 	<Markdown>
 		# Introducing {title}
@@ -60,6 +61,5 @@ const items = ['A', 'B', 'C'];
 
 		const thing = new Something();
 		```
-
 	</Markdown>
 </Layout>

examples/with-nanostores/src/pages/index.astro

@@ -9,16 +9,17 @@ import AdminsSolid from '../components/AdminsSolid.jsx';
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
-    <meta charset="UTF-8">
+		<meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width">
+		<meta name="viewport" content="width=device-width" />
 		<title>Astro</title>
 
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-    <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
+		<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}>
+		<link rel="stylesheet" href={Astro.resolve('../styles/home.css')} />
 
 		<style>
 			header {
@@ -33,9 +34,11 @@ import AdminsSolid from '../components/AdminsSolid.jsx';
 		<main>
 			<header>
 				<div>
-                <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+					<img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" />
-                <h1>Welcome to <a href="https://astro.build/">Astro</a> -
+					<h1>
-                <a href="https://github.com/nanostores/nanostores">nanostores</a></h1>
+						Welcome to <a href="https://astro.build/">Astro</a> -
+						<a href="https://github.com/nanostores/nanostores">nanostores</a>
+					</h1>
 				</div>
 			</header>
 			<AdminsReact client:load />

examples/with-tailwindcss/src/components/Button.astro

@@ -1,6 +1,10 @@
 ---
 let { type = 'button' } = Astro.props;
 ---
-<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" type={type}>
+
+<button
+	class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+	{type}
+>
 	<slot />
 </button>

examples/with-tailwindcss/src/pages/index.astro

@@ -5,12 +5,13 @@ import Button from '../components/Button.astro';
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
+
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<title>Astro + TailwindCSS</title>
-    <link rel="stylesheet" type="text/css" href={Astro.resolve("../styles/global.css")}>
+		<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} />
 	</head>
 
 	<body>

examples/with-vite-plugin-pwa/src/pages/index.astro

@@ -2,7 +2,6 @@
 ---
 
 <html lang="en">
-
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
@@ -12,7 +11,6 @@
 
 	<body>
 		<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
-  <script src={Astro.resolve('../index.ts')} type="module" hoist />
+		<script src={Astro.resolve('../index.ts')} type="module" hoist></script>
 	</body>
-
 </html>

package.json

@@ -69,7 +69,6 @@
     "npm": "7.11.2",
     "yarn": "1.22.10"
   },
-  "dependencies": {},
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",
     "@changesets/cli": "^2.16.0",

packages/astro/components/Code.astro

@@ -42,9 +42,9 @@ function repairShikiTheme(html: string): string {
 	return html;
 }
 
-
 const highlighter = await shiki.getHighlighter({ theme });
 const _html = highlighter.codeToHtml(code, lang);
 const html = repairShikiTheme(_html);
 ---
+
 {html}

packages/astro/components/Debug.astro

@@ -21,13 +21,14 @@ const value = Astro.props[key];
 		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	}
 
-.debug-header, pre {
+	.debug-header,
+	pre {
 		margin: -1rem -1.5rem 1rem;
 		padding: 0.25rem 0.75rem;
 	}
 
 	.debug-header {
-  background: #FF1639;
+		background: #ff1639;
 		border-radius: 4px;
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;

packages/astro/components/Markdown.astro

@@ -3,7 +3,11 @@ export interface Props {
 	content?: string;
 }
 
-const dedent = (str: string) => str.split('\n').map(ln => ln.trimStart()).join('\n');
+const dedent = (str: string) =>
+	str
+		.split('\n')
+		.map((ln) => ln.trimStart())
+		.join('\n');
 
 // Internal props that should not be part of the external interface.
 interface InternalProps extends Props {
@@ -14,11 +18,11 @@ let { content, class: className } = Astro.props as InternalProps;
 let html = null;
 let htmlContent = '';
 
-const { privateRenderMarkdownDoNotUse: renderMarkdown } = (Astro as any);
+const { privateRenderMarkdownDoNotUse: renderMarkdown } = Astro as any;
 
 // If no content prop provided, use the slot.
 if (!content) {
-  const { privateRenderSlotDoNotUse: renderSlot } = (Astro as any);
+	const { privateRenderSlotDoNotUse: renderSlot } = Astro as any;
 	content = await renderSlot('default');
 	if (content !== undefined && content !== null) {
 		content = dedent(content);
@@ -29,11 +33,12 @@ if (content) {
 	htmlContent = await renderMarkdown(content, {
 		mode: 'md',
 		$: {
-      scopedClassName: className
+			scopedClassName: className,
-    }
+		},
 	});
 }
 
 html = htmlContent;
 ---
+
 {html ? html : <slot />}

packages/astro/components/Prism.astro

@@ -11,17 +11,15 @@ export interface Props {
 
 const { class: className, lang, code } = Astro.props as Props;
 
-let classLanguage = `language-${lang}`
+let classLanguage = `language-${lang}`;
 
-const languageMap = new Map([
+const languageMap = new Map([['ts', 'typescript']]);
-  ['ts', 'typescript']
-]);
 
 if (lang == null) {
 	console.warn('Prism.astro: No language provided.');
 }
 
-const ensureLoaded = lang => {
+const ensureLoaded = (lang) => {
 	if (lang && !Prism.languages[lang]) {
 		loadLanguages([lang]);
 	}
@@ -46,7 +44,6 @@ let html = code;
 if (grammar) {
 	html = Prism.highlight(code, grammar, lang);
 }
-
 ---
 
 <pre class={[className, classLanguage].join(' ')}><code class={classLanguage}>{html}</code></pre>

packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro

@@ -10,5 +10,4 @@ const description = 'This is a post about some stuff.';
 	`({})`
 	`{...props}` 
 	`{/* JavaScript */}`
-  
 </Markdown>

www/src/components/Article.astro

@@ -48,7 +48,7 @@
 
 	a::before,
 	a::after {
-    content: "";
+		content: '';
 		display: block;
 		position: absolute;
 		top: 0;

www/src/components/Author.astro

@@ -8,6 +8,7 @@ export interface Props {
 const { authorId } = Astro.props;
 const author = authorData[authorId];
 ---
+
 <div class="author">
 	<p>by {author.name}{' '}<a href={`https://twitter.com/${author.twitter}`}>@{author.twitter}</a></p>
 </div>