Add Search Capability

docs/search-preview.11ty.js

@@ -0,0 +1,28 @@
+module.exports =
+class SearchPreview {
+  constructor() {}
+  data() {
+    // Export Front Matter
+    return {
+      permalink: "/search-preview.json",
+      eleventyExcludeFromCollections: true
+    };
+  }
+  render(data) {
+    let obj = { pages: {} };
+
+    for (const pageIdx in data.collections.all) {
+      const page = data.collections.all[pageIdx];
+      if (page.page.outputFileExtension === "html") {
+        // Only include HTML content into our search preview file, since
+        // that's what we include in our search index file
+        obj.pages[page.url] = {
+          title: page.data.title,
+          summary: "A quick summary of the content of this page."
+        };
+      }
+    }
+
+    return JSON.stringify(obj);
+  }
+}

docs/search.js

@@ -0,0 +1,111 @@
+class SearchUtility {
+  constructor() {
+    this.api = "https://search.pulsar-edit.dev/search/docs";
+    this.isSearchUrl = location.pathname.startsWith("/search");
+
+    this.searchTerm = "";
+    this.searchResults = [];
+    this.searchPreviews = {};
+  }
+
+  async setup() {
+    if (!this.isSearchUrl) { return; }
+    // Get our search term
+    const paramsString = window.location.search;
+    const searchParams = new URLSearchParams(paramsString);
+    this.searchTerm = searchParams.get("q");
+
+    // Get our search preview
+    try {
+      const response = await fetch("/search-preview.json");
+
+      if (!response.ok) {
+        console.error(response);
+        return;
+      }
+
+      const data = await response.json();
+      this.searchPreviews = data.pages;
+    } catch(err) {
+      console.error(err);
+    }
+  }
+
+  async search() {
+    if (!this.isSearchUrl || this.searchTerm?.length === 0 || typeof this.searchTerm !== "string") {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${this.api}?q=${this.searchTerm}`);
+
+      if (!response.ok) {
+        console.error(response);
+        return;
+      }
+
+      const data = await response.json();
+      this.searchResults = data.results;
+
+    } catch(err) {
+      console.error(err);
+      return;
+    }
+  }
+
+  display() {
+    const resultsContainer = document.createElement("ul");
+    resultsContainer.classList.add("list");
+
+    for (const result of this.searchResults) {
+      const resultPreview = this.searchPreviews[result.ref];
+
+      const node = document.createElement("li");
+      node.classList.add("list-item");
+      node.innerHTML = `
+        <div class="list-item__inner">
+          <div class="list-item__icon"></div>
+          <h3 class="list-item__name">
+            <a href="${this.createSearchLink(result)}">${resultPreview.title}</a>
+          </h3>
+          <div class="list-item__summary">${resultPreview.summary}</div>
+        </div>
+      `;
+
+      resultsContainer.append(node);
+    }
+
+    document.querySelector("main").append(resultsContainer);
+  }
+
+  createSearchLink(searchResult) {
+    // Takes a search result item directly from the search API, and creates a link
+    // to the content indicated by the result. Will use Text Fragments if supported
+    // in the current browser.
+    let link = searchResult.ref; // Base link
+
+    if (document.fragmentDirective !== undefined) {
+      // This browser supports text fragments
+      let fragment = "#:~:";
+
+      for (let term in searchResult.matchData.metadata) {
+        if (fragment.includes("text=")) {
+          // If we are appending additional fragments to a directive, add `&`
+          fragment = `${fragment}&`;
+        }
+        fragment = `${fragment}text=${term}`;
+      }
+
+      link = `${link}${fragment}`;
+    }
+
+    return link;
+  }
+}
+
+(async () => {
+  const search = new SearchUtility();
+  search.setup();
+  await search.search();
+  search.display();
+})();

docs/search/index.md

@@ -0,0 +1,4 @@
+---
+title: Search
+layout: search.ejs
+---

layouts/page_header.ejs

@@ -17,6 +17,13 @@
     </nav>
 
     <nav class="page-header__actions">
+      <div class="search-bar">
+        <search>
+          <form role="search" action="/search/" method="GET">
+            <input type="search" name="q" />
+          </form>
+        </search>
+      </div>
       <div class="theme-switcher-menu">
         <button type="button" id="theme-switcher">
           <svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">

layouts/search.ejs

@@ -0,0 +1,16 @@
+<%-include("header")%>
+
+  <body>
+    <%-include("page_header", { platform_switcher: true }) %>
+    <div class="content">
+      <main class="container">
+        <section class="header">
+          <h1 class="title" id="title"<%= title %></h1>
+        </section>
+
+        <%- content %>
+      </main>
+    </div>
+  </body>
+<script src="/search.js"></script>
+<%-include("footer")%>

less/page-header.less

@@ -98,6 +98,10 @@ html {
     width: 100%;
   }
 
+  .page-header__actions {
+    display: contents;
+  }
+
   .page-header__link {
     .border-hover-effect();
     flex-direction: row;
@@ -137,6 +141,18 @@ html {
   }
 }
 
+.search-bar {
+  display: flex;
+
+  search {
+    margin: 0;
+
+    input {
+      height: 2rem;
+    }
+  }
+}
+
 [data-theme-setting="auto"] {
   .auto-icon {
     display: block !important;
@@ -155,4 +171,4 @@ html {
       display: block !important;
     }
   }
-}
+}