feat: support view transitions

shishkin · Jan 9, 2024 · 6feefb9 · 6feefb9
1 parent 5c5675e
commit 6feefb9
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@
 - Supports customized base URL path
 - Supports multiple instances of the component on a page
 - Supports pre-filled search query
+- Supports [Astro view transitions](https://docs.astro.build/en/guides/view-transitions)
 
 ## Usage
 

diff --git a/packages/astro-pagefind/src/components/Search.astro b/packages/astro-pagefind/src/components/Search.astro
@@ -14,7 +14,7 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 
 <div
   id={id}
-  class:list={[className]}
+  class:list={[className, "pagefind-init"]}
   data-pagefind-ui
   data-bundle-path={bundlePath}
   data-query={query}
@@ -23,9 +23,10 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 </div>
 <script>
   import { PagefindUI } from "@pagefind/default-ui";
-  window.addEventListener("DOMContentLoaded", () => {
+
+  function initPageFind() {
     const allSelector = "[data-pagefind-ui]";
-    for (const el of document.querySelectorAll(allSelector)) {
+    for (const el of document.querySelectorAll(`${allSelector}.pagefind-init`)) {
       const elSelector = [
         ...(el.id ? [`#${el.id}`] : []),
         ...[...el.classList.values()].map((c) => `.${c}`),
@@ -38,6 +39,7 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
         element: elSelector,
         bundlePath,
       });
+      el.classList.remove("pagefind-init");
       const query = el.getAttribute("data-query");
       if (query) {
         const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
@@ -47,5 +49,8 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
         }
       }
     }
-  });
+  }
+
+  document.addEventListener("DOMContentLoaded", initPageFind);
+  document.addEventListener("astro:page-load", initPageFind);
 </script>
diff --git a/packages/example/astro.config.ts b/packages/example/astro.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from "astro/config";
 import pagefind from "astro-pagefind";
 
 export default defineConfig({
-  base: "/something/",
   output: "static",
   build: {
     format: "file",

diff --git a/packages/example/src/layouts/Transitions.astro b/packages/example/src/layouts/Transitions.astro
@@ -0,0 +1,14 @@
+---
+import { ViewTransitions } from "astro:transitions";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Astro</title>
+    <ViewTransitions />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/packages/example/src/pages/transition1.astro b/packages/example/src/pages/transition1.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Transitions.astro";
+import Search from "astro-pagefind/components/Search";
+---
+
+<Layout>
+  <h1>Transition 1</h1>
+  <a href="/transition2">Transition 2</a>
+  <Search />
+</Layout>
diff --git a/packages/example/src/pages/transition2.astro b/packages/example/src/pages/transition2.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Transitions.astro";
+import Search from "astro-pagefind/components/Search";
+---
+
+<Layout>
+  <h1>Transition 2</h1>
+  <a href="/transition1">Transition 1</a>
+  <Search />
+</Layout>