feat: pre-filled search query

closes #11
shishkin · Jun 3, 2023 · 10f26d4 · 10f26d4
1 parent 1743519
commit 10f26d4
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 497 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@
 - Search Astro component
 - Supports customized base URL path
 - Supports multiple instances of the component on a page
+- Supports pre-filled search query
 
 ## Usage
 
@@ -48,3 +49,21 @@ import Search from "astro-pagefind/components/Search";
 ```
 
 See [Main.layout](./src/layouts/Main.astro) for a usage example.
+
+### Pre-filled Search Query
+
+In SSR mode Astro provides access to URL query parameters which can be used to pre-fill search query via a prop:
+
+```astro
+---
+import Search from "astro-pagefind/components/Search";
+
+export const prerender = false;
+
+const q = Astro.url.searchParams.get("q") ?? undefined;
+---
+
+<Search query={q} />
+```
+
+See [search.astro](./src/pages/search.astro) for a full example.
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,10 +1,18 @@
 import { defineConfig } from "astro/config";
 import pagefind from "./src/pagefind.js";
+import node from "@astrojs/node";
 
 export default defineConfig({
   base: "/something/",
+  output: "hybrid",
+  experimental: {
+    hybridOutput: true,
+  },
   build: {
     format: "file",
   },
   integrations: [pagefind()],
+  adapter: node({
+    mode: "standalone",
+  }),
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "typescript": "5.1.3"
   },
   "dependencies": {
+    "@astrojs/node": "^5.1.4",
     "@pagefind/default-ui": "^0.12.0",
     "pagefind": "^0.12.0",
     "sirv": "^2.0.2"

diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -3,15 +3,15 @@ import "@pagefind/default-ui/css/ui.css";
 import { join } from "node:path";
 import type { Props } from "./Search.js";
 
-const { id, className } = Astro.props as Props;
+const { id, className, query } = Astro.props as Props;
 const bundlePath = join(import.meta.env.BASE_URL, "_pagefind/");
 const divProps = {
   ...(id ? { id } : {}),
   ...(className ? { class: className } : {}),
 };
 ---
 
-<div {...divProps} data-pagefind-ui data-bundle-path={bundlePath}></div>
+<div {...divProps} data-pagefind-ui data-bundle-path={bundlePath} data-query={query}></div>
 <script>
   import { PagefindUI } from "@pagefind/default-ui";
   window.addEventListener("DOMContentLoaded", () => {
@@ -27,6 +27,14 @@ const divProps = {
         element: elSelector,
         bundlePath,
       });
+      const query = el.getAttribute("data-query");
+      if (query) {
+        const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
+        if (input) {
+          input.value = query;
+          input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      }
     }
   });
 </script>
diff --git a/src/components/Search.d.ts b/src/components/Search.d.ts
@@ -1,6 +1,7 @@
 export interface Props {
   readonly id?: string;
   readonly className?: string;
+  readonly query?: string;
 }
 
 export default function Search(props: Props): any;
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -5,3 +5,5 @@ layout: ~/layouts/Main.astro
 # Astro Pagefind
 
 [Astro](https://astro.build) integration for [Pagefind](https://pagefind.app/) static site search.
+
+Example of [Pre-filled Search](search?q=page).
diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -0,0 +1,21 @@
+---
+import Search from "../components/Search.astro";
+
+export const prerender = false;
+
+const q = Astro.url.searchParams.get("q") ?? undefined;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>astro-pagefind</title>
+  </head>
+  <body>
+    <h1>Pre-filled Search</h1>
+    <p>Searching for: {q}</p>
+    <Search id="search" query={q} />
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,5 @@ layout: ~/layouts/Main.astro
		# Astro Pagefind

		[Astro](https://astro.build) integration for [Pagefind](https://pagefind.app/) static site search.

		Example of [Pre-filled Search](search?q=page).