@astrojs/starlight 0.35.1 → 0.35.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/starlight
 
+## 0.35.3
+
+### Patch Changes
+
+- [#3416](https://github.com/withastro/starlight/pull/3416) [`fcc0633`](https://github.com/withastro/starlight/commit/fcc0633ab14fc602f5c540972446e22c79746042) Thanks [@randomguy-2650](https://github.com/randomguy-2650)! - Updates German UI translations to be more idiomatic.
+
+- [#1640](https://github.com/withastro/starlight/pull/1640) [`d1b3828`](https://github.com/withastro/starlight/commit/d1b3828cdfe8114884ab65049581e37624422ac4) Thanks [@hippotastic](https://github.com/hippotastic)! - Refactors various internal systems, improving code quality and maintainability.
+
+- [#3421](https://github.com/withastro/starlight/pull/3421) [`97e8103`](https://github.com/withastro/starlight/commit/97e8103c5793d583931575dbe17924ef88a5b6fd) Thanks [@andersk](https://github.com/andersk)! - Removes an invalid `value` attribute from the language and theme selectors
+
+- [#3422](https://github.com/withastro/starlight/pull/3422) [`9200fac`](https://github.com/withastro/starlight/commit/9200fac71ebe6e7bbbecee3d1893e744db01dc6e) Thanks [@andersk](https://github.com/andersk)! - Refactors collapsible sidebar sections and “on this page” dropdown to use `<span>` instead of `<div>`
+
+## 0.35.2
+
+### Patch Changes
+
+- [#3341](https://github.com/withastro/starlight/pull/3341) [`10f6fe2`](https://github.com/withastro/starlight/commit/10f6fe22a981247293ee4de106736f1a6ae24b6a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Prevents potential build issues with the Astro Cloudflare adapter due to the dependency on Node.js builtins.
+
+- [#3327](https://github.com/withastro/starlight/pull/3327) [`bf58c60`](https://github.com/withastro/starlight/commit/bf58c60b9c3d5f5efdafbdba83cefa0566a367dc) Thanks [@delucis](https://github.com/delucis)! - Fixes a routing bug for docs pages with a slug authored with non-normalized composition. This could occur for filenames containing diacritics in some circumstances, causing 404s.
+
 ## 0.35.1
 
 ### Patch Changes

package/components/LanguageSelect.astro

@@ -18,7 +18,6 @@ function localizedPathname(locale: string | undefined): string {
 			<Select
 				icon="translate"
 				label={Astro.locals.t('languageSelect.accessibleLabel')}
-				value={localizedPathname(Astro.locals.starlightRoute.locale)}
 				options={Object.entries(config.locales).map(([code, locale]) => ({
 					value: localizedPathname(code),
 					selected: code === Astro.locals.starlightRoute.locale,

package/components/MobileTableOfContents.astro

@@ -11,10 +11,10 @@ const { toc } = Astro.locals.starlightRoute;
 			<nav aria-labelledby="starlight__on-this-page--mobile">
 				<details id="starlight__mobile-toc">
 					<summary id="starlight__on-this-page--mobile" class="sl-flex">
-						<div class="toggle sl-flex">
+						<span class="toggle sl-flex">
 							{Astro.locals.t('tableOfContents.onThisPage')}
 							<Icon name={'right-caret'} class="caret" size="1rem" />
-						</div>
+						</span>
 						<span class="display-current" />
 					</summary>
 					<div class="dropdown">

package/components/Select.astro

@@ -3,7 +3,6 @@ import Icon from '../user-components/Icon.astro';
 
 interface Props {
 	label: string;
-	value: string;
 	icon: Parameters<typeof Icon>[0]['name'];
 	width?: string;
 	options: Array<{
@@ -26,7 +25,7 @@ interface Props {
 <label style={`--sl-select-width: ${Astro.props.width}`}>
 	<span class="sr-only">{Astro.props.label}</span>
 	<Icon name={Astro.props.icon} class="icon label-icon" />
-	<select value={Astro.props.value} autocomplete="off">
+	<select autocomplete="off">
 		{
 			Astro.props.options.map(({ value, selected, label }) => (
 				<option value={value} selected={selected} set:html={label} />

package/components/SidebarPersistState.ts

@@ -19,11 +19,11 @@ interface SidebarState {
  * and `hash` are read from the current page.
  */
 const getState = (): SidebarState => {
-	let open = [];
+	let open: SidebarState['open'] = [];
 	const hash = target?.dataset.hash || '';
 	try {
 		const rawStoredState = sessionStorage.getItem(storageKey);
-		const storedState = JSON.parse(rawStoredState || '{}');
+		const storedState = JSON.parse(rawStoredState || '{}') as SidebarState;
 		if (Array.isArray(storedState.open) && storedState.hash === hash) open = storedState.open;
 	} catch {}
 	return {

package/components/SidebarSublist.astro

@@ -39,7 +39,7 @@ const { sublist, nested } = Astro.props;
 					>
 						<SidebarRestorePoint />
 						<summary>
-							<div class="group-label">
+							<span class="group-label">
 								<span class="large">{entry.label}</span>
 								{entry.badge && (
 									<Badge
@@ -48,7 +48,7 @@ const { sublist, nested } = Astro.props;
 										text={entry.badge.text}
 									/>
 								)}
-							</div>
+							</span>
 							<Icon name="right-caret" class="caret" size="1.25rem" />
 						</summary>
 						<Astro.self sublist={entry.entries} nested />

package/components/ThemeSelect.astro

@@ -7,7 +7,6 @@ import Select from './Select.astro';
 	<Select
 		icon="laptop"
 		label={Astro.locals.t('themeSelect.accessibleLabel')}
-		value="auto"
 		options={[
 			{ label: Astro.locals.t('themeSelect.dark'), selected: false, value: 'dark' },
 			{ label: Astro.locals.t('themeSelect.light'), selected: false, value: 'light' },

package/expressive-code.mjs

@@ -15,7 +15,9 @@
 
 export * from 'astro-expressive-code';
 
-// @ts-ignore - Types are provided by the separate `expressive-code.d.ts` file
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Types are provided by the separate `expressive-code.d.ts` file and this may not be
+// a type error for some users running `tsc --noEmit` depending on their `tsconfig.json` settings.
 export function defineEcConfig(config) {
 	return config;
 }

package/index.ts

@@ -92,7 +92,9 @@ export default function StarlightIntegration(
 				// config or by a plugin.
 				const allIntegrations = [...config.integrations, ...integrations];
 				if (!allIntegrations.find(({ name }) => name === 'astro-expressive-code')) {
-					integrations.push(...starlightExpressiveCode({ starlightConfig, useTranslations }));
+					integrations.push(
+						...starlightExpressiveCode({ astroConfig: config, starlightConfig, useTranslations })
+					);
 				}
 				if (!allIntegrations.find(({ name }) => name === '@astrojs/sitemap')) {
 					integrations.push(starlightSitemap(starlightConfig));

package/integrations/asides-error.ts

@@ -0,0 +1,9 @@
+import { AstroError } from 'astro/errors';
+
+export function throwInvalidAsideIconError(icon: string) {
+	throw new AstroError(
+		'Invalid aside icon',
+		`An aside custom icon must be set to the name of one of Starlight’s built-in icons, but received \`${icon}\`.\n\n` +
+			'See https://starlight.astro.build/reference/icons/#all-icons for a list of available icons.'
+	);
+}

package/integrations/asides.ts

@@ -19,7 +19,7 @@ import { getRemarkRehypeDocsCollectionPath, shouldTransformFile } from './remark
 import { Icons } from '../components/Icons';
 import { fromHtml } from 'hast-util-from-html';
 import type { Element } from 'hast';
-import { AstroError } from 'astro/errors';
+import { throwInvalidAsideIconError } from './asides-error';
 
 interface AsidesOptions {
 	starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales'>;
@@ -29,22 +29,22 @@ interface AsidesOptions {
 }
 
 /** Hacky function that generates an mdast HTML tree ready for conversion to HTML by rehype. */
-function h(el: string, attrs: Properties = {}, children: any[] = []): P {
+function h(el: string, attrs: Properties = {}, children: unknown[] = []): P {
 	const { tagName, properties } = _h(el, attrs);
 	return {
 		type: 'paragraph',
 		data: { hName: tagName, hProperties: properties },
-		children,
+		children: children as P['children'],
 	};
 }
 
 /** Hacky function that generates an mdast SVG tree ready for conversion to HTML by rehype. */
-function s(el: string, attrs: Properties = {}, children: any[] = []): P {
+function s(el: string, attrs: Properties = {}, children: unknown[] = []): P {
 	const { tagName, properties } = _s(el, attrs);
 	return {
 		type: 'paragraph',
 		data: { hName: tagName, hProperties: properties },
-		children,
+		children: children as P['children'],
 	};
 }
 
@@ -93,14 +93,16 @@ function transformUnhandledDirective(
 }
 
 /** Hacky function that generates the children of an mdast SVG tree. */
-function makeSvgChildNodes(children: Result['children']): any[] {
+function makeSvgChildNodes(children: Result['children']): P[] {
 	const nodes: P[] = [];
 	for (const child of children) {
 		if (child.type !== 'element') continue;
 		nodes.push({
 			type: 'paragraph',
 			data: { hName: child.tagName, hProperties: child.properties },
-			children: makeSvgChildNodes(child.children),
+			// We are explicitly casting to the expected type here due to the hacky nature of this
+			// function which only works with SVG elements.
+			children: makeSvgChildNodes(child.children) as unknown as P['children'],
 		});
 	}
 	return nodes;
@@ -253,14 +255,6 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 
 type RemarkPlugins = NonNullable<NonNullable<AstroUserConfig['markdown']>['remarkPlugins']>;
 
-export function throwInvalidAsideIconError(icon: string) {
-	throw new AstroError(
-		'Invalid aside icon',
-		`An aside custom icon must be set to the name of one of Starlight\’s built-in icons, but received \`${icon}\`.\n\n` +
-			'See https://starlight.astro.build/reference/icons/#all-icons for a list of available icons.'
-	);
-}
-
 export function starlightAsides(options: AsidesOptions): RemarkPlugins {
 	return [remarkDirective, remarkAsides(options)];
 }

package/integrations/expressive-code/index.ts

@@ -1,20 +1,9 @@
-import {
-	astroExpressiveCode,
-	type AstroExpressiveCodeOptions,
-	type CustomConfigPreprocessors,
-} from 'astro-expressive-code';
-import { addClassName } from 'astro-expressive-code/hast';
-import type { AstroIntegration } from 'astro';
+import { astroExpressiveCode, type AstroExpressiveCodeOptions } from 'astro-expressive-code';
+import type { AstroConfig, AstroIntegration } from 'astro';
 import type { HookParameters, StarlightConfig } from '../../types';
-import { absolutePathToLang } from '../shared/absolutePathToLang';
-import { slugToLocale } from '../shared/slugToLocale';
-import { localeToLang } from '../shared/localeToLang';
-import {
-	applyStarlightUiThemeColors,
-	preprocessThemes,
-	type ThemeObjectOrBundledThemeName,
-} from './theming';
-import { addTranslations } from './translations';
+import { getStarlightEcConfigPreprocessor } from './preprocessor';
+import { type ThemeObjectOrBundledThemeName } from './theming';
+import { getCollectionPosixPath } from '../../utils/collection-fs';
 
 export type StarlightExpressiveCodeOptions = Omit<AstroExpressiveCodeOptions, 'themes'> & {
 	/**
@@ -63,114 +52,13 @@ export type StarlightExpressiveCodeOptions = Omit<AstroExpressiveCodeOptions, 't
 };
 
 type StarlightEcIntegrationOptions = {
+	astroConfig: AstroConfig;
 	starlightConfig: StarlightConfig;
 	useTranslations: HookParameters<'config:setup'>['useTranslations'];
 };
 
-/**
- * Create an Expressive Code configuration preprocessor based on Starlight config.
- * Used internally to set up Expressive Code and by the `<Code>` component.
- */
-export function getStarlightEcConfigPreprocessor({
-	starlightConfig,
-	useTranslations,
-}: StarlightEcIntegrationOptions): CustomConfigPreprocessors['preprocessAstroIntegrationConfig'] {
-	return (input): AstroExpressiveCodeOptions => {
-		const astroConfig = input.astroConfig;
-		const ecConfig = input.ecConfig as StarlightExpressiveCodeOptions;
-
-		const {
-			themes: themesInput,
-			cascadeLayer,
-			customizeTheme,
-			styleOverrides: { textMarkers: textMarkersStyleOverrides, ...otherStyleOverrides } = {},
-			useStarlightDarkModeSwitch,
-			useStarlightUiThemeColors = ecConfig.themes === undefined,
-			plugins = [],
-			...rest
-		} = ecConfig;
-
-		// Handle the `themes` option
-		const themes = preprocessThemes(themesInput);
-		if (useStarlightUiThemeColors === true && themes.length < 2) {
-			console.warn(
-				`*** Warning: Using the config option "useStarlightUiThemeColors: true" ` +
-					`with a single theme is not recommended. For better color contrast, ` +
-					`please provide at least one dark and one light theme.\n`
-			);
-		}
-
-		// Add the `not-content` class to all rendered blocks to prevent them from being affected
-		// by Starlight's default content styles
-		plugins.push({
-			name: 'Starlight Plugin',
-			hooks: {
-				postprocessRenderedBlock: ({ renderData }) => {
-					addClassName(renderData.blockAst, 'not-content');
-				},
-			},
-		});
-
-		// Add Expressive Code UI translations for all defined locales
-		addTranslations(starlightConfig, useTranslations);
-
-		return {
-			themes,
-			customizeTheme: (theme) => {
-				if (useStarlightUiThemeColors) {
-					applyStarlightUiThemeColors(theme);
-				}
-				if (customizeTheme) {
-					theme = customizeTheme(theme) ?? theme;
-				}
-				return theme;
-			},
-			defaultLocale: starlightConfig.defaultLocale?.lang ?? starlightConfig.defaultLocale?.locale,
-			themeCssSelector: (theme, { styleVariants }) => {
-				// If one dark and one light theme are available, and the user has not disabled it,
-				// generate theme CSS selectors compatible with Starlight's dark mode switch
-				if (useStarlightDarkModeSwitch !== false && styleVariants.length >= 2) {
-					const baseTheme = styleVariants[0]?.theme;
-					const altTheme = styleVariants.find((v) => v.theme.type !== baseTheme?.type)?.theme;
-					if (theme === baseTheme || theme === altTheme) return `[data-theme='${theme.type}']`;
-				}
-				// Return the default selector
-				return `[data-theme='${theme.name}']`;
-			},
-			cascadeLayer: cascadeLayer ?? 'starlight.components',
-			styleOverrides: {
-				borderRadius: '0px',
-				borderWidth: '1px',
-				codePaddingBlock: '0.75rem',
-				codePaddingInline: '1rem',
-				codeFontFamily: 'var(--__sl-font-mono)',
-				codeFontSize: 'var(--sl-text-code)',
-				codeLineHeight: 'var(--sl-line-height)',
-				uiFontFamily: 'var(--__sl-font)',
-				textMarkers: {
-					lineDiffIndicatorMarginLeft: '0.25rem',
-					defaultChroma: '45',
-					backgroundOpacity: '60%',
-					...textMarkersStyleOverrides,
-				},
-				...otherStyleOverrides,
-			},
-			getBlockLocale: ({ file }) => {
-				if (file.url) {
-					const locale = slugToLocale(file.url.pathname.slice(1), starlightConfig);
-					return localeToLang(starlightConfig, locale);
-				}
-				// Note that EC cannot use the `absolutePathToLang` helper passed down to plugins as this callback
-				// is also called in the context of the `<Code>` component.
-				return absolutePathToLang(file.path, { starlightConfig, astroConfig });
-			},
-			plugins,
-			...rest,
-		};
-	};
-}
-
 export const starlightExpressiveCode = ({
+	astroConfig,
 	starlightConfig,
 	useTranslations,
 }: StarlightEcIntegrationOptions): AstroIntegration[] => {
@@ -213,11 +101,15 @@ export const starlightExpressiveCode = ({
 		typeof starlightConfig.expressiveCode === 'object'
 			? (starlightConfig.expressiveCode as AstroExpressiveCodeOptions)
 			: {};
+
+	const docsPath = getCollectionPosixPath('docs', astroConfig.srcDir);
+
 	return [
 		astroExpressiveCode({
 			...configArgs,
 			customConfigPreprocessors: {
 				preprocessAstroIntegrationConfig: getStarlightEcConfigPreprocessor({
+					docsPath,
 					starlightConfig,
 					useTranslations,
 				}),
@@ -225,7 +117,7 @@ export const starlightExpressiveCode = ({
 					import starlightConfig from 'virtual:starlight/user-config'
 					import { useTranslations, getStarlightEcConfigPreprocessor } from '@astrojs/starlight/internal'
 
-					export default getStarlightEcConfigPreprocessor({ starlightConfig, useTranslations })
+					export default getStarlightEcConfigPreprocessor({ docsPath: ${JSON.stringify(docsPath)}, starlightConfig, useTranslations })
 				`,
 			},
 		}),

package/integrations/expressive-code/preprocessor.ts

@@ -0,0 +1,121 @@
+import {
+	type AstroExpressiveCodeOptions,
+	type CustomConfigPreprocessors,
+} from 'astro-expressive-code';
+import { addClassName } from 'astro-expressive-code/hast';
+import type { StarlightExpressiveCodeOptions } from './index';
+import type { HookParameters, StarlightConfig } from '../../types';
+import { applyStarlightUiThemeColors, preprocessThemes } from './theming';
+import { addTranslations } from './translations';
+import { slugToLocale } from '../shared/slugToLocale';
+import { localeToLang } from '../shared/localeToLang';
+import { absolutePathToLang } from '../shared/absolutePathToLang';
+
+type StarlightEcConfigPreprocessorOptions = {
+	docsPath: string;
+	starlightConfig: StarlightConfig;
+	useTranslations: HookParameters<'config:setup'>['useTranslations'];
+};
+
+/**
+ * Create an Expressive Code configuration preprocessor based on Starlight config.
+ * Used internally to set up Expressive Code and by the `<Code>` component.
+ */
+export function getStarlightEcConfigPreprocessor({
+	docsPath,
+	starlightConfig,
+	useTranslations,
+}: StarlightEcConfigPreprocessorOptions): CustomConfigPreprocessors['preprocessAstroIntegrationConfig'] {
+	return (input): AstroExpressiveCodeOptions => {
+		const ecConfig = input.ecConfig as StarlightExpressiveCodeOptions;
+
+		const {
+			themes: themesInput,
+			cascadeLayer,
+			customizeTheme,
+			styleOverrides: { textMarkers: textMarkersStyleOverrides, ...otherStyleOverrides } = {},
+			useStarlightDarkModeSwitch,
+			useStarlightUiThemeColors = ecConfig.themes === undefined,
+			plugins = [],
+			...rest
+		} = ecConfig;
+
+		// Handle the `themes` option
+		const themes = preprocessThemes(themesInput);
+		if (useStarlightUiThemeColors === true && themes.length < 2) {
+			console.warn(
+				`*** Warning: Using the config option "useStarlightUiThemeColors: true" ` +
+					`with a single theme is not recommended. For better color contrast, ` +
+					`please provide at least one dark and one light theme.\n`
+			);
+		}
+
+		// Add the `not-content` class to all rendered blocks to prevent them from being affected
+		// by Starlight's default content styles
+		plugins.push({
+			name: 'Starlight Plugin',
+			hooks: {
+				postprocessRenderedBlock: ({ renderData }) => {
+					addClassName(renderData.blockAst, 'not-content');
+				},
+			},
+		});
+
+		// Add Expressive Code UI translations for all defined locales
+		addTranslations(starlightConfig, useTranslations);
+
+		return {
+			themes,
+			customizeTheme: (theme) => {
+				if (useStarlightUiThemeColors) {
+					applyStarlightUiThemeColors(theme);
+				}
+				if (customizeTheme) {
+					theme = customizeTheme(theme) ?? theme;
+				}
+				return theme;
+			},
+			defaultLocale: starlightConfig.defaultLocale?.lang ?? starlightConfig.defaultLocale?.locale,
+			themeCssSelector: (theme, { styleVariants }) => {
+				// If one dark and one light theme are available, and the user has not disabled it,
+				// generate theme CSS selectors compatible with Starlight's dark mode switch
+				if (useStarlightDarkModeSwitch !== false && styleVariants.length >= 2) {
+					const baseTheme = styleVariants[0]?.theme;
+					const altTheme = styleVariants.find((v) => v.theme.type !== baseTheme?.type)?.theme;
+					if (theme === baseTheme || theme === altTheme) return `[data-theme='${theme.type}']`;
+				}
+				// Return the default selector
+				return `[data-theme='${theme.name}']`;
+			},
+			cascadeLayer: cascadeLayer ?? 'starlight.components',
+			styleOverrides: {
+				borderRadius: '0px',
+				borderWidth: '1px',
+				codePaddingBlock: '0.75rem',
+				codePaddingInline: '1rem',
+				codeFontFamily: 'var(--__sl-font-mono)',
+				codeFontSize: 'var(--sl-text-code)',
+				codeLineHeight: 'var(--sl-line-height)',
+				uiFontFamily: 'var(--__sl-font)',
+				textMarkers: {
+					lineDiffIndicatorMarginLeft: '0.25rem',
+					defaultChroma: '45',
+					backgroundOpacity: '60%',
+					...textMarkersStyleOverrides,
+				},
+				...otherStyleOverrides,
+			},
+			getBlockLocale: ({ file }) => {
+				if (file.url) {
+					const locale = slugToLocale(file.url.pathname.slice(1), starlightConfig);
+					return localeToLang(starlightConfig, locale);
+				}
+				// Note that EC cannot use the `absolutePathToLang` helper passed down to plugins as this callback
+				// is also called in the context of the `<Code>` component.
+				return absolutePathToLang(file.path, { docsPath, starlightConfig });
+			},
+			plugins,
+			...rest,
+		};
+	};
+}

package/integrations/expressive-code/translations.ts

@@ -3,10 +3,7 @@ import type { StarlightConfig } from '../../types';
 import type { createTranslationSystemFromFs } from '../../utils/translations-fs';
 import { localeToLang } from '../shared/localeToLang';
 
-export function addTranslations(
-	config: StarlightConfig,
-	useTranslations: ReturnType<typeof createTranslationSystemFromFs>
-) {
+export function addTranslations(config: StarlightConfig, useTranslations: UseTranslations) {
 	addTranslationsForLocale(config.defaultLocale.locale, config, useTranslations);
 	if (config.isMultilingual) {
 		for (const locale in config.locales) {
@@ -19,7 +16,7 @@ export function addTranslations(
 function addTranslationsForLocale(
 	locale: string | undefined,
 	config: StarlightConfig,
-	useTranslations: ReturnType<typeof createTranslationSystemFromFs>
+	useTranslations: UseTranslations
 ) {
 	const lang = localeToLang(config, locale);
 	const t = useTranslations(lang);
@@ -35,3 +32,5 @@ function addTranslationsForLocale(
 		pluginFramesTexts.overrideTexts(lang, { [ecId]: translation });
 	});
 }
+
+type UseTranslations = Awaited<ReturnType<typeof createTranslationSystemFromFs>>;

package/integrations/heading-links.ts

@@ -55,7 +55,7 @@ export default function rehypeAutolinkHeadings(
 				{
 					type: 'element',
 					tagName: 'a',
-					properties: { class: 'sl-anchor-link', href: '#' + node.properties.id },
+					properties: { class: 'sl-anchor-link', href: '#' + String(node.properties.id) },
 					children: [AnchorLinkIcon, h('span', { class: 'sr-only' }, accessibleLabel)],
 				}
 			);

package/integrations/remark-rehype-utils.ts

@@ -1,6 +1,6 @@
 import type { AstroConfig } from 'astro';
 import type { VFile } from 'vfile';
-import { resolveCollectionPath } from '../utils/collection';
+import { resolveCollectionPath } from '../utils/collection-fs';
 
 /**
  * Returns the path to the Starlight docs collection ready to be used in remark/rehype plugins,

package/integrations/shared/absolutePathToLang.ts

@@ -1,24 +1,20 @@
-import { pathToFileURL } from 'node:url';
-import type { AstroConfig } from 'astro';
 import type { StarlightConfig } from '../../types';
 import { localeToLang } from './localeToLang';
-import { getCollectionPath } from '../../utils/collection';
 import { slugToLocale } from './slugToLocale';
 
 /** Get current language from an absolute file path. */
 export function absolutePathToLang(
 	path: string,
 	{
+		docsPath,
 		starlightConfig,
-		astroConfig,
 	}: {
+		docsPath: string;
 		starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales'>;
-		astroConfig: { root: AstroConfig['root']; srcDir: AstroConfig['srcDir'] };
 	}
 ): string {
-	const docsPath = getCollectionPath('docs', astroConfig.srcDir);
-	// Format path to URL-encoded path.
-	path = pathToFileURL(path).pathname;
+	// Format path to unix style path.
+	path = path?.replace(/\\/g, '/');
 	// Ensure that the page path starts with a slash if the docs directory also does,
 	// which makes stripping the docs path in the next step work on Windows, too.
 	if (path && !path.startsWith('/') && docsPath.startsWith('/')) path = '/' + path;

package/integrations/sitemap.ts

@@ -7,7 +7,7 @@ export function getSitemapConfig(opts: StarlightConfig): SitemapOptions {
 		sitemapConfig.i18n = {
 			defaultLocale: opts.defaultLocale.locale || 'root',
 			locales: Object.fromEntries(
-				Object.entries(opts.locales).map(([locale, config]) => [locale, config?.lang!])
+				Object.entries(opts.locales).map(([locale, config]) => [locale, config!.lang!])
 			),
 		};
 	}

package/integrations/virtual-user-config.ts

@@ -2,7 +2,7 @@ import type { AstroConfig, HookParameters, ViteUserConfig } from 'astro';
 import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { resolveCollectionPath } from '../utils/collection';
+import { resolveCollectionPath } from '../utils/collection-fs';
 import type { StarlightConfig } from '../utils/user-config';
 import { getAllNewestCommitDate } from '../utils/git';
 import type { PluginTranslations } from '../utils/plugins';

package/internal.ts

@@ -3,4 +3,4 @@
  */
 
 export { useTranslations } from './utils/translations';
-export { getStarlightEcConfigPreprocessor } from './integrations/expressive-code';
+export { getStarlightEcConfigPreprocessor } from './integrations/expressive-code/preprocessor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.35.1",
+  "version": "0.35.3",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

package/routes/common.astro

@@ -15,7 +15,7 @@ const route = await getRoute(Astro);
  */
 const renderResult = await render(route.entry);
 
-await attachRouteDataAndRunMiddleware(Astro, await useRouteData(Astro, route, renderResult));
+await attachRouteDataAndRunMiddleware(Astro, useRouteData(Astro, route, renderResult));
 
 const { Content, entry } = Astro.locals.starlightRoute;
 ---

package/schema.ts

@@ -123,7 +123,7 @@ type BaseSchemaWithoutEffects =
 type BaseSchema = BaseSchemaWithoutEffects | z.ZodEffects<BaseSchemaWithoutEffects>;
 
 /** Type that extends Starlight’s default schema with an optional, user-defined schema. */
-type ExtendedSchema<T extends BaseSchema | never = never> = [T] extends [never]
+type ExtendedSchema<T extends BaseSchema = never> = [T] extends [never]
 	? DefaultSchema
 	: T extends BaseSchema
 		? z.ZodIntersection<DefaultSchema, T>
@@ -155,7 +155,7 @@ interface DocsSchemaOpts<T extends BaseSchema> {
 }
 
 /** Content collection schema for Starlight’s `docs` collection. */
-export function docsSchema<T extends BaseSchema | never = never>(
+export function docsSchema<T extends BaseSchema = never>(
 	...args: [DocsSchemaOpts<T>?]
 ): (context: SchemaContext) => ExtendedSchema<T> {
 	const [options = {}] = args;

package/schemas/expressiveCode.ts

@@ -4,7 +4,9 @@ import type { StarlightExpressiveCodeOptions } from '../integrations/expressive-
 export const ExpressiveCodeSchema = () =>
 	z
 		.union([
-			z.custom<StarlightExpressiveCodeOptions>((value) => typeof value === 'object' && value),
+			z.custom<StarlightExpressiveCodeOptions>(
+				(value) => typeof value === 'object' && (value as StarlightExpressiveCodeOptions)
+			),
 			z.boolean(),
 		])
 		.describe(

package/schemas/i18n.ts

@@ -1,6 +1,6 @@
 import { z } from 'astro/zod';
 
-interface i18nSchemaOpts<T extends z.AnyZodObject = z.ZodObject<{}>> {
+interface i18nSchemaOpts<T extends z.AnyZodObject = z.SomeZodObject> {
 	/**
 	 * Extend Starlight’s i18n schema with additional fields.
 	 *
@@ -41,7 +41,7 @@ type ExtendedSchema<T extends z.AnyZodObject> = T extends z.AnyZodObject
 	: DefaultI18nSchema;
 
 /** Content collection schema for Starlight’s optional `i18n` collection. */
-export function i18nSchema<T extends z.AnyZodObject = z.ZodObject<{}>>({
+export function i18nSchema<T extends z.AnyZodObject = z.SomeZodObject>({
 	extend = z.object({}) as T,
 }: i18nSchemaOpts<T> = {}): ExtendedSchema<T> {
 	return defaultI18nSchema().merge(extend).passthrough() as ExtendedSchema<T>;

package/translations/de.json

@@ -15,7 +15,7 @@
   "tableOfContents.overview": "Überblick",
   "i18n.untranslatedContent": "Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.",
   "page.editLink": "Seite bearbeiten",
-  "page.lastUpdated": "Zuletzt bearbeitet:",
+  "page.lastUpdated": "Zuletzt aktualisiert:",
   "page.previousLink": "Vorherige Seite",
   "page.nextLink": "Nächste Seite",
   "page.draft": "Dieser Inhalt ist ein Entwurf und wird nicht in den Produktions-Builds enthalten sein.",

package/user-components/Aside.astro

@@ -2,7 +2,7 @@
 import { AstroError } from 'astro/errors';
 import Icon from './Icon.astro';
 import { Icons, type StarlightIcon } from '../components/Icons';
-import { throwInvalidAsideIconError } from '../integrations/asides';
+import { throwInvalidAsideIconError } from '../integrations/asides-error';
 
 const asideVariants = ['note', 'tip', 'caution', 'danger'] as const;
 const icons = { note: 'information', tip: 'rocket', caution: 'warning', danger: 'error' } as const;

package/utils/collection-fs.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getCollectionUrl, type StarlightCollection } from './collection';
+
+/**
+ * @see {@link file://./collection.ts} for more context about this file.
+ *
+ * Below are various functions to easily get paths to collections used in Starlight that rely on
+ * Node.js builtins. They exist in a separate file from {@link file://./collection.ts} to avoid
+ * potentially importing Node.js builtins in the final bundle.
+ */
+
+export function resolveCollectionPath(collection: StarlightCollection, srcDir: URL) {
+	return resolve(fileURLToPath(srcDir), `content/${collection}`);
+}
+
+export function getCollectionPosixPath(collection: StarlightCollection, srcDir: URL) {
+	// TODO: when Astro minimum Node.js version is >= 20.13.0, refactor to use the `fileURLToPath`
+	// second optional argument to enforce POSIX paths by setting `windows: false`.
+	return fileURLToPath(getCollectionUrl(collection, srcDir)).replace(/\\/g, '/');
+}

package/utils/collection.ts

@@ -1,8 +1,4 @@
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const collectionNames = ['docs', 'i18n'] as const;
-export type StarlightCollection = (typeof collectionNames)[number];
+export type StarlightCollection = 'docs' | 'i18n';
 
 /**
  * We still rely on the content collection folder structure to be fixed for now:
@@ -22,12 +18,8 @@ export type StarlightCollection = (typeof collectionNames)[number];
  * these helper functions should be updated to reflect that in one place.
  */
 
-export function getCollectionPath(collection: StarlightCollection, srcDir: URL) {
-	return new URL(`content/${collection}/`, srcDir).pathname;
-}
-
-export function resolveCollectionPath(collection: StarlightCollection, srcDir: URL) {
-	return resolve(fileURLToPath(srcDir), `content/${collection}`);
+export function getCollectionUrl(collection: StarlightCollection, srcDir: URL) {
+	return new URL(`content/${collection}/`, srcDir);
 }
 
 export function getCollectionPathFromRoot(

package/utils/createTranslationSystem.ts

@@ -12,7 +12,7 @@ import type { UserI18nKeys, UserI18nSchema } from './translations';
  */
 export const I18nextNamespace = 'starlight' as const;
 
-export function createTranslationSystem<T extends i18nSchemaOutput>(
+export async function createTranslationSystem<T extends i18nSchemaOutput>(
 	config: Pick<StarlightConfig, 'defaultLocale' | 'locales'>,
 	userTranslations: Record<string, T>,
 	pluginTranslations: Record<string, T> = {}
@@ -42,7 +42,7 @@ export function createTranslationSystem<T extends i18nSchemaOutput>(
 	}
 
 	const i18n = i18next.createInstance();
-	i18n.init({
+	await i18n.init({
 		resources: translations,
 		fallbackLng:
 			config.defaultLocale.lang || config.defaultLocale?.locale || BuiltInDefaultLocale.lang,
@@ -72,7 +72,7 @@ export function createTranslationSystem<T extends i18nSchemaOutput>(
 		lang ??= config.defaultLocale?.lang || BuiltInDefaultLocale.lang;
 
 		const t = i18n.getFixedT(lang, I18nextNamespace) as I18nT;
-		t.all = () => i18n.getResourceBundle(lang, I18nextNamespace);
+		t.all = () => i18n.getResourceBundle(lang, I18nextNamespace) as ReturnType<I18nT['all']>;
 		t.exists = (key, options) => i18n.exists(key, { lng: lang, ns: I18nextNamespace, ...options });
 		t.dir = (dirLang = lang) => i18n.dir(dirLang);
 

package/utils/error-map.ts

@@ -25,7 +25,7 @@ export function parseWithFriendlyErrors<T extends z.Schema>(
 	input: z.input<T>,
 	message: string
 ): z.output<T> {
-	return processParsedData(schema.safeParse(input, { errorMap }), message);
+	return processParsedData<T>(schema.safeParse(input, { errorMap }), message);
 }
 
 /**
@@ -42,10 +42,13 @@ export async function parseAsyncWithFriendlyErrors<T extends z.Schema>(
 	input: z.input<T>,
 	message: string
 ): Promise<z.output<T>> {
-	return processParsedData(await schema.safeParseAsync(input, { errorMap }), message);
+	return processParsedData<T>(await schema.safeParseAsync(input, { errorMap }), message);
 }
 
-function processParsedData(parsedData: z.SafeParseReturnType<any, any>, message: string) {
+function processParsedData<T extends z.Schema>(
+	parsedData: z.SafeParseReturnType<T, T>,
+	message: string
+) {
 	if (!parsedData.success) {
 		throw new AstroError(message, parsedData.error.issues.map((i) => i.message).join('\n'));
 	}
@@ -60,7 +63,7 @@ const errorMap: z.ZodErrorMap = (baseError, ctx) => {
 		// raise a single error when `key` does not match:
 		// > Did not match union.
 		// > key: Expected `'tutorial' | 'blog'`, received 'foo'
-		let typeOrLiteralErrByPath: Map<string, TypeOrLiteralErrByPathEntry> = new Map();
+		const typeOrLiteralErrByPath: Map<string, TypeOrLiteralErrByPathEntry> = new Map();
 		for (const unionError of baseError.unionErrors.map((e) => e.errors).flat()) {
 			if (unionError.code === 'invalid_type' || unionError.code === 'invalid_literal') {
 				const flattenedErrorPath = flattenErrorPath(unionError.path);
@@ -69,7 +72,7 @@ const errorMap: z.ZodErrorMap = (baseError, ctx) => {
 				} else {
 					typeOrLiteralErrByPath.set(flattenedErrorPath, {
 						code: unionError.code,
-						received: (unionError as any).received,
+						received: unionError.received,
 						expected: [unionError.expected],
 					});
 				}
@@ -130,7 +133,7 @@ const errorMap: z.ZodErrorMap = (baseError, ctx) => {
 				baseErrorPath,
 				getTypeOrLiteralMsg({
 					code: baseError.code,
-					received: (baseError as any).received,
+					received: baseError.received,
 					expected: [baseError.expected],
 				})
 			),

package/utils/i18n.ts

@@ -169,7 +169,7 @@ function getLocaleInfo(lang: string) {
 			label: label[0]?.toLocaleUpperCase(locale) + label.slice(1),
 			dir: getLocaleDir(locale),
 		};
-	} catch (error) {
+	} catch {
 		throw new AstroError(
 			`Failed to get locale informations for the '${lang}' locale.`,
 			'Make sure to provide a valid BCP-47 tags (e.g. en, ar, or zh-CN).'
@@ -184,9 +184,11 @@ function getLocaleInfo(lang: string) {
 function getLocaleDir(locale: Intl.Locale): 'ltr' | 'rtl' {
 	if ('textInfo' in locale) {
 		// @ts-expect-error - `textInfo` is not typed but is available in v8 based environments.
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 		return locale.textInfo.direction;
 	} else if ('getTextInfo' in locale) {
 		// @ts-expect-error - `getTextInfo` is not typed but is available in some non-v8 based environments.
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
 		return locale.getTextInfo().direction;
 	}
 	// Firefox does not support `textInfo` or `getTextInfo` yet so we fallback to a well-known list

package/utils/navigation.ts

@@ -254,7 +254,7 @@ function treeify(routes: Route[], locale: string | undefined, baseDir: string):
 				const isLeaf = index === parts.length - 1;
 
 				// Handle directory index pages by renaming them to `index`
-				if (isLeaf && currentNode.hasOwnProperty(part)) {
+				if (isLeaf && Object.hasOwn(currentNode, part)) {
 					currentNode = currentNode[part] as Dir;
 					part = 'index';
 				}

package/utils/plugins.ts

@@ -10,6 +10,7 @@ import {
 import type { UserI18nSchema } from './translations';
 import { createTranslationSystemFromFs } from './translations-fs';
 import { absolutePathToLang as getAbsolutePathFromLang } from '../integrations/shared/absolutePathToLang';
+import { getCollectionPosixPath } from './collection-fs';
 
 /**
  * Runs Starlight plugins in the order that they are configured after validating the user-provided
@@ -51,21 +52,24 @@ export async function runPlugins(
 					// Merge the translations injected by the plugin.
 					for (const [locale, localeTranslations] of Object.entries(translations)) {
 						pluginTranslations[locale] ??= {};
-						Object.assign(pluginTranslations[locale]!, localeTranslations);
+						Object.assign(pluginTranslations[locale], localeTranslations);
 					}
 				},
 			});
 		}
 	}
 
-	const useTranslations = createTranslationSystemFromFs(
+	const useTranslations = await createTranslationSystemFromFs(
 		starlightConfig,
 		context.config,
 		pluginTranslations
 	);
 
 	function absolutePathToLang(path: string) {
-		return getAbsolutePathFromLang(path, { astroConfig: context.config, starlightConfig });
+		return getAbsolutePathFromLang(path, {
+			docsPath: getCollectionPosixPath('docs', context.config.srcDir),
+			starlightConfig,
+		});
 	}
 
 	// A list of Astro integrations added by the various plugins.
@@ -315,7 +319,9 @@ const configSetupHookSchema = z
 				 *	}
 				 * }
 				 */
-				useTranslations: z.any() as z.Schema<ReturnType<typeof createTranslationSystemFromFs>>,
+				useTranslations: z.any() as z.Schema<
+					Awaited<ReturnType<typeof createTranslationSystemFromFs>>
+				>,
 				/**
 				 * A callback function to get the language for a given absolute file path. The returned
 				 * language can be used with the `useTranslations` helper to get UI strings for that
@@ -432,7 +438,7 @@ export type StarlightPlugin = z.input<typeof starlightPluginSchema>;
 export type HookParameters<
 	Hook extends keyof StarlightPlugin['hooks'],
 	HookFn = StarlightPlugin['hooks'][Hook],
-> = HookFn extends (...args: any) => any ? Parameters<HookFn>[0] : never;
+> = HookFn extends (...args: any[]) => unknown ? Parameters<HookFn>[0] : never;
 
 export type StarlightUserConfigWithPlugins = StarlightUserConfig & {
 	/**

package/utils/routing/data.ts

@@ -32,11 +32,11 @@ export async function getRoute(context: APIContext): Promise<Route> {
 	);
 }
 
-export async function useRouteData(
+export function useRouteData(
 	context: APIContext,
 	route: Route,
 	{ Content, headings }: RenderResult
-): Promise<StarlightRouteData> {
+): StarlightRouteData {
 	const routeData = generateRouteData({ props: { ...route, headings }, context });
 	return { ...routeData, Content };
 }
@@ -118,7 +118,7 @@ function getEditUrl({ entry }: PageProps): URL | undefined {
 export function getSiteTitle(lang: string): string {
 	const defaultLang = config.defaultLocale.lang as string;
 	if (lang && config.title[lang]) {
-		return config.title[lang] as string;
+		return config.title[lang];
 	}
 	return config.title[defaultLang] as string;
 }

package/utils/slugs.ts

@@ -39,12 +39,18 @@ function localeToDir(locale: string | undefined): 'ltr' | 'rtl' {
 	return dir || config.defaultLocale.dir;
 }
 
+/**
+ * Convert a content collection slug to a param as expected by Astro’s router.
+ * This utility handles stripping `index` from file names and matches
+ * [Astro’s param sanitization logic](https://github.com/withastro/astro/blob/687d25365a41ff8a9e6da155d3527f841abb70dd/packages/astro/src/core/routing/manifest/generator.ts#L4-L18)
+ * by normalizing strings to their canonical representations.
+ * @param slug Content collection slug
+ * @returns Param compatible with Astro’s router
+ */
 export function slugToParam(slug: string): string | undefined {
 	return slug === 'index' || slug === '' || slug === '/'
 		? undefined
-		: slug.endsWith('/index')
-			? slug.slice(0, -6)
-			: slug;
+		: (slug.endsWith('/index') ? slug.slice(0, -6) : slug).normalize();
 }
 
 export function slugToPathname(slug: string): string {

package/utils/starlight-page.ts

@@ -187,12 +187,12 @@ async function getStarlightPageFrontmatter(frontmatter: StarlightPageFrontmatter
 			// well as containing the metadata properties and this ensures we handle those correctly.
 			z.custom(
 				(value) =>
-					value &&
-					(typeof value === 'function' || typeof value === 'object') &&
-					'src' in value &&
-					'width' in value &&
-					'height' in value &&
-					'format' in value,
+					(value &&
+						(typeof value === 'function' || typeof value === 'object') &&
+						'src' in value &&
+						'width' in value &&
+						'height' in value &&
+						'format' in value) as ReturnType<ImageFunction>,
 				'Invalid image passed to `<StarlightPage>` component. Expected imported `ImageMetadata` object.'
 			)) as ImageFunction,
 	});

package/utils/translations-fs.ts

@@ -16,13 +16,13 @@ const contentCollectionFileExtensions = ['.json', '.yaml', '.yml'];
  *
  * @see [`./translations.ts`](./translations.ts)
  */
-export function createTranslationSystemFromFs<T extends i18nSchemaOutput>(
+export async function createTranslationSystemFromFs<T extends i18nSchemaOutput>(
 	opts: Pick<StarlightConfig, 'defaultLocale' | 'locales'>,
 	{ srcDir }: Pick<AstroConfig, 'srcDir'>,
 	pluginTranslations: Record<string, T> = {}
 ) {
 	/** All translation data from the i18n collection, keyed by `id`, which matches locale. */
-	let userTranslations: Record<string, i18nSchemaOutput> = {};
+	const userTranslations: Record<string, i18nSchemaOutput> = {};
 	try {
 		const i18nDir = new URL('content/i18n/', srcDir);
 		// Load the user’s i18n directory
@@ -34,11 +34,12 @@ export function createTranslationSystemFromFs<T extends i18nSchemaOutput>(
 			const id = filePath.name;
 			const url = new URL(filePath.base, i18nDir);
 			const content = fs.readFileSync(new URL(file, i18nDir), 'utf-8');
-			const data =
+			const data = (
 				filePath.ext === '.json'
 					? JSON.parse(content)
-					: yaml.load(content, { filename: fileURLToPath(url) });
-			userTranslations[id] = data as i18nSchemaOutput;
+					: yaml.load(content, { filename: fileURLToPath(url) })
+			) as i18nSchemaOutput;
+			userTranslations[id] = data;
 		}
 	} catch (e: unknown) {
 		if (e instanceof Error && 'code' in e && e.code === 'ENOENT') {

package/utils/translations.ts

@@ -8,6 +8,7 @@ import type { RemoveIndexSignature } from './types';
 import { getCollectionPathFromRoot } from './collection';
 import { stripExtension, stripLeadingSlash } from './path';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - This may be a type error in projects without an i18n collection and running
 // `tsc --noEmit` in their project. Note that it is not possible to inline this type in
 // `UserI18nSchema` because this would break types for users having multiple data collections.
@@ -28,6 +29,7 @@ async function loadTranslations() {
 	const warn = console.warn;
 	console.warn = () => {};
 	const userTranslations: Record<string, UserI18nSchema> = Object.fromEntries(
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore — may be a type error in projects without an i18n collection
 		(await getCollection('i18n')).map(({ id, data, filePath }) => {
 			const lang =
@@ -49,7 +51,7 @@ async function loadTranslations() {
  * const t = useTranslations('en');
  * const label = t('search.label'); // => 'Search'
  */
-export const useTranslations = createTranslationSystem(
+export const useTranslations = await createTranslationSystem(
 	config,
 	await loadTranslations(),
 	pluginTranslations