fix: autogenerated sidebar alphabetical sort (#1298)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

3 files changed, 54 insertions, 8 deletions

diff --git a/.changeset/many-bags-press.md b/.changeset/many-bags-press.md
new file mode 100644
index 00000000..478055ef
--- /dev/null
+++ b/.changeset/many-bags-press.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes incorrect sorting behavior for some autogenerated sidebars
diff --git a/packages/starlight/__tests__/basics/sorting.test.ts b/packages/starlight/__tests__/basics/sorting.test.ts
new file mode 100644
index 00000000..1129928b
--- /dev/null
+++ b/packages/starlight/__tests__/basics/sorting.test.ts
@@ -0,0 +1,36 @@
+import { expect, test, vi } from 'vitest';
+import { flattenSidebar, getSidebar } from '../../utils/navigation';
+
+vi.mock('astro:content', async () =>
+	(await import('../test-utils')).mockedAstroContent({
+		docs: [
+			['index.mdx', { title: 'first' }],
+			// @ts-expect-error — Using a slug not present in Starlight docs site
+			['guides/example.md', { title: 'second' }],
+			// @ts-expect-error — Using a slug not present in Starlight docs site
+			['reference/example.md', { title: 'third' }],
+			// @ts-expect-error — Using a slug not present in Starlight docs site
+			['reference/rod/foo.md', { title: 'fourth' }],
+			// @ts-expect-error — Using a slug not present in Starlight docs site
+			['reference/rod/zip.md', { title: 'fifth' }],
+			// @ts-expect-error — Using a slug not present in Starlight docs site
+			['reference/zoo.md', { title: 'sixth' }],
+		],
+	})
+);
+
+test('autogenerated sidebar is sorted alphabetically by filename', () => {
+	const sidebar = getSidebar('/', undefined);
+	const flattened = flattenSidebar(sidebar);
+
+	expect(flattened.map((e) => e.label)).toMatchInlineSnapshot(`
+		[
+		  "first",
+		  "second",
+		  "third",
+		  "fourth",
+		  "fifth",
+		  "sixth",
+		]
+	`);
+});
diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts
index 9d1bf3e0..73626a7c 100644
--- a/packages/starlight/utils/navigation.ts
+++ b/packages/starlight/utils/navigation.ts
@@ -212,19 +212,24 @@ function getOrder(routeOrDir: Route | Dir): number {
 		: // If no order value is found, set it to the largest number possible.
 		  routeOrDir.entry.data.sidebar.order ?? Number.MAX_VALUE;
 }
+/** Get the comparison ID for a given route to sort them alphabetically. */
+function getComparisonId(id: string) {
+	const filename = stripExtension(basename(id));
+	return filename === 'index' ? '' : filename;
+}
 
 /** Sort a directory’s entries by user-specified order or alphabetically if no order specified. */
-function sortDirEntries(
-	dir: [string, Dir | Route][],
-	locale: string | undefined
-): [string, Dir | Route][] {
-	const collator = new Intl.Collator(localeToLang(locale));
+function sortDirEntries(dir: [string, Dir | Route][]): [string, Dir | Route][] {
+	const collator = new Intl.Collator(localeToLang(undefined));
 	return dir.sort(([keyA, a], [keyB, b]) => {
 		const [aOrder, bOrder] = [getOrder(a), getOrder(b)];
 		// Pages are sorted by order in ascending order.
 		if (aOrder !== bOrder) return aOrder < bOrder ? -1 : 1;
 		// If two pages have the same order value they will be sorted by their slug.
-		return collator.compare(isDir(a) ? keyA : a.slug, isDir(b) ? keyB : b.slug);
+		return collator.compare(
+			isDir(a) ? keyA : getComparisonId(a.id),
+			isDir(b) ? keyB : getComparisonId(b.id)
+		);
 	});
 }
 
@@ -237,7 +242,7 @@ function groupFromDir(
 	locale: string | undefined,
 	collapsed: boolean
 ): Group {
-	const entries = sortDirEntries(Object.entries(dir), locale).map(([key, dirOrRoute]) =>
+	const entries = sortDirEntries(Object.entries(dir)).map(([key, dirOrRoute]) =>
 		dirToItem(dirOrRoute, `${fullPath}/${key}`, key, currentPathname, locale, collapsed)
 	);
 	return {
@@ -270,7 +275,7 @@ function sidebarFromDir(
 	locale: string | undefined,
 	collapsed: boolean
 ) {
-	return sortDirEntries(Object.entries(tree), locale).map(([key, dirOrRoute]) =>
+	return sortDirEntries(Object.entries(tree)).map(([key, dirOrRoute]) =>
 		dirToItem(dirOrRoute, key, key, currentPathname, locale, collapsed)
 	);
 }