Search.astro

---
import { render } from "astro:content";
import { getCollection } from "astro:content";
import path from "path";
import type { searchItem } from "~/services/search";
import { searchTerms } from "~/services/search";

/**
 * Infers the static URL of a wiki article from its file path.
 * @param filepath filepath of article
 * @param target optional target heading
 */
const getContentStaticURL = (filepath: string, target?: string): string => {
  const relative = path.relative("src/content", filepath);
  const extension = path.extname(relative);

  const absolute = `/${relative.replace(extension, "")}/`;

  if (target) {
    return absolute + "#" + target;
  } else {
    return absolute;
  }
};

const needles: searchItem[] = [...searchTerms];

const loadNeedles = async () => {
  const pages = await getCollection("wiki");

  const promises = [];

  for (const page of pages) {
    promises.push(
      new Promise(async (resolve, reject) => {
        if (!page.filePath) {
          return reject(
            `Page ${page.id} does not have a file path. This shouldn't ever happen unless something has gone wrong with Astro.`,
          );
        }

        const { headings } = await render(page);

        const href = getContentStaticURL(page.filePath);

        // Article title entry
        needles.push({ text: page.data.title, href });

        // Article tags
        for (const tag of page.data.tags ?? []) {
          needles.push({ text: tag, href });
        }

        // Article headings
        for (const heading of headings) {
          needles.push({
            text: heading.text,
            href: getContentStaticURL(page.filePath, heading.slug),
          });
        }

        resolve(true);
      }),
    );
  }

  await Promise.all(promises);
};

await loadNeedles();
---

<div id="site-search">
  <dialog>
    <input type="search" placeholder="Search..." autofocus />
    <div class="suggestions" tabindex="-1">
      {
        needles.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: var(--font-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>