foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update commands, command object -> map, update styles

Browse Source
This commit is contained in:
Cade Scroggins
2023-02-12 00:21:05 -08:00
parent c01386bb7a
commit 909816d4a4
1 changed files with 267 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+267 -173
View File
@@ -14,147 +14,218 @@
suggestionLimit: 4, suggestionLimit: 4,
}; };
const COMMANDS = { const COMMANDS = new Map([
0: { [
name: 'Local', 'a',
searchTemplate: ':{}', {
suggestions: ['0 8000', '0 54323'], name: 'AWS',
url: 'http://localhost:3000', suggestions: [
}, 'a/cognito/v2/idp/user-pools',
a: { 'a/dynamodbv2#item-explorer',
name: 'AWS', ],
suggestions: [ url: 'https://us-west-2.console.aws.amazon.com/console/home',
'a/cognito/v2/idp/user-pools', },
'a/dynamodbv2#item-explorer', ],
], [
url: 'https://us-west-2.console.aws.amazon.com/console/home', 'b',
}, {
b: { name: 'Dribbble',
name: 'Dribbble', searchTemplate: '/search/{}',
searchTemplate: '/search/{}', suggestions: [
suggestions: [ 'b/shots/popular/product-design',
'b/shots/popular/product-design', 'b/shots/popular/web-design',
'b/shots/popular/web-design', ],
], url: 'https://dribbble.com/shots/popular',
url: 'https://dribbble.com/shots/popular', },
}, ],
c: { [
name: 'Calendar', 'c',
searchTemplate: '/calendar/u/0/r/search?q={}', {
suggestions: ['c/calendar/u/1/r', 'c/calendar/u/2/r'], name: 'Calendar',
url: 'https://calendar.google.com/calendar/u/0/r', searchTemplate: '/calendar/u/0/r/search?q={}',
}, suggestions: ['c/calendar/u/1/r', 'c/calendar/u/2/r'],
d: { url: 'https://calendar.google.com/calendar/u/0/r',
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', 'd',
}, {
f: { name: 'Drive',
name: 'Figma', searchTemplate: '/drive/u/0/search?q={}',
suggestions: [ suggestions: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'],
'f/file/new', url: 'https://drive.google.com/drive/u/0/my-drive',
'f/file/new?editor_type=whiteboard', },
'f/community', ],
], [
url: 'https://www.figma.com/files/recent', 'e',
}, {
g: { name: 'DALL·E',
name: 'GitHub', suggestions: ['e/history', 'e/collections'],
searchTemplate: '/search?q={}', url: 'https://labs.openai.com/',
suggestions: [ },
'g/trending', ],
'g/topics', [
'gist.github.com', 'f',
'g/xvvvyz/tilde', {
], name: 'Figma',
url: 'https://github.com', suggestions: [
}, 'f/file/new',
h: { 'f/file/new?editor_type=whiteboard',
name: 'Hypem', 'f/community',
searchTemplate: '/search/{}', ],
suggestions: ['h/stack', 'h/mixes', 'h/popular/lastweek', 'h/tags'], url: 'https://www.figma.com/files/recent',
url: 'https://hypem.com/popular', },
}, ],
k: { [
name: 'Keep', 'g',
searchTemplate: '/u/0/#search/text={}', {
suggestions: ['k/u/1', 'k/u/2'], name: 'GitHub',
url: 'https://keep.google.com/u/0', searchTemplate: '/search?q={}',
}, suggestions: [
l: { 'g/topics',
name: 'LinkedIn', 'g/trending',
searchTemplate: '/search/results/all/?keywords={}', 'g/collections',
suggestions: ['l/in/me/', 'l/messaging', 'l/jobs'], 'gist.github.com',
url: 'https://www.linkedin.com/feed', ],
}, url: 'https://github.com',
m: { },
name: 'Mail', ],
suggestions: ['m/u/1/inbox', 'm/u/2/inbox'], [
url: 'https://mail.proton.me/u/0/inbox', 'h',
}, {
n: { name: 'Hypem',
name: 'Notion', searchTemplate: '/search/{}',
suggestions: [ suggestions: ['h/stack', 'h/mixes', 'h/popular/lastweek', 'h/tags'],
'n/03aac6c591aa435b90f5c9b007409af3', url: 'https://hypem.com/popular',
'n/f47d92b8272442f5ad13e4eb3288778f', },
], ],
url: 'https://www.notion.so', ['i', { name: 'ChatGPT', url: 'https://chat.openai.com/chat' }],
}, [
o: { 'k',
name: 'Discord', {
suggestions: [ name: 'Keep',
'o/channels/803833399684628520', searchTemplate: '/u/0/#search/text={}',
'o/channels/830183651022471199', suggestions: ['k/u/1', 'k/u/2'],
], url: 'https://keep.google.com/u/0',
url: 'https://discord.com/channels/@me', },
}, ],
p: { [
name: 'Product Hunt', 'l',
searchTemplate: '/search?q={}', {
suggestions: ['p/products', 'p/topics', 'p/time-travel'], name: 'LinkedIn',
url: 'https://www.producthunt.com', searchTemplate: '/search/results/all/?keywords={}',
}, suggestions: ['l/in/me/', 'l/messaging', 'l/jobs'],
r: { url: 'https://www.linkedin.com/feed/',
name: 'Reddit', },
searchTemplate: '/search?q={}', ],
suggestions: ['r/r/startpages', 'r/r/webdev', 'r/r/onebag', 'r/r/fujix'], [
url: 'https://www.reddit.com', 'm',
}, {
s: { name: 'Mail',
name: 'Slack', suggestions: ['m/u/1/inbox', 'm/u/2/inbox'],
suggestions: ['s/client/T09M5UWSV'], url: 'https://mail.proton.me/u/0/inbox',
url: 'https://app.slack.com', },
}, ],
t: { [
name: 'Twitter', 'n',
searchTemplate: '/search?q={}', {
suggestions: [ name: 'Notion',
't/explore/tabs/trending', suggestions: [
't/hashtag/buildinpublic?f=live', 'n/7c11e98c9c504ec2aa106dae83c6b803#todo',
], 'n/03aac6c591aa435b90f5c9b007409af3#study',
url: 'https://twitter.com/home', ],
}, url: 'https://www.notion.so',
u: { },
name: 'Supabase', ],
url: 'https://app.supabase.com/projects', [
}, 'o',
v: { {
name: 'Vercel', name: 'Discord',
suggestions: ['v/dashboard/usage', 'v/xvvvyz/llist/deployments'], suggestions: ['o/channels/803833399684628520#friends'],
url: 'https://vercel.com/dashboard', url: 'https://discord.com/channels/@me',
}, },
y: { ],
name: 'YouTube', [
searchTemplate: '/results?search_query={}', 'p',
suggestions: ['y/trending', 'y/music', 'y/gaming', 'y/sports'], {
url: 'https://youtube.com/feed/subscriptions', name: 'Products',
}, searchTemplate: '/search?q={}',
'?': { suggestions: ['p/products', 'p/topics', 'p/time-travel'],
name: 'README', url: 'https://www.producthunt.com',
url: 'https://read.xvvvyz.xyz/xvvvyz/tilde/main/README.md', },
}, ],
}; [
'r',
{
name: 'Reddit',
searchTemplate: '/search?q={}',
suggestions: [
'r/r/webdev',
'r/r/startpages',
'r/r/onebag',
'r/r/fujix',
],
url: 'https://www.reddit.com',
},
],
[
's',
{
name: 'Slack',
suggestions: ['s/client/T09M5UWSV#shiftnudge'],
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/activity', 'v/dashboard/usage'],
url: 'https://vercel.com/dashboard',
},
],
[
'w',
{
name: 'Wikipedia',
searchTemplate: '/w/index.php?search={}',
suggestions: ['w/wiki/Portal:Current_events', 'w/wiki/Special:Random'],
url: 'https://en.wikipedia.org/wiki/Main_Page',
},
],
[
'y',
{
name: 'YouTube',
searchTemplate: '/results?search_query={}',
suggestions: ['y/trending', 'y/music', 'y/gaming', 'y/sports'],
url: 'https://youtube.com/feed/subscriptions',
},
],
[
'0',
{
name: 'localhost',
searchTemplate: ':{}',
suggestions: ['0 54323', '0 8000'],
url: 'http://localhost:3000',
},
],
['?', { name: 'README', url: 'https://github.com/xvvvyz/tilde' }],
]);
</script> </script>
<style> <style>
@@ -166,12 +237,13 @@
Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
--font-size-1: 1rem; --font-size-1: 1rem;
--font-size-2: 3rem; --font-size-2: 3rem;
--font-size-base: clamp(15px, 1.4vw, 18px); --font-size-base: clamp(16px, 1.2vw, 18px);
--font-weight-bold: 700; --font-weight-bold: 700;
--font-weight-normal: 400; --font-weight-normal: 400;
--line-height-base: 1.4; --line-height-base: 1.4;
--space-1: 1rem; --space-1: 0.5rem;
--space-2: 4rem; --space-2: 1rem;
--space-3: 4rem;
--transition-speed: 200ms; --transition-speed: 200ms;
} }
@@ -199,41 +271,63 @@
<template id="commands-template"> <template id="commands-template">
<style> <style>
.commands { .commands {
display: flex; columns: 1;
flex-direction: column;
list-style: none; list-style: none;
margin: 0 auto; margin: 0 auto;
max-width: 54rem; max-width: 10rem;
padding: 0; padding: 0 0 0 var(--space-1);
width: 100vw; width: 100vw;
} }
.command { .command {
color: var(--color-text-subtle);
display: flex; display: flex;
gap: var(--space-1); gap: var(--space-2);
outline: 0; outline: 0;
padding: var(--space-1); padding: var(--space-1);
text-decoration: none; text-decoration: none;
} }
.key { .key {
transition: color var(--transition-speed);
}
.command:where(:focus, :hover) .key {
color: var(--color-text); color: var(--color-text);
display: inline-block;
text-align: center;
width: 3ch;
} }
.name { .name {
color: var(--color-text-subtle);
transition: color var(--transition-speed);
}
.command:where(:focus, :hover) .name {
color: var(--color-text); color: var(--color-text);
} }
@media (min-width: 54rem) { @media (min-width: 500px) {
.commands { .commands {
flex-direction: row; columns: 2;
flex-wrap: wrap; max-width: 20rem;
justify-content: center; }
}
@media (min-width: 700px) {
.commands {
columns: 3;
max-width: 30rem;
}
}
@media (min-width: 900px) {
.commands {
columns: 4;
max-width: 40rem;
}
}
@media (min-width: 1200px) {
.commands {
columns: 6;
max-width: 60rem;
} }
} }
</style> </style>
@@ -270,7 +364,7 @@
#renderCommands() { #renderCommands() {
const template = document.getElementById('command-template'); const template = document.getElementById('command-template');
for (const [key, { name, url }] of Object.entries(COMMANDS)) { for (const [key, { name, url }] of COMMANDS.entries()) {
if (!name || !url) continue; if (!name || !url) continue;
const clone = template.content.cloneNode(true); const clone = template.content.cloneNode(true);
const command = clone.querySelector('.command'); const command = clone.querySelector('.command');
@@ -335,7 +429,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
list-style: none; list-style: none;
margin: var(--space-1) 0 0; margin: var(--space-2) 0 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
@@ -343,7 +437,7 @@
.suggestion { .suggestion {
cursor: pointer; cursor: pointer;
font-size: var(--font-size-1); font-size: var(--font-size-1);
padding: var(--space-1); padding: var(--space-2);
position: relative; position: relative;
transition: color var(--transition-speed); transition: color var(--transition-speed);
white-space: nowrap; white-space: nowrap;
@@ -356,13 +450,13 @@
.suggestion::before { .suggestion::before {
background-color: var(--color-text); background-color: var(--color-text);
bottom: var(--space-1); bottom: var(--space-2);
content: ' '; content: ' ';
left: var(--space-1); left: var(--space-2);
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: var(--space-1); right: var(--space-2);
top: var(--space-1); top: var(--space-2);
transform: translateY(0.5em); transform: translateY(0.5em);
transition: all var(--transition-speed); transition: all var(--transition-speed);
z-index: -1; z-index: -1;
@@ -483,16 +577,16 @@
return { query, url }; return { query, url };
} }
if (COMMANDS[query]) { if (COMMANDS.has(query)) {
const { key, url } = COMMANDS[query]; const { key, url } = COMMANDS.get(query);
return { key, query, url }; return { key, query, url };
} }
let splitBy = CONFIG.commandSearchDelimiter; let splitBy = CONFIG.commandSearchDelimiter;
const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`)); const [searchKey, rawSearch] = query.split(new RegExp(`${splitBy}(.*)`));
if (COMMANDS[searchKey]) { if (COMMANDS.has(searchKey)) {
const { searchTemplate, url: base } = COMMANDS[searchKey]; const { searchTemplate, url: base } = COMMANDS.get(searchKey);
const search = rawSearch.trim(); const search = rawSearch.trim();
const url = Search.#formatSearchUrl(base, searchTemplate, search); const url = Search.#formatSearchUrl(base, searchTemplate, search);
return { key: searchKey, query, search, splitBy, url }; return { key: searchKey, query, search, splitBy, url };
@@ -501,8 +595,8 @@
splitBy = CONFIG.commandPathDelimiter; splitBy = CONFIG.commandPathDelimiter;
const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`)); const [pathKey, path] = query.split(new RegExp(`${splitBy}(.*)`));
if (COMMANDS[pathKey]) { if (COMMANDS.has(pathKey)) {
const { url: base } = COMMANDS[pathKey]; const { url: base } = COMMANDS.get(pathKey);
const [baseUrl] = Search.#splitUrl(base); const [baseUrl] = Search.#splitUrl(base);
const url = `${baseUrl}/${path}`; const url = `${baseUrl}/${path}`;
return { key: pathKey, path, query, splitBy, url }; return { key: pathKey, path, query, splitBy, url };
@@ -559,7 +653,7 @@
return; return;
} }
let suggestions = COMMANDS[q.query]?.suggestions ?? []; let suggestions = COMMANDS.get(q.query)?.suggestions ?? [];
if (q.search && suggestions.length < CONFIG.suggestionLimit) { if (q.search && suggestions.length < CONFIG.suggestionLimit) {
const res = await Search.#fetchDuckDuckGoSuggestions(q.search); const res = await Search.#fetchDuckDuckGoSuggestions(q.search);
@@ -659,7 +753,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
padding: var(--space-2) var(--space-1); padding: var(--space-3) var(--space-2);
width: 100vw; width: 100vw;
} }
</style> </style>