mirror of
https://github.com/xvvvyz/tilde.git
synced 2026-03-11 14:44:24 +00:00
link updates, suggestion rehighlights, style updates
This commit is contained in:
Cade Scroggins
parent
1a360b81b2
commit
75371b79f9
1 changed files with 128 additions and 131 deletions
259
index.html
259
index.html
|
|
@ -13,59 +13,96 @@
|
|||
key: '*',
|
||||
url: 'https://duckduckgo.com',
|
||||
search: '?q={}',
|
||||
color: '#333',
|
||||
color: '#222328',
|
||||
},
|
||||
{
|
||||
category: 'Google',
|
||||
name: 'Mail',
|
||||
key: 'm',
|
||||
url: 'https://mail.google.com/mail/u/0/#inbox',
|
||||
url: 'https://mail.google.com/mail/u/0',
|
||||
search: '/mail/u/0/?q={}#search/{}',
|
||||
color: 'linear-gradient(135deg, #4285f4, #4249f4)',
|
||||
color: 'linear-gradient(135deg, #4249f4, #4289f4)',
|
||||
},
|
||||
{
|
||||
category: 'Google',
|
||||
name: 'Drive',
|
||||
key: 'd',
|
||||
url: 'https://drive.google.com/drive/u/0/my-drive',
|
||||
search: '/drive/search?q={}',
|
||||
color: 'linear-gradient(135deg, #34a853, #345253)',
|
||||
search: '/drive/u/0/search?q={}',
|
||||
color: 'linear-gradient(135deg, #34a853, #34a893)',
|
||||
},
|
||||
{
|
||||
category: 'Google',
|
||||
name: 'Keep',
|
||||
key: 'k',
|
||||
url: 'https://keep.google.com/u/0/',
|
||||
search: '/#search/text={}',
|
||||
color: 'linear-gradient(135deg, #fca550, #fcd050)',
|
||||
url: 'https://keep.google.com/u/0',
|
||||
search: '/u/0/#search/text={}',
|
||||
color: 'linear-gradient(135deg, #ec9540, #ecc040)',
|
||||
},
|
||||
{
|
||||
category: 'Google',
|
||||
name: 'Cal',
|
||||
key: 'c',
|
||||
url: 'https://calendar.google.com/calendar/u/0/r',
|
||||
search: '/calendar/u/0/r/search?q={}',
|
||||
color: 'linear-gradient(135deg, #E44134, #E48134)',
|
||||
},
|
||||
{
|
||||
category: 'Work',
|
||||
name: 'Slack',
|
||||
key: 'ss',
|
||||
url: 'https://app.slack.com/client/T7K3RFA1M/all-dms',
|
||||
color: 'linear-gradient(135deg, #6ecadc, #6e7adc)',
|
||||
key: 's',
|
||||
url: 'https://app.slack.com/client/T09M5UWSV',
|
||||
color: 'linear-gradient(135deg, #6e7adc, #6ebadc)',
|
||||
},
|
||||
{
|
||||
category: 'Work',
|
||||
name: 'AND.CO',
|
||||
key: '.',
|
||||
url: 'https://app.and.co/timers',
|
||||
color: 'linear-gradient(135deg, #17d3aa, #1773aa)',
|
||||
color: 'linear-gradient(135deg, #1773aa, #17b3aa)',
|
||||
},
|
||||
{
|
||||
category: 'Work',
|
||||
name: 'Notion',
|
||||
key: 'n',
|
||||
url: 'https://www.notion.so',
|
||||
color: 'linear-gradient(135deg, #E16259, #E1a259)',
|
||||
},
|
||||
{
|
||||
category: 'Work',
|
||||
name: 'Asana',
|
||||
key: 'sa',
|
||||
key: 'a',
|
||||
url: 'https://app.asana.com/0/inbox/490539250066176',
|
||||
color: 'linear-gradient(135deg, #3be8b0, #1aafd0)',
|
||||
color: 'linear-gradient(135deg, #0a9fc0, #0adfc0)',
|
||||
},
|
||||
{
|
||||
category: 'Design',
|
||||
name: 'Figma',
|
||||
key: 'f',
|
||||
url: 'https://www.figma.com/files/recent',
|
||||
color: 'linear-gradient(135deg, #9762F6, #97a2F6)',
|
||||
},
|
||||
{
|
||||
category: 'Design',
|
||||
name: 'Dribbble',
|
||||
key: 'b',
|
||||
url: 'https://dribbble.com/shots/recent',
|
||||
search: '/search/{}',
|
||||
color: 'linear-gradient(135deg, #f042ac, #f082ac)',
|
||||
},
|
||||
{
|
||||
category: 'Design',
|
||||
name: 'UXDB',
|
||||
key: 'ux',
|
||||
url: 'https://www.uxdatabase.io/product-database',
|
||||
color: '#000',
|
||||
},
|
||||
{
|
||||
category: 'Code',
|
||||
name: 'AWS',
|
||||
key: 'a',
|
||||
key: 'A',
|
||||
url: 'https://console.aws.amazon.com',
|
||||
color: 'linear-gradient(135deg, #ff9900, #ff6400)',
|
||||
color: 'linear-gradient(135deg, #ff6400, #ffa400)',
|
||||
},
|
||||
{
|
||||
category: 'Code',
|
||||
|
|
@ -73,7 +110,15 @@
|
|||
key: 'g',
|
||||
url: 'https://github.com',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #8ccae1, #6d8bd6)',
|
||||
color: 'linear-gradient(135deg, #478B47, #478B87)',
|
||||
},
|
||||
{
|
||||
category: 'Code',
|
||||
name: 'MDN',
|
||||
key: 'M',
|
||||
url: 'https://developer.mozilla.org/en-US',
|
||||
search: '/en-US/search?q={}',
|
||||
color: 'linear-gradient(135deg, #5987a6, #59c7a6)',
|
||||
},
|
||||
{
|
||||
category: 'Code',
|
||||
|
|
@ -88,15 +133,7 @@
|
|||
key: 'r',
|
||||
url: 'https://www.reddit.com',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #5f99cf, #5f3dcf)',
|
||||
},
|
||||
{
|
||||
category: 'Lurk',
|
||||
name: 'ProductHunt',
|
||||
key: 'p',
|
||||
url: 'https://www.producthunt.com',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #da552f, #da802f)',
|
||||
color: 'linear-gradient(135deg, #5f3dcf, #5f7dcf)',
|
||||
},
|
||||
{
|
||||
category: 'Lurk',
|
||||
|
|
@ -106,100 +143,60 @@
|
|||
search: '/search/{}',
|
||||
color: '#000',
|
||||
},
|
||||
{
|
||||
category: 'Lurk',
|
||||
name: 'Hunt',
|
||||
key: 'p',
|
||||
url: 'https://www.producthunt.com',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #da552f, #da952f)',
|
||||
},
|
||||
{
|
||||
category: 'Listen',
|
||||
name: 'Hypem',
|
||||
key: 'h',
|
||||
url: 'https://hypem.com/popular',
|
||||
name: 'Spotify',
|
||||
key: 'sp',
|
||||
url: 'https://open.spotify.com',
|
||||
search: '/search/{}',
|
||||
color: 'linear-gradient(135deg, #83c441, #628441)',
|
||||
color: 'linear-gradient(135deg, #1DB954, #1DB994)',
|
||||
},
|
||||
{
|
||||
category: 'Listen',
|
||||
name: 'SoundCloud',
|
||||
key: 'o',
|
||||
key: 'sc',
|
||||
url: 'https://soundcloud.com/discover',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #ff8800, #ffc800)',
|
||||
},
|
||||
{
|
||||
category: 'Listen',
|
||||
name: 'Spotify',
|
||||
key: 's',
|
||||
url: 'https://open.spotify.com',
|
||||
name: 'Hypem',
|
||||
key: 'hy',
|
||||
url: 'https://hypem.com/popular',
|
||||
search: '/search/{}',
|
||||
color: 'linear-gradient(135deg, #1DB954, #1D7974)',
|
||||
color: 'linear-gradient(135deg, #628441, #628481)',
|
||||
},
|
||||
{
|
||||
category: 'Watch',
|
||||
name: 'Netflix',
|
||||
key: 'n',
|
||||
key: 'ne',
|
||||
url: 'https://www.netflix.com/browse',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #e50914, #b50009)',
|
||||
color: 'linear-gradient(135deg, #e50914, #fe3914)',
|
||||
},
|
||||
{
|
||||
category: 'Watch',
|
||||
name: 'YouTube',
|
||||
key: 'y',
|
||||
key: 'yo',
|
||||
url: 'https://youtube.com/feed/subscriptions',
|
||||
search: '/results?search_query={}',
|
||||
color: 'linear-gradient(135deg, #cd201f, #8d1c1f)',
|
||||
color: 'linear-gradient(135deg, #fd201f, #cd301f)',
|
||||
},
|
||||
{
|
||||
category: 'Watch',
|
||||
name: 'Twitch',
|
||||
key: 't',
|
||||
key: 'tw',
|
||||
url: 'https://www.twitch.tv/directory/following',
|
||||
color: 'linear-gradient(135deg, #6441a5, #7d11a5)',
|
||||
},
|
||||
{
|
||||
category: 'Learn',
|
||||
name: 'Egghead',
|
||||
key: 'e',
|
||||
url: 'https://egghead.io',
|
||||
search: '/search?q={}',
|
||||
color: 'linear-gradient(135deg, #171C23, #171923)',
|
||||
},
|
||||
{
|
||||
category: 'Learn',
|
||||
name: 'Coursera',
|
||||
key: 'c',
|
||||
url: 'https://www.coursera.org',
|
||||
search: '/courses?query={}',
|
||||
color: 'linear-gradient(135deg, #407ED7, #4038d7)',
|
||||
},
|
||||
{
|
||||
category: 'Learn',
|
||||
name: 'Khan',
|
||||
key: 'K',
|
||||
url: 'https://www.khanacademy.org',
|
||||
search: '/search?page_search_query={}',
|
||||
color: 'linear-gradient(135deg, #9cb443, #808443)',
|
||||
},
|
||||
{
|
||||
category: 'Download',
|
||||
name: 'TPB',
|
||||
key: 'B',
|
||||
url: 'https://thepiratebay.org',
|
||||
search: '/search/{}',
|
||||
color: 'linear-gradient(135deg, #d2b9a6, #d2c4a6)',
|
||||
},
|
||||
{
|
||||
category: 'Download',
|
||||
name: 'RARBG',
|
||||
key: 'R',
|
||||
url: 'https://rarbg.to/torrents.php',
|
||||
search: '/torrents.php?search=test',
|
||||
color: 'linear-gradient(135deg, #3870bb, #386ebb)',
|
||||
},
|
||||
{
|
||||
category: 'Download',
|
||||
name: 'YTS',
|
||||
key: 'Y',
|
||||
url: 'https://yts.mx/browse-movies/0/all/all/7/seeds/0/en',
|
||||
search: '/browse-movies/{}',
|
||||
color: 'linear-gradient(135deg, #2f2f2f, #373737)',
|
||||
color: 'linear-gradient(135deg, #6441a5, #6461c5)',
|
||||
},
|
||||
],
|
||||
|
||||
|
|
@ -235,13 +232,15 @@
|
|||
defaultSuggestions: {
|
||||
'.': ['./inout/in/invoices/create'],
|
||||
0: ['0:8000', '0:8080'],
|
||||
b: ['b/shots/popular'],
|
||||
c: ['c/calendar/u/1/r', 'c/calendar/u/2/r'],
|
||||
d: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'],
|
||||
g: ['g/ossu'],
|
||||
k: ['k/u/1/', 'k/u/2/'],
|
||||
m: ['m/mail/u/1/#inbox', 'm/mail/u/2/#inbox'],
|
||||
o: ['o/you/likes', 'o/discover/the-upload'],
|
||||
k: ['k/u/1', 'k/u/2'],
|
||||
m: ['m/mail/u/1', 'm/mail/u/2'],
|
||||
r: ['r/r/startpages', 'r/r/listentothis'],
|
||||
ss: ['ss/client/T018S4TL7CP/all-dms'],
|
||||
s: ['s/client/T7K3RFA1M', 's/client/T018S4TL7CP'],
|
||||
sc: ['sc/you/likes', 'sc/discover/the-upload'],
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -296,8 +295,9 @@
|
|||
:root {
|
||||
/* colors */
|
||||
--background: #fffef8;
|
||||
--foreground: #3e4959;
|
||||
--searchBackground: #3e4959;
|
||||
--foreground: #222328;
|
||||
--foregroundSubtle: #525358;
|
||||
--searchBackground: #222328;
|
||||
--searchForeground: #fffef8;
|
||||
|
||||
/* fonts */
|
||||
|
|
@ -413,7 +413,6 @@
|
|||
.clock {
|
||||
display: block;
|
||||
font-size: 4rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: 0.05rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -457,7 +456,7 @@
|
|||
|
||||
.search-suggestion {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
|
@ -475,14 +474,13 @@
|
|||
|
||||
.search-suggestion b::after {
|
||||
content: ' ';
|
||||
height: 0.4rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
border-radius: 0.1em;
|
||||
bottom: 0.05rem;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--searchForeground);
|
||||
opacity: 0.8;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.search-suggestion.highlight b::after {
|
||||
|
|
@ -496,31 +494,31 @@
|
|||
}
|
||||
|
||||
.category {
|
||||
margin-bottom: 3rem;
|
||||
padding: 1.75rem 2.25rem;
|
||||
vertical-align: text-top;
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.command a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
line-height: 2rem;
|
||||
padding: 0.5rem 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.command:last-of-type a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.command-key {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
float: left;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
|
@ -535,6 +533,7 @@
|
|||
|
||||
.command-name {
|
||||
position: relative;
|
||||
color: var(--foregroundSubtle);
|
||||
}
|
||||
|
||||
.command-name::after {
|
||||
|
|
@ -542,7 +541,7 @@
|
|||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0.4rem;
|
||||
bottom: 0.05rem;
|
||||
left: 0;
|
||||
height: 0.4rem;
|
||||
transition: 0.2s;
|
||||
|
|
@ -566,7 +565,7 @@
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
@media (min-width: 600px) {
|
||||
.clock {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
|
@ -580,17 +579,11 @@
|
|||
}
|
||||
|
||||
.categories {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 175px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.category:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
columns: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
@media (min-width: 850px) {
|
||||
.search-input {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
|
@ -599,18 +592,14 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.categories {
|
||||
grid-template-columns: repeat(2, 300px) 170px;
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1100px) {
|
||||
.categories {
|
||||
grid-template-columns: repeat(3, 220px) 170px;
|
||||
columns: 4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -960,7 +949,7 @@
|
|||
this._limit = options.limit;
|
||||
this._currentInput = '';
|
||||
this._currentSuggestions = [];
|
||||
this._suggestionEls = [];
|
||||
(this._highlitedSuggestion = null), (this._suggestionEls = []);
|
||||
this._handleKeydown = this._handleKeydown.bind(this);
|
||||
this._setSuggestions = this._setSuggestions.bind(this);
|
||||
this._registerEvents();
|
||||
|
|
@ -1051,8 +1040,9 @@
|
|||
$.bodyClassRemove('suggestions');
|
||||
this._clearSuggestionHighlightEvents();
|
||||
this._clearSuggestionClickEvents();
|
||||
this._suggestionEls = [];
|
||||
this._el.innerHTML = '';
|
||||
this._highlitedSuggestion = null;
|
||||
this._suggestionEls = [];
|
||||
}
|
||||
|
||||
_focusNext(e) {
|
||||
|
|
@ -1096,9 +1086,10 @@
|
|||
_highlight(el, e) {
|
||||
this._unHighlight();
|
||||
if (!el) return;
|
||||
this._onHighlight(el.getAttribute('data-suggestion'));
|
||||
this._highlitedSuggestion = el.getAttribute('data-suggestion');
|
||||
this._onHighlight(this._highlitedSuggestion);
|
||||
el.classList.add('highlight');
|
||||
e.preventDefault();
|
||||
if (e) e.preventDefault();
|
||||
}
|
||||
|
||||
_registerEvents() {
|
||||
|
|
@ -1125,6 +1116,11 @@
|
|||
window.addEventListener('mousemove', noHighlightUntilMouseMove);
|
||||
}
|
||||
|
||||
_rehighlight() {
|
||||
if (!this._highlitedSuggestion) return;
|
||||
this._highlight($.el(`[data-suggestion="${this._highlitedSuggestion}"]`));
|
||||
}
|
||||
|
||||
_setSuggestions(newSuggestions) {
|
||||
this._currentSuggestions = $.flattenAndUnique([
|
||||
this._currentSuggestions,
|
||||
|
|
@ -1137,6 +1133,7 @@
|
|||
this._registerSuggestionHighlightEvents();
|
||||
this._registerSuggestionClickEvents();
|
||||
$.bodyClassAdd('suggestions');
|
||||
this._rehighlight();
|
||||
}
|
||||
|
||||
_unHighlight(e) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue