extend config options to pagefind (#1365)

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

.changeset/silver-dots-guess.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Correctly format Pagefind search result links when `trailingSlash: 'never'` is used

package.json

@@ -29,7 +29,7 @@
     {
       "name": "/_astro/*.js",
       "path": "examples/basics/dist/_astro/*.js",
-      "limit": "22 kB"
+      "limit": "22.5 kB"
     },
     {
       "name": "/_astro/*.css",

packages/starlight/components/Search.astro

@@ -1,6 +1,7 @@
 ---
 import '@pagefind/default-ui/css/ui.css';
 import Icon from '../user-components/Icon.astro';
+import project from 'virtual:starlight/project-context';
 import type { Props } from '../props';
 
 const { labels } = Astro.props;
@@ -15,7 +16,10 @@ const pagefindTranslations = {
 };
 ---
 
-<site-search data-translations={JSON.stringify(pagefindTranslations)}>
+<site-search
+	data-translations={JSON.stringify(pagefindTranslations)}
+	data-strip-trailing-slash={project.trailingSlash === 'never'}
+>
 	<button data-open-modal disabled>
 		{
 			/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
@@ -112,10 +116,15 @@ const pagefindTranslations = {
 				translations = JSON.parse(this.dataset.translations || '{}');
 			} catch {}
 
+			const shouldStrip = this.dataset.stripTrailingSlash !== undefined;
+			const stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2');
+			const formatURL = shouldStrip ? stripTrailingSlash : (path: string) => path;
+
 			window.addEventListener('DOMContentLoaded', () => {
 				if (import.meta.env.DEV) return;
 				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
 				onIdle(async () => {
+					// @ts-expect-error — Missing types for @pagefind/default-ui package.
 					const { PagefindUI } = await import('@pagefind/default-ui');
 					new PagefindUI({
 						element: '#starlight__search',
@@ -124,6 +133,13 @@ const pagefindTranslations = {
 						showImages: false,
 						translations,
 						showSubResults: true,
+						processResult: (result: { url: string; sub_results: Array<{ url: string }> }) => {
+							result.url = formatURL(result.url);
+							result.sub_results = result.sub_results.map((sub_result) => {
+								sub_result.url = formatURL(sub_result.url);
+								return sub_result;
+							});
+						},
 					});
 				});
 			});