From 0272fd73926de89a119618969f375c681df3b1ac Mon Sep 17 00:00:00 2001
From: M1n <54779580+M1n-74316D65@users.noreply.github.com>
Date: Thu, 18 Jul 2024 04:14:27 +0200
Subject: [PATCH] refactor: :tada: done

---
 CNAME      |   1 -
 index.html | 967 ++++++++++++++++++++++++++---------------------------
 2 files changed, 483 insertions(+), 485 deletions(-)
 delete mode 100644 CNAME
diff --git a/CNAME b/CNAME
deleted file mode 100644
index e745d37..0000000
--- a/CNAME
+++ /dev/null
@@ -1 +0,0 @@
-tilde.xvvvyz.xyz
diff --git a/index.html b/index.html
index 46ca1be..42c3502 100644
--- a/index.html
+++ b/index.html
@@ -1,553 +1,552 @@
-<!doctype 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>
+<title>M1n Startpage</title>
 
 <style>
-  :root {
-    --border-radius: 1rem;
-    --color-background: #111;
-    --color-text-subtle: #888;
-    --color-text: #eee;
-    --font-family: -apple-system, Helvetica, sans-serif;
-    --font-size: clamp(16px, 1.6vw, 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;
+        --border-radius: 1rem;
+        --color-background: #111;
+        --color-text-subtle: #888;
+        --color-text: #eee;
+        --font-family: -apple-system, Helvetica, sans-serif;
+        --font-size: clamp(16px, 1.6vw, 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,
-  };
+    const CONFIG = {
+        commandPathDelimiter: '/',
+        commandSearchDelimiter: ' ',
+        defaultSearchTemplate: 'https://search.brave.com/search?q={}',
+        openLinksInNewTab: true,
+        suggestionLimit: 4,
+    };
 
-  // prettier-ignore
-  const COMMANDS = new Map([
-    ['a', { name: 'Gemini', url: 'https://gemini.google.com/app' }],
-    ['b', { name: 'Dribbble', searchTemplate: '/search/{}', url: 'https://dribbble.com/shots/recent' }],
-    ['c', { name: 'Calendar', url: 'https://calendar.google.com' }],
-    ['d', { name: 'Drive', url: 'https://drive.google.com/drive/u/0/my-drive' }],
-    ['f', { name: 'Figma', url: 'https://www.figma.com' }],
-    ['g', { name: 'GitHub', searchTemplate: '/search?q={}', url: 'https://github.com' }],
-    ['k', { name: 'Keep', url: 'https://keep.google.com' }],
-    ['n', { name: 'Notion', url: 'https://www.notion.so' }],
-    ['o', { name: 'Google', searchTemplate: '/search?q={}', suggestions: ['o/travel'], url: 'https://www.google.com' }],
-    ['p', { name: 'Proton', searchTemplate: '/u/0/all-mail#keyword={}', suggestions: ['p/drive'], url: 'https://mail.proton.me/u/0/inbox' }],
-    ['p/drive', { url: 'https://drive.proton.me/u/0/' }],
-    ['r', { name: 'Reddit', searchTemplate: '/search/?q={}', suggestions: ['r/r/selfhosted', 'r/r/dataisbeautiful', 'r/r/fujix', 'r/r/leetcode'], url: 'https://reddit.com' }],
-    ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }],
-    ['v', { name: 'Vercel', url: 'https://vercel.com/dashboard' }],
-    ['x', { name: 'xvvvyz', suggestions: ['x/pomo', 'x/torrent'], url: 'https://xvvvyz.xyz' }],
-    ['x/pomo', { url: 'https://pomodoro.xvvvyz.xyz' }],
-    ['x/proxy', { url: 'https://proxy.xvvvyz.xyz' }],
-    ['x/torrent', { url: 'https://torrent.xvvvyz.xyz' }],
-    ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://youtube.com/feed/subscriptions' }],
-    ['0', { name: 'local', suggestions: ['0:54323', '0:54324'], url: 'http://localhost:3000' }],
-    ['0:54323', { url: 'http://localhost:54323' }],
-    ['0:54324', { url: 'http://localhost:54324' }],
-  ]);
+    // prettier-ignore
+    const COMMANDS = new Map([
+        ['p', { name: 'Proton', searchTemplate: '/u/0/all-mail#keyword={}', url: 'https://mail.proton.me/u/0/inbox' }],
+        ['p/pass', { url: 'https://pass.proton.me/' }],
+        ['g', { name: 'GitHub', searchTemplate: '/search?q={}', url: 'https://github.com' }],
+        ['v', { name: 'Vercel', url: 'https://vercel.com/dashboard' }],
+        ['b', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }],
+        ['h', { name: 'Hoarder', url: 'https://hoarder.m1n.omg.lol/dashboard/bookmarks' }],
+        ['a', { name: 'Audiobooks', url: 'https://audio.m1n.omg.lol/library/76869b27-fac9-4e88-ba73-2c003c19fca1' }],
+        ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://youtube.com/feed/subscriptions' }],
+        ['t', { name: 'Twitch', url: 'https://www.twitch.tv' }],
+        // ['aud', { name: 'Audible', url: 'https://www.audible.com/' }],
+        ['n', { name: 'Hacker News', url: 'https://news.ycombinator.com' }],
+        ['d', { name: 'DeepL', url: 'https://www.deepl.com/es/translator' }],
+        ['f', { name: 'Cloudflare', url: 'https://dash.cloudflare.com' }],
+        ['i', { name: 'Pico.sh', url: 'https://pico.sh/' }],
+        ['s/local', { url: 'http://localhost:1337/' }],
+        ['c', { name: 'ChatGPT', url: 'https://chat.openai.com/' }],
+        ['m', { name: 'Morphic', url: 'https://www.morphic.sh/' }],
+        ['s', { name: 'Server', url: 'http://192.168.1.139/#' }],
+        ['0', { name: 'Local', 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 {
-      column-gap: 0;
-      columns: 2;
-      list-style: none;
-      margin: 0 auto;
-      max-width: 20rem;
-      overflow: hidden;
-      padding: 0;
-      width: 100vw;
-    }
+    <style>
+        .commands {
+            column-gap: 0;
+            columns: 2;
+            list-style: none;
+            margin: 0 auto;
+            max-width: 20rem;
+            overflow: hidden;
+            padding: 0;
+            width: 100vw;
+        }
 
-    .command {
-      display: flex;
-      gap: var(--space);
-      outline: 0;
-      padding: var(--space);
-      position: relative;
-      text-decoration: none;
-    }
+        .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::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;
-    }
+        .command:where(:focus, :hover)::after {
+            opacity: 0.1;
+        }
 
-    .key {
-      color: var(--color-text);
-      display: inline-block;
-      text-align: center;
-      width: 3ch;
-    }
+        .key {
+            color: var(--color-text);
+            display: inline-block;
+            text-align: center;
+            width: 3ch;
+        }
 
-    .name {
-      color: var(--color-text-subtle);
-      transition: color var(--transition-speed);
-    }
+        .name {
+            color: var(--color-text-subtle);
+            transition: color var(--transition-speed);
+        }
 
-    .command:where(:focus, :hover) .name {
-      color: var(--color-text);
-    }
+        .command:where(:focus, :hover) .name {
+            color: var(--color-text);
+        }
 
-    @media (min-width: 320px) {
-      .commands {
-        border-radius: var(--border-radius);
-      }
-    }
+        @media (min-width: 320px) {
+            .commands {
+                border-radius: var(--border-radius);
+            }
+        }
 
-    @media (min-width: 900px) {
-      .commands {
-        columns: 4;
-        max-width: 45rem;
-      }
-    }
-  </style>
-  <nav>
-    <menu class="commands"></menu>
-  </nav>
+        @media (min-width: 900px) {
+            .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>
+    <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');
+    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);
-      }
+            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);
+            this.shadowRoot.append(clone);
+        }
     }
-  }
 
-  customElements.define('commands-component', Commands);
+    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;
-    }
+    <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 {
+            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;
-    }
+        .dialog[open] {
+            display: flex;
+        }
 
-    .form {
-      width: 100%;
-    }
+        .form {
+            width: 100%;
+        }
 
-    .input {
-      color: var(--color-text);
-      font-size: 3rem;
-      font-weight: var(--font-weight-bold);
-      padding: 0;
-      text-align: center;
-      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;
-    }
+        .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 {
+            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: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::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);
-    }
+        .suggestion:where(:focus, :hover)::before {
+            opacity: 1;
+            transform: translateY(0);
+        }
 
-    .match {
-      color: var(--color-text-subtle);
-      transition: color var(--transition-speed);
-    }
+        .match {
+            color: var(--color-text-subtle);
+            transition: color var(--transition-speed);
+        }
 
-    .suggestion:where(:focus, :hover) .match {
-      color: var(--color-background);
-    }
+        .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>
+        @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>
+    <li>
+        <button class="suggestion" type="button"></button>
+    </li>
 </template>
 
 <template id="match-template">
-  <span class="match"></span>
+    <span class="match"></span>
 </template>
 
 <script type="module">
-  class Search extends HTMLElement {
-    #dialog;
-    #form;
-    #input;
-    #suggestions;
+    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;
+        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);
         }
 
-        this.#suggestions.append(clone);
-      }
-    }
-  }
+        static #escapeRegexCharacters(s) {
+            return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        }
 
-  customElements.define('search-component', Search);
+        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;
-  }
+    html {
+        background-color: var(--color-background);
+        font-family: var(--font-family);
+        font-size: var(--font-size);
+        line-height: 1.4;
+    }
 
-  body {
-    margin: 0;
-  }
+    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;
-  }
+    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>
+    <commands-component></commands-component>
+    <search-component></search-component>
+</main>
\ No newline at end of file
