Skeleton of search

Makefile

@@ -5,6 +5,7 @@ client-nocache:
 
 templates/html/static/client.js: src/clientjs/*
 	bun build src/clientjs/index.ts --target=browser --outfile=templates/html/static/client.js --minify
+	bun build src/clientjs/search.ts --target=browser --outfile=templates/html/static/search.js --minify
 
 client: templates/html/static/client.js
 

src/clientjs/index.ts

@@ -26,4 +26,6 @@ window.onload = () => {
   });
 
   mermaid.run({ querySelector: ".language-mermaid" });
+
+  window.dispatchEvent(new Event("dj-onload"));
 };

src/clientjs/search.ts

@@ -0,0 +1,71 @@
+import lunr from "lunr";
+
+interface MatchData {
+  metadata: Record<
+    string,
+    {
+      text: Record<string, string>;
+    }
+  >;
+}
+
+function doSearch(l: lunr.Index, query: string, resultEl: HTMLDivElement) {
+  const results = l.search(query);
+
+  resultEl.innerHTML = results.map((r) => buildResultHTML(r, query)).join("\n");
+}
+
+function buildResultHTML(result: lunr.Index.Result, query: string): string {
+  console.log(result.matchData.metadata);
+  return `
+  <div class="DJSearchResult">
+    <h1>${result.ref}</h1>
+    <div>${JSON.stringify(
+      (result.matchData as MatchData).metadata[query]
+    )}</div>
+  </div>`;
+}
+
+window.addEventListener("dj-onload", () => {
+  const inputEl = document.querySelector(
+    "#dj-search-input"
+  ) as HTMLInputElement | null;
+  if (!inputEl) return;
+
+  const resultEl = document.querySelector(
+    "#dj-search-menu-results"
+  )! as HTMLDivElement;
+  if (!resultEl) return;
+
+  const win = window as { djSearchIndex?: { name: string; text: string }[] };
+  if (!win.djSearchIndex) {
+    console.warn("Search index not found");
+    return;
+  }
+  const searchIndex = win.djSearchIndex;
+
+  const l = lunr(function () {
+    this.ref("name");
+    this.field("text");
+
+    for (const doc of searchIndex) {
+      this.add(doc);
+    }
+  });
+
+  (document.querySelector("#dj-search-menu")! as HTMLDivElement).showPopover();
+
+  // use 'input' for keystrokes, 'change' for enter or unfocus
+  inputEl.addEventListener("change", (e) => {
+    console.log(e);
+
+    doSearch(l, (e.target! as HTMLInputElement).value, resultEl);
+  });
+
+  (
+    document.querySelector(".DJOpenSearchButton")! as HTMLButtonElement
+  ).addEventListener("click", () => {
+    inputEl.focus();
+    return true;
+  });
+});

templates/html/base.njk

@@ -51,6 +51,7 @@
           <h2 class="DJHeader_Link"><a href="{{ link.url }}">{{ link.text }}</a></h2>
           {% endfor %}
           {% endif -%}
+          <button class="DJOpenSearchButton" popovertarget="dj-search-menu">🔍</button>
           {{ header_project_info() }}
         </div>
       </div>
@@ -105,6 +106,16 @@
       </nav>
     </div>
 
+    <div popover id="dj-search-menu" class="DJSearchMenu">
+      <div>
+        <div class="DJSearchMenu_InputContainer">
+          <input type="text" id="dj-search-input" placeholder="Type to search">
+        </div>
+        <div id="dj-search-menu-results" class="DJSearchMenu_Results">
+        </div>
+      </div>
+    </div>
+
     {%- for jsURL in urlLists.js %}
     <script src="{{ jsURL }}"></script>
     {%- endfor %}

templates/html/static/dj-search.css

@@ -0,0 +1,45 @@
+#dj-search-menu {
+  border: none;
+  padding: 0;
+  background-color: var(--color-bg-1);
+  color: var(--color-fg-1);
+}
+
+#dj-search-menu > div {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+#dj-search-menu::backdrop {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.DJSearchMenu_InputContainer {
+  margin-top: calc(min(20vh, 10rem));
+}
+
+#dj-search-menu h1 {
+  font-size: var(--fs-normal);
+  font-weight: var(--fw-bold);
+}
+
+.DJSearchMenu_Results {
+  overflow-y: auto;
+  width: 100%;
+  max-width: var(--page-max-width);
+  padding: var(--ms);
+}
+
+.DJSearchResult:first-child {
+  border-top: var(--border-weak);
+}
+
+.DJSearchResult {
+  border-bottom: var(--border-weak);
+  padding: var(--ms) 0;
+}