Add a search component

.devcontainer/devcontainer.json

@@ -0,0 +1,5 @@
+{
+  "tasks": {
+    "launch": "yarn start"
+  }
+}

src/components/header.astro

@@ -3,6 +3,7 @@ import { Icon } from "astro-icon/components";
 import { NavigationLinks, Logo } from "../config";
 import Theme from "../components/theme.astro";
 import Img from "../components/img.astro";
+import Search from "../components/search.astro";
 ---
 
 <div class="relative h-16 w-full">
@@ -72,7 +73,7 @@ import Img from "../components/img.astro";
           class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
         >
           <Theme />
-
+          <Search />
           <!-- Right nav -->
         </div>
       </div>

src/components/leftsidebar.astro

@@ -1,5 +1,6 @@
 ---
 import { SIDEBAR } from "../config";
+import Search from "../components/search.astro";
 
 type Props = {
   currentPage: string;
@@ -12,6 +13,7 @@ const currentPageMatch = currentPage.slice(1);
 <div
   class="hidden lg:sticky lg:top-16 lg:-ml-6 lg:block lg:h-[calc(100vh-4rem)] lg:flex-none lg:overflow-y-auto lg:py-16 lg:pl-6 bg-purple-50 dark:bg-gray-800"
 >
+  <Search />
   <nav
     aria-labelledby="grid-left"
     class="text-base lg:text-sm w-64 pr-8 xl:w-72 xl:pr-16"

src/components/rightsidebar.astro

@@ -1,6 +1,7 @@
 ---
 import TableOfContents from "./tableofcontents.astro";
 import MoreMenu from "./moremenu.astro";
+import Search from "../components/search.astro";
 import type { MarkdownHeading } from "astro";
 
 type Props = {
@@ -16,6 +17,7 @@ const { headings, githubEditUrl } = Astro.props as Props;
 >
   <nav aria-labelledby="on-this-page-title" class="w-56">
     <div>
+      <Search />
       <TableOfContents headings={headings} />
       <MoreMenu editHref={githubEditUrl} />
     </div>

src/components/search.astro

@@ -0,0 +1,60 @@
+---
+import { useState, useEffect } from 'react';
+import lunr from 'lunr';
+
+const Search = () => {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [index, setIndex] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch('/search-index.json');
+      const data = await response.json();
+      const idx = lunr(function () {
+        this.ref('id');
+        this.field('title');
+        this.field('content');
+
+        data.forEach((doc) => {
+          this.add(doc);
+        });
+      });
+      setIndex(idx);
+    };
+
+    fetchData();
+  }, []);
+
+  const handleSearch = (event) => {
+    const query = event.target.value;
+    setQuery(query);
+
+    if (index) {
+      const results = index.search(query).map(({ ref }) => {
+        return data.find((doc) => doc.id === ref);
+      });
+      setResults(results);
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={handleSearch}
+        placeholder="Search..."
+      />
+      <ul>
+        {results.map((result) => (
+          <li key={result.id}>
+            <a href={result.url}>{result.title}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Search;