From 9a319807c698f65b461f456c54c413081ab551f0 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:44:25 +0100
Subject: [PATCH] Fix sidebar issue in custom pages with custom sidebar (#2614)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
---
 .changeset/short-planets-sin.md                      |  5 +++++
 .../basics/starlight-page-route-data.test.ts         | 10 ++++++----
 packages/starlight/utils/navigation.ts               | 12 +++++++++++-
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/short-planets-sin.md

diff --git a/.changeset/short-planets-sin.md b/.changeset/short-planets-sin.md
new file mode 100644
index 00000000000..60cf687f8b1
--- /dev/null
+++ b/.changeset/short-planets-sin.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes an issue with custom pages using the `<StarlightPage />` component and a custom sidebar missing highlighting for the active page and navigation links.
diff --git a/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts b/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
index abba3a76b13..91310f84a40 100644
--- a/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
+++ b/packages/starlight/__tests__/basics/starlight-page-route-data.test.ts
@@ -103,7 +103,7 @@ test('adds custom frontmatter data to route shape', async () => {
 test('uses generated sidebar when no sidebar is provided', async () => {
 	const data = await generateStarlightPageRouteData({
 		props: starlightPageProps,
-		url: starlightPageUrl,
+		url: new URL('https://example.com/getting-started/'),
 	});
 	expect(data.sidebar).toMatchInlineSnapshot(`
 		[
@@ -119,7 +119,7 @@ test('uses generated sidebar when no sidebar is provided', async () => {
 		    "attrs": {},
 		    "badge": undefined,
 		    "href": "/getting-started/",
-		    "isCurrent": false,
+		    "isCurrent": true,
 		    "label": "Getting Started",
 		    "type": "link",
 		  },
@@ -188,7 +188,7 @@ test('uses provided sidebar if any', async () => {
 				'reference/frontmatter',
 			],
 		},
-		url: starlightPageUrl,
+		url: new URL('https://example.com/test/2'),
 	});
 	expect(data.sidebar).toMatchInlineSnapshot(`
 		[
@@ -207,7 +207,7 @@ test('uses provided sidebar if any', async () => {
 		    "attrs": {},
 		    "badge": undefined,
 		    "href": "/test/2",
-		    "isCurrent": false,
+		    "isCurrent": true,
 		    "label": "Custom link 2",
 		    "type": "link",
 		  },
@@ -245,6 +245,8 @@ test('uses provided sidebar if any', async () => {
 		  },
 		]
 	`);
+	expect(data.pagination.prev?.href).toBe('/test/1');
+	expect(data.pagination.next?.href).toBe('/guides/authoring-content/');
 });
 
 test('throws error if sidebar is malformated', async () => {
diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts
index f9dffff1a3b..2ae0fa092fa 100644
--- a/packages/starlight/utils/navigation.ts
+++ b/packages/starlight/utils/navigation.ts
@@ -348,7 +348,7 @@ const intermediateSidebars = new Map<string | undefined, SidebarEntry[]>();
 export function getSidebar(pathname: string, locale: string | undefined): SidebarEntry[] {
 	let intermediateSidebar = intermediateSidebars.get(locale);
 	if (!intermediateSidebar) {
-		intermediateSidebar = getSidebarFromConfig(config.sidebar, pathname, locale);
+		intermediateSidebar = getIntermediateSidebarFromConfig(config.sidebar, pathname, locale);
 		intermediateSidebars.set(locale, intermediateSidebar);
 	}
 	return getSidebarFromIntermediateSidebar(intermediateSidebar, pathname);
@@ -359,6 +359,16 @@ export function getSidebarFromConfig(
 	sidebarConfig: StarlightConfig['sidebar'],
 	pathname: string,
 	locale: string | undefined
+): SidebarEntry[] {
+	const intermediateSidebar = getIntermediateSidebarFromConfig(sidebarConfig, pathname, locale);
+	return getSidebarFromIntermediateSidebar(intermediateSidebar, pathname);
+}
+
+/** Get the intermediate sidebar for the current page using the specified sidebar config. */
+function getIntermediateSidebarFromConfig(
+	sidebarConfig: StarlightConfig['sidebar'],
+	pathname: string,
+	locale: string | undefined
 ): SidebarEntry[] {
 	const routes = getLocaleRoutes(locale);
 	if (sidebarConfig) {