@astrojs/starlight 0.35.1 → 0.35.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/starlight
 
+## 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/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'>;
@@ -253,14 +253,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)
 			: {};
+
+	let 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/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/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.2",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

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,6 +1,3 @@
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
 const collectionNames = ['docs', 'i18n'] as const;
 export type StarlightCollection = (typeof collectionNames)[number];
 
@@ -22,12 +19,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/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
@@ -65,7 +66,10 @@ export async function runPlugins(
 	);
 
 	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.

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 {