tilde/index.html

<!doctype html>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>~</title>

<style>
  :root {
    --border-radius: 1rem;
    --color-background: #111;
    --color-text-subtle: #888;
    --color-text: #ddd;
    --font-family: -apple-system, Helvetica, sans-serif;
    --font-size: clamp(16px, 1.3vw, 18px);
    --font-weight-bold: 700;
    --font-weight-normal: 400;
    --space: 1rem;
    --transition-speed: 200ms;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --color-background: #e8e8e8;
      --color-text-subtle: #606060;
      --color-text: #111;
    }
  }
</style>

<script>
  const CONFIG = {
    commandPathDelimiter: '/',
    commandSearchDelimiter: ' ',
    defaultSearchTemplate: 'https://duckduckgo.com/?q={}',
    openLinksInNewTab: true,
    suggestionLimit: 4,
  };

  // prettier-ignore
  const COMMANDS = new Map([
    ['a', { name: 'Alphabet', suggestions: ['a/drive', 'a/contacts'], url: 'https://www.google.com' }],
    ['a/drive', {  url: 'https://drive.google.com/drive/u/0/my-drive' }],
    ['a/contacts', {  url: 'https://contacts.google.com' }],
    ['c', { name: 'Cloudflare', url: 'https://dash.cloudflare.com' }],
    ['d', { name: 'Droplet', url: 'https://cloud.digitalocean.com/projects/50ffcff7-ad65-40e3-af88-3cbc5a38cf99/resources' }],
    ['e', { name: 'Resend', url: 'https://resend.com/emails?time=all&page=1' }],
    ['f', { name: 'Figma', url: 'https://www.figma.com' }],
    ['g', { name: 'GitHub', searchTemplate: '/search?q={}', suggestions: ['g/copilot', 'g/trending'], url: 'https://github.com' }],
    ['i', { name: 'Intuit', url: 'https://selfemployed.intuit.com/home' }],
    ['o', { name: 'ChatGPT', searchTemplate: '?q={}', url: 'https://chatgpt.com' }],
    ['p', { name: 'Proton', suggestions: ['p/pass', 'p/drive'], url: 'https://mail.proton.me/u/0/inbox' }],
    ['p/drive', { url: 'https://drive.proton.me/u/0' }],
    ['p/pass', { url: 'https://pass.proton.me/u/0' }],
    ['r', { name: 'Reddit', searchTemplate: '/search/?q={}', url: 'https://www.reddit.com' }],
    ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }],
    ['t', { name: 'TickTick', url: 'https://ticktick.com/webapp/#q/today/tasks' }],
    ['v', { name: 'Vercel', suggestions: ['v0.dev'], url: 'https://vercel.com/dashboard' }],
    ['x', { name: 'xvvvyz', suggestions: ['x/jelly', 'x/torrent'], url: 'https://xvvvyz.xyz' }],
    ['x/jelly', { url: 'https://jelly.xvvvyz.xyz' }],
    ['x/torrent', { url: 'https://torrent.xvvvyz.xyz' }],
    ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://www.youtube.com/feed/subscriptions' }],
    ['0', { name: 'localhost', suggestions: ['0:54323', '0:54324'], url: 'http://localhost:3000' }],
    ['0:54323', { url: 'http://localhost:54323' }],
    ['0:54324', { url: 'http://localhost:54324' }],
  ]);
</script>

<template id="commands-template">
  <style>
    .commands {
      border-radius: var(--border-radius);
      column-gap: 0;
      columns: 2;
      list-style: none;
      margin: 0 auto;
      max-width: 23rem;
      overflow: hidden;
      padding: 0;
      width: 100vw;
    }

    .command {
      display: flex;
      gap: var(--space);
      outline: 0;
      padding: var(--space);
      position: relative;
      text-decoration: none;
    }

    .command::after {
      background: var(--color-text-subtle);
      content: ' ';
      inset: 1px;
      opacity: 0.05;
      position: absolute;
      transition: opacity var(--transition-speed);
    }

    .command:where(:focus, :hover)::after {
      opacity: 0.1;
    }

    .key {
      color: var(--color-text);
      display: inline-block;
      text-align: center;
      width: 3ch;
    }

    .name {
      color: var(--color-text-subtle);
      transition: color var(--transition-speed);
    }

    .command:where(:focus, :hover) .name {
      color: var(--color-text);
    }

    @media (min-width: 55rem) {
      .commands {
        columns: 4;
        max-width: 45rem;
      }
    }
  </style>
  <nav>
    <menu class="commands"></menu>
  </nav>
</template>

<template id="command-template">
  <li>
    <a class="command" rel="noopener noreferrer">
      <span class="key"></span>
      <span class="name"></span>
    </a>
  </li>
</template>

<script type="module">
  class Commands extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      const template = document.getElementById('commands-template');
      const clone = template.content.cloneNode(true);
      const commands = clone.querySelector('.commands');
      const commandTemplate = document.getElementById('command-template');

      for (const [key, { name, url }] of COMMANDS.entries()) {
        if (!name || !url) continue;
        const clone = commandTemplate.content.cloneNode(true);
        const command = clone.querySelector('.command');
        command.href = url;
        if (CONFIG.openLinksInNewTab) command.target = '_blank';
        clone.querySelector('.key').innerText = key;
        clone.querySelector('.name').innerText = name;
        commands.append(clone);
      }

      this.shadowRoot.append(clone);
    }
  }

  customElements.define('commands-component', Commands);
</script>

<template id="search-template">
  <style>
    input,
    button {
      -moz-appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 0;
      display: block;
      outline: 0;
    }

    .dialog {
      align-items: center;
      background: var(--color-background);
      border: none;
      display: none;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      left: 0;
      padding: 0;
      top: 0;
      width: 100%;
    }

    .dialog[open] {
      display: flex;
    }

    .form {
      width: 100%;
    }

    .input {
      color: var(--color-text);
      font-size: 3rem;
      font-weight: var(--font-weight-bold);
      padding: 0;
      text-align: center;
      width: 100%;
    }

    .suggestions {
      align-items: center;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      list-style: none;
      margin: var(--space) 0 0;
      overflow: hidden;
      padding: 0;
    }

    .suggestion {
      color: var(--color-text);
      cursor: pointer;
      font-size: 1rem;
      padding: var(--space);
      position: relative;
      transition: color var(--transition-speed);
      white-space: nowrap;
      z-index: 1;
    }

    .suggestion:where(:focus, :hover) {
      color: var(--color-background);
    }

    .suggestion::before {
      background-color: var(--color-text);
      border-radius: calc(var(--border-radius) / 5);
      content: ' ';
      inset: calc(var(--space) / 1.5) calc(var(--space) / 3);
      opacity: 0;
      position: absolute;
      transform: translateY(0.5em);
      transition: all var(--transition-speed);
      z-index: -1;
    }

    .suggestion:where(:focus, :hover)::before {
      opacity: 1;
      transform: translateY(0);
    }

    .match {
      color: var(--color-text-subtle);
      transition: color var(--transition-speed);
    }

    .suggestion:where(:focus, :hover) .match {
      color: var(--color-background);
    }

    @media (min-width: 700px) {
      .suggestions {
        flex-direction: row;
      }
    }
  </style>
  <dialog class="dialog">
    <form autocomplete="off" class="form" method="dialog" spellcheck="false">
      <input class="input" title="search" type="text" />
      <menu class="suggestions"></menu>
    </form>
  </dialog>
</template>

<template id="suggestion-template">
  <li>
    <button class="suggestion" type="button"></button>
  </li>
</template>

<template id="match-template">
  <span class="match"></span>
</template>

<script type="module">
  class Search extends HTMLElement {
    #dialog;
    #form;
    #input;
    #suggestions;

    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      const template = document.getElementById('search-template');
      const clone = template.content.cloneNode(true);
      this.#dialog = clone.querySelector('.dialog');
      this.#form = clone.querySelector('.form');
      this.#input = clone.querySelector('.input');
      this.#suggestions = clone.querySelector('.suggestions');
      this.#form.addEventListener('submit', this.#onSubmit, false);
      this.#input.addEventListener('input', this.#onInput);
      this.#suggestions.addEventListener('click', this.#onSuggestionClick);
      document.addEventListener('keydown', this.#onKeydown);
      this.shadowRoot.append(clone);
    }

    static #escapeRegexCharacters(s) {
      return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }

    static #fetchDuckDuckGoSuggestions(search) {
      return new Promise((resolve) => {
        window.autocompleteCallback = (res) => {
          const suggestions = [];

          for (const item of res) {
            if (item.phrase === search.toLowerCase()) continue;
            suggestions.push(item.phrase);
          }

          resolve(suggestions);
        };

        const script = document.createElement('script');
        document.querySelector('head').appendChild(script);
        script.src = `https://duckduckgo.com/ac/?callback=autocompleteCallback&q=${search}`;
        script.onload = script.remove;
      });
    }

    static #formatSearchUrl(template, search) {
      return template.replace(/{}/g, encodeURIComponent(search));
    }

    static #hasProtocol(s) {
      return /^[a-zA-Z]+:\/\//i.test(s);
    }

    static #isUrl(s) {
      return /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i.test(s);
    }

    static #parseQuery = (raw) => {
      const query = raw.trim();

      if (this.#isUrl(query)) {
        const url = this.#hasProtocol(query) ? query : `https://${query}`;
        return { query, url };
      }

      if (COMMANDS.has(query)) {
        const { key, url } = COMMANDS.get(query);
        return { key, query, url };
      }

      let splitBy = CONFIG.commandSearchDelimiter;
      const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`));

      if (COMMANDS.has(searchKey)) {
        const command = COMMANDS.get(searchKey);
        const template = new URL(command.searchTemplate ?? '', command.url);
        const search = rawSearch.trim();
        const url = Search.#formatSearchUrl(decodeURI(template.href), search);
        return { key: searchKey, query, search, splitBy, url };
      }

      splitBy = CONFIG.commandPathDelimiter;
      const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`));

      if (COMMANDS.has(pathKey)) {
        const command = COMMANDS.get(pathKey);
        const url = `${new URL(command.url).origin}/${path}`;
        return { key: pathKey, path, query, splitBy, url };
      }

      const url = Search.#formatSearchUrl(CONFIG.defaultSearchTemplate, query);
      return { query, search: query, url };
    };

    #close() {
      this.#input.value = '';
      this.#input.blur();
      this.#dialog.close();
      this.#suggestions.innerHTML = '';
    }

    #execute(query) {
      const target = CONFIG.openLinksInNewTab ? '_blank' : '_self';
      window.open(Search.#parseQuery(query).url, target, 'noopener noreferrer');
      this.#close();
    }

    #focusNextSuggestion(previous = false) {
      const active = this.shadowRoot.activeElement;
      let nextIndex;

      if (active.dataset.index) {
        const activeIndex = Number(active.dataset.index);
        nextIndex = previous ? activeIndex - 1 : activeIndex + 1;
      } else {
        nextIndex = previous ? this.#suggestions.childElementCount - 1 : 0;
      }

      const next = this.#suggestions.children[nextIndex];
      if (next) next.querySelector('.suggestion').focus();
      else this.#input.focus();
    }

    #onInput = async () => {
      const oq = Search.#parseQuery(this.#input.value);

      if (!oq.query) {
        this.#close();
        return;
      }

      let suggestions = COMMANDS.get(oq.query)?.suggestions ?? [];

      if (oq.search && suggestions.length < CONFIG.suggestionLimit) {
        const res = await Search.#fetchDuckDuckGoSuggestions(oq.search);

        suggestions = suggestions.concat(
          oq.splitBy
            ? res.map((search) => `${oq.key}${oq.splitBy}${search}`)
            : res
        );
      }

      const nq = Search.#parseQuery(this.#input.value);
      if (nq.query !== oq.query) return;
      this.#renderSuggestions(suggestions, oq.query);
    };

    #onKeydown = (e) => {
      if (!this.#dialog.open) {
        this.#dialog.show();
        this.#input.focus();

        requestAnimationFrame(() => {
          // close the search dialog before the next repaint if a character is
          // not produced (e.g. if you type shift, control, alt etc.)
          if (!this.#input.value) this.#close();
        });

        return;
      }

      if (e.key === 'Escape') {
        this.#close();
        return;
      }

      const alt = e.altKey ? 'alt-' : '';
      const ctrl = e.ctrlKey ? 'ctrl-' : '';
      const meta = e.metaKey ? 'meta-' : '';
      const shift = e.shiftKey ? 'shift-' : '';
      const modifierPrefixedKey = `${alt}${ctrl}${meta}${shift}${e.key}`;

      if (/^(ArrowDown|Tab|ctrl-n)$/.test(modifierPrefixedKey)) {
        e.preventDefault();
        this.#focusNextSuggestion();
        return;
      }

      if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(modifierPrefixedKey)) {
        e.preventDefault();
        this.#focusNextSuggestion(true);
      }
    };

    #onSubmit = () => {
      this.#execute(this.#input.value);
    };

    #onSuggestionClick = (e) => {
      const ref = e.target.closest('.suggestion');
      if (!ref) return;
      this.#execute(ref.dataset.suggestion);
    };

    #renderSuggestions(suggestions, query) {
      this.#suggestions.innerHTML = '';
      const sliced = suggestions.slice(0, CONFIG.suggestionLimit);
      const template = document.getElementById('suggestion-template');

      for (const [index, suggestion] of sliced.entries()) {
        const clone = template.content.cloneNode(true);
        const ref = clone.querySelector('.suggestion');
        ref.dataset.index = index;
        ref.dataset.suggestion = suggestion;
        const escapedQuery = Search.#escapeRegexCharacters(query);
        const matched = suggestion.match(new RegExp(escapedQuery, 'i'));

        if (matched) {
          const template = document.getElementById('match-template');
          const clone = template.content.cloneNode(true);
          const matchRef = clone.querySelector('.match');
          const pre = suggestion.slice(0, matched.index);
          const post = suggestion.slice(matched.index + matched[0].length);
          matchRef.innerText = matched[0];
          matchRef.insertAdjacentHTML('beforebegin', pre);
          matchRef.insertAdjacentHTML('afterend', post);
          ref.append(clone);
        } else {
          ref.innerText = suggestion;
        }

        this.#suggestions.append(clone);
      }
    }
  }

  customElements.define('search-component', Search);
</script>

<style>
  html {
    background-color: var(--color-background);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: 1.4;
  }

  body {
    margin: 0;
  }

  main {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    overflow: hidden;
    padding: calc(var(--space) * 4) var(--space);
    position: relative;
    width: 100vw;
  }
</style>

<main>
  <commands-component></commands-component>
  <search-component></search-component>
</main>