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>
  @font-face {
    font-family: 'SpaceGrotesk';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/SpaceGrotesk-Regular.woff2') format('woff2');
  }

  @font-face {
    font-family: 'SpaceGrotesk';
    font-style: normal;
    font-weight: bold;
    src: url('./fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  }

  :root {
    --color-background: #111;
    --color-text-subtle: #888;
    --color-text: #eee;
    --font-family: SpaceGrotesk, -apple-system, Helvetica, sans-serif;
    --font-size: clamp(16px, 1.5vw, 18px);
    --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: 'AI', searchTemplate: '/?q={}', suggestions: ['a/chat', 'a/gemini', 'a/grok', 'a/lumo'], url: 'https://claude.ai/new' }],
    ['a/chat', { url: 'https://chatgpt.com' }],
    ['a/gemini', { url: 'https://gemini.google.com' }],
    ['a/grok', { url: 'https://grok.com' }],
    ['a/lumo', { url: 'https://lumo.proton.me/u/0' }],
    ['c', { name: 'Cloudflare', url: 'https://dash.cloudflare.com' }],
    ['d', { name: 'Discord', url: 'https://discord.com/channels/@me' }],
    ['e', { name: 'PostHog', url: 'https://us.posthog.com' }],
    ['f', { name: 'Figma', url: 'https://www.figma.com' }],
    ['g', { name: 'GitHub', searchTemplate: '/search?q={}', suggestions: ['g/copilot', 'g/trending'], url: 'https://github.com' }],
    ['h', { name: 'Hetzner', url: 'https://console.hetzner.cloud/projects' }],
    ['i', { name: 'InstantDB', url: 'https://instantdb.com/dash' }],
    ['l', { name: 'LinkedIn', url: 'https://www.linkedin.com/feed/' }],
    ['m', { name: 'Modal', url: 'https://modal.com/apps' }],
    ['n', { name: 'Pinecone', url: 'https://app.pinecone.io' }],
    ['o', { name: 'OpenRouter', url: 'https://openrouter.ai/models' }],
    ['p', { name: 'Proton', suggestions: ['p/drive', 'p/pass'], 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' }],
    ['q', { name: 'QBO', url: 'https://qbo.intuit.com' }],
    ['r', { name: 'Reddit', url: 'https://www.reddit.com' }],
    ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/organizations' }],
    ['t', { name: 'TickTick', url: 'https://ticktick.com/webapp/#q/today/tasks' }],
    ['u', { name: 'Duolingo', url: 'https://www.duolingo.com/learn' }],
    ['v', { name: 'Vercel', url: 'https://vercel.com/dashboard' }],
    ['x', { name: '𝕏', suggestions: ['x/jellyseerr', 'x/n8n'], url: 'https://x.com/home' }],
    ['x/jellyseerr', { url: 'https://jellyseerr.xvyz.co' }],
    ['x/n8n', { url: 'https://n8n.xvyz.co/home/workflows' }],
    ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://www.youtube.com/feed/subscriptions' }],
    ['0', { name: 'localhost', url: 'http://localhost:3000' }],
  ]);
</script>

<template id="commands-template">
  <style>
    nav {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      min-height: 100dvh;
      padding: 4rem 0;
      width: 100%;
    }

    .commands {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .command {
      align-items: center;
      color: var(--color-text);
      display: flex;
      height: 4em;
      justify-content: center;
      outline: 0;
      position: relative;
      text-align: center;
      text-decoration: none;
      width: 4em;
    }

    .key {
      color: var(--color-text-subtle);
      position: absolute;
      transition: all var(--transition-speed);
    }

    .command:where(:focus, :hover) .key {
      opacity: 0;
      pointer-events: none;
      transform: translateY(1.5em) scale(0.9);
    }

    .name {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-1.5em) scale(0.9);
      transition: all var(--transition-speed);
    }

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

    @media (min-width: 60rem) {
      .commands {
        grid-template-columns: repeat(11, 1fr);h
      }
    }
  </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;
      font-family: var(--font-family);
      -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: 2rem;
      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: 1rem 0 0;
      overflow: hidden;
      padding: 0;
    }

    .suggestion {
      color: var(--color-text);
      cursor: pointer;
      font-size: 1rem;
      padding: 1rem;
      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: 0.1em;
      content: ' ';
      inset: 0.9em 0.5em;
      opacity: 0;
      position: absolute;
      transform: translateY(0.3em) scale(0.9);
      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?.length > 1 &&
        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
          )
          .slice(0, CONFIG.suggestionLimit);
      }

      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 template = document.getElementById('suggestion-template');

      for (const [index, suggestion] of suggestions.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;
    user-select: none;
  }

  body {
    margin: 0;
  }
</style>

<commands-component></commands-component>
<search-component></search-component>
-												update commands

											
										
										
											2023-08-16 08:02:02 +00:00
+								<!doctype html>
-												functionality tweaks & link changes

											
										
										
											2021-01-12 10:32:47 +00:00
+								<meta charset="utf-8" />
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								<meta name="color-scheme" content="dark light" />
-												cleanup & amoled

											
										
										
											2021-01-16 07:32:59 +00:00
+								<meta name="robots" content="noindex" />
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								<meta name="viewport" content="width=device-width, initial-scale=1" />
-												cleanup & amoled

											
										
										
											2021-01-16 07:32:59 +00:00
+								<title>~</title>
-												initial commit

											
										
										
											2016-02-01 02:28:14 +00:00
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								<style>
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								  @font-face {
 								    font-family: 'SpaceGrotesk';
 								    font-style: normal;
 								    font-weight: normal;
-												move font things to font directory

											
										
										
											2025-02-04 19:04:43 +00:00
+								    src: url('./fonts/SpaceGrotesk-Regular.woff2') format('woff2');
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								  }
 								  @font-face {
 								    font-family: 'SpaceGrotesk';
 								    font-style: normal;
 								    font-weight: bold;
-												move font things to font directory

											
										
										
											2025-02-04 19:04:43 +00:00
+								    src: url('./fonts/SpaceGrotesk-Bold.woff2') format('woff2');
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								  }
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								  :root {
-												update links and colors

											
										
										
											2025-11-22 04:19:49 +00:00
+								    --color-background: #111;
-												add rounded edges

											
										
										
											2024-01-26 21:00:51 +00:00
+								    --color-text-subtle: #888;
-												update links and colors

											
										
										
											2025-11-22 04:19:49 +00:00
+								    --color-text: #eee;
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								    --font-family: SpaceGrotesk, -apple-system, Helvetica, sans-serif;
-												flex -> grid

											
										
										
											2025-02-05 18:04:23 +00:00
+								    --font-size: clamp(16px, 1.5vw, 18px);
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								    --transition-speed: 200ms;
 								  }
 								  @media (prefers-color-scheme: light) {
 								    :root {
-												add rounded edges

											
										
										
											2024-01-26 21:00:51 +00:00
+								      --color-background: #e8e8e8;
 								      --color-text-subtle: #606060;
 								      --color-text: #111;
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								    }
 								  }
 								</style>
-												open queries in a new tab by default / rearrange some things

											
										
										
											2016-10-14 05:49:37 +00:00
+								<script>
-												es6 and fancier js

											
										
										
											2017-03-03 07:37:14 +00:00
+								  const CONFIG = {
-												restructure configuration variables

											
										
										
											2022-08-05 16:32:34 +00:00
+								    commandPathDelimiter: '/',
 								    commandSearchDelimiter: ' ',
 								    defaultSearchTemplate: 'https://duckduckgo.com/?q={}',
-												add openLinksInNewTab config

											
										
										
											2022-08-04 14:15:29 +00:00
+								    openLinksInNewTab: true,
-												only limit suggestions when using ddg autocomplete

											
										
										
											2025-07-16 18:46:33 +00:00
+								    suggestionLimit: 4,
-												restructure configuration variables

											
										
										
											2022-08-05 16:32:34 +00:00
+								  };
-												update commands and disable prettier

											
										
										
											2024-06-18 19:34:57 +00:00
+								  // prettier-ignore
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								  const COMMANDS = new Map([
-												update commands

											
										
										
											2026-02-28 17:57:09 +00:00
+								    ['a', { name: 'AI', searchTemplate: '/?q={}', suggestions: ['a/chat', 'a/gemini', 'a/grok', 'a/lumo'], url: 'https://claude.ai/new' }],
 								    ['a/chat', { url: 'https://chatgpt.com' }],
-												update commands

											
										
										
											2025-02-04 23:05:29 +00:00
+								    ['a/gemini', { url: 'https://gemini.google.com' }],
-												update commands

											
										
										
											2025-06-03 20:51:46 +00:00
+								    ['a/grok', { url: 'https://grok.com' }],
-												update commands

											
										
										
											2025-10-10 00:46:46 +00:00
+								    ['a/lumo', { url: 'https://lumo.proton.me/u/0' }],
-												update commands

											
										
										
											2024-12-04 21:19:56 +00:00
+								    ['c', { name: 'Cloudflare', url: 'https://dash.cloudflare.com' }],
-												update commands

											
										
										
											2025-06-03 20:51:46 +00:00
+								    ['d', { name: 'Discord', url: 'https://discord.com/channels/@me' }],
-												update commands

											
										
										
											2025-10-10 00:46:46 +00:00
+								    ['e', { name: 'PostHog', url: 'https://us.posthog.com' }],
-												update links and colors

											
										
										
											2025-11-22 04:19:49 +00:00
+								    ['f', { name: 'Figma', url: 'https://www.figma.com' }],
-												update commands

											
										
										
											2025-08-28 17:37:21 +00:00
+								    ['g', { name: 'GitHub', searchTemplate: '/search?q={}', suggestions: ['g/copilot', 'g/trending'], url: 'https://github.com' }],
-												update commands

											
										
										
											2025-01-26 02:16:17 +00:00
+								    ['h', { name: 'Hetzner', url: 'https://console.hetzner.cloud/projects' }],
-												update commands

											
										
										
											2025-10-10 00:46:46 +00:00
+								    ['i', { name: 'InstantDB', url: 'https://instantdb.com/dash' }],
-												/

											
										
										
											2025-11-29 07:48:56 +00:00
+								    ['l', { name: 'LinkedIn', url: 'https://www.linkedin.com/feed/' }],
-												update commands

											
										
										
											2025-10-19 03:54:49 +00:00
+								    ['m', { name: 'Modal', url: 'https://modal.com/apps' }],
-												update commands

											
										
										
											2025-10-13 03:36:15 +00:00
+								    ['n', { name: 'Pinecone', url: 'https://app.pinecone.io' }],
-												update commands

											
										
										
											2025-10-19 17:31:40 +00:00
+								    ['o', { name: 'OpenRouter', url: 'https://openrouter.ai/models' }],
-												update commands

											
										
										
											2025-10-09 04:36:56 +00:00
+								    ['p', { name: 'Proton', suggestions: ['p/drive', 'p/pass'], url: 'https://mail.proton.me/u/0/inbox' }],
-												update commands

											
										
										
											2024-12-04 21:19:56 +00:00
+								    ['p/drive', { url: 'https://drive.proton.me/u/0' }],
 								    ['p/pass', { url: 'https://pass.proton.me/u/0' }],
-												update commands

											
										
										
											2025-10-10 00:46:46 +00:00
+								    ['q', { name: 'QBO', url: 'https://qbo.intuit.com' }],
-												update commands

											
										
										
											2025-10-19 17:31:40 +00:00
+								    ['r', { name: 'Reddit', url: 'https://www.reddit.com' }],
-												update commands

											
										
										
											2025-10-10 00:46:46 +00:00
+								    ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/organizations' }],
-												update commands

											
										
										
											2024-12-04 21:19:56 +00:00
+								    ['t', { name: 'TickTick', url: 'https://ticktick.com/webapp/#q/today/tasks' }],
-												update commands

											
										
										
											2025-10-13 03:36:15 +00:00
+								    ['u', { name: 'Duolingo', url: 'https://www.duolingo.com/learn' }],
-												update commands

											
										
										
											2025-02-04 23:05:29 +00:00
+								    ['v', { name: 'Vercel', url: 'https://vercel.com/dashboard' }],
-												add x suggestions

											
										
										
											2025-10-30 05:14:12 +00:00
+								    ['x', { name: '𝕏', suggestions: ['x/jellyseerr', 'x/n8n'], url: 'https://x.com/home' }],
 								    ['x/jellyseerr', { url: 'https://jellyseerr.xvyz.co' }],
 								    ['x/n8n', { url: 'https://n8n.xvyz.co/home/workflows' }],
-												update commands

											
										
										
											2024-12-04 21:19:56 +00:00
+								    ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://www.youtube.com/feed/subscriptions' }],
-												update commands

											
										
										
											2025-10-19 03:54:49 +00:00
+								    ['0', { name: 'localhost', url: 'http://localhost:3000' }],
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								  ]);
-												open queries in a new tab by default / rearrange some things

											
										
										
											2016-10-14 05:49:37 +00:00
+								</script>
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								<template id="commands-template">
 								  <style>
-												flex -> grid

											
										
										
											2025-02-05 18:04:23 +00:00
+								    nav {
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      align-items: center;
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      box-sizing: border-box;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      display: flex;
 								      justify-content: center;
-												flex -> grid

											
										
										
											2025-02-05 18:04:23 +00:00
+								      min-height: 100dvh;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      padding: 4rem 0;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      width: 100%;
-												show form input when you click the clock

											
										
										
											2017-07-30 06:14:33 +00:00
+								    }
-												flex -> grid

											
										
										
											2025-02-05 18:04:23 +00:00
+								    .commands {
 								      display: inline-grid;
 								      grid-template-columns: 1fr 1fr;
 								      list-style: none;
 								      margin: 0;
 								      padding: 0;
 								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    .command {
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      align-items: center;
 								      color: var(--color-text);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      display: flex;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      height: 4em;
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      justify-content: center;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      outline: 0;
-												update command style

											
										
										
											2024-01-24 06:38:48 +00:00
+								      position: relative;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      text-align: center;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      text-decoration: none;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      width: 4em;
-												update command style

											
										
										
											2024-01-24 06:38:48 +00:00
+								    }
-												style tweaks

											
										
										
											2023-01-09 09:07:23 +00:00
+								    .key {
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      color: var(--color-text-subtle);
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      position: absolute;
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      transition: all var(--transition-speed);
 								    }
 								    .command:where(:focus, :hover) .key {
 								      opacity: 0;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      pointer-events: none;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      transform: translateY(1.5em) scale(0.9);
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								    }
 								    .name {
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      opacity: 0;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								      pointer-events: none;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      transform: translateY(-1.5em) scale(0.9);
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      transition: all var(--transition-speed);
-												highlight readme command

											
										
										
											2022-12-16 08:03:02 +00:00
+								    }
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								    .command:where(:focus, :hover) .name {
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      opacity: 1;
 								      transform: translateY(0);
 								    }
-												update commands

											
										
										
											2025-10-19 17:31:40 +00:00
+								    @media (min-width: 60rem) {
-												update commands

											
										
										
											2024-12-08 10:02:02 +00:00
+								      .commands {
-												update commands

											
										
										
											2025-10-19 17:31:40 +00:00
+								        grid-template-columns: repeat(11, 1fr);h
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								      }
 								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								  </style>
 								  <nav>
 								    <menu class="commands"></menu>
 								  </nav>
 								</template>
 								<template id="command-template">
 								  <li>
-												add openLinksInNewTab config

											
										
										
											2022-08-04 14:15:29 +00:00
+								    <a class="command" rel="noopener noreferrer">
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      <span class="key"></span>
 								      <span class="name"></span>
 								    </a>
 								  </li>
 								</template>
 								<script type="module">
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								  class Commands extends HTMLElement {
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    constructor() {
 								      super();
 								      this.attachShadow({ mode: 'open' });
 								      const template = document.getElementById('commands-template');
 								      const clone = template.content.cloneNode(true);
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      const commands = clone.querySelector('.commands');
 								      const commandTemplate = document.getElementById('command-template');
-												query templates outside of loops

											
										
										
											2022-07-30 21:03:40 +00:00
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								      for (const [key, { name, url }] of COMMANDS.entries()) {
-												restructure configuration variables

											
										
										
											2022-08-05 16:32:34 +00:00
+								        if (!name || !url) continue;
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								        const clone = commandTemplate.content.cloneNode(true);
-												add openLinksInNewTab config

											
										
										
											2022-08-04 14:15:29 +00:00
+								        const command = clone.querySelector('.command');
 								        command.href = url;
 								        if (CONFIG.openLinksInNewTab) command.target = '_blank';
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								        clone.querySelector('.key').innerText = key;
 								        clone.querySelector('.name').innerText = name;
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								        commands.append(clone);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      }
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
 								      this.shadowRoot.append(clone);
-												esc closes help + small bug fix

											
										
										
											2017-03-04 04:03:53 +00:00
+								    }
-												es6 and fancier js

											
										
										
											2017-03-03 07:37:14 +00:00
+								  }
-												refactor / make help prettier

											
										
										
											2016-06-01 03:14:45 +00:00
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								  customElements.define('commands-component', Commands);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								</script>
-												absolutely massive refactor

											
										
										
											2017-07-11 06:04:57 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								<template id="search-template">
 								  <style>
 								    input,
 								    button {
 								      -moz-appearance: none;
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      font-family: var(--font-family);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      -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;
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								      height: 100%;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      justify-content: center;
 								      left: 0;
 								      padding: 0;
 								      top: 0;
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								      width: 100%;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    }
 								    .dialog[open] {
 								      display: flex;
 								    }
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								    .form {
 								      width: 100%;
 								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    .input {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      color: var(--color-text);
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								      font-size: 2rem;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      font-weight: bold;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      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;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      margin: 1rem 0 0;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      overflow: hidden;
 								      padding: 0;
 								    }
 								    .suggestion {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      color: var(--color-text);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      cursor: pointer;
-												simplify css variables

											
										
										
											2024-01-31 03:50:09 +00:00
+								      font-size: 1rem;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      padding: 1rem;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      position: relative;
 								      transition: color var(--transition-speed);
 								      white-space: nowrap;
-												showModal() -> show() to get rid of unnecessary margin

											
										
										
											2022-07-25 22:39:51 +00:00
+								      z-index: 1;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    }
-												utilize css :where selector

											
										
										
											2022-11-17 23:15:48 +00:00
+								    .suggestion:where(:focus, :hover) {
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      color: var(--color-background);
 								    }
 								    .suggestion::before {
 								      background-color: var(--color-text);
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      border-radius: 0.1em;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      content: ' ';
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      inset: 0.9em 0.5em;
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      opacity: 0;
 								      position: absolute;
-												style refinements

											
										
										
											2025-02-04 22:31:58 +00:00
+								      transform: translateY(0.3em) scale(0.9);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      transition: all var(--transition-speed);
 								      z-index: -1;
 								    }
-												utilize css :where selector

											
										
										
											2022-11-17 23:15:48 +00:00
+								    .suggestion:where(:focus, :hover)::before {
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      opacity: 1;
 								      transform: translateY(0);
 								    }
 								    .match {
 								      color: var(--color-text-subtle);
 								      transition: color var(--transition-speed);
 								    }
-												utilize css :where selector

											
										
										
											2022-11-17 23:15:48 +00:00
+								    .suggestion:where(:focus, :hover) .match {
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      color: var(--color-background);
 								    }
 								    @media (min-width: 700px) {
 								      .suggestions {
 								        flex-direction: row;
 								      }
-												polish

											
										
										
											2021-01-17 10:40:04 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								  </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">
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								  class Search extends HTMLElement {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								    #dialog;
 								    #form;
 								    #input;
 								    #suggestions;
-												add suggestion preview functionality

											
										
										
											2017-07-02 06:52:47 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    constructor() {
 								      super();
 								      this.attachShadow({ mode: 'open' });
 								      const template = document.getElementById('search-template');
 								      const clone = template.content.cloneNode(true);
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      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);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      document.addEventListener('keydown', this.#onKeydown);
 								      this.shadowRoot.append(clone);
-												fix duplicate suggestion click events

											
										
										
											2019-01-17 23:14:21 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    static #escapeRegexCharacters(s) {
 								      return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-												bind to ctrl n/p for navigating suggestions

											
										
										
											2017-03-03 08:42:58 +00:00
+								    }
-												make suggestions a bit more robust

											
										
										
											2017-06-28 05:13:49 +00:00
-												remove superfluous influencer classes

											
										
										
											2022-07-25 04:35:59 +00:00
+								    static #fetchDuckDuckGoSuggestions(search) {
 								      return new Promise((resolve) => {
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
+								        window.autocompleteCallback = (res) => {
 								          const suggestions = [];
 								          for (const item of res) {
 								            if (item.phrase === search.toLowerCase()) continue;
 								            suggestions.push(item.phrase);
 								          }
 								          resolve(suggestions);
 								        };
-												remove superfluous influencer classes

											
										
										
											2022-07-25 04:35:59 +00:00
 								        const script = document.createElement('script');
 								        document.querySelector('head').appendChild(script);
 								        script.src = `https://duckduckgo.com/ac/?callback=autocompleteCallback&q=${search}`;
-												remove suggestion script onload

											
										
										
											2023-02-12 19:59:04 +00:00
+								        script.onload = script.remove;
-												remove superfluous influencer classes

											
										
										
											2022-07-25 04:35:59 +00:00
+								      });
 								    }
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								    static #formatSearchUrl(template, search) {
 								      return template.replace(/{}/g, encodeURIComponent(search));
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    static #hasProtocol(s) {
 								      return /^[a-zA-Z]+:\/\//i.test(s);
-												link updates, suggestion rehighlights, style updates

											
										
										
											2021-01-08 08:31:52 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    static #isUrl(s) {
 								      return /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i.test(s);
-												make suggestions a bit more robust

											
										
										
											2017-06-28 05:13:49 +00:00
+								    }
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    static #parseQuery = (raw) => {
 								      const query = raw.trim();
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      if (this.#isUrl(query)) {
 								        const url = this.#hasProtocol(query) ? query : `https://${query}`;
 								        return { query, url };
-												es6 and fancier js

											
										
										
											2017-03-03 07:37:14 +00:00
+								      }
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								      if (COMMANDS.has(query)) {
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								        const { key, url } = COMMANDS.get(query);
 								        return { key, query, url };
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								      }
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												restructure configuration variables

											
										
										
											2022-08-05 16:32:34 +00:00
+								      let splitBy = CONFIG.commandSearchDelimiter;
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								      const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`));
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								      if (COMMANDS.has(searchKey)) {
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								        const command = COMMANDS.get(searchKey);
 								        const template = new URL(command.searchTemplate ?? '', command.url);
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								        const search = rawSearch.trim();
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								        const url = Search.#formatSearchUrl(decodeURI(template.href), search);
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								        return { key: searchKey, query, search, splitBy, url };
 								      }
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												restructure configuration variables

											
										
										
											2022-08-05 16:32:34 +00:00
+								      splitBy = CONFIG.commandPathDelimiter;
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								      const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`));
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												update commands, command object -> map, update styles

											
										
										
											2023-02-12 08:14:19 +00:00
+								      if (COMMANDS.has(pathKey)) {
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								        const command = COMMANDS.get(pathKey);
 								        const url = `${new URL(command.url).origin}/${path}`;
 								        return { key: pathKey, path, query, splitBy, url };
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      }
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												simplify formatSearchUrl calls, use URL api

closes: https://github.com/xvvvyz/tilde/issues/33

											
										
										
											2024-06-20 18:32:44 +00:00
+								      const url = Search.#formatSearchUrl(CONFIG.defaultSearchTemplate, query);
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								      return { query, search: query, url };
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
+								    };
-												es6 and fancier js

											
										
										
											2017-03-03 07:37:14 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    #close() {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      this.#input.value = '';
 								      this.#input.blur();
 								      this.#dialog.close();
 								      this.#suggestions.innerHTML = '';
-												show form input when you click the clock

											
										
										
											2017-07-30 06:14:33 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    #execute(query) {
-												add openLinksInNewTab config

											
										
										
											2022-08-04 14:15:29 +00:00
+								      const target = CONFIG.openLinksInNewTab ? '_blank' : '_self';
-												simplify formatSearchUrl function, fix alternate localhost ports

											
										
										
											2024-06-20 19:43:52 +00:00
+								      window.open(Search.#parseQuery(query).url, target, 'noopener noreferrer');
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								      this.#close();
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
+								    }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    #focusNextSuggestion(previous = false) {
 								      const active = this.shadowRoot.activeElement;
 								      let nextIndex;
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								      if (active.dataset.index) {
 								        const activeIndex = Number(active.dataset.index);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								        nextIndex = previous ? activeIndex - 1 : activeIndex + 1;
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								      } else {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								        nextIndex = previous ? this.#suggestions.childElementCount - 1 : 0;
-												pass parsed instead of raw query to influencers

											
										
										
											2022-02-20 21:19:25 +00:00
+								      }
-												cleanup/bugfixes/styles

											
										
										
											2018-12-16 11:50:11 +00:00
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      const next = this.#suggestions.children[nextIndex];
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								      if (next) next.querySelector('.suggestion').focus();
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      else this.#input.focus();
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    }
-												updates and fixes across the board

											
										
										
											2017-07-19 07:04:54 +00:00
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
+								    #onInput = async () => {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      const oq = Search.#parseQuery(this.#input.value);
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
-												do not render suggestions for an old query

											
										
										
											2023-02-12 20:22:27 +00:00
+								      if (!oq.query) {
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
+								        this.#close();
 								        return;
 								      }
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
-												do not render suggestions for an old query

											
										
										
											2023-02-12 20:22:27 +00:00
+								      let suggestions = COMMANDS.get(oq.query)?.suggestions ?? [];
-												remove superfluous influencer classes

											
										
										
											2022-07-25 04:35:59 +00:00
-												only limit suggestions when using ddg autocomplete

											
										
										
											2025-07-16 18:46:33 +00:00
+								      if (
 								        oq.search?.length > 1 &&
 								        suggestions.length < CONFIG.suggestionLimit
 								      ) {
-												do not render suggestions for an old query

											
										
										
											2023-02-12 20:22:27 +00:00
+								        const res = await Search.#fetchDuckDuckGoSuggestions(oq.search);
-												move attachSearchPrefix inline

											
										
										
											2024-02-20 06:01:07 +00:00
-												only limit suggestions when using ddg autocomplete

											
										
										
											2025-07-16 18:46:33 +00:00
+								        suggestions = suggestions
 								          .concat(
 								            oq.splitBy
 								              ? res.map((search) => `${oq.key}${oq.splitBy}${search}`)
 								              : res
 								          )
 								          .slice(0, CONFIG.suggestionLimit);
-												remove superfluous influencer classes

											
										
										
											2022-07-25 04:35:59 +00:00
+								      }
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      const nq = Search.#parseQuery(this.#input.value);
-												do not render suggestions for an old query

											
										
										
											2023-02-12 20:22:27 +00:00
+								      if (nq.query !== oq.query) return;
 								      this.#renderSuggestions(suggestions, oq.query);
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
+								    };
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    #onKeydown = (e) => {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      if (!this.#dialog.open) {
 								        this.#dialog.show();
 								        this.#input.focus();
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
 								        requestAnimationFrame(() => {
 								          // close the search dialog before the next repaint if a character is
 								          // not produced (e.g. if you type shift, control, alt etc.)
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								          if (!this.#input.value) this.#close();
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
+								        });
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
+								        return;
-												updates and fixes across the board

											
										
										
											2017-07-19 07:04:54 +00:00
+								      }
-												filter + map -> for of & requestAnimationFrame shenanigans

											
										
										
											2022-07-25 15:49:17 +00:00
+								      if (e.key === 'Escape') {
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
+								        this.#close();
 								        return;
-												add theme support

											
										
										
											2022-02-24 21:07:22 +00:00
+								      }
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
+								      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();
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								        return;
-												add scripts functionality

											
										
										
											2021-01-20 16:43:08 +00:00
+								      }
-												spruce up keyboard/focus event functionality

											
										
										
											2022-07-25 06:20:33 +00:00
+								      if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(modifierPrefixedKey)) {
 								        e.preventDefault();
 								        this.#focusNextSuggestion(true);
 								      }
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
+								    };
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								    #onSubmit = () => {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      this.#execute(this.#input.value);
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								    };
 								    #onSuggestionClick = (e) => {
 								      const ref = e.target.closest('.suggestion');
 								      if (!ref) return;
 								      this.#execute(ref.dataset.suggestion);
 								    };
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    #renderSuggestions(suggestions, query) {
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								      this.#suggestions.innerHTML = '';
-												query templates outside of loops

											
										
										
											2022-07-30 21:03:40 +00:00
+								      const template = document.getElementById('suggestion-template');
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
-												only limit suggestions when using ddg autocomplete

											
										
										
											2025-07-16 18:46:33 +00:00
+								      for (const [index, suggestion] of suggestions.entries()) {
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								        const clone = template.content.cloneNode(true);
 								        const ref = clone.querySelector('.suggestion');
-												use event delegation

											
										
										
											2022-07-28 02:39:53 +00:00
+								        ref.dataset.index = index;
 								        ref.dataset.suggestion = suggestion;
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								        const escapedQuery = Search.#escapeRegexCharacters(query);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								        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;
 								        }
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												minor element reference property refactor

											
										
										
											2023-03-30 20:42:16 +00:00
+								        this.#suggestions.append(clone);
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
+								      }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								    }
 								  }
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												commands array -> map & name changes

											
										
										
											2022-07-30 20:25:30 +00:00
+								  customElements.define('search-component', Search);
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								</script>
-												use modern javascript class syntax

											
										
										
											2022-07-21 03:34:58 +00:00
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								<style>
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								  html {
 								    background-color: var(--color-background);
 								    font-family: var(--font-family);
-												simplify css variables

											
										
										
											2024-01-31 03:50:09 +00:00
+								    font-size: var(--font-size);
 								    line-height: 1.4;
-												redesign commands

											
										
										
											2025-02-04 18:42:08 +00:00
+								    user-select: none;
-												add digital rain

											
										
										
											2023-03-30 23:26:24 +00:00
+								  }
 								  body {
 								    margin: 0;
 								  }
-												web components? yes

											
										
										
											2022-07-24 03:07:50 +00:00
+								</style>
-												es6 and fancier js

											
										
										
											2017-03-03 07:37:14 +00:00
-												redesign commands, add space grotesk

											
										
										
											2025-01-28 22:26:04 +00:00
+								<commands-component></commands-component>
 								<search-component></search-component>