prehistoric-systems/tilde
1
0
Fork 0
mirror of https://github.com/xvvvyz/tilde.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
tilde/index.html
Cade Scroggins 7150704776
highlight readme command
2022-12-16 00:03:02 -08:00

668 lines
18 KiB
HTML
Raw Blame History

<!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>
<script>
const CONFIG = {
commandPathDelimiter: '/',
commandSearchDelimiter: ' ',
defaultSearchTemplate: 'https://duckduckgo.com/?q={}',
openLinksInNewTab: true,
suggestionLimit: 4,
};
const COMMANDS = {
0: {
name: 'Local',
searchTemplate: ':{}',
suggestions: ['0 8000', '0 54323'],
url: 'http://localhost:3000',
},
a: {
name: 'AWS',
suggestions: [
'a/cognito/v2/idp/user-pools',
'a/dynamodbv2#item-explorer',
],
url: 'https://us-west-2.console.aws.amazon.com/console/home',
},
b: {
name: 'Dribbble',
searchTemplate: '/search/{}',
suggestions: [
'b/shots/popular/product-design',
'b/shots/popular/web-design',
],
url: 'https://dribbble.com/shots/popular',
},
c: {
name: 'Calendar',
searchTemplate: '/calendar/u/0/r/search?q={}',
suggestions: ['c/calendar/u/1/r', 'c/calendar/u/2/r'],
url: 'https://calendar.google.com/calendar/u/0/r',
},
d: {
name: 'Drive',
searchTemplate: '/drive/u/0/search?q={}',
suggestions: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'],
url: 'https://drive.google.com/drive/u/0/my-drive',
},
f: {
name: 'Figma',
suggestions: [
'f/file/new',
'f/file/new?editor_type=whiteboard',
'f/community',
],
url: 'https://www.figma.com/files/recent',
},
g: {
name: 'GitHub',
searchTemplate: '/search?q={}',
suggestions: [
'g/trending',
'g/topics',
'gist.github.com',
'g/xvvvyz/tilde',
],
url: 'https://github.com',
},
h: {
name: 'Hypem',
searchTemplate: '/search/{}',
suggestions: ['h/stack', 'h/mixes', 'h/popular/lastweek', 'h/tags'],
url: 'https://hypem.com/popular',
},
k: {
name: 'Keep',
searchTemplate: '/u/0/#search/text={}',
suggestions: ['k/u/1', 'k/u/2'],
url: 'https://keep.google.com/u/0',
},
l: {
name: 'LinkedIn',
searchTemplate: '/search/results/all/?keywords={}',
suggestions: ['l/in/me/', 'l/messaging', 'l/jobs'],
url: 'https://www.linkedin.com/feed',
},
m: {
name: 'Mail',
suggestions: ['m/u/1/inbox', 'm/u/2/inbox'],
url: 'https://mail.proton.me/u/0/inbox',
},
n: {
name: 'Notion',
suggestions: [
'n/03aac6c591aa435b90f5c9b007409af3',
'n/f47d92b8272442f5ad13e4eb3288778f',
],
url: 'https://www.notion.so',
},
o: {
name: 'Discord',
suggestions: [
'o/channels/803833399684628520',
'o/channels/830183651022471199',
],
url: 'https://discord.com/channels/@me',
},
p: {
name: 'Product Hunt',
searchTemplate: '/search?q={}',
suggestions: ['p/products', 'p/topics', 'p/time-travel'],
url: 'https://www.producthunt.com',
},
r: {
name: 'Reddit',
searchTemplate: '/search?q={}',
suggestions: ['r/r/startpages', 'r/r/webdev', 'r/r/onebag', 'r/r/fujix'],
url: 'https://www.reddit.com',
},
s: {
name: 'Slack',
suggestions: ['s/client/T09M5UWSV'],
url: 'https://app.slack.com',
},
t: {
name: 'Twitter',
searchTemplate: '/search?q={}',
suggestions: [
't/explore/tabs/trending',
't/hashtag/buildinpublic?f=live',
],
url: 'https://twitter.com/home',
},
u: {
name: 'Supabase',
url: 'https://app.supabase.com/projects',
},
v: {
name: 'Vercel',
suggestions: ['v/dashboard/usage', 'v/xvvvyz/llist/deployments'],
url: 'https://vercel.com/dashboard',
},
y: {
name: 'YouTube',
searchTemplate: '/results?search_query={}',
suggestions: ['y/trending', 'y/music', 'y/gaming', 'y/sports'],
url: 'https://youtube.com/feed/subscriptions',
},
'?': {
name: 'README.md',
url: 'https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md',
},
};
</script>
<style>
:root {
--color-background: #111;
--color-text-subtle: #999;
--color-text: #eee;
--font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
--font-size-1: 1rem;
--font-size-2: 3rem;
--font-size-base: clamp(90%, 1.4vw, 120%);
--font-weight-bold: 700;
--font-weight-normal: 400;
--line-height-base: 1.4;
--space-1: 1rem;
--space-2: 4rem;
--transition-speed: 200ms;
}
@media (prefers-color-scheme: light) {
:root {
--color-background: #eee;
--color-text-subtle: #777;
--color-text: #111;
}
}
html {
background-color: var(--color-background);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
body {
margin: 0;
}
</style>
<template id="commands-template">
<style>
.commands {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
margin: 0 auto;
max-width: 55rem;
padding: 0;
}
.command {
color: var(--color-text-subtle);
display: flex;
outline: 0;
padding: var(--space-1);
text-decoration: none;
transition: color var(--transition-speed);
}
li:last-of-type > .command {
color: var(--color-text);
}
.command:hover {
color: var(--color-text);
}
.key {
text-align: center;
width: 1ch;
}
.name {
margin-left: var(--space-1);
}
</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 {
#refs = {
commands: null,
};
constructor() {
super();
this.attachShadow({ mode: 'open' });
const template = document.getElementById('commands-template');
const clone = template.content.cloneNode(true);
this.#refs.commands = clone.querySelector('.commands');
this.#renderCommands();
this.shadowRoot.append(clone);
}
#renderCommands() {
const template = document.getElementById('command-template');
for (const [key, { name, url }] of Object.entries(COMMANDS)) {
if (!name || !url) continue;
const clone = template.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;
this.#refs.commands.append(clone);
}
}
}
customElements.define('commands-component', Commands);
</script>
<template id="search-template">
<style>
input,
button {
-moz-appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
display: block;
outline: 0;
}
.dialog {
align-items: center;
background: var(--color-background);
border: none;
display: none;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
padding: 0;
top: 0;
width: 100%;
}
.dialog[open] {
display: flex;
}
.form {
width: 100%;
}
.input {
font-size: var(--font-size-2);
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-1) 0 0;
overflow: hidden;
padding: 0;
}
.suggestion {
cursor: pointer;
font-size: var(--font-size-1);
padding: var(--space-1);
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);
bottom: var(--space-1);
content: ' ';
left: var(--space-1);
opacity: 0;
position: absolute;
right: var(--space-1);
top: var(--space-1);
transform: translateY(0.5em);
transition: all var(--transition-speed);
z-index: -1;
}
.suggestion:where(:focus, :hover)::before {
opacity: 1;
transform: translateY(0);
}
.match {
color: var(--color-text-subtle);
transition: color var(--transition-speed);
}
.suggestion:where(:focus, :hover) .match {
color: var(--color-background);
}
@media (min-width: 700px) {
.suggestions {
flex-direction: row;
}
}
</style>
<dialog class="dialog">
<form autocomplete="off" class="form" method="dialog" spellcheck="false">
<input class="input" title="search" type="text" />
<menu class="suggestions"></menu>
</form>
</dialog>
</template>
<template id="suggestion-template">
<li>
<button class="suggestion" type="button"></button>
</li>
</template>
<template id="match-template">
<span class="match"></span>
</template>
<script type="module">
class Search extends HTMLElement {
#refs = {
dialog: null,
form: null,
input: null,
suggestions: null,
};
constructor() {
super();
this.attachShadow({ mode: 'open' });
const template = document.getElementById('search-template');
const clone = template.content.cloneNode(true);
this.#refs.dialog = clone.querySelector('.dialog');
this.#refs.form = clone.querySelector('.form');
this.#refs.input = clone.querySelector('.input');
this.#refs.suggestions = clone.querySelector('.suggestions');
this.#refs.form.addEventListener('submit', this.#onSubmit, false);
this.#refs.input.addEventListener('input', this.#onInput);
this.#refs.suggestions.addEventListener('click', this.#onSuggestionClick);
document.addEventListener('keydown', this.#onKeydown);
this.shadowRoot.append(clone);
}
static #attachSearchPrefix(array, { key, splitBy }) {
if (!splitBy) return array;
return array.map((search) => `${key}${splitBy}${search}`);
}
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}`;
});
}
static #formatSearchUrl(url, searchPath, search) {
if (!searchPath) return url;
const [baseUrl] = Search.#splitUrl(url);
const urlQuery = encodeURIComponent(search);
searchPath = searchPath.replace(/{}/g, urlQuery);
return baseUrl + searchPath;
}
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[query]) {
const { key, url } = COMMANDS[query];
return { key, query, url };
}
let splitBy = CONFIG.commandSearchDelimiter;
const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`));
if (COMMANDS[searchKey]) {
const { searchTemplate, url: base } = COMMANDS[searchKey];
const search = rawSearch.trim();
const url = Search.#formatSearchUrl(base, searchTemplate, search);
return { key: searchKey, query, search, splitBy, url };
}
splitBy = CONFIG.commandPathDelimiter;
const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`));
if (COMMANDS[pathKey]) {
const { url: base } = COMMANDS[pathKey];
const [baseUrl] = Search.#splitUrl(base);
const url = `${baseUrl}/${path}`;
return { key: pathKey, path, query, splitBy, url };
}
const [baseUrl, rest] = Search.#splitUrl(CONFIG.defaultSearchTemplate);
const url = Search.#formatSearchUrl(baseUrl, rest, query);
return { query, search: query, url };
};
static #splitUrl(url) {
const parser = document.createElement('a');
parser.href = url;
const baseUrl = `${parser.protocol}//${parser.hostname}`;
const rest = `${parser.pathname}${parser.search}`;
return [baseUrl, rest];
}
#close() {
this.#refs.input.value = '';
this.#refs.input.blur();
this.#refs.dialog.close();
this.#refs.suggestions.innerHTML = '';
}
#execute(query) {
const { url } = Search.#parseQuery(query);
const target = CONFIG.openLinksInNewTab ? '_blank' : '_self';
window.open(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.#refs.suggestions.childElementCount - 1 : 0;
}
const next = this.#refs.suggestions.children[nextIndex];
if (next) next.querySelector('.suggestion').focus();
else this.#refs.input.focus();
}
#onInput = async () => {
const q = Search.#parseQuery(this.#refs.input.value);
if (!q.query) {
this.#close();
return;
}
let suggestions = COMMANDS[q.query]?.suggestions ?? [];
if (q.search && suggestions.length < CONFIG.suggestionLimit) {
const res = await Search.#fetchDuckDuckGoSuggestions(q.search);
const formatted = Search.#attachSearchPrefix(res, q);
suggestions = suggestions.concat(formatted);
}
this.#renderSuggestions(suggestions, q.query);
};
#onKeydown = (e) => {
if (!this.#refs.dialog.open) {
this.#refs.dialog.show();
this.#refs.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.#refs.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.#refs.input.value);
};
#onSuggestionClick = (e) => {
const ref = e.target.closest('.suggestion');
if (!ref) return;
this.#execute(ref.dataset.suggestion);
};
#renderSuggestions(suggestions, query) {
this.#refs.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.#refs.suggestions.append(clone);
}
}
}
customElements.define('search-component', Search);
</script>
<style>
main {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
min-height: 100vh;
padding: var(--space-2) var(--space-1);
width: 100vw;
}
</style>
<main>
<commands-component></commands-component>
<search-component></search-component>
</main>
Reference in a new issue View git blame Copy permalink