From cd1226e33342053f6456a4ca551af805cb64f639 Mon Sep 17 00:00:00 2001
From: Xanazf <hotdamnsucka@gmail.com>
Date: Fri, 4 Oct 2024 20:14:32 +0300
Subject: [PATCH] pagefind integration and search bar

---
 README.md                                     |   9 +
 astro.config.mjs                              |   2 +-
 package.json                                  |   3 +-
 pagefind.ts                                   |  28 ++
 src/components/iconsModule.ts                 |  12 +
 src/components/navigation/Search.astro        | 155 +++++++-
 .../navigation/search/SearchModal.tsx         |  53 ---
 src/components/navigation/search/index.tsx    |  61 ----
 src/components/navigation/search/types.d.ts   |  15 -
 .../navigation/sidebars/nav/index.tsx         |   5 +-
 src/config/io/fuseConfig.ts                   |   5 -
 src/config/io/generateSearchLists.ts          |   0
 src/styles/css-config/modal.css               |  41 ---
 src/styles/css-config/search.css              |   1 -
 src/styles/docs/nav/nav.css                   |  12 +-
 src/styles/docs/nav/search.css                | 338 ++++++++++++++++++
 src/styles/docs/toc/toc.css                   |  19 +-
 src/styles/global.css                         |   1 -
 yarn.lock                                     |  45 +--
 19 files changed, 565 insertions(+), 240 deletions(-)
 create mode 100644 pagefind.ts
 create mode 100644 src/components/iconsModule.ts
 delete mode 100644 src/components/navigation/search/SearchModal.tsx
 delete mode 100644 src/components/navigation/search/index.tsx
 delete mode 100644 src/components/navigation/search/types.d.ts
 delete mode 100644 src/config/io/fuseConfig.ts
 delete mode 100644 src/config/io/generateSearchLists.ts
 delete mode 100644 src/styles/css-config/modal.css
 delete mode 100644 src/styles/css-config/search.css
 create mode 100644 src/styles/docs/nav/search.css

diff --git a/README.md b/README.md
index 4953544..91f09b3 100644
--- a/README.md
+++ b/README.md
@@ -4,3 +4,12 @@ Documentation for [quickshell](https://git.outfoxxed.me/outfoxxed/quickshell)
 Hosted version at [quickshell.outfoxxed.me](https://quickshell.outfoxxed.me)
 
 Frontend rewritten by [Xanazf](https://github.com/Xanazf)
+
+## Notes for future updates
+- improve Head
+- improve light theme
+- QtQML docs search
+- page metadata:
+  - lastUpdatedAt
+  - prevUpdate?
+  - editURL
diff --git a/astro.config.mjs b/astro.config.mjs
index 5a53d26..4fd67c6 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,7 +4,7 @@ import { remarkAlert } from "remark-github-blockquote-alert";
 import sectionize from "@hbsnow/rehype-sectionize";
 import mdx from "@astrojs/mdx";
 
-import pagefind from "astro-pagefind";
+import pagefind from "./pagefind";
 
 // https://astro.build/config
 export default defineConfig({
diff --git a/package.json b/package.json
index afa26bc..1efd7dd 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,10 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/mdx": "^3.1.7",
     "@astrojs/solid-js": "^4.4.2",
+    "@pagefind/default-ui": "^1.1.1",
     "@types/node": "^20.14.11",
     "astro": "^4.15.9",
     "astro-breadcrumbs": "^2.3.1",
-    "astro-pagefind": "^1.6.0",
     "marked": "^14.1.0",
     "marked-alert": "^2.0.2",
     "node": "npm:22.7.0",
@@ -31,6 +31,7 @@
     "@astrojs/ts-plugin": "^1.10.2",
     "@biomejs/biome": "^1.8.3",
     "@hbsnow/rehype-sectionize": "^1.0.7",
+    "pagefind": "^1.1.1",
     "shiki": "^1.11.0"
   },
   "packageManager": "yarn@4.5.0"
diff --git a/pagefind.ts b/pagefind.ts
new file mode 100644
index 0000000..c097d92
--- /dev/null
+++ b/pagefind.ts
@@ -0,0 +1,28 @@
+import type { AstroIntegration } from "astro";
+import { fileURLToPath } from "node:url";
+import { spawn } from "node:child_process";
+import { dirname, relative } from "node:path";
+
+export default function pagefind(): AstroIntegration {
+  return {
+    name: "pagefind",
+    hooks: {
+      "astro:build:done": ({ dir }) => {
+        const targetDir = fileURLToPath(dir);
+        const cwd = dirname(fileURLToPath(import.meta.url));
+        const relativeDir = relative(cwd, targetDir);
+        return new Promise<void>(resolve => {
+          spawn(
+            "yarn dlx",
+            ["-q", "pagefind", "--site", relativeDir],
+            {
+              stdio: "inherit",
+              shell: true,
+              cwd,
+            }
+          ).on("close", () => resolve());
+        });
+      },
+    },
+  };
+}
diff --git a/src/components/iconsModule.ts b/src/components/iconsModule.ts
new file mode 100644
index 0000000..cba5795
--- /dev/null
+++ b/src/components/iconsModule.ts
@@ -0,0 +1,12 @@
+const magnifier =
+  "M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68";
+
+function getHTMLIcon(name: string): string {
+  const hashmap = {
+    magnifier: () => magnifier,
+  };
+
+  return hashmap[name as keyof typeof hashmap]();
+}
+
+export { getHTMLIcon };
diff --git a/src/components/navigation/Search.astro b/src/components/navigation/Search.astro
index 3c63ad2..b61ac9b 100644
--- a/src/components/navigation/Search.astro
+++ b/src/components/navigation/Search.astro
@@ -1,7 +1,154 @@
 ---
-import SearchComponent from "./search";
+import "@pagefind/default-ui/css/ui.css";
+import { getHTMLIcon } from "../iconsModule";
+
+const magnifier = getHTMLIcon("magnifier");
 ---
 
-<div class="search-wrapper">
-  <SearchComponent client:only={"solid-js"}/>
-</div>
+<site-search class="search-wrapper">
+  <button
+    data-open-modal
+    disabled
+    aria-label="Search"
+    aria-keyshortcuts="Control+K"
+    class="search-button"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d={magnifier}/></svg>
+    <span class="search-label" aria-hidden="true">Search</span>
+    <kbd class="search-kbd">
+      <kbd>Ctrl</kbd><kbd>K</kbd>
+    </kbd>
+  </button>
+  <dialog aria-label="Search" class="search-dialog">
+    <div class="dialog-frame">
+      <button data-close-modal class="search-cancel">
+        Cancel
+      </button>
+      <div class="search-container">
+        <div id="qs_search"/>
+      </div>
+    </div>
+  </dialog>
+</site-search>
+{
+  /**
+   * NOTE: YOINKED FROM STARLIGHT
+	 *  This is intentionally inlined to avoid briefly showing an invalid shortcut.
+	 *  Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+	 *  user agent is spoofed by some browsers when opening the devtools.
+	 */
+}
+<script is:inline>
+	(() => {
+		const openBtn = document.querySelector('button[data-open-modal]');
+		const shortcut = openBtn?.querySelector('kbd');
+		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+		const platformKey = shortcut.querySelector('kbd');
+		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+			platformKey.textContent = '⌘';
+			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+		}
+		shortcut.style.display = '';
+	})();
+</script>
+
+<script>
+import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/config/io/helpers';
+
+	class SiteSearch extends HTMLElement {
+		constructor() {
+			super();
+			const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+			const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
+			const dialog = this.querySelector('dialog')!;
+			const dialogFrame = this.querySelector('.dialog-frame')!;
+
+			/** Close the modal if a user clicks on a link or outside of the modal. */
+			const onClick = (event: MouseEvent) => {
+				const isLink = 'href' in (event.target || {});
+				if (
+					isLink ||
+					(document.body.contains(event.target as Node) &&
+						!dialogFrame.contains(event.target as Node))
+				) {
+					closeModal();
+				}
+			};
+
+			const openModal = (event?: MouseEvent) => {
+				dialog.showModal();
+				document.body.toggleAttribute('data-search-modal-open', true);
+				this.querySelector('input')?.focus();
+				event?.stopPropagation();
+				window.addEventListener('click', onClick);
+			};
+
+			const closeModal = () => dialog.close();
+
+			openBtn.addEventListener('click', openModal);
+			openBtn.disabled = false;
+			closeBtn.addEventListener('click', closeModal);
+
+			dialog.addEventListener('close', () => {
+				document.body.toggleAttribute('data-search-modal-open', false);
+				window.removeEventListener('click', onClick);
+			});
+
+			// Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
+			window.addEventListener('keydown', (e) => {
+				if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+					dialog.open ? closeModal() : openModal();
+					e.preventDefault();
+				}
+			});
+      
+      const processExcerpt = (sub_resultExcerpt:string):string => {
+        const linkRegex = /TYPE99(\w+.)99TYPE/g;
+        let excerpt = sub_resultExcerpt;
+        const match = [...excerpt.matchAll(linkRegex)];
+        if (match.length > 0){
+          for (const matching of match) {
+            const linkObject = getQMLTypeLinkObject(matching[1]);
+            const link = getQMLTypeLink(linkObject);
+            const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
+
+            // for signal
+            const bracketString = getIconForLink("func", false)
+
+            const newLink = `<span class="type${linkObject.mtype}-link typedata-link">${icon ? icon : ""}<a href=${link}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
+            excerpt = excerpt.replace(matching[0], newLink)
+          }
+        }
+        return excerpt
+      }
+
+
+			const formatURL = (path: string) => path;
+
+			window.addEventListener('DOMContentLoaded', () => {
+				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+				onIdle(async () => {
+					// @ts-expect-error — Missing types for @pagefind/default-ui package.
+					const { PagefindUI } = await import('@pagefind/default-ui');
+					new PagefindUI({
+						element: '#qs_search',
+						baseUrl: import.meta.env.BASE_URL,
+						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
+						showImages: false,
+						showSubResults: true,
+            processResult: (result: { url: string; excerpt:string; sub_results: Array<{ url: string, excerpt:string }> }) => {
+							result.url = formatURL(result.url);
+							result.sub_results = result.sub_results.map((sub_result) => {
+								sub_result.url = formatURL(sub_result.url);
+                sub_result.excerpt = processExcerpt(sub_result.excerpt)
+								return sub_result;
+							});
+              result.excerpt = processExcerpt(result.excerpt)
+						},
+					});
+				});
+			});
+		}
+	}
+	customElements.define('site-search', SiteSearch);
+</script>
diff --git a/src/components/navigation/search/SearchModal.tsx b/src/components/navigation/search/SearchModal.tsx
deleted file mode 100644
index b22c242..0000000
--- a/src/components/navigation/search/SearchModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { For, type Component } from "solid-js";
-import type { SearchResult } from "./types";
-import {
-  getIconForLink,
-  getQMLTypeLink,
-  getQMLTypeLinkObject,
-} from "@src/config/io/helpers";
-
-const SearchModal: Component<{
-  results: SearchResult[];
-}> = props => {
-  const { results } = props;
-  const linkRegex = /TYPE99(\w+.)99TYPE/g;
-
-  return (
-    <div
-      id="search-modal"
-      class="search-output"
-    >
-      <For each={results}>
-        {result => {
-          let excerpt = result.excerpt;
-          const linkMatch = [...excerpt.matchAll(linkRegex)];
-          for (const match of linkMatch) {
-            const unparsed = match[1];
-            const linkObject = getQMLTypeLinkObject(unparsed);
-            const linkParsed = getQMLTypeLink(linkObject);
-            const icon = linkObject.mtype
-              ? getIconForLink(linkObject.mtype, false)
-              : "";
-            const bracketString = getIconForLink("func", false);
-            const newString = `<span class="type${linkObject.mtype}-link typedata-link">${icon}<a href=${linkParsed}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
-            excerpt = excerpt.replace(match[0], newString);
-          }
-          excerpt = `${excerpt}...`;
-          return (
-            <div class="search-output_item">
-              <h3 class="search-output_heading">
-                <a href={result.url}>{result.meta.title}</a>
-              </h3>
-              <section
-                class="search-output_excerpt"
-                innerHTML={excerpt}
-              />
-            </div>
-          );
-        }}
-      </For>
-    </div>
-  );
-};
-
-export default SearchModal;
diff --git a/src/components/navigation/search/index.tsx b/src/components/navigation/search/index.tsx
deleted file mode 100644
index 3e9bd64..0000000
--- a/src/components/navigation/search/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
-  createResource,
-  createSignal,
-  type Component,
-} from "solid-js";
-
-import type { SearchResult } from "./types";
-import SearchModal from "./SearchModal";
-
-//const pagefindPath = "@dist/pagefind/pagefind.js";
-//const pagefind = await import(pagefindPath);
-const pagefind = await import("@dist/pagefind/pagefind.js");
-pagefind.init();
-
-async function PagefindSearch(query: string) {
-  const search = await pagefind.search(query);
-  const resultdata: SearchResult[] = [];
-  for (const result of search.results) {
-    const data = await result.data();
-    resultdata.push(data);
-  }
-  return resultdata;
-}
-
-const SearchComponent: Component = () => {
-  let modal!: HTMLElement;
-  const [query, setQuery] = createSignal("");
-  const [results, { refetch }] = createResource(
-    query,
-    PagefindSearch
-  );
-
-  function handleSearch(value: string) {
-    setQuery(value);
-    refetch();
-    console.log(results());
-  }
-
-  return (
-    <div class="search">
-      <input
-        id="search-input"
-        type="text"
-        role="searchbox"
-        incremental
-        value={query()}
-        placeholder="Search"
-        onChange={e => handleSearch(e.target.value)}
-        //onfocusout={() => setQuery("")}
-      />{" "}
-      {!results.loading && results() && results()!.length > 0 ? (
-        <SearchModal
-          results={results()!}
-          ref={modal}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-export default SearchComponent;
diff --git a/src/components/navigation/search/types.d.ts b/src/components/navigation/search/types.d.ts
deleted file mode 100644
index 890aaae..0000000
--- a/src/components/navigation/search/types.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-interface SearchResult {
-  url: string;
-  excerpt: string;
-  meta: {
-    title: string;
-    image?: string;
-  };
-  sub_results: {
-    title: string;
-    url: string;
-    excerpt: string;
-  }[];
-}
-
-export type { SearchResult }
diff --git a/src/components/navigation/sidebars/nav/index.tsx b/src/components/navigation/sidebars/nav/index.tsx
index 2c99c08..b67840b 100644
--- a/src/components/navigation/sidebars/nav/index.tsx
+++ b/src/components/navigation/sidebars/nav/index.tsx
@@ -37,7 +37,10 @@ const NavComponent: Component<NavProps> = props => {
           <XToMenu class="nav-icon" />
         )}
       </div>
-      <div class={`nav-items ${open() ? "shown" : ""}`}>
+      <div
+        id={open() ? "#qs_search" : ""}
+        class={`nav-items ${open() ? "shown" : ""}`}
+      >
         <Tree
           currentRoute={tree.currentRoute}
           currentModule={tree.currentModule}
diff --git a/src/config/io/fuseConfig.ts b/src/config/io/fuseConfig.ts
deleted file mode 100644
index a78ce3f..0000000
--- a/src/config/io/fuseConfig.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const options = {
-  includeMatches: true,
-  minMatchCharLength: 2,
-  threshold: 0.5,
-};
diff --git a/src/config/io/generateSearchLists.ts b/src/config/io/generateSearchLists.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/styles/css-config/modal.css b/src/styles/css-config/modal.css
deleted file mode 100644
index 8814288..0000000
--- a/src/styles/css-config/modal.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.search-output {
-  position: fixed;
-  inset: 0 25svw;
-  top: 3.6rem;
-  z-index: 33;
-  max-height: 100svw;
-  max-width: 50svw;
-
-  overflow: scroll;
-  overflow-x: show;
-
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: max-content;
-  row-gap: 0.618rem;
-  padding: 1rem;
-}
-
-.search-output::before {
-  content: "";
-  position: fixed;
-  inset: -4rem;
-  backdrop-filter: blur(4px);
-  overflow: hidden;
-  background-color: hsla(0 0 0 / 0.3);
-}
-
-.search-output_item {
-  height: max-content;
-  padding: 1rem;
-  border: 2px solid rgba(200, 200, 200, 0.23);
-  border-radius: 12px;
-  background-color: hsl(0 0 0);
-  overflow: hidden;
-
-  & mark {
-    all: unset;
-    background: hsla(53 800 34 / 0.5);
-    padding-inline: 3px;
-  }
-}
diff --git a/src/styles/css-config/search.css b/src/styles/css-config/search.css
deleted file mode 100644
index ea8819d..0000000
--- a/src/styles/css-config/search.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "./modal.css";
diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css
index ff86796..967a628 100644
--- a/src/styles/docs/nav/nav.css
+++ b/src/styles/docs/nav/nav.css
@@ -1,4 +1,5 @@
 @import "./nav-tree.css";
+@import "./search.css";
 
 .nav-wrapper {
   display: none;
@@ -44,12 +45,11 @@
       display: none;
     }
 
-    transition:
-      width 0.3s ease,
-      height 0.3s ease,
-      background-color 0.3s ease,
-      backdrop-filter 0.3s ease,
-      padding 0.3s ease;
+    transition: width 0.3s ease,
+    height 0.3s ease,
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease,
+    padding 0.3s ease;
 
     &.shown {
       padding: 0.3rem;
diff --git a/src/styles/docs/nav/search.css b/src/styles/docs/nav/search.css
new file mode 100644
index 0000000..8a48305
--- /dev/null
+++ b/src/styles/docs/nav/search.css
@@ -0,0 +1,338 @@
+/* is:global */
+[data-search-modal-open] {
+  overflow: hidden;
+}
+
+#qs_search {
+  --search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+  --search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+  --search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+  --search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+  --search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+  --search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+  --search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+  --search-page-icon-inline-start: calc((var(--search-result-pad-inline-start) - var(--search-page-icon-size)) / 2);
+  --search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+  --search-tree-diagram-inline-start: calc((var(--search-result-pad-inline-start) - var(--search-tree-diagram-size)) / 2);
+}
+
+#qs_search .pagefind-ui__form::before {
+  --pagefind-ui-text: hsl(0 0 65);
+  opacity: 1;
+}
+
+#qs_search .pagefind-ui__search-input {
+  color: hsl(0 0 100);
+  font-weight: 400;
+  width: calc(100% - var(--search-cancel-space));
+}
+
+#qs_search input:focus {
+  --pagefind-ui-border: hsla(var(--accent-500));
+}
+
+#qs_search .pagefind-ui__search-clear {
+  inset-inline-end: var(--search-cancel-space);
+  width: calc(60px * var(--pagefind-ui-scale));
+  padding: 0;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+#qs_search .pagefind-ui__search-clear:focus {
+  outline: 1px solid hsla(var(--accent-600));
+}
+
+#qs_search .pagefind-ui__search-clear::before {
+  content: "";
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
+  background-color: hsl(var(--accent-600));
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+#qs_search .pagefind-ui__results>*+* {
+  margin-top: var(--search-result-spacing);
+}
+
+#qs_search .pagefind-ui__result {
+  border: 0;
+  padding: 0;
+}
+
+#qs_search .pagefind-ui__result-nested {
+  position: relative;
+  padding: var(--search-result-nested-pad-block) var(--search-result-pad-inline-end);
+  padding-inline-start: var(--search-result-pad-inline-start);
+}
+
+#qs_search .pagefind-ui__result-title:not( :where(.pagefind-ui__result-nested *)),
+#qs_search .pagefind-ui__result-nested {
+  position: relative;
+  background-color: hsl(0 0 10);
+}
+
+#qs_search .pagefind-ui__result-title:not( :where(.pagefind-ui__result-nested *)):hover,
+#qs_search .pagefind-ui__result-title:not( :where(.pagefind-ui__result-nested *)):focus-within,
+#qs_search .pagefind-ui__result-nested:hover,
+#qs_search .pagefind-ui__result-nested:focus-within {
+  outline: 1px solid hsl(var(--accent-600));
+}
+
+#qs_search .pagefind-ui__result-title:not( :where(.pagefind-ui__result-nested *)):focus-within,
+#qs_search .pagefind-ui__result-nested:focus-within {
+  background-color: hsl(var(--accent-400));
+}
+
+#qs_search .pagefind-ui__result-thumb,
+#qs_search .pagefind-ui__result-inner {
+  margin-top: 0;
+}
+
+#qs_search .pagefind-ui__result-inner> :first-child {
+  border-radius: var(--search-corners) var(--search-corners) 0 0;
+}
+
+#qs_search .pagefind-ui__result-inner> :last-child {
+  border-radius: 0 0 var(--search-corners) var(--search-corners);
+}
+
+#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-title {
+  padding: var(--search-result-pad-block) var(--search-result-pad-inline-end);
+  padding-inline-start: var(--search-result-pad-inline-start);
+}
+
+#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-title::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--search-page-icon-inline-start);
+  width: var(--search-page-icon-size);
+  background: hsl(var(--blue) 15 33);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E") center no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E") center no-repeat;
+}
+
+#qs_search .pagefind-ui__result-inner {
+  align-items: stretch;
+  gap: 1px;
+}
+
+#qs_search .pagefind-ui__result-link {
+  position: unset;
+  --pagefind-ui-text: hsl(0 0 85);
+  font-weight: 600;
+}
+
+#qs_search .pagefind-ui__result-link:hover {
+  text-decoration: none;
+}
+
+#qs_search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+  content: unset;
+}
+
+#qs_search .pagefind-ui__result-nested::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--search-tree-diagram-inline-start);
+  width: var(--search-tree-diagram-size);
+  background: hsl(var(--blue) 5 25);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
+}
+
+#qs_search .pagefind-ui__result-nested:last-child::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+}
+
+#qs_search .pagefind-ui__result-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+#qs_search .pagefind-ui__result-excerpt {
+  font-size: calc(1rem * var(--pagefind-ui-scale));
+  overflow-wrap: anywhere;
+}
+
+#qs_search mark {
+  color: hsl(var(--blue) 15 60);
+  background-color: transparent;
+  font-weight: 600;
+}
+
+/* default styles */
+site-search {
+  --shadow-lg:
+    0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0,
+      0%,
+      0%,
+      0.1),
+    0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0,
+      0%,
+      0%,
+      0.75),
+    0px 4px 2px hsla(0, 0%, 0%, 0.25);
+  display: contents;
+}
+
+.search-label {
+  /* >720px block */
+  display: none;
+}
+
+.search-kbd {
+  /* >720px flex */
+  display: none;
+}
+
+.search-dialog {
+  padding: 0;
+
+  & .dialog-frame {
+    display: flex;
+  }
+
+  & .search-cancel {
+    /* >720px none */
+    display: flex;
+  }
+}
+
+/* --- */
+
+button[data-open-modal] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 0;
+  background-color: transparent;
+  color: hsl(0 0 65);
+  cursor: pointer;
+  height: 2.5rem;
+  font-size: 1.10rem;
+}
+
+button>kbd {
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  gap: 0.25em;
+  padding-inline: 0.375rem;
+  background-color: hsl(0 0 15);
+}
+
+dialog {
+  margin: 0;
+  background-color: hsl(var(--blue) 15 12);
+  border: 1px solid hsl(0 0 25);
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  box-shadow: var(--shadow-lg);
+}
+
+dialog[open] {
+  display: flex;
+}
+
+dialog::backdrop {
+  background-color: hsla(var(--blue) 15 6 / 0.66);
+  -webkit-backdrop-filter: blur(0.25rem);
+  backdrop-filter: blur(0.25rem);
+}
+
+.dialog-frame {
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+button[data-close-modal] {
+  position: absolute;
+  z-index: 11;
+  align-items: center;
+  align-self: flex-end;
+  height: calc(64px * var(--pagefind-ui-scale));
+  padding: 0.25rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: hsla(var(--accent-600));
+}
+
+#qs_search {
+  --pagefind-ui-primary: hsla(var(--accent-400));
+  --pagefind-ui-text: hsla(0 0 60);
+  --pagefind-ui-font: Rubik;
+  --pagefind-ui-background: hsl(0 0 10);
+  --pagefind-ui-border: hsl(0 0 15);
+  --pagefind-ui-border-width: 1px;
+  --search-cancel-space: 5rem;
+}
+
+@media (min-width: 768px) {
+
+  /* difault styles */
+  .search-label {
+    display: block;
+  }
+
+  .search-kbd {
+    display: flex;
+  }
+
+  .search-dialog {
+    & .search-cancel {
+      display: none;
+    }
+  }
+
+  /* --- */
+  button[data-open-modal] {
+    border: 1px solid hsl(0 0 25);
+    border-radius: 6px;
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 0.5rem;
+    background-color: hsla(0 0 10 / 0.5);
+    color: hsl(0 0 50);
+    font-size: 0.875rem;
+    width: 100%;
+    max-width: 15rem;
+    transition: color 0.23s, border-color 0.23s;
+
+    &:hover {
+      border-color: hsl(0 0 50);
+      color: hsl(0 0 85);
+    }
+
+    &> :last-child {
+      margin-inline-start: auto;
+    }
+  }
+
+  #qs_search {
+    --search-cancel-space: 0px;
+  }
+
+  dialog {
+    margin: 4rem auto auto;
+    border-radius: 0.5rem;
+    width: 90%;
+    max-width: 40rem;
+    height: max-content;
+    min-height: 15rem;
+    max-height: calc(100% - 8rem);
+  }
+
+  .dialog-frame {
+    padding: 1.5rem;
+  }
+}
diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css
index 134bf14..b096ef0 100644
--- a/src/styles/docs/toc/toc.css
+++ b/src/styles/docs/toc/toc.css
@@ -35,7 +35,7 @@
   font-size: 1.614rem;
   max-height: 500px;
 
-  &>svg {
+  & > svg {
     height: 100%;
     width: 24px;
   }
@@ -65,11 +65,12 @@
       display: none;
     }
 
-    transition: width 0.3s ease,
-    height 0.3s ease,
-    background-color 0.3s ease,
-    backdrop-filter 0.3s ease,
-    padding 0.3s ease;
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      background-color 0.3s ease,
+      backdrop-filter 0.3s ease,
+      padding 0.3s ease;
 
     &.shown {
       padding: 0.3rem;
@@ -100,8 +101,8 @@
     display: block;
     position: fixed;
     top: 5rem;
-    right: 10svw;
-    width: 250px;
+    right: 8svw;
+    width: 18rem;
     max-height: 90svh;
     overflow-y: scroll;
     z-index: 10;
@@ -119,7 +120,7 @@
       list-style: none;
 
       &.active {
-        &>.toc_a {
+        & > .toc_a {
           color: hsl(var(--green) 72 60);
         }
       }
diff --git a/src/styles/global.css b/src/styles/global.css
index ca623e2..ee3fb99 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,7 +2,6 @@
 @import "./css-config/base.css";
 @import "./css-config/animations.css";
 @import "./css-config/code.css";
-@import "./css-config/search.css";
 @import "./css-config/colors.css";
 @import "./docs/nav/nav.css";
 @import "./docs/toc/toc.css";
diff --git a/yarn.lock b/yarn.lock
index abdc6a2..5e12afb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1225,7 +1225,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pagefind/default-ui@npm:^1.0.3":
+"@pagefind/default-ui@npm:^1.1.1":
   version: 1.1.1
   resolution: "@pagefind/default-ui@npm:1.1.1"
   checksum: 10c0/a1069183ae31daa8b71344abd6cdd85b7183b2af4f88fdc89d8c5298ea0e653e7f8a89f95d10ee54053ab55c36dd1142b6768efd1a7c29d589432b432b7a291b
@@ -1260,13 +1260,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polka/url@npm:^1.0.0-next.24":
-  version: 1.0.0-next.28
-  resolution: "@polka/url@npm:1.0.0-next.28"
-  checksum: 10c0/acc5ea62597e4da2fb42dbee02749d07f102ae7d6d2c966bf7e423c79cd65d1621da305af567e6e7c232f3b565e242d1ec932cbb3dcc0db1508d02e9a2cafa2e
-  languageName: node
-  linkType: hard
-
 "@rollup/pluginutils@npm:^5.1.0":
   version: 5.1.0
   resolution: "@rollup/pluginutils@npm:5.1.0"
@@ -2942,19 +2935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"astro-pagefind@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "astro-pagefind@npm:1.6.0"
-  dependencies:
-    "@pagefind/default-ui": "npm:^1.0.3"
-    pagefind: "npm:^1.0.3"
-    sirv: "npm:^2.0.3"
-  peerDependencies:
-    astro: ^2.0.4 || ^3.0.0 || ^4.0.0
-  checksum: 10c0/4ee30b5fdb229351a496a9bc21995b459dfd82091efd9f6e0281695f795fa47689253fefde46695af785d2dd278ba90b3e2b261a3a2ede49f7e27ee7d5070650
-  languageName: node
-  linkType: hard
-
 "astro@npm:^4.15.9":
   version: 4.15.9
   resolution: "astro@npm:4.15.9"
@@ -6070,7 +6050,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pagefind@npm:^1.0.3":
+"pagefind@npm:^1.1.1":
   version: 1.1.1
   resolution: "pagefind@npm:1.1.1"
   dependencies:
@@ -6345,13 +6325,14 @@ __metadata:
     "@astrojs/ts-plugin": "npm:^1.10.2"
     "@biomejs/biome": "npm:^1.8.3"
     "@hbsnow/rehype-sectionize": "npm:^1.0.7"
+    "@pagefind/default-ui": "npm:^1.1.1"
     "@types/node": "npm:^20.14.11"
     astro: "npm:^4.15.9"
     astro-breadcrumbs: "npm:^2.3.1"
-    astro-pagefind: "npm:^1.6.0"
     marked: "npm:^14.1.0"
     marked-alert: "npm:^2.0.2"
     node: "npm:22.7.0"
+    pagefind: "npm:^1.1.1"
     remark-github-blockquote-alert: "npm:^1.2.1"
     remark-parse: "npm:^11.0.0"
     shiki: "npm:^1.11.0"
@@ -6896,17 +6877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sirv@npm:^2.0.3":
-  version: 2.0.4
-  resolution: "sirv@npm:2.0.4"
-  dependencies:
-    "@polka/url": "npm:^1.0.0-next.24"
-    mrmime: "npm:^2.0.0"
-    totalist: "npm:^3.0.0"
-  checksum: 10c0/68f8ee857f6a9415e9c07a1f31c7c561df8d5f1b1ba79bee3de583fa37da8718def5309f6b1c6e2c3ef77de45d74f5e49efc7959214443aa92d42e9c99180a4e
-  languageName: node
-  linkType: hard
-
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -7219,13 +7189,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"totalist@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "totalist@npm:3.0.1"
-  checksum: 10c0/4bb1fadb69c3edbef91c73ebef9d25b33bbf69afe1e37ce544d5f7d13854cda15e47132f3e0dc4cafe300ddb8578c77c50a65004d8b6e97e77934a69aa924863
-  languageName: node
-  linkType: hard
-
 "tough-cookie@npm:^5.0.0":
   version: 5.0.0
   resolution: "tough-cookie@npm:5.0.0"