@astrojs/starlight 0.41.10 → 0.41.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/starlight
 
+## 0.41.11
+
+### Patch Changes
+
+- [#4167](https://github.com/withastro/starlight/pull/4167) [`32a5e29`](https://github.com/withastro/starlight/commit/32a5e29127c13946ce746c36d7cb194f35d11952) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a layout issue and anchor links appearing for hidden headings, e.g. footnote headings, when `markdown.headingLinks` is enabled or the `<AnchorHeading>` component is used.
+
+- [#4148](https://github.com/withastro/starlight/pull/4148) [`cdfafd8`](https://github.com/withastro/starlight/commit/cdfafd8eedbbd6653cd6a1d3b1542b44ed1ba19e) Thanks [@ematipico](https://github.com/ematipico)! - Optimizes sidebar data generation logic to speed up sites with large sidebars
+
 ## 0.41.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.41.10",
+  "version": "0.41.11",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -53,6 +53,7 @@
   "devDependencies": {
     "@astrojs/markdown-remark": "^7.2.2",
     "@playwright/test": "^1.61.1",
+    "@codspeed/vitest-plugin": "^5.7.1",
     "@types/node": "^22.19.17",
     "@vitest/coverage-v8": "^4.1.5",
     "astro": "^7.1.6",
@@ -96,6 +97,8 @@
   "scripts": {
     "test": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vitest",
     "test:coverage": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vitest run --coverage",
+    "bench": "pnpm bench:functional",
+    "bench:functional": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vitest bench --run --config vitest.functional.bench.config.ts __bench_fn__/*.bench.ts",
     "test:e2e": "playwright install --with-deps chromium && playwright test",
     "test:e2e:ci": "playwright test"
   }

package/style/anchor-links.css

@@ -45,6 +45,11 @@ how we do it.
 		line-height: var(--sl-line-height-headings);
 	}
 
+	/* If the heading is hidden, remove the wrapper's box to avoid unwanted spacing. */
+	.sl-markdown-content .sl-heading-wrapper:has(> :first-child:is(.sr-only, [hidden])) {
+		display: contents;
+	}
+
 	/* We need to apply the same rule we use for heading spacing to the parent wrapper. */
 	.sl-markdown-content
 		:not(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper)
@@ -75,7 +80,7 @@ how we do it.
 	/* ======================================================
    HEADING
    ====================================================== */
-	.sl-markdown-content .sl-heading-wrapper > :first-child {
+	.sl-markdown-content .sl-heading-wrapper > :first-child:not([hidden]) {
 		display: inline;
 		/* Apply end-of-line padding to the heading element. */
 		padding-inline-end: var(--sl-anchor-icon-space);
@@ -96,6 +101,13 @@ how we do it.
 		display: inline-flex;
 	}
 
+	/* Hide anchor links for headings that are hidden. */
+	.sl-markdown-content
+		.sl-heading-wrapper:has(> :first-child:is(.sr-only, [hidden]))
+		> .sl-anchor-link {
+		display: none;
+	}
+
 	/* Increase clickable area for anchor links with a pseudo element that doesn’t impact layout. */
 	.sl-markdown-content .sl-anchor-link::after {
 		content: '';

package/utils/navigation.ts

@@ -20,7 +20,7 @@ import {
 	stripExtension,
 	stripLeadingAndTrailingSlashes,
 } from './path';
-import { getLocaleRoutes, routes } from './routing';
+import { getLocaleRoutes, getRouteById } from './routing';
 import type {
 	SidebarGroup,
 	SidebarLink,
@@ -42,6 +42,7 @@ const SlugKey = Symbol('SlugKey');
 const rootAutogenerate: SidebarAutogenerateRouteData = { directory: '' };
 
 const neverPathFormatter = createPathFormatter({ trailingSlash: 'never' });
+const sidebarCollator = new Intl.Collator(localeToLang(undefined));
 
 const docsCollectionPathFromRoot = getCollectionPathFromRoot('docs', project);
 
@@ -142,7 +143,7 @@ function linkFromInternalSidebarLinkItem(
 	// Astro passes root `index.[md|mdx]` entries with a slug of `index`
 	const slug = item.slug === 'index' ? '' : item.slug;
 	const localizedSlug = locale ? (slug ? locale + '/' + slug : locale) : slug;
-	const route = routes.find((entry) => localizedSlug === entry.id);
+	const route = getRouteById(localizedSlug);
 	if (!route) {
 		const hasExternalSlashes = item.slug.at(0) === '/' || item.slug.at(-1) === '/';
 		if (hasExternalSlashes) {
@@ -206,11 +207,6 @@ function makeLink({ attrs = {}, badge, autogenerate, ...opts }: MakeLinkOptions)
 	};
 }
 
-/** Test if two paths are equivalent even if formatted differently. */
-function pathsMatch(pathA: string, pathB: string) {
-	return neverPathFormatter(pathA) === neverPathFormatter(pathB);
-}
-
 /** Get the segments leading to a page. */
 function getBreadcrumbs(path: string, baseDir: string): string[] {
 	// Strip extension from path.
@@ -294,21 +290,26 @@ function linkFromRoute(
  * Directories have the weight of the lowest weighted route they contain.
  */
 function getOrder(routeOrDir: Route | Dir): number {
-	return isDir(routeOrDir)
+	const cachedOrder = orderByEntry.get(routeOrDir);
+	if (cachedOrder !== undefined) return cachedOrder;
+	const order = isDir(routeOrDir)
 		? Math.min(...Object.values(routeOrDir).flatMap(getOrder))
 		: // If no order value is found, set it to the largest number possible.
 			(routeOrDir.entry.data.sidebar.order ?? Number.MAX_VALUE);
+	orderByEntry.set(routeOrDir, order);
+	return order;
 }
 
+const orderByEntry = new WeakMap<Dir | Route, number>();
+
 /** Sort a directory’s entries by user-specified order or alphabetically if no order specified. */
 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) ? a[SlugKey] : a.id, isDir(b) ? b[SlugKey] : b.id);
+		return sidebarCollator.compare(isDir(a) ? a[SlugKey] : a.id, isDir(b) ? b[SlugKey] : b.id);
 	});
 }
 
@@ -435,19 +436,20 @@ function setIntermediateSidebarCurrentEntry(
 
 /** Finds the current page in a sidebar. */
 function getSidebarCurrentEntry(sidebar: SidebarEntry[], pathname: string): SidebarLink | null {
-	for (const entry of sidebar) {
-		if (entry.type === 'link' && pathsMatch(encodeURI(entry.href), pathname)) {
-			return entry;
-		}
-
-		if (entry.type === 'group') {
-			const currentEntry = getSidebarCurrentEntry(entry.entries, pathname);
-			if (currentEntry) return currentEntry;
+	let entriesByPath = sidebarEntriesByPath.get(sidebar);
+	if (!entriesByPath) {
+		entriesByPath = new Map();
+		for (const entry of flattenSidebar(sidebar)) {
+			const path = neverPathFormatter(encodeURI(entry.href));
+			if (!entriesByPath.has(path)) entriesByPath.set(path, entry);
 		}
+		sidebarEntriesByPath.set(sidebar, entriesByPath);
 	}
-	return null;
+	return entriesByPath.get(neverPathFormatter(pathname)) ?? null;
 }
 
+const sidebarEntriesByPath = new WeakMap<SidebarEntry[], Map<string, SidebarLink>>();
+
 /** Generates a deterministic string based on the content of the passed sidebar. */
 export function getSidebarHash(sidebar: SidebarEntry[]): string {
 	let hash = 0;
@@ -472,11 +474,17 @@ function recursivelyBuildSidebarIdentity(sidebar: SidebarEntry[]): string {
 
 /** Turn the nested tree structure of a sidebar into a flat list of all the links. */
 export function flattenSidebar(sidebar: SidebarEntry[]): SidebarLink[] {
-	return sidebar.flatMap((entry) =>
+	const cachedSidebar = flattenedSidebars.get(sidebar);
+	if (cachedSidebar) return cachedSidebar;
+	const flattenedSidebar = sidebar.flatMap((entry) =>
 		entry.type === 'group' ? flattenSidebar(entry.entries) : entry
 	);
+	flattenedSidebars.set(sidebar, flattenedSidebar);
+	return flattenedSidebar;
 }
 
+const flattenedSidebars = new WeakMap<SidebarEntry[], SidebarLink[]>();
+
 /** Get previous/next pages in the sidebar or the ones from the frontmatter if any. */
 export function getPrevNextLinks(
 	sidebar: SidebarEntry[],

package/utils/routing/index.ts

@@ -12,7 +12,6 @@ validateLogoImports();
 
 interface Path extends GetStaticPathsItem {
 	params: { slug: string | undefined };
-	props: Route;
 }
 
 /**
@@ -61,10 +60,10 @@ function getRoutes(): Route[] {
 			if (!localeConfig) continue;
 			const locale = key === 'root' ? undefined : key;
 			const localeDocs = getLocaleDocs(locale);
+			const localeDocIds = new Set(localeDocs.map(({ id }) => id));
 			for (const fallback of defaultLocaleDocs) {
 				const id = localizedSlug(fallback.id, locale);
-				const doesNotNeedFallback = localeDocs.some((doc) => doc.id === id);
-				if (doesNotNeedFallback) continue;
+				if (localeDocIds.has(id)) continue;
 				routes.push({
 					entry: fallback,
 					id,
@@ -82,6 +81,12 @@ function getRoutes(): Route[] {
 }
 export const routes = getRoutes();
 
+const routesById = new Map(routes.map((route) => [route.id, route]));
+
+export function getRouteById(id: string): Route | undefined {
+	return routesById.get(id);
+}
+
 function getParamRouteMapping(): ReadonlyMap<string | undefined, Route> {
 	const map = new Map<string | undefined, Route>();
 	for (const route of routes) {
@@ -98,7 +103,6 @@ export function getRouteBySlugParam(slugParam: string | undefined): Route | unde
 function getPaths(): Path[] {
 	return routes.map((route) => ({
 		params: { slug: slugToParam(route.id) },
-		props: route,
 	}));
 }
 export const paths = getPaths();