Fix sidebar issue in custom pages with custom sidebar (#2614)

Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Nov 19, 2024 · 9a31980 · 9a31980
1 parent a73780f
commit 9a31980
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/short-planets-sin.md 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
@@ -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
@@ -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) {