From a0af7cc696da987a76edab96cdd2329779e87724 Mon Sep 17 00:00:00 2001
From: Kevin Zuniga Cuellar
Date: Mon, 29 Jan 2024 06:07:30 -0500
Subject: extend config options to pagefind (#1365)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
---
 .changeset/silver-dots-guess.md            |  5 +++++
 package.json                               |  2 +-
 packages/starlight/components/Search.astro | 18 +++++++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/silver-dots-guess.md

diff --git a/.changeset/silver-dots-guess.md b/.changeset/silver-dots-guess.md
new file mode 100644
index 00000000..f5ea3506
--- /dev/null
+++ b/.changeset/silver-dots-guess.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Correctly format Pagefind search result links when `trailingSlash: 'never'` is used
diff --git a/package.json b/package.json
index 1d7e1870..40eee078 100644
--- a/package.json
+++ b/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",
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
index 2b5f3ac4..ec53fc3e 100644
--- a/packages/starlight/components/Search.astro
+++ b/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;
+							});
+						},
 					});
 				});
 			});
-- 
cgit