├── .prettierrc
├── CNAME
├── README.md
├── UNLICENSE
├── fonts
    ├── OFL
    ├── SpaceGrotesk-Bold.woff2
    └── SpaceGrotesk-Regular.woff2
└── index.html


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "htmlWhitespaceSensitivity": "ignore",
3 |   "proseWrap": "always",
4 |   "singleQuote": true,
5 |   "trailingComma": "es5"
6 | }
7 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | tilde.xvvvyz.xyz
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tilde
 2 | 
 3 | Tilde is a minimal browser homepage for pro web surfers.
 4 | 
 5 | ## Usage
 6 | 
 7 | **To go to a site**, type the corresponding key and press <kbd>Enter</kbd>.
 8 | 
 9 | e.g. `g` <kbd>Enter</kbd> will redirect you to [github.com](https://github.com)
10 | 
11 | **To search a site**, type a space after the site&rsquo;s key followed by your
12 | query.
13 | 
14 | e.g. `g tilde` <kbd>Enter</kbd> will
15 | [search GitHub for tilde](https://github.com/search?q=tilde)
16 | 
17 | **If your input doesn&rsquo;t match a key**, a DuckDuckGo search will be
18 | triggered.
19 | 
20 | e.g. `tilde` <kbd>Enter</kbd> will
21 | [search DuckDuckGo for tilde](https://duckduckgo.com/?q=tilde)
22 | 
23 | **To go to a specific path on a site**, type the path after the site&rsquo;s
24 | key.
25 | 
26 | e.g. `g/xvvvyz/tilde` <kbd>Enter</kbd> will redirect you to
27 | [github.com/xvvvyz/tilde](https://github.com/xvvvyz/tilde)
28 | 
29 | **To access any other site**, enter the URL directly.
30 | 
31 | e.g. `example.com` <kbd>Enter</kbd> will redirect you to
32 | [example.com](https://example.com)
33 | 
34 | ## Beyond
35 | 
36 | Tilde is meant to be customized&mdash;[make it yours!](index.html)
37 | 
38 | ## License
39 | 
40 | Space Grotesk is licensed under the [SIL Open Font License](fonts/OFL).
41 | 
42 | Use and modify Tilde [as you see fit](UNLICENSE).
43 | 


--------------------------------------------------------------------------------
/UNLICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/fonts/OFL:
--------------------------------------------------------------------------------
 1 | Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
 2 | 
 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 4 | This license is copied below, and is also available with a FAQ at:
 5 | http://scripts.sil.org/OFL
 6 | 
 7 | 
 8 | -----------------------------------------------------------
 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 | 
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 | 
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded, 
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 | 
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 | 
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 | 
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 | 
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 | 
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 | 
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 | 
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 | 
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 | 
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 | 
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 | 
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 | 
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 | 
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 | 


--------------------------------------------------------------------------------
/fonts/SpaceGrotesk-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xvvvyz/tilde/7392c9d1bb9e93df90e6493cb6ebdc7107ffef00/fonts/SpaceGrotesk-Bold.woff2


--------------------------------------------------------------------------------
/fonts/SpaceGrotesk-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xvvvyz/tilde/7392c9d1bb9e93df90e6493cb6ebdc7107ffef00/fonts/SpaceGrotesk-Regular.woff2


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8" />
  3 | <meta name="color-scheme" content="dark light" />
  4 | <meta name="robots" content="noindex" />
  5 | <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 | <title>~</title>
  7 | 
  8 | <style>
  9 |   @font-face {
 10 |     font-family: 'SpaceGrotesk';
 11 |     font-style: normal;
 12 |     font-weight: normal;
 13 |     src: url('./fonts/SpaceGrotesk-Regular.woff2') format('woff2');
 14 |   }
 15 | 
 16 |   @font-face {
 17 |     font-family: 'SpaceGrotesk';
 18 |     font-style: normal;
 19 |     font-weight: bold;
 20 |     src: url('./fonts/SpaceGrotesk-Bold.woff2') format('woff2');
 21 |   }
 22 | 
 23 |   :root {
 24 |     --color-background: #000;
 25 |     --color-text-subtle: #888;
 26 |     --color-text: #ccc;
 27 |     --font-family: SpaceGrotesk, -apple-system, Helvetica, sans-serif;
 28 |     --font-size: clamp(16px, 1.5vw, 18px);
 29 |     --transition-speed: 200ms;
 30 |   }
 31 | 
 32 |   @media (prefers-color-scheme: light) {
 33 |     :root {
 34 |       --color-background: #e8e8e8;
 35 |       --color-text-subtle: #606060;
 36 |       --color-text: #111;
 37 |     }
 38 |   }
 39 | </style>
 40 | 
 41 | <script>
 42 |   const CONFIG = {
 43 |     commandPathDelimiter: '/',
 44 |     commandSearchDelimiter: ' ',
 45 |     defaultSearchTemplate: 'https://duckduckgo.com/?q={}',
 46 |     openLinksInNewTab: true,
 47 |     suggestionLimit: 5,
 48 |   };
 49 | 
 50 |   // prettier-ignore
 51 |   const COMMANDS = new Map([
 52 |     ['a', { name: 'AI', searchTemplate: '/?temporary-chat=true&q={}', suggestions: ['a/copilot', 'a/deepseek', 'a/gemini', 'a/grok', 'a/perplexity'], url: 'https://chatgpt.com/?temporary-chat=true' }],
 53 |     ['a/copilot', { url: 'https://github.com/copilot' }],
 54 |     ['a/deepseek', { url: 'https://chat.deepseek.com' }],
 55 |     ['a/gemini', { url: 'https://gemini.google.com' }],
 56 |     ['a/grok', { url: 'https://grok.com' }],
 57 |     ['a/perplexity', { url: 'https://www.perplexity.ai' }],
 58 |     ['c', { name: 'Cloudflare', url: 'https://dash.cloudflare.com' }],
 59 |     ['d', { name: 'Discord', url: 'https://discord.com/channels/@me' }],
 60 |     ['f', { name: 'Finances', url: 'https://docs.google.com/spreadsheets/d/1sjSOdlKaE-BcraiEDjqfakCXietLTSUY1ny6gQTj-oQ/edit' }],
 61 |     ['g', { name: 'GitHub', searchTemplate: '/search?q={}', suggestions: ['g/trending'], url: 'https://github.com' }],
 62 |     ['h', { name: 'Hetzner', url: 'https://console.hetzner.cloud/projects' }],
 63 |     ['i', { name: 'Instant', url: 'https://www.instantdb.com/dash' }],
 64 |     ['p', { name: 'Proton', suggestions: ['p/pass', 'p/drive'], url: 'https://mail.proton.me/u/0/inbox' }],
 65 |     ['p/drive', { url: 'https://drive.proton.me/u/0' }],
 66 |     ['p/pass', { url: 'https://pass.proton.me/u/0' }],
 67 |     ['s', { name: 'Supabase', url: 'https://supabase.com/dashboard/projects' }],
 68 |     ['t', { name: 'TickTick', url: 'https://ticktick.com/webapp/#q/today/tasks' }],
 69 |     ['v', { name: 'Vercel', url: 'https://vercel.com/dashboard' }],
 70 |     ['x', { name: 'xvvvyz', suggestions: ['x/seerr', 'x/torrent', 'x/radarr', 'x/sonarr', 'x/bazarr'], url: 'https://xvvvyz.xyz' }],
 71 |     ['x/bazarr', { url: 'https://bazarr.xvvvyz.xyz' }],
 72 |     ['x/radarr', { url: 'https://radarr.xvvvyz.xyz' }],
 73 |     ['x/seerr', { url: 'https://jellyseerr.xvvvyz.xyz' }],
 74 |     ['x/sonarr', { url: 'https://sonarr.xvvvyz.xyz' }],
 75 |     ['x/torrent', { url: 'https://torrent.xvvvyz.xyz' }],
 76 |     ['y', { name: 'YouTube', searchTemplate: '/results?search_query={}', url: 'https://www.youtube.com/feed/subscriptions' }],
 77 |     ['0', { name: 'localhost', suggestions: ['0:54323', '0:54324'], url: 'http://localhost:3000' }],
 78 |     ['0:54323', { url: 'http://localhost:54323' }],
 79 |     ['0:54324', { url: 'http://localhost:54324' }],
 80 |   ]);
 81 | </script>
 82 | 
 83 | <template id="commands-template">
 84 |   <style>
 85 |     nav {
 86 |       align-items: center;
 87 |       box-sizing: border-box;
 88 |       display: flex;
 89 |       justify-content: center;
 90 |       min-height: 100dvh;
 91 |       padding: 4rem 0;
 92 |       width: 100%;
 93 |     }
 94 | 
 95 |     .commands {
 96 |       display: inline-grid;
 97 |       grid-template-columns: 1fr 1fr;
 98 |       list-style: none;
 99 |       margin: 0;
100 |       padding: 0;
101 |     }
102 | 
103 |     .command {
104 |       align-items: center;
105 |       color: var(--color-text);
106 |       display: flex;
107 |       height: 4em;
108 |       justify-content: center;
109 |       outline: 0;
110 |       position: relative;
111 |       text-align: center;
112 |       text-decoration: none;
113 |       width: 4em;
114 |     }
115 | 
116 |     .key {
117 |       color: var(--color-text-subtle);
118 |       position: absolute;
119 |       transition: all var(--transition-speed);
120 |     }
121 | 
122 |     .command:where(:focus, :hover) .key {
123 |       opacity: 0;
124 |       pointer-events: none;
125 |       transform: translateY(1.5em) scale(0.9);
126 |     }
127 | 
128 |     .name {
129 |       opacity: 0;
130 |       pointer-events: none;
131 |       transform: translateY(-1.5em) scale(0.9);
132 |       transition: all var(--transition-speed);
133 |     }
134 | 
135 |     .command:where(:focus, :hover) .name {
136 |       opacity: 1;
137 |       transform: translateY(0);
138 |     }
139 | 
140 |     @media (min-width: 35rem) {
141 |       .commands {
142 |         grid-template-columns: repeat(7, 1fr);
143 |       }
144 |     }
145 |   </style>
146 |   <nav>
147 |     <menu class="commands"></menu>
148 |   </nav>
149 | </template>
150 | 
151 | <template id="command-template">
152 |   <li>
153 |     <a class="command" rel="noopener noreferrer">
154 |       <span class="key"></span>
155 |       <span class="name"></span>
156 |     </a>
157 |   </li>
158 | </template>
159 | 
160 | <script type="module">
161 |   class Commands extends HTMLElement {
162 |     constructor() {
163 |       super();
164 |       this.attachShadow({ mode: 'open' });
165 |       const template = document.getElementById('commands-template');
166 |       const clone = template.content.cloneNode(true);
167 |       const commands = clone.querySelector('.commands');
168 |       const commandTemplate = document.getElementById('command-template');
169 | 
170 |       for (const [key, { name, url }] of COMMANDS.entries()) {
171 |         if (!name || !url) continue;
172 |         const clone = commandTemplate.content.cloneNode(true);
173 |         const command = clone.querySelector('.command');
174 |         command.href = url;
175 |         if (CONFIG.openLinksInNewTab) command.target = '_blank';
176 |         clone.querySelector('.key').innerText = key;
177 |         clone.querySelector('.name').innerText = name;
178 |         commands.append(clone);
179 |       }
180 | 
181 |       this.shadowRoot.append(clone);
182 |     }
183 |   }
184 | 
185 |   customElements.define('commands-component', Commands);
186 | </script>
187 | 
188 | <template id="search-template">
189 |   <style>
190 |     input,
191 |     button {
192 |       -moz-appearance: none;
193 |       font-family: var(--font-family);
194 |       -webkit-appearance: none;
195 |       background: transparent;
196 |       border: 0;
197 |       display: block;
198 |       outline: 0;
199 |     }
200 | 
201 |     .dialog {
202 |       align-items: center;
203 |       background: var(--color-background);
204 |       border: none;
205 |       display: none;
206 |       flex-direction: column;
207 |       height: 100%;
208 |       justify-content: center;
209 |       left: 0;
210 |       padding: 0;
211 |       top: 0;
212 |       width: 100%;
213 |     }
214 | 
215 |     .dialog[open] {
216 |       display: flex;
217 |     }
218 | 
219 |     .form {
220 |       width: 100%;
221 |     }
222 | 
223 |     .input {
224 |       color: var(--color-text);
225 |       font-size: 2rem;
226 |       font-weight: bold;
227 |       padding: 0;
228 |       text-align: center;
229 |       width: 100%;
230 |     }
231 | 
232 |     .suggestions {
233 |       align-items: center;
234 |       display: flex;
235 |       flex-direction: column;
236 |       flex-wrap: wrap;
237 |       justify-content: center;
238 |       list-style: none;
239 |       margin: 1rem 0 0;
240 |       overflow: hidden;
241 |       padding: 0;
242 |     }
243 | 
244 |     .suggestion {
245 |       color: var(--color-text);
246 |       cursor: pointer;
247 |       font-size: 1rem;
248 |       padding: 1rem;
249 |       position: relative;
250 |       transition: color var(--transition-speed);
251 |       white-space: nowrap;
252 |       z-index: 1;
253 |     }
254 | 
255 |     .suggestion:where(:focus, :hover) {
256 |       color: var(--color-background);
257 |     }
258 | 
259 |     .suggestion::before {
260 |       background-color: var(--color-text);
261 |       border-radius: 0.1em;
262 |       content: ' ';
263 |       inset: 0.9em 0.5em;
264 |       opacity: 0;
265 |       position: absolute;
266 |       transform: translateY(0.3em) scale(0.9);
267 |       transition: all var(--transition-speed);
268 |       z-index: -1;
269 |     }
270 | 
271 |     .suggestion:where(:focus, :hover)::before {
272 |       opacity: 1;
273 |       transform: translateY(0);
274 |     }
275 | 
276 |     .match {
277 |       color: var(--color-text-subtle);
278 |       transition: color var(--transition-speed);
279 |     }
280 | 
281 |     .suggestion:where(:focus, :hover) .match {
282 |       color: var(--color-background);
283 |     }
284 | 
285 |     @media (min-width: 700px) {
286 |       .suggestions {
287 |         flex-direction: row;
288 |       }
289 |     }
290 |   </style>
291 |   <dialog class="dialog">
292 |     <form autocomplete="off" class="form" method="dialog" spellcheck="false">
293 |       <input class="input" title="search" type="text" />
294 |       <menu class="suggestions"></menu>
295 |     </form>
296 |   </dialog>
297 | </template>
298 | 
299 | <template id="suggestion-template">
300 |   <li>
301 |     <button class="suggestion" type="button"></button>
302 |   </li>
303 | </template>
304 | 
305 | <template id="match-template">
306 |   <span class="match"></span>
307 | </template>
308 | 
309 | <script type="module">
310 |   class Search extends HTMLElement {
311 |     #dialog;
312 |     #form;
313 |     #input;
314 |     #suggestions;
315 | 
316 |     constructor() {
317 |       super();
318 |       this.attachShadow({ mode: 'open' });
319 |       const template = document.getElementById('search-template');
320 |       const clone = template.content.cloneNode(true);
321 |       this.#dialog = clone.querySelector('.dialog');
322 |       this.#form = clone.querySelector('.form');
323 |       this.#input = clone.querySelector('.input');
324 |       this.#suggestions = clone.querySelector('.suggestions');
325 |       this.#form.addEventListener('submit', this.#onSubmit, false);
326 |       this.#input.addEventListener('input', this.#onInput);
327 |       this.#suggestions.addEventListener('click', this.#onSuggestionClick);
328 |       document.addEventListener('keydown', this.#onKeydown);
329 |       this.shadowRoot.append(clone);
330 |     }
331 | 
332 |     static #escapeRegexCharacters(s) {
333 |       return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
334 |     }
335 | 
336 |     static #fetchDuckDuckGoSuggestions(search) {
337 |       return new Promise((resolve) => {
338 |         window.autocompleteCallback = (res) => {
339 |           const suggestions = [];
340 | 
341 |           for (const item of res) {
342 |             if (item.phrase === search.toLowerCase()) continue;
343 |             suggestions.push(item.phrase);
344 |           }
345 | 
346 |           resolve(suggestions);
347 |         };
348 | 
349 |         const script = document.createElement('script');
350 |         document.querySelector('head').appendChild(script);
351 |         script.src = `https://duckduckgo.com/ac/?callback=autocompleteCallback&q=${search}`;
352 |         script.onload = script.remove;
353 |       });
354 |     }
355 | 
356 |     static #formatSearchUrl(template, search) {
357 |       return template.replace(/{}/g, encodeURIComponent(search));
358 |     }
359 | 
360 |     static #hasProtocol(s) {
361 |       return /^[a-zA-Z]+:\/\//i.test(s);
362 |     }
363 | 
364 |     static #isUrl(s) {
365 |       return /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i.test(s);
366 |     }
367 | 
368 |     static #parseQuery = (raw) => {
369 |       const query = raw.trim();
370 | 
371 |       if (this.#isUrl(query)) {
372 |         const url = this.#hasProtocol(query) ? query : `https://${query}`;
373 |         return { query, url };
374 |       }
375 | 
376 |       if (COMMANDS.has(query)) {
377 |         const { key, url } = COMMANDS.get(query);
378 |         return { key, query, url };
379 |       }
380 | 
381 |       let splitBy = CONFIG.commandSearchDelimiter;
382 |       const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`));
383 | 
384 |       if (COMMANDS.has(searchKey)) {
385 |         const command = COMMANDS.get(searchKey);
386 |         const template = new URL(command.searchTemplate ?? '', command.url);
387 |         const search = rawSearch.trim();
388 |         const url = Search.#formatSearchUrl(decodeURI(template.href), search);
389 |         return { key: searchKey, query, search, splitBy, url };
390 |       }
391 | 
392 |       splitBy = CONFIG.commandPathDelimiter;
393 |       const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`));
394 | 
395 |       if (COMMANDS.has(pathKey)) {
396 |         const command = COMMANDS.get(pathKey);
397 |         const url = `${new URL(command.url).origin}/${path}`;
398 |         return { key: pathKey, path, query, splitBy, url };
399 |       }
400 | 
401 |       const url = Search.#formatSearchUrl(CONFIG.defaultSearchTemplate, query);
402 |       return { query, search: query, url };
403 |     };
404 | 
405 |     #close() {
406 |       this.#input.value = '';
407 |       this.#input.blur();
408 |       this.#dialog.close();
409 |       this.#suggestions.innerHTML = '';
410 |     }
411 | 
412 |     #execute(query) {
413 |       const target = CONFIG.openLinksInNewTab ? '_blank' : '_self';
414 |       window.open(Search.#parseQuery(query).url, target, 'noopener noreferrer');
415 |       this.#close();
416 |     }
417 | 
418 |     #focusNextSuggestion(previous = false) {
419 |       const active = this.shadowRoot.activeElement;
420 |       let nextIndex;
421 | 
422 |       if (active.dataset.index) {
423 |         const activeIndex = Number(active.dataset.index);
424 |         nextIndex = previous ? activeIndex - 1 : activeIndex + 1;
425 |       } else {
426 |         nextIndex = previous ? this.#suggestions.childElementCount - 1 : 0;
427 |       }
428 | 
429 |       const next = this.#suggestions.children[nextIndex];
430 |       if (next) next.querySelector('.suggestion').focus();
431 |       else this.#input.focus();
432 |     }
433 | 
434 |     #onInput = async () => {
435 |       const oq = Search.#parseQuery(this.#input.value);
436 | 
437 |       if (!oq.query) {
438 |         this.#close();
439 |         return;
440 |       }
441 | 
442 |       let suggestions = COMMANDS.get(oq.query)?.suggestions ?? [];
443 | 
444 |       if (oq.search && suggestions.length < CONFIG.suggestionLimit) {
445 |         const res = await Search.#fetchDuckDuckGoSuggestions(oq.search);
446 | 
447 |         suggestions = suggestions.concat(
448 |           oq.splitBy
449 |             ? res.map((search) => `${oq.key}${oq.splitBy}${search}`)
450 |             : res
451 |         );
452 |       }
453 | 
454 |       const nq = Search.#parseQuery(this.#input.value);
455 |       if (nq.query !== oq.query) return;
456 |       this.#renderSuggestions(suggestions, oq.query);
457 |     };
458 | 
459 |     #onKeydown = (e) => {
460 |       if (!this.#dialog.open) {
461 |         this.#dialog.show();
462 |         this.#input.focus();
463 | 
464 |         requestAnimationFrame(() => {
465 |           // close the search dialog before the next repaint if a character is
466 |           // not produced (e.g. if you type shift, control, alt etc.)
467 |           if (!this.#input.value) this.#close();
468 |         });
469 | 
470 |         return;
471 |       }
472 | 
473 |       if (e.key === 'Escape') {
474 |         this.#close();
475 |         return;
476 |       }
477 | 
478 |       const alt = e.altKey ? 'alt-' : '';
479 |       const ctrl = e.ctrlKey ? 'ctrl-' : '';
480 |       const meta = e.metaKey ? 'meta-' : '';
481 |       const shift = e.shiftKey ? 'shift-' : '';
482 |       const modifierPrefixedKey = `${alt}${ctrl}${meta}${shift}${e.key}`;
483 | 
484 |       if (/^(ArrowDown|Tab|ctrl-n)$/.test(modifierPrefixedKey)) {
485 |         e.preventDefault();
486 |         this.#focusNextSuggestion();
487 |         return;
488 |       }
489 | 
490 |       if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(modifierPrefixedKey)) {
491 |         e.preventDefault();
492 |         this.#focusNextSuggestion(true);
493 |       }
494 |     };
495 | 
496 |     #onSubmit = () => {
497 |       this.#execute(this.#input.value);
498 |     };
499 | 
500 |     #onSuggestionClick = (e) => {
501 |       const ref = e.target.closest('.suggestion');
502 |       if (!ref) return;
503 |       this.#execute(ref.dataset.suggestion);
504 |     };
505 | 
506 |     #renderSuggestions(suggestions, query) {
507 |       this.#suggestions.innerHTML = '';
508 |       const sliced = suggestions.slice(0, CONFIG.suggestionLimit);
509 |       const template = document.getElementById('suggestion-template');
510 | 
511 |       for (const [index, suggestion] of sliced.entries()) {
512 |         const clone = template.content.cloneNode(true);
513 |         const ref = clone.querySelector('.suggestion');
514 |         ref.dataset.index = index;
515 |         ref.dataset.suggestion = suggestion;
516 |         const escapedQuery = Search.#escapeRegexCharacters(query);
517 |         const matched = suggestion.match(new RegExp(escapedQuery, 'i'));
518 | 
519 |         if (matched) {
520 |           const template = document.getElementById('match-template');
521 |           const clone = template.content.cloneNode(true);
522 |           const matchRef = clone.querySelector('.match');
523 |           const pre = suggestion.slice(0, matched.index);
524 |           const post = suggestion.slice(matched.index + matched[0].length);
525 |           matchRef.innerText = matched[0];
526 |           matchRef.insertAdjacentHTML('beforebegin', pre);
527 |           matchRef.insertAdjacentHTML('afterend', post);
528 |           ref.append(clone);
529 |         } else {
530 |           ref.innerText = suggestion;
531 |         }
532 | 
533 |         this.#suggestions.append(clone);
534 |       }
535 |     }
536 |   }
537 | 
538 |   customElements.define('search-component', Search);
539 | </script>
540 | 
541 | <style>
542 |   html {
543 |     background-color: var(--color-background);
544 |     font-family: var(--font-family);
545 |     font-size: var(--font-size);
546 |     line-height: 1.4;
547 |     user-select: none;
548 |   }
549 | 
550 |   body {
551 |     margin: 0;
552 |   }
553 | </style>
554 | 
555 | <commands-component></commands-component>
556 | <search-component></search-component>
557 | 


--------------------------------------------------------------------------------