Merge pull request #3 from LuaLS/search

Add site search

Author: carsakiller

package-lock.json

@@ -16,6 +16,7 @@
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
+    "fuse.js": "^6.6.2",
     "highlight.js": "^11.8.0",
     "jsdom": "^22.1.0",
     "mermaid": "^10.2.4",

package.json

@@ -0,0 +1,295 @@
+---
+type searchItem = {
+  text: string;
+  href: string;
+};
+
+const getContentStaticURL = (path: string, target?: string): string | null => {
+  const rgx = /\/src\/.+?\/(.+)\..*?/g;
+
+  const result = rgx.exec(path);
+  if (result === null) return null;
+
+  if (target) {
+    return `/${result[1]}#${target}`;
+  } else {
+    return `/${result[1]}`;
+  }
+};
+
+const searchTags: searchItem[] = [];
+
+const pages = await Astro.glob("../../content/**/*.mdx");
+
+for (const page of pages) {
+  const frontmatter = page.frontmatter;
+  const headings = page.getHeadings();
+
+  const href = getContentStaticURL(page.file);
+  if (!href) {
+    throw new Error(`Failed to get static url of ${page.url}`);
+  }
+
+  //   Add article title to search options
+  searchTags.push({ text: page.frontmatter.title, href });
+
+  // Add custom article tags to search options
+  for (const tag of frontmatter.tags ?? []) {
+    searchTags.push({ text: tag, href });
+  }
+
+  // Add article headings to search options
+  for (const heading of headings) {
+    const href = getContentStaticURL(page.file, heading.slug);
+    if (!href) {
+      throw new Error(`Failed to get static url of ${page.url}`);
+    }
+    searchTags.push({ text: heading.text, href });
+  }
+}
+---
+
+<dialog id="site-search">
+  <input type="search" placeholder="Search..." />
+
+  <div id="site-search-suggestions" tabindex="-1">
+    {
+      searchTags.map((entry) => (
+        <a href={entry.href}>
+          <span class="term">{entry.text}</span>
+          <span class="page">{entry.href.substring(1)}</span>
+        </a>
+      ))
+    }
+  </div>
+</dialog>
+
+<script>
+  import Fuse from "fuse.js";
+
+  const assertElement = <T extends Element>(
+    selector: string,
+    parent: Document | Element = document
+  ): T => {
+    const element = parent.querySelector<T>(selector);
+
+    if (element === null) {
+      throw new Error(`Could not find element: ${selector}`);
+    }
+
+    return element;
+  };
+
+  const searchIcon = assertElement<HTMLSpanElement>(
+    "header button.site-search-icon"
+  );
+  const searchDialog = assertElement<HTMLDialogElement>("dialog#site-search");
+  const searchInput = assertElement<HTMLInputElement>("input[type='search']");
+  const optionsContainer = assertElement<HTMLDivElement>(
+    "div#site-search-suggestions"
+  );
+
+  // Get array of option elements
+  const options = Array.from(optionsContainer.children) as HTMLDivElement[];
+
+  // Override scroll behavior so that the suggestions can be navigated with the arrow keys
+  for (const option of options) {
+    option.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown") {
+        if (option.nextSibling) {
+          (option.nextSibling as HTMLDivElement).focus();
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowUp") {
+        if (option.previousSibling) {
+          (option.previousSibling as HTMLDivElement).focus();
+        } else {
+          searchInput.focus();
+        }
+        e.preventDefault();
+      }
+    });
+    option.addEventListener("click", () => {
+      searchDialog.close();
+    });
+  }
+
+  const searchItems = options.map((el) => {
+    const text = el.querySelector(".term");
+    const page = el.querySelector(".page");
+
+    if (!text) console.warn("Could not find .term for:", el);
+    if (!page) console.warn("Could not find .page for:", el);
+
+    return {
+      text: text?.textContent?.toLowerCase() ?? "",
+      page: page?.textContent?.toLowerCase() ?? "",
+    };
+  });
+  const haystack = new Fuse(searchItems, {
+    keys: [{ name: "text", weight: 3 }, "page"],
+    includeScore: true,
+  });
+
+  const updateSuggestions = () => {
+    const input = searchInput.value.trim().toLowerCase();
+
+    const results = haystack.search(input, { limit: 30 });
+    results.sort((a, b) => (b?.score ?? 1) - (a?.score ?? 1));
+
+    // Hide all options
+    options.forEach((el) => el.classList.remove("match"));
+
+    for (const result of results) {
+      const element = options[result.refIndex];
+
+      element.title = result.score;
+
+      if (result.score && result.score <= 0.1) {
+        element.classList.add("match");
+        optionsContainer.insertBefore(element, optionsContainer.firstChild);
+      }
+    }
+  };
+
+  const open = () => {
+    searchDialog.showModal();
+    searchInput.focus();
+  };
+
+  // Show when search icon is clicked
+  searchIcon.addEventListener("click", open);
+  document.addEventListener("keydown", (e) => {
+    if (e.key !== "/") return;
+    open();
+    e.preventDefault();
+  });
+  // Close when background is clicked
+  searchDialog.addEventListener("click", (e) => {
+    console.log(e);
+    if (e.target !== searchDialog) return;
+    searchDialog.close();
+  });
+  // Close when esc pressed
+  document.addEventListener("keydown", (e) => {
+    if (!searchDialog.classList.contains("show") || e.key !== "Escape") return;
+    searchDialog.close();
+  });
+  // Update suggestions on text entry
+  searchInput.addEventListener("keyup", (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        assertElement<HTMLDivElement>(".match", optionsContainer).focus();
+        break;
+      case "Enter":
+        const firstOption =
+          optionsContainer.firstChild as HTMLAnchorElement | null;
+        if (firstOption !== null) {
+          location.assign(firstOption.href);
+          searchDialog.close();
+          break;
+        }
+      default:
+        updateSuggestions();
+        break;
+    }
+  });
+</script>
+
+<style lang="scss">
+  dialog#site-search {
+    display: none;
+    width: 60%;
+    height: 60%;
+    background: none;
+    border: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 2.5em 4fr;
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+
+    &::backdrop {
+      background-color: #000000aa;
+    }
+
+    &[open] {
+      display: grid;
+    }
+  }
+
+  input[type="search"] {
+    width: 100%;
+    font-size: 1.5em;
+    margin: auto;
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: #0f2e4b;
+    color: white;
+
+    &:focus+div#site-search-suggestions > a:first-child() {
+      color: white;
+    }
+  }
+
+  div#site-search-suggestions {
+    align-self: flex-start;
+    overflow-y: auto;
+    max-height: 100%;
+    background-color: #081f34;
+    border-radius: 0.5em;
+
+    & > a {
+      display: none;
+      font-size: 1em;
+      padding: 0.25em 0.5em;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        color: white;
+        border-radius: unset;
+      }
+
+      &.match {
+        display: flex;
+        justify-content: space-between;
+      }
+      span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+
+        &.term {
+          flex: 1 1;
+        }
+
+        &.page {
+          flex: 1 2;
+          text-align: right;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    dialog#site-search {
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    div#site-search-suggestions {
+      & > a {
+        span {
+          &.page {
+            font-size: 0.8em;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/common/Search.astro

@@ -2,6 +2,7 @@
 import ExternalLink from "../common/ExternalLink.astro";
 import Icon from "../common/Icon.astro";
 import Tooltip from "../common/Tooltip.astro";
+
 export interface Props {
   class?: string;
 }
@@ -23,6 +24,9 @@ const { class: className } = Astro.props;
         </Tooltip>
       </a>
     </div>
+    <button class="site-search-icon">
+      <Icon name="search" group="solid" />
+    </button>
     <span class="github">
       <ExternalLink
         url="https://github.com/luals/lua-language-server"
@@ -57,7 +61,7 @@ const { class: className } = Astro.props;
     nav {
       width: 100%;
       display: grid;
-      grid-template-columns: repeat(3, 2em);
+      grid-template-columns: repeat(4, 2em);
       justify-content: space-between;
       align-items: center;
       justify-items: center;
@@ -74,6 +78,13 @@ const { class: className } = Astro.props;
         color: white;
       }
 
+      button {
+        border: none;
+        background: none;
+        color: white;
+        font-size: 1em;
+      }
+
       .github {
         width: fit-content;
         font-size: 1.2em;

src/components/layout/Header.astro

@@ -5,6 +5,7 @@ const wikiArticleCollection = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string(),
+    tags: z.string().optional(),
     ["getting-started"]: z.boolean().optional(),
     incomplete: z.boolean().optional(),
     lastModified: z.string().optional(),

src/content/config.ts

@@ -4,6 +4,7 @@ import Layout from "./Default.astro";
 // Components
 import Header from "../components/layout/Header.astro";
 import Footer from "../components/layout/Footer.astro";
+import Search from "../components/common/Search.astro";
 
 export interface Props {
   title: string;
@@ -15,5 +16,5 @@ export interface Props {
   <Header />
   <slot />
   <Footer />
+  <Search />
 </Layout>
-