Search.astro

---
import type { searchItem } from "~/services/search";
import { searchTerms } from "~/services/search";

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]}/`;
  }
};

let searchTags: searchItem[] = [];

if (searchTags.length === 0) {
  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 });
    }
  }
  searchTags = searchTags.concat(searchTerms);
}
---

<div id="site-search">
  <dialog>
    <input type="search" placeholder="Search..." autofocus />
    <div class="suggestions" tabindex="-1">
      {
        searchTags.map((entry) => (
          <a
            href={entry.href}
            target={entry.href.startsWith("/") ? undefined : "_blank"}
          >
            <span class="term">{entry.text}</span>
            <span class="page">{entry.href}</span>
          </a>
        ))
      }
    </div>
  </dialog>
</div>

<script>
  import { SearchDialog } from "~/classes/SearchDialog";
  import { assertElement } from "~/util/DOM";

  new SearchDialog(assertElement<HTMLDialogElement>("#site-search dialog"));
</script>

<style lang="scss">
  #site-search {
    position: absolute;

    dialog {
      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;
        backdrop-filter: blur(2px);
      }

      &[open] {
        display: grid;
      }
      input[type="search"] {
        font-family: Poppins;
        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.suggestions > a:first-child() {
          color: white;
        }
      }

      div.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) {
    #site-search dialog {
      width: 100%;
    }
  }

  @media screen and (max-width: 600px) {
    div#site-search-suggestions {
      & > a {
        span {
          &.page {
            font-size: 0.8em;
          }
        }
      }
    }
  }
</style>