Merge branch 'main' into feat/image-validate-options

README.md

@@ -1,4 +1,5 @@
-# Astro Docs <img align="right" valign="center" height="52" width="39" src="https://raw.githubusercontent.com/withastro/astro/main/assets/brand/logo.svg" alt="Astro logo" />
+# Astro Docs <picture><source media="(prefers-color-scheme: dark)" srcset="https://astro.build/assets/press/astro-icon-light.png"><source media="(prefers-color-scheme: light)" srcset="https://astro.build/assets/press/astro-icon-dark.png"><img align="right" valign="center" height="79" width="63" src="https://astro.build/assets/press/astro-icon-dark.png" alt="Astro logo" /></picture>
+
 
 To all who come to this happy place: welcome.
 

netlify.toml

@@ -1,3 +1,8 @@
+[[headers]]
+  for = "/_astro/*"
+  [headers.values]
+    Cache-Control = "public, max-age=604800, immutable"
+
 [build]
   command = "NODE_OPTIONS=--max_old_space_size=4096 pnpm netlify:build"
   ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- /"

package.json

@@ -49,7 +49,7 @@
     "astro": "^2.0.17",
     "astro-auto-import": "^0.2.1",
     "astro-eslint-parser": "^0.9.2",
-    "astro-og-canvas": "^0.1.6",
+    "astro-og-canvas": "^0.1.7",
     "bcp-47-normalize": "^2.1.0",
     "canvaskit-wasm": "^0.37.0",
     "chroma-js": "^2.4.2",

public/index.css

@@ -234,8 +234,9 @@ h5 {
 }
 
 p,
-.content ul {
-	line-height: 1.65;
+.content ul,
+.content ol {
+	line-height: 1.75;
 }
 
 p,
@@ -360,9 +361,9 @@ pre {
 	font-family: var(--font-body);
 	font-size: 0.9375rem;
 	border-radius: 0.25rem;
-	padding: 0.125rem 0.375rem;
+	padding: 0.0625rem 0.375rem;
 	border: 1px solid var(--theme-shade-subtle);
-	box-shadow: 0 3px var(--theme-shade-subtle);
+	box-shadow: 0 2px var(--theme-shade-subtle);
 	background-color: var(--theme-bg-offset);
 	white-space: nowrap;
 }

scripts/generate-integration-pages.ts

@@ -24,18 +24,21 @@ interface IntegrationData {
 	category: 'renderer' | 'adapter' | 'other';
 	readme: string;
 	srcdir: string;
+	i18nReady: string;
 }
 
 const prettyCategoryDescription: Record<string, unknown> = {
 	renderer: 'framework integration to extend component support in your Astro project',
 	adapter: 'SSR adapter to deploy your Astro project',
 	other: 'integration in your Astro project',
 };
+
 class IntegrationPagesBuilder {
 	readonly #githubToken?: string;
 	readonly #sourceBranch: string;
 	readonly #sourceRepo: string;
 	readonly #deprecatedIntegrations = new Set(['turbolinks']);
+	readonly #i18nNotReadyIntegrations = new Set(['markdoc']);
 
 	constructor(opts: { githubToken?: string; sourceBranch: string; sourceRepo: string }) {
 		this.#githubToken = opts.githubToken;
@@ -88,8 +91,9 @@ class IntegrationPagesBuilder {
 						: keywords.includes('astro-adapter')
 						? 'adapter'
 						: 'other';
+					const i18nReady = (!this.#i18nNotReadyIntegrations.has(pkg.name)).toString();
 					const readme = await (await fetch(readmeURL)).text();
-					return { name, category, readme, srcdir: pkg.name };
+					return { name, category, readme, srcdir: pkg.name, i18nReady };
 				})
 		);
 	}
@@ -101,7 +105,13 @@ class IntegrationPagesBuilder {
 	 * - Add the correct base to any relative links
 	 * - _Remove_ the base from any docs links
 	 */
-	async #processReadme({ name, readme, srcdir, category }: IntegrationData): Promise<string> {
+	async #processReadme({
+		name,
+		readme,
+		srcdir,
+		category,
+		i18nReady,
+	}: IntegrationData): Promise<string> {
 		// Remove title from body
 		readme = readme.replace(/^# (.+)/, '');
 		const githubLink = `https://github.com/${this.#sourceRepo}/tree/${
@@ -135,7 +145,7 @@ description: ${createDescription(name, category)}
 githubURL: '${githubLink}'
 hasREADME: true
 category: ${category}
-i18nReady: false
+i18nReady: ${i18nReady}
 ---
 
 import Video from '~/components/Video.astro';

src/components/Checklist.astro

@@ -39,7 +39,8 @@ const { key = 'default' } = Astro.props as Props;
 		position: relative;
 		margin: 0 -1rem;
 		border-radius: 0.5rem;
-		padding: 0.5rem 0.5rem 0.5rem 4rem;
+		padding-block: 0.5rem;
+		padding-inline: 4rem 0.5rem;
 		cursor: pointer;
 		/* Compensate for space between checkbox and text. */
 		text-indent: -0.4ch;
@@ -62,7 +63,7 @@ const { key = 'default' } = Astro.props as Props;
 	check-list :global(input[type='checkbox']::after) {
 		content: '✔︎';
 		position: absolute;
-		left: 1rem;
+		inset-inline-start: 1rem;
 		top: 50%;
 		transform: translateY(-50%) translate(3px, -3px);
 		transform-origin: center;

src/components/HeadCommon.astro

@@ -20,20 +20,28 @@ import '@fontsource/ibm-plex-mono/400-italic.css';
 <script type="module" src="/make-scrollable-code-focusable.js"></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
-<script>
+<script is:inline>
 	const root = document.documentElement;
-	const theme = localStorage.getItem('theme');
-	if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-		root.classList.add('theme-dark');
-	} else {
+	const theme = (() => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	})();
+	if (theme === 'light') {
 		root.classList.remove('theme-dark');
+	} else {
+		root.classList.add('theme-dark');
 	}
 </script>
 
 <!-- Double-click to highlight code blocks (inline only). -->
-<script>
+<script is:inline>
 	document.addEventListener('dblclick', (el) => {
-		const node = el.target as Node;
+		const node = el.target;
 		if (!node) return;
 		if (node.nodeName !== 'CODE') return;
 		if (node.parentElement?.nodeName === 'PRE') return;

src/components/LeftSidebar/LeftSidebar.astro

@@ -84,11 +84,18 @@ if (isReference) {
 	</ul>
 </nav>
 
-<script>
-	window.addEventListener('DOMContentLoaded', () => {
-		var target = document.querySelector('[data-current-parent="true"]');
-		target?.scrollIntoView({ block: 'center' });
-	});
+<!-- Preserve sidebar scroll across page loads -->
+<script is:inline>
+	{
+		const leftSidebar = document.querySelector('.nav-groups');
+		const leftSidebarScroll = localStorage.getItem('sidebar-scroll');
+		if (leftSidebarScroll !== null) {
+			leftSidebar.scrollTop = parseInt(leftSidebarScroll, 10);
+		}
+		window.addEventListener('beforeunload', () => {
+			localStorage.setItem('sidebar-scroll', leftSidebar.scrollTop);
+		});
+	}
 </script>
 
 <style>

src/components/tutorial/Box.astro

@@ -19,7 +19,9 @@ const { icon } = Astro.props;
 
 	.highlight-box {
 		position: relative;
-		padding: 2rem 4rem 2rem 2rem;
+		padding-block: 2rem;
+		padding-inline-start: 2rem;
+		padding-inline-end: 4rem;
 		border: 1px solid var(--theme-shade-subtle);
 		box-shadow: -0.5rem 0.5rem 0 -1px var(--theme-bg), -0.5rem 0.5rem var(--theme-shade-subtle),
 			-1rem 1rem 0 -1px var(--theme-bg), -1rem 1rem var(--theme-shade-subtle);
@@ -32,7 +34,7 @@ const { icon } = Astro.props;
 			content: '';
 			position: absolute;
 			top: 0.5rem;
-			right: 0.5rem;
+			inset-inline-end: 0.5rem;
 			width: 5rem;
 			height: 5rem;
 			background-color: var(--theme-divider);

src/components/tutorial/TutorialNav.astro

@@ -106,6 +106,11 @@ const isCurrentUnit = (unit: typeof units[number]) =>
 		font-weight: bold;
 	}
 
+	:global(a:focus unit-progress-icon) {
+		outline: 2px solid var(--theme-accent-secondary);
+		outline-offset: 0.25em;
+	}
+
 	.header-link {
 		border: 0;
 		padding: 0;

src/components/tutorial/UnitProgressIcon.astro

@@ -122,6 +122,14 @@ const t = useTranslations(Astro);
 		background-color: var(--theme-bg-offset);
 	}
 
+	:global([aria-selected='true']) .segment:not(.done) {
+		stroke: hsl(var(--color-gray-95));
+	}
+
+	:global(.theme-dark [aria-selected='true']) .segment:not(.done) {
+		stroke: hsl(var(--color-gray-20));
+	}
+
 	.segment {
 		fill: none;
 		stroke: var(--theme-bg-offset);