Merge branch 'main' into main

.changeset/big-buttons-shop.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/starlight': minor
+---
+
+Removes the `/` search shortcut for [accessibility reasons](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html).
+
+⚠️ **Potentially breaking change:** The `search.shortcutLabel` UI string has been removed. If you were using this string in your custom UI, you will need to update your code.

.changeset/great-plums-study.md

@@ -0,0 +1,9 @@
+---
+'@astrojs/starlight': minor
+---
+
+Makes sidebar entry parsing stricter in Starlight config
+
+**⚠️ Potentially breaking change:** Previously Starlight would accept a sidebar entry that matched one of its expected shapes, even if it included additional properties. For example, including both `link` and `items` was considered valid, with `items` being ignored. Now, it is an error to include more than one of `link`, `items`, or `autogenerate` in a sidebar entry.
+
+If you see errors after updating, look for sidebar entries in the Starlight configuration in `astro.config.mjs` that include too many keys and remove the one that was previously ignored.

.changeset/new-trains-complain.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Updates the Ukrainian UI translations

.github/workflows/ci.yml

@@ -14,11 +14,32 @@ concurrency:
 
 env:
   NODE_VERSION: 18
+  ASTRO_TELEMETRY_DISABLED: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      docs: ${{ steps.filter.outputs.docs }}
+      packages: ${{ steps.filter.outputs.packages }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            docs:
+              - 'docs/**'
+            packages:
+              - 'packages/**'
+
   unit-test:
     name: Run unit tests
-    runs-on: ubuntu-20.04
+    needs: changes
+    if: ${{ needs.changes.outputs.packages == 'true' }}
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
@@ -31,8 +52,14 @@ jobs:
         run: pnpm -r test:coverage
 
   e2e-test:
-    name: Run E2E tests
-    runs-on: ubuntu-20.04
+    name: 'Run E2E tests (${{ matrix.os }})'
+    needs: changes
+    if: ${{ needs.changes.outputs.packages == 'true' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
@@ -46,7 +73,7 @@ jobs:
 
   type-check:
     name: Run type checks
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
@@ -63,7 +90,7 @@ jobs:
 
   pa11y:
     name: Check for accessibility issues
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -107,7 +134,9 @@ jobs:
 
   links:
     name: Check for broken links
-    runs-on: ubuntu-20.04
+    needs: changes
+    if: ${{ needs.changes.outputs.docs == 'true' }}
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

docs/src/components/showcase-sites.astro

@@ -126,4 +126,11 @@ import FluidGrid from './fluid-grid.astro';
 	<Card title="DMNO" href="https://dmno.dev" thumbnail="dmno.dev.png" />
 	<Card title="EspansoEdit" href="https://ee.qqv.com.au" thumbnail="ee.qqv.com.au.png" />
 	<Card title="how2neovim" href="https://how2neovim.io/" thumbnail="how2neovim.io.png" />
+	<Card title="TutorialKit" href="https://tutorialkit.dev/" thumbnail="tutorialkit.dev.png" />
+	<Card
+		title="The Dev Health OS"
+		href="https://www.devhealthos.com/"
+		thumbnail="www.devhealthos.com.png"
+	/>
+	<Card title="Orama" href="https://docs.orama.com/" thumbnail="docs.orama.com.png" />
 </FluidGrid>

docs/src/content/docs/fr/resources/community-content.mdx

@@ -146,5 +146,11 @@ import YouTubeGrid from '~/components/youtube-grid.astro';
 			description:
 				"Dans cette vidéo, je passe en revue ce qui rend Starlight si cool et pourquoi vous voudriez l'essayer avec votre prochain projet.",
 		},
+		{
+			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
+			title: 'Astro Starlight et emoji-blast avec Chris Swithinbank',
+			description:
+				"Chris, le créateur du thème de documentation Starlight pour Astro, m'aide à le configurer pour le nouveau site web d'emoji-blast. 🌟 🎇",
+		},
 	]}
 />

docs/src/content/docs/ru/resources/community-content.mdx

@@ -138,5 +138,18 @@ import YouTubeGrid from '~/components/youtube-grid.astro';
 			description:
 				'Установите Starlight в подкаталоге проекта сайта на Next.js',
 		},
+		{
+			href: 'https://www.youtube.com/watch?v=5pq80drDrNs',
+			title:
+				'Я воссоздал документы Shadcn за 30 минут с помощью этого удивительного инструмента',
+			description:
+				'В этом видео я рассказываю о том, что делает Starlight таким крутым и почему вы можете попробовать его в своем следующем проекте.',
+		},
+		{
+			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
+			title: 'Astro Starlight и взрыв эмоций с Крисом Свитинбанком',
+			description:
+				'В этой статье Крис, создатель Starlight, рассказывает о том, как настроить этот фреймворк для нового сайта, посвящённого эмодзи. 🌟 🎇',
+		},
 	]}
 />

docs/src/content/docs/zh-cn/resources/community-content.mdx

@@ -140,5 +140,12 @@ import YouTubeGrid from '~/components/youtube-grid.astro';
 			description:
 				'在这个视频中，我将介绍 Starlight 的酷炫之处以及为什么你可能想在下一个项目中尝试它。',
 		},
+		{
+			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
+			title:
+				'与 Chris Swithinbank 一起试试联动 Astro Starlight 和 emoji-blast ',
+			description:
+				'Astro Starlight 框架的开发者 Chris 引导我完成了一个全新的 emoji-blast 网站。 🌟 🎇',
+		},
 	]}
 />

package.json

@@ -8,7 +8,7 @@
     "size": "size-limit",
     "version": "pnpm changeset version && pnpm i --no-frozen-lockfile",
     "format": "prettier -w --cache --plugin prettier-plugin-astro .",
-    "typecheck": "astro check"
+    "typecheck": "astro check --minimumSeverity warning"
   },
   "license": "MIT",
   "devDependencies": {

packages/starlight/__e2e__/fixtures/basics/astro.config.mjs

@@ -5,6 +5,7 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			title: 'Basics',
+			pagefind: false,
 		}),
 	],
 });

packages/starlight/__e2e__/fixtures/custom-src-dir/astro.config.mjs

@@ -6,6 +6,7 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			title: 'Custom src directory',
+			pagefind: false,
 		}),
 	],
 });

packages/starlight/__e2e__/test-utils.ts

@@ -4,6 +4,8 @@ import { build, preview } from 'astro';
 
 export { expect, type Locator } from '@playwright/test';
 
+process.env.ASTRO_TELEMETRY_DISABLED = 'true';
+
 // Setup a test environment that will build and start a preview server for a given fixture path and
 // provide a Starlight Playwright fixture accessible from within all tests.
 export async function testFactory(fixturePath: string) {

packages/starlight/__tests__/basics/config-errors.test.ts

@@ -165,7 +165,7 @@ test('errors with bad sidebar config', () => {
 			Invalid config passed to starlight integration
 		Hint:
 			**sidebar.0**: Did not match union.
-			> Expected type \`{ link: string } | { items: array } | { autogenerate: object }\`
+			> Expected type \`{ link: string;  } | { items: array;  } | { autogenerate: object;  }\`
 			> Received \`{ "label": "Example", "href": "/" }\`"
 	`
 	);
@@ -190,7 +190,57 @@ test('errors with bad nested sidebar config', () => {
 			Invalid config passed to starlight integration
 		Hint:
 			**sidebar.0.items.1**: Did not match union.
-			> Expected type \`{ link: string } | { items: array } | { autogenerate: object }\`
+			> Expected type \`{ link: string } | { items: array;  } | { autogenerate: object;  }\`
 			> Received \`{ "label": "Example", "items": [ { "label": "Nested Example 1", "link": "/" }, { "label": "Nested Example 2", "link": true } ] }\`"
 	`);
 });
+
+test('errors with sidebar entry that includes `link` and `items`', () => {
+	expect(() =>
+		parseStarlightConfigWithFriendlyErrors({
+			title: 'Test',
+			sidebar: [
+				{ label: 'Parent', link: '/parent', items: [{ label: 'Child', link: '/parent/child' }] },
+			],
+		})
+	).toThrowErrorMatchingInlineSnapshot(`
+		"[AstroUserError]:
+			Invalid config passed to starlight integration
+		Hint:
+			**sidebar.0**: Unrecognized key(s) in object: 'items'"
+	`);
+});
+
+test('errors with sidebar entry that includes `link` and `autogenerate`', () => {
+	expect(() =>
+		parseStarlightConfigWithFriendlyErrors({
+			title: 'Test',
+			sidebar: [{ label: 'Parent', link: '/parent', autogenerate: { directory: 'test' } }],
+		})
+	).toThrowErrorMatchingInlineSnapshot(`
+		"[AstroUserError]:
+			Invalid config passed to starlight integration
+		Hint:
+			**sidebar.0**: Unrecognized key(s) in object: 'autogenerate'"
+	`);
+});
+
+test('errors with sidebar entry that includes `items` and `autogenerate`', () => {
+	expect(() =>
+		parseStarlightConfigWithFriendlyErrors({
+			title: 'Test',
+			sidebar: [
+				{
+					label: 'Parent',
+					items: [{ label: 'Child', link: '/parent/child' }],
+					autogenerate: { directory: 'test' },
+				},
+			],
+		})
+	).toThrowErrorMatchingInlineSnapshot(`
+		"[AstroUserError]:
+			Invalid config passed to starlight integration
+		Hint:
+			**sidebar.0**: Unrecognized key(s) in object: 'autogenerate'"
+	`);
+});

packages/starlight/components/Search.astro

@@ -20,17 +20,17 @@ const pagefindTranslations = {
 	data-translations={JSON.stringify(pagefindTranslations)}
 	data-strip-trailing-slash={project.trailingSlash === 'never'}
 >
-	<button data-open-modal disabled>
-		{
-			/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
-		}
-		<Icon name="magnifier" label={labels['search.label']} />
+	<button
+		data-open-modal
+		disabled
+		aria-label={labels['search.label']}
+		aria-keyshortcuts="Control+K"
+	>
+		<Icon name="magnifier" />
 		<span class="sl-hidden md:sl-block" aria-hidden="true">{labels['search.label']}</span>
-		<Icon
-			name="forward-slash"
-			class="sl-hidden md:sl-block"
-			label={labels['search.shortcutLabel']}
-		/>
+		<kbd class="sl-hidden md:sl-flex" style="display: none;">
+			<kbd>{labels['search.ctrlKey']}</kbd><kbd>K</kbd>
+		</kbd>
 	</button>
 
 	<dialog style="padding:0" aria-label={labels['search.label']}>
@@ -56,6 +56,27 @@ const pagefindTranslations = {
 	</dialog>
 </site-search>
 
+{
+	/**
+	 * This is intentionally inlined to avoid briefly showing an invalid shortcut.
+	 * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+	 * user agent is spoofed by some browsers when opening the devtools.
+	 */
+}
+<script is:inline>
+	(() => {
+		const openBtn = document.querySelector('button[data-open-modal]');
+		const shortcut = openBtn?.querySelector('kbd');
+		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+		const platformKey = shortcut.querySelector('kbd');
+		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+			platformKey.textContent = '⌘';
+			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+		}
+		shortcut.style.display = '';
+	})();
+</script>
+
 <script>
 	class SiteSearch extends HTMLElement {
 		constructor() {
@@ -96,18 +117,11 @@ const pagefindTranslations = {
 				window.removeEventListener('click', onClick);
 			});
 
-			// Listen for `/`, `ctrl + k`, and `cmd + k` keyboard shortcuts.
+			// Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
 			window.addEventListener('keydown', (e) => {
-				const isInput =
-					document.activeElement instanceof HTMLElement &&
-					(['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
-						document.activeElement.isContentEditable);
 				if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
 					dialog.open ? closeModal() : openModal();
 					e.preventDefault();
-				} else if (e.key === '/' && !dialog.open && !isInput) {
-					openModal();
-					e.preventDefault();
 				}
 			});
 
@@ -169,7 +183,7 @@ const pagefindTranslations = {
 			border: 1px solid var(--sl-color-gray-5);
 			border-radius: 0.5rem;
 			padding-inline-start: 0.75rem;
-			padding-inline-end: 1rem;
+			padding-inline-end: 0.5rem;
 			background-color: var(--sl-color-black);
 			color: var(--sl-color-gray-2);
 			font-size: var(--sl-text-sm);
@@ -186,6 +200,18 @@ const pagefindTranslations = {
 		}
 	}
 
+	button > kbd {
+		border-radius: 0.25rem;
+		font-size: var(--sl-text-2xs);
+		gap: 0.25em;
+		padding-inline: 0.375rem;
+		background-color: var(--sl-color-gray-6);
+	}
+
+	kbd {
+		font-family: var(--__sl-font);
+	}
+
 	dialog {
 		margin: 0;
 		background-color: var(--sl-color-gray-6);

packages/starlight/package.json

@@ -180,7 +180,7 @@
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^5.1.0",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.45.0",
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^1.6.0",
     "astro": "^4.10.2",

packages/starlight/playwright.config.ts

@@ -12,5 +12,6 @@ export default defineConfig({
 		},
 	],
 	testMatch: '__e2e__/*.test.ts',
+	timeout: 40 * 1_000,
 	workers: 1,
 });

packages/starlight/schemas/i18n.ts

@@ -55,9 +55,11 @@ function starlightI18nSchema() {
 
 			'search.label': z.string().describe('Text displayed in the search bar.'),
 
-			'search.shortcutLabel': z
+			'search.ctrlKey': z
 				.string()
-				.describe('Accessible label for the shortcut key to open the search modal.'),
+				.describe(
+					'Visible representation of the Control key potentially used in the shortcut key to open the search modal.'
+				),
 
 			'search.cancelLabel': z
 				.string()