New Pagefind UI

docs/astro.config.mjs

@@ -35,6 +35,10 @@ export default defineConfig({
 	trailingSlash: 'always',
 	integrations: [
 		starlight({
+			// TODO(HiDeoo) Remove the overrides and associated files.
+			components: {
+				Search: './src/components/SearchOverride.astro',
+			},
 			title: 'Starlight',
 			logo: {
 				light: '/src/assets/logo-light.svg',
@@ -70,6 +74,11 @@ export default defineConfig({
 			customCss: ['./src/assets/landing.css'],
 			locales,
 			sidebar: [
+				// TODO(HiDeoo) Remove this autogenerated group.
+				{
+					label: 'Demo',
+					autogenerate: { directory: 'demo' },
+				},
 				{
 					label: 'Start Here',
 					translations: {

docs/package.json

@@ -6,6 +6,10 @@
   "scripts": {
     "test": "playwright install --with-deps chromium && playwright test",
     "dev": "astro dev",
+    "comment": "// TODO(HiDeoo) Remove these pagefind related scripts",
+    "pagefind": "pnpm run --stream /^pagefind:/",
+    "pagefind:build": "astro build && astro preview",
+    "pagefind:dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",

docs/src/assets/landing.css

@@ -15,7 +15,7 @@
 			60rem 30rem;
 }
 
-[data-has-hero] header {
+[data-has-hero] .page > header {
 	border-bottom: 1px solid transparent;
 	background-color: transparent;
 	-webkit-backdrop-filter: blur(16px);

docs/src/components/SearchOverride.astro

@@ -0,0 +1,64 @@
+---
+import Default from '@astrojs/starlight/components/Search.astro';
+
+// TODO(HiDeoo) Delete this override.
+
+const { id } = Astro.locals.starlightRoute;
+
+const triggerType =
+	id === 'demo/trigger-filters' ? 'filters' : id === 'demo/trigger-search' ? 'search' : undefined;
+---
+
+{
+	triggerType ? (
+		<custom-site-search data-trigger-type={triggerType}>
+			<Default>
+				<slot />
+			</Default>
+		</custom-site-search>
+	) : (
+		<Default>
+			<slot />
+		</Default>
+	)
+}
+
+<script>
+	customElements.define(
+		'custom-site-search',
+		class CustomSiteSearch extends HTMLElement {
+			constructor() {
+				super();
+
+				const triggerType = this.dataset.triggerType;
+				if (!triggerType) return;
+
+				this.#applyTrigger(triggerType);
+			}
+
+			async #applyTrigger(triggerType: string) {
+				const { getPagefindApi } = await import('@astrojs/starlight/pagefind');
+				const starlightPagefindApi = await getPagefindApi();
+
+				switch (triggerType) {
+					case 'filters': {
+						starlightPagefindApi.triggerFilters({
+							author: ['Alice'],
+						});
+						break;
+					}
+					case 'search': {
+						starlightPagefindApi.triggerSearch('test');
+						break;
+					}
+				}
+			}
+		}
+	);
+</script>
+
+<style>
+	custom-site-search {
+		display: contents;
+	}
+</style>

docs/src/content/docs/demo/trigger-filters.md

@@ -0,0 +1,11 @@
+---
+title: Trigger Filters API
+---
+
+:::danger
+// TODO(HiDeoo) Delete this page.
+:::
+
+This page exists to test a public API for triggering filters in the Pagefind search component.
+
+When doing a search from this page, e.g. for the word `test`, search results should be filtered by default to only include results that have the filter `author` set to `Alice`.

docs/src/content/docs/demo/trigger-search.md

@@ -0,0 +1,11 @@
+---
+title: Trigger Search API
+---
+
+:::danger
+// TODO(HiDeoo) Delete this page.
+:::
+
+This page exists to test a public API for searching with the Pagefind search component.
+
+When opening the search modal from this page, a search for the word `test` should be performed by default.

docs/src/content/docs/guides/i18n.mdx

@@ -232,24 +232,6 @@ You can provide translations for additional languages you support — or overrid
    }
    ```
 
-   Starlight’s search modal is powered by the [Pagefind](https://pagefind.app/) library.
-   You can set translations for Pagefind’s UI in the same JSON file using `pagefind` keys:
-
-   ```json
-   {
-   	"pagefind.clear_search": "Clear",
-   	"pagefind.load_more": "Load more results",
-   	"pagefind.search_label": "Search this site",
-   	"pagefind.filters_label": "Filters",
-   	"pagefind.zero_results": "No results for [SEARCH_TERM]",
-   	"pagefind.many_results": "[COUNT] results for [SEARCH_TERM]",
-   	"pagefind.one_result": "[COUNT] result for [SEARCH_TERM]",
-   	"pagefind.alt_search": "No results for [SEARCH_TERM]. Showing results for [DIFFERENT_TERM] instead",
-   	"pagefind.search_suggestion": "No results for [SEARCH_TERM]. Try one of the following searches:",
-   	"pagefind.searching": "Searching for [SEARCH_TERM]..."
-   }
-   ```
-
  </Steps>
 
 ### Extend translation schema

eslint.config.mjs

@@ -43,11 +43,6 @@ export default tseslint.config(
 			},
 		},
 	},
-	// Disabled typed linting in JavaScript files.
-	{
-		files: ['**/*.js', '**/*.cjs', '**/*.mjs'],
-		extends: [tseslint.configs.disableTypeChecked],
-	},
 
 	// Disable all formatting rules.
 	prettierConfig,
@@ -82,6 +77,14 @@ export default tseslint.config(
 			// fallbacks for some types that may not be accessible in some user environments, e.g. i18n
 			// keys for plugins.
 			'@typescript-eslint/no-redundant-type-constituents': 'off',
+			// Allow for using async event handlers without needing to use an async IIFE.
+			'@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
 		},
+	},
+
+	// Disabled typed linting in JavaScript files.
+	{
+		files: ['**/*.js', '**/*.cjs', '**/*.mjs'],
+		extends: [tseslint.configs.disableTypeChecked],
 	}
 );