add pagefind

reednel · Jan 10, 2024 · ba272c5 · ba272c5
1 parent c6e980a
commit ba272c5
Show file tree

Hide file tree

Showing 10 changed files with 254 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
+    "postbuild": "pagefind --site dist",
     "format": "prettier -w ./src"
   },
   "dependencies": {
@@ -47,6 +48,7 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.46.0",
+    "pagefind": "^1.0.4",
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "prettier-plugin-astro": "^0.11.0",

diff --git a/src/layouts/components/DocBrowser.astro b/src/layouts/components/DocBrowser.astro
@@ -1,7 +1,7 @@
 ---
 import docs from "@/config/docs.json";
 const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.slice(1);
+const currentPageMatch = currentPage ? currentPage.slice(1) : null;
 
 const isCurrentPage = (item) => {
   if (item.link) {

diff --git a/src/layouts/components/DocContents.astro b/src/layouts/components/DocContents.astro
@@ -4,30 +4,30 @@ const { headings } = Astro.props;
 
 <nav aria-labelledby="grid-right">
   <div class="px-4 py-16">
-    <h3 class="dark:text-white mb-4">On This Page</h3>
-    {
-      headings.map((heading) => {
-        let className = `peer border-l-2 border-l-zinc-400 dark:border-l-zinc-700 `;
-        const sizeAndIndent = {
-          1: `pl-0 text-3xl`,
-          2: `pl-2 text-2xl`,
-          3: `pl-4 text-xl`,
-          4: `pl-6 text-lg`,
-          5: `pl-8 text-base`,
-          6: `pl-10 text-sm`,
-        };
-        className += sizeAndIndent[heading.depth] || "";
-        return (
-          <p class={className}>
-            <a
-              href={`#${heading.slug}`}
-              class="block py-1 text-zinc-600 dark:text-zinc-400 hover:text-green-600 dark:hover:text-zinc-300 transition-colors"
-            >
-              {heading.text}
-            </a>
-          </p>
-        );
-      })
-    }
+<h3 class="dark:text-white mb-4">On This Page</h3>
+{
+	headings && headings.map((heading) => {
+		let className = `peer border-l-2 border-l-zinc-400 dark:border-l-zinc-700 `;
+		const sizeAndIndent = {
+			1: `pl-0 text-3xl`,
+			2: `pl-2 text-2xl`,
+			3: `pl-4 text-xl`,
+			4: `pl-6 text-lg`,
+			5: `pl-8 text-base`,
+			6: `pl-10 text-sm`,
+		};
+		className += sizeAndIndent[heading.depth] || "";
+		return (
+			<p class={className}>
+				<a
+					href={`#${heading.slug}`}
+					class="block py-1 text-zinc-600 dark:text-zinc-400 hover:text-green-600 dark:hover:text-zinc-300 transition-colors"
+				>
+					{heading.text}
+				</a>
+			</p>
+		);
+	})
+}
   </div>
 </nav>
diff --git a/src/layouts/components/Header.astro b/src/layouts/components/Header.astro
@@ -2,7 +2,7 @@
 import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
 import config from "@/config/config.json";
 import menu from "@/config/menu.json";
-import { IoSearch } from "react-icons/io5/index.js";
+import { IoSearch, IoClose } from "react-icons/io5/index.js";
 
 export interface ChildNavigationLink {
   name: string;
@@ -100,18 +100,86 @@ const { pathname } = Astro.url;
       }
     </ul>
     <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
+      <ThemeSwitcher className="mr-5" />
       {
         settings.search && (
-          <a
-            class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
-            href="/search"
-            aria-label="search"
-          >
-            <IoSearch />
-          </a>
+          // <a
+          //   class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
+          //   href="/search"
+          //   aria-label="search"
+          // >
+          //   <IoSearch />
+          // </a>
+          <>
+            <div class="inline-block md:hidden mr-5 border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white">
+              <button id="mobile-search" aria-label="Search">
+                <IoSearch />
+              </button>
+            </div>
+            <span class="max-md:!mx-[5%] max-md:absolute max-md:left-0 max-md:mt-8 max-md:w-[90%] max-md:rounded-lg max-md:shadow hidden md:flex md:float-right md:space-x-4 flex-row-reverse py-2 px-2 md:py-1">
+              <div
+                id="mobile-search-close"
+                class="cursor-pointer md:hidden md:mr-1"
+              >
+                <IoClose />
+              </div>
+
+              <input
+                id="search"
+                type="text"
+                class="peer max-md:text-lg bg-transparent rounded-md w-full md:w-60 focus:outline-none"
+                placeholder="Search..."
+              />
+              <div class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white">
+                <IoSearch />
+              </div>
+              <div
+                id="results"
+                class="peer-placeholder-shown:hidden empty:hidden focus:block absolute top-16 max-md:-mr-2 w-full md:w-72  rounded-lg overflow-y-auto max-h-96 md:max-h-72"
+              />
+            </span>
+          </>
         )
       }
-      <ThemeSwitcher className="mr-5" />
     </div>
   </nav>
 </header>
+
+<script is:inline>
+  document.querySelector("#mobile-search")?.addEventListener("click", () => {
+    document.querySelector("#search")?.parentElement.classList.toggle("hidden");
+    document.querySelector("#search")?.parentElement.classList.toggle("flex");
+  });
+
+  document
+    .querySelector("#mobile-search-close")
+    ?.addEventListener("click", () => {
+      document.querySelector("#search")?.parentElement.classList.add("hidden");
+      document.querySelector("#search")?.parentElement.classList.remove("flex");
+    });
+
+  document.querySelector("#search")?.addEventListener("input", async (e) => {
+    // only load the pagefind script once
+    if (e.target.dataset.loaded !== "true") {
+      e.target.dataset.loaded = "true";
+      // load the pagefind script
+      window.pagefind = await import("/pagefind/pagefind.js");
+    }
+
+    // search the index using the input value
+    const search = await window.pagefind.search(e.target.value);
+
+    // clear the old results
+    document.querySelector("#results").innerHTML = "";
+
+    // add the new results
+    for (const result of search.results) {
+      const data = await result.data();
+      document.querySelector("#results").innerHTML += `
+        <a href="${data.url}" class="block px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
+          <h3 class="font-bold">${data.meta.title}</h3>
+          <p>${data.excerpt}</p>
+        </a>`;
+    }
+  });
+</script>
diff --git a/src/layouts/components/ThemeSwitcher.astro b/src/layouts/components/ThemeSwitcher.astro
@@ -16,26 +16,25 @@ const { className }: { className?: string } = Astro.props;
         <span class="sr-only">theme switcher</span>
         <span>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-100 dark:opacity-0"
-            viewBox="0 0 56 56"
-            fill="#fff"
-            height="16"
-            width="16"
+            class="absolute z-10 opacity-100 dark:opacity-0"
+            viewBox="0 0 24 24"
+            height="21"
+            width="21"
           >
-            <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
+            <path
+              fill="#000"
+              d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"
+            />
           </svg>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-0 dark:opacity-100"
+            class="absolute z-10 opacity-0 dark:opacity-100"
             viewBox="0 0 24 24"
-            fill="none"
-            height="16"
-            width="16"
+            height="21"
+            width="21"
           >
             <path
-              fill="#000"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
+              fill="#fff"
+              d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"
             />
           </svg>
         </span>

diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
@@ -1,16 +1,45 @@
 ---
+import DocBrowser from '@/components/DocBrowser.astro';
+import DocContents from '@/components/DocContents.astro';
 import Base from "@/layouts/Base.astro";
-import { getSinglePage } from "@/lib/contentParser.astro";
 import PageHeader from "@/components/PageHeader.astro";
-import { getEntryBySlug } from "astro:content";
 
 ---
 
 <Base title={"Docs"}>
-  <PageHeader title={"Docs"} />
+  <!-- <PageHeader title={"Docs"} />
   <section class="section-sm pb-0">
     <div class="container">
-
+      <h1>Documentation lives here.</h1>
+    </div>
+  </section> -->
+  <section class="section pt-7">
+    <div class="container">
+      <div class="row justify-center">
+        <div class="grid grid-cols-12">
+          <!-- Document Browser (Left) -->
+          <div class="col-span-3 sticky top-0 h-screen flex">
+            <div class="ml-auto">
+              <DocBrowser currentPage={null} />
+            </div>
+          </div>
+          <!-- Content -->
+          <main class="py-4 px-8 pb-32 col-span-6  overflow-auto">
+            <article>
+              <h1 class="mb-4">{ "Docs" }</h1>
+              <div class="content mb-10">
+                <p class="mb-4">
+                  { "Documentation lives here." }
+                </p>
+              </div>
+            </article>
+          </main>
+          <!-- Document Contents (Right) -->
+          <div class="col-span-3 sticky top-0 h-screen flex">
+            <DocContents headings={null} />
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 </Base>
diff --git a/src/pages/pagefind/pagefind.js.ts b/src/pages/pagefind/pagefind.js.ts
@@ -0,0 +1,8 @@
+// https://blog.otterlord.dev/posts/astro-search/
+import type { APIContext } from "astro"
+
+export async function GET({}: APIContext) {
+  return {
+    body: 'export const search = () => {return {results: []}}'
+  }
+}