Show page subheadings in search results (#692)

4 files changed, 143 insertions, 53 deletions

diff --git a/.changeset/tame-squids-remember.md b/.changeset/tame-squids-remember.md
new file mode 100644
index 00000000..9582f90d
--- /dev/null
+++ b/.changeset/tame-squids-remember.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Upgrade Pagefind to v1 and display page headings in search results
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
index ea2ae84a..f3fab2ba 100644
--- a/packages/starlight/components/Search.astro
+++ b/packages/starlight/components/Search.astro
@@ -58,25 +58,28 @@ const pagefindTranslations = {
 			const dialog = this.querySelector('dialog')!;
 			const dialogFrame = this.querySelector('.dialog-frame')!;
 
-			/** Close the modal if a user clicks outside of the modal. */
-			const onWindowClick = (event: MouseEvent) => {
+			/** Close the modal if a user clicks on a link or outside of the modal. */
+			const onClick = (event: MouseEvent) => {
+				const isLink = 'href' in (event.target || {});
 				if (
-					document.body.contains(event.target as Node) &&
-					!dialogFrame.contains(event.target as Node)
-				)
+					isLink ||
+					(document.body.contains(event.target as Node) &&
+						!dialogFrame.contains(event.target as Node))
+				) {
 					closeModal();
+				}
 			};
 
 			const openModal = (event?: MouseEvent) => {
 				dialog.showModal();
 				this.querySelector('input')?.focus();
 				event?.stopPropagation();
-				window.addEventListener('click', onWindowClick);
+				window.addEventListener('click', onClick);
 			};
 
 			const closeModal = () => {
 				dialog.close();
-				window.removeEventListener('click', onWindowClick);
+				window.removeEventListener('click', onClick);
 			};
 
 			openBtn.addEventListener('click', openModal);
@@ -113,6 +116,7 @@ const pagefindTranslations = {
 						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
 						showImages: false,
 						translations,
+						showSubResults: true,
 					});
 				});
 			});
@@ -179,7 +183,7 @@ const pagefindTranslations = {
 	.dialog-frame {
 		flex-direction: column;
 		gap: 1rem;
-		padding: 1.5rem;
+		padding: 1rem;
 	}
 
 	button[data-close-modal] {
@@ -218,10 +222,31 @@ const pagefindTranslations = {
 			min-height: 15rem;
 			max-height: calc(100% - 8rem);
 		}
+
+		.dialog-frame {
+			padding: 1.5rem;
+		}
 	}
 </style>
 
 <style is:global>
+	#starlight__search {
+		--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+		--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+		--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+		--sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+		--sl-search-page-icon-inline-start: calc(
+			(var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
+		);
+		--sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+		--sl-search-tree-diagram-inline-start: calc(
+			(var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
+		);
+	}
+
 	#starlight__search .pagefind-ui__form::before {
 		--pagefind-ui-text: var(--sl-color-gray-1);
 		opacity: 1;
@@ -260,22 +285,36 @@ const pagefindTranslations = {
 	}
 
 	#starlight__search .pagefind-ui__results > * + * {
-		margin-top: 0.5rem;
+		margin-top: var(--sl-search-result-spacing);
 	}
 	#starlight__search .pagefind-ui__result {
-		position: relative;
 		border: 0;
-		border-radius: 0.25rem;
-		padding: 1rem;
+		padding: 0;
+	}
+
+	#starlight__search .pagefind-ui__result-nested {
+		position: relative;
+		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+		padding-inline-start: var(--sl-search-result-pad-inline-start);
+	}
+
+	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+	#starlight__search .pagefind-ui__result-nested {
+		position: relative;
 		background-color: var(--sl-color-black);
 	}
 
-	#starlight__search .pagefind-ui__result:hover,
-	#starlight__search .pagefind-ui__result:focus-within {
+	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+	#starlight__search
+		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+	#starlight__search .pagefind-ui__result-nested:hover,
+	#starlight__search .pagefind-ui__result-nested:focus-within {
 		outline: 1px solid var(--sl-color-accent-high);
 	}
 
-	#starlight__search .pagefind-ui__result:focus-within {
+	#starlight__search
+		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+	#starlight__search .pagefind-ui__result-nested:focus-within {
 		background-color: var(--sl-color-accent-low);
 	}
 
@@ -284,7 +323,37 @@ const pagefindTranslations = {
 		margin-top: 0;
 	}
 
+	#starlight__search .pagefind-ui__result-inner > :first-child {
+		border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+	}
+	#starlight__search .pagefind-ui__result-inner > :last-child {
+		border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+	}
+
+	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+		padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
+		padding-inline-start: var(--sl-search-result-pad-inline-start);
+	}
+	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: var(--sl-search-page-icon-inline-start);
+		width: var(--sl-search-page-icon-size);
+		background: var(--sl-color-gray-3);
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+			center no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+			center no-repeat;
+	}
+
+	#starlight__search .pagefind-ui__result-inner {
+		align-items: stretch;
+		gap: 1px;
+	}
+
 	#starlight__search .pagefind-ui__result-link {
+		position: unset;
 		--pagefind-ui-text: var(--sl-color-white);
 		font-weight: 600;
 	}
@@ -293,6 +362,27 @@ const pagefindTranslations = {
 		text-decoration: none;
 	}
 
+	#starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+		content: unset;
+	}
+
+	#starlight__search .pagefind-ui__result-nested::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+		width: var(--sl-search-tree-diagram-size);
+		background: var(--sl-color-gray-4);
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+			0% 0% / 100% no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+			0% 0% / 100% no-repeat;
+	}
+	#starlight__search .pagefind-ui__result-nested:last-child::before {
+		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+	}
+
 	#starlight__search .pagefind-ui__result-link::after {
 		content: '';
 		position: absolute;
@@ -300,18 +390,13 @@ const pagefindTranslations = {
 	}
 
 	#starlight__search .pagefind-ui__result-excerpt {
-		font-size: var(--sl-text-body-sm);
+		font-size: calc(1rem * var(--pagefind-ui-scale));
 		word-break: break-word;
 	}
 
 	#starlight__search mark {
-		color: var(--sl-color-white);
-		background-color: var(--sl-color-accent-low);
-		font-weight: 500;
-		padding: 0.1em 0.2em;
-	}
-
-	#starlight__search .pagefind-ui__result:focus-within mark {
-		text-decoration: underline;
+		color: var(--sl-color-gray-2);
+		background-color: transparent;
+		font-weight: 600;
 	}
 </style>
diff --git a/packages/starlight/package.json b/packages/starlight/package.json
index b8da7061..3641200b 100644
--- a/packages/starlight/package.json
+++ b/packages/starlight/package.json
@@ -43,13 +43,13 @@
   "dependencies": {
     "@astrojs/mdx": "^1.0.0",
     "@astrojs/sitemap": "^3.0.0",
-    "@pagefind/default-ui": "1.0.0-beta.2",
+    "@pagefind/default-ui": "^1.0.2",
     "@types/mdast": "^3.0.11",
     "bcp-47": "^2.1.0",
     "execa": "^7.1.1",
     "hast-util-select": "^5.0.5",
     "hastscript": "^7.2.0",
-    "pagefind": "1.0.0-beta.2",
+    "pagefind": "^1.0.2",
     "rehype": "^12.0.1",
     "remark-directive": "^2.0.1",
     "unified": "^10.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bed7b4e4..72c4e829 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -138,8 +142,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.0
       '@pagefind/default-ui':
-        specifier: 1.0.0-beta.2
-        version: 1.0.0-beta.2
+        specifier: ^1.0.2
+        version: 1.0.2
       '@types/mdast':
         specifier: ^3.0.11
         version: 3.0.11
@@ -156,8 +160,8 @@ importers:
         specifier: ^7.2.0
         version: 7.2.0
       pagefind:
-        specifier: 1.0.0-beta.2
-        version: 1.0.0-beta.2
+        specifier: ^1.0.2
+        version: 1.0.2
       rehype:
         specifier: ^12.0.1
         version: 12.0.1
@@ -1240,44 +1244,44 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
 
-  /@pagefind/darwin-arm64@1.0.0-beta.2:
-    resolution: {integrity: sha512-r9aSd1PreWJeGwrdK92udvySHfJSSvKyV6T+4YONh9lGKS3K2+YbX8K584IotFKB/60XLkdzmFIFLoK3CjOZ7w==}
+  /@pagefind/darwin-arm64@1.0.2:
+    resolution: {integrity: sha512-saHinnIbchShIeT7+fFe77k3cbtXxbLcK4m+MjZA8VM/lrLeTaS+UYUYCzpKmV4U+APeELnquL4fhDquFAcScQ==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@pagefind/darwin-x64@1.0.0-beta.2:
-    resolution: {integrity: sha512-1YjlJu75oScva4PPDH2Q/FWAzfvP15XAxCmfqsMl6dtwfaZ4oqZ0Vx2jQ5CAxX2/FeDzqGQg7xkdngLekGiQwA==}
+  /@pagefind/darwin-x64@1.0.2:
+    resolution: {integrity: sha512-CAyPARt41lHPpHD8O7O2zv8MJa06iPa6nrGt+o9puY47OcNM6x8GxCAKPR1OTfEsiuwPovAdi7rvwJ35z3tnrA==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@pagefind/default-ui@1.0.0-beta.2:
-    resolution: {integrity: sha512-x75qS7ywD8iG95CLyCTmfn07tMIfAhWTuu6mT56WGpl9Ci3Z4PTfqMRhzhRDTinHEAIKO3aAtQ5TrXuCCnXVoQ==}
+  /@pagefind/default-ui@1.0.2:
+    resolution: {integrity: sha512-KrzZi7hNQ+BoxREeA5TD502M8RSjJWhYRyGa70RVIIPgw1MVZbTKr4Kmk6YdmKNPlBmPWXtv9IHC+e3IPUcVSg==}
     dev: false
 
-  /@pagefind/linux-arm64@1.0.0-beta.2:
-    resolution: {integrity: sha512-vPBFjWsmI9CBsZctmXSGc2qT7O8OPv9iLoXlQcmUrXSirwY4kESmi2W/t2Cpq6Theatyb+D7zMd0KZc6u0bX3w==}
+  /@pagefind/linux-arm64@1.0.2:
+    resolution: {integrity: sha512-bGpLKV2WLkLH/Qn/ibHJj7oTPvMcpJMwcjdPWk+tWqBl5xoBK1l4k45Gi70deCdIjKom5TcXuS8mgcXY8tSJ0A==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@pagefind/linux-x64@1.0.0-beta.2:
-    resolution: {integrity: sha512-jUyS6+OH8x8q8Sn4OPi1Br7DkTlUqeaiDBAqGmfcQARonD5lf/JpNidTSM+YYa/1cRgTijOyX1RbrwQE749LUg==}
+  /@pagefind/linux-x64@1.0.2:
+    resolution: {integrity: sha512-59beym/0riPCTjNeT91ksqlBToW0FFeFAHKxvM0nmvzEeNYurgoZY+8fJz9Xvz8icXhi2NxLirDgclAMsahWWQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@pagefind/windows-x64@1.0.0-beta.2:
-    resolution: {integrity: sha512-I7vrQQswID6+9MdjSwnugqY9xBrSaCDdVJ9YCQMobsv5PONzdVXRjDUwDR72MAli0y/KxDYWGzBpDfKMSsvz6g==}
+  /@pagefind/windows-x64@1.0.2:
+    resolution: {integrity: sha512-lwae3p7xOVihaTv6D8gJJLl05U4lDvkyMN9azlpjlWbfhBJXJnvD2CQTDwzZxK+u6ZDJUR1Qcz2oVeedyQpMjQ==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -4899,15 +4903,15 @@ packages:
       - utf-8-validate
     dev: true
 
-  /pagefind@1.0.0-beta.2:
-    resolution: {integrity: sha512-YwtoH63JRdh4ZoEeo4aPEKXyUyNR8l/wgH9up4HVB0xaGEz4R0BgefHC2MAvkIAX1sq4TgITgInqunL0wQWumA==}
+  /pagefind@1.0.2:
+    resolution: {integrity: sha512-UxZgvmknPrH25qXZL7aK5fUOj1GrZxEQb2Mdd4l2m/PtdKJfrszxOR2EI1349bCYZ+OxiPn7wz2NCRNzb3QPpA==}
     hasBin: true
     optionalDependencies:
-      '@pagefind/darwin-arm64': 1.0.0-beta.2
-      '@pagefind/darwin-x64': 1.0.0-beta.2
-      '@pagefind/linux-arm64': 1.0.0-beta.2
-      '@pagefind/linux-x64': 1.0.0-beta.2
-      '@pagefind/windows-x64': 1.0.0-beta.2
+      '@pagefind/darwin-arm64': 1.0.2
+      '@pagefind/darwin-x64': 1.0.2
+      '@pagefind/linux-arm64': 1.0.2
+      '@pagefind/linux-x64': 1.0.2
+      '@pagefind/windows-x64': 1.0.2
     dev: false
 
   /parse-entities@4.0.1:
@@ -6771,7 +6775,3 @@ packages:
 
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false