From f7c3245d80d5e2b565a9db3b6e7ae1e7e7077022 Mon Sep 17 00:00:00 2001 From: Cade Scroggins Date: Fri, 18 Feb 2022 23:09:46 -0800 Subject: [PATCH] remove groups, update styles and update commands --- .prettierrc | 2 +- README.md | 4 +- index.html | 664 +++++++++++++++++++++++----------------------------- 3 files changed, 292 insertions(+), 378 deletions(-) diff --git a/.prettierrc b/.prettierrc index 8d94db6..ffe12cd 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,4 +2,4 @@ "proseWrap": "always", "singleQuote": true, "trailingComma": "es5" -} \ No newline at end of file +} diff --git a/README.md b/README.md index e827280..5512174 100644 --- a/README.md +++ b/README.md @@ -34,14 +34,14 @@ This is how you can use Tilde out of the box, but it’s - Entering `r/r/startpages` will redirect you to [reddit.com/r/startpages](https://www.reddit.com/r/startpages) -- Entering `h/popular` will redirect you to +- Entering `H/popular` will redirect you to [hypem.com/popular](http://hypem.com/popular). #### Other Sites - Entering `stallman.org` will redirect you to [stallman.org](http://stallman.org/). -- Entering `https://cade.me` will redirect you to [cade.me](https://cade.me/). +- Entering `https://cade.me` will redirect you to [cade.me](https://cade.me). ## License diff --git a/index.html b/index.html index 4a2cc2d..9edf41c 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ // - "Search" to show the search input (useful on mobile) clockOnClickAction: 'Menu', - // The delimiter between the hours and minutes on the clock. + // The delimiter between the hours, minutes and seconds on the clock. clockDelimiter: ' – ', // Show seconds on the clock. A monospaced font is recommended for this. @@ -26,9 +26,9 @@ // Force an IANA timezone. Useful when avoiding browser fingerprinting. clockTimeZone: 'America/Los_Angeles', - // The "category", "name", "key", "url", "search" path and "color"/"hues" - // for your commands. If none of the specified keys are matched, the * key - // is used. Commands without a category don't show up in the help menu. + // The "name", "key", "url", "search" path and "color"/"hues" for your + // commands. If none of the specified keys are matched, the * key is used. + // Commands without a name don't show up in the help menu. // You can specify either "hues" or "color" to change a command's background // color. "hues" is an array of HSL hues that will be converted into a @@ -38,173 +38,55 @@ // be applied as-is to the command's "background" CSS property. commands: [ { + color: 'var(--base-background)', key: '*', - name: 'Google', search: '/search?q={}', url: 'https://www.google.com', }, { - category: 'Google', - hues: ['217', '197'], - key: 'm', - name: 'Mail', - search: '/mail/u/0/?q={}#search/{}', - url: 'https://mail.google.com/mail/u/0', + color: 'var(--base-background)', + key: 'bing', + search: '/search?q={}', + url: 'https://www.bing.com', }, { - category: 'Google', - hues: ['136', '156'], - key: 'd', - name: 'Drive', - search: '/drive/u/0/search?q={}', - url: 'https://drive.google.com/drive/u/0/my-drive', + color: 'var(--base-background)', + key: 'ddg', + search: '/?q={}', + url: 'https://duckduckgo.com', }, { - category: 'Google', - hues: ['45', '40'], - key: 'k', - name: 'Keep', - search: '/u/0/#search/text={}', - url: 'https://keep.google.com/u/0', + color: 'var(--base-background)', + key: 'eco', + search: '/search?q={}', + url: 'https://www.ecosia.org', }, { - category: 'Google', - hues: ['5', '355'], - key: 'c', - name: 'Cal', - search: '/calendar/u/0/r/search?q={}', - url: 'https://calendar.google.com/calendar/u/0/r', + color: 'var(--base-background)', + key: 'yah', + search: '/search?p={}', + url: 'https://search.yahoo.com', }, { - category: 'Work', - hues: ['190', '210'], - key: 's', - name: 'Slack', - url: 'https://app.slack.com', - }, - { - category: 'Work', - hues: ['4', '24'], - key: 'n', - name: 'Notion', - url: 'https://www.notion.so', - }, - { - category: 'Work', - hues: ['234', '264'], - key: 'p', - name: 'Plausible', - url: 'https://plausible.io', - }, - { - category: 'Work', - hues: ['167', '187'], - key: '.', - name: 'AND', - url: 'https://app.and.co/timers', - }, - { - category: 'Create', hues: ['36', '26'], key: 'a', name: 'AWS', url: 'https://console.aws.amazon.com', }, { - category: 'Create', - hues: ['214', '234'], - key: 'g', - name: 'GitHub', - search: '/search?q={}', - url: 'https://github.com', + hues: ['5', '355'], + key: 'c', + name: 'Calendar', + search: '/calendar/u/0/r/search?q={}', + url: 'https://calendar.google.com/calendar/u/0/r', }, { - category: 'Create', - hues: ['266', '286'], - key: 'f', - name: 'Figma', - url: 'https://www.figma.com/files/recent', + hues: ['226', '236'], + key: 'e', + name: 'Disney', + url: 'https://www.disneyplus.com/home', }, { - category: 'Create', - key: '0', - name: 'Local', - search: ':{}', - url: 'http://localhost:3000', - }, - { - category: 'Learn', - hues: ['166', '146'], - key: '+', - name: 'Khan', - search: '/search?page_search_query={}', - url: 'https://www.khanacademy.org', - }, - { - category: 'Learn', - hues: ['5', '345'], - key: '=', - name: 'Wolfram', - search: '/input/?i={}', - url: 'https://www.wolframalpha.com', - }, - { - category: 'Learn', - hues: ['217', '237'], - key: 'w', - name: 'Wikipedia', - search: '/wiki/{}', - url: 'https://en.wikipedia.org/wiki/Main_Page', - }, - { - category: 'Learn', - hues: ['198', '218'], - key: ';', - name: 'MDN', - search: '/en-US/search?q={}', - url: 'https://developer.mozilla.org/en-US', - }, - { - category: 'Lurk', - hues: ['254', '234'], - key: 'r', - name: 'Reddit', - search: '/search?q={}', - url: 'https://www.reddit.com', - }, - { - category: 'Lurk', - hues: ['230', '280'], - key: 'i', - name: 'Instagram', - url: 'https://www.instagram.com', - }, - { - category: 'Lurk', - hues: ['201', '221'], - key: 'l', - name: 'LinkedIn', - search: '/search/results/all/?keywords={}', - url: 'https://www.linkedin.com', - }, - { - category: 'Lurk', - hues: ['203', '183'], - key: 't', - name: 'Twitter', - search: '/search?q={}', - url: 'https://twitter.com/home', - }, - { - category: 'Inspire', - hues: ['349', '329'], - key: '1', - name: 'OPL', - search: '/?s={}', - url: 'https://onepagelove.com/inspiration', - }, - { - category: 'Inspire', hues: ['337', '317'], key: 'b', name: 'Dribbble', @@ -212,61 +94,86 @@ url: 'https://dribbble.com/shots/popular', }, { - category: 'Inspire', - key: 'u', - name: 'Unsplash', - search: '/search/{}', - url: 'https://unsplash.com/images', + hues: ['136', '156'], + key: 'd', + name: 'Drive', + search: '/drive/u/0/search?q={}', + url: 'https://drive.google.com/drive/u/0/my-drive', + }, + { + hues: ['266', '286'], + key: 'f', + name: 'Figma', + url: 'https://www.figma.com/files/recent', + }, + { + hues: ['214', '234'], + key: 'g', + name: 'GitHub', + search: '/search?q={}', + url: 'https://github.com', }, { - category: 'Inspire', hues: ['13', '33'], - key: 'H', + key: 'h', name: 'Hunt', search: '/search?q={}', url: 'https://www.producthunt.com', }, { - category: 'Listen', - hues: ['141'], - key: 'S', - name: 'Spotify', - search: '/search/{}', - url: 'https://open.spotify.com', - }, - { - category: 'Listen', - hues: ['32', '22'], - key: 'o', - name: 'SoundCloud', - search: '/search?q={}', - url: 'https://soundcloud.com/discover', - }, - { - category: 'Listen', - hues: ['202', '222'], - key: 'P', - name: 'Pandora', - search: '/search/{}/all', - url: 'https://www.pandora.com', - }, - { - category: 'Listen', hues: ['90'], - key: 'h', + key: 'H', name: 'Hypem', search: '/search/{}', url: 'https://hypem.com/latest', }, { - category: 'Watch', - hues: ['226', '236'], - key: 'e', - name: 'Disney', - url: 'https://www.disneyplus.com/home', + hues: ['230', '280'], + key: 'i', + name: 'Instagram', + url: 'https://www.instagram.com', + }, + { + hues: ['45', '40'], + key: 'k', + name: 'Keep', + search: '/u/0/#search/text={}', + url: 'https://keep.google.com/u/0', + }, + { + hues: ['166', '146'], + key: '+', + name: 'Khan', + search: '/search?page_search_query={}', + url: 'https://www.khanacademy.org', + }, + { + hues: ['201', '221'], + key: 'l', + name: 'LinkedIn', + search: '/search/results/all/?keywords={}', + url: 'https://www.linkedin.com', + }, + { + key: '0', + name: 'Local', + url: 'http://localhost:3000', + }, + { + hues: ['198', '218'], + key: ';', + name: 'MDN', + search: '/en-US/search?q={}', + url: 'https://developer.mozilla.org/en-US', + }, + { + hues: ['217', '197'], + key: 'm', + name: 'Mail', + search: '/mail/u/0/?q={}#search/{}', + url: 'https://mail.google.com/mail/u/0', }, { - category: 'Watch', hues: ['357', '357'], key: 'x', name: 'Netflix', @@ -274,20 +181,91 @@ url: 'https://www.netflix.com/browse', }, { - category: 'Watch', + hues: ['4', '24'], + key: 'n', + name: 'Notion', + url: 'https://www.notion.so', + }, + { + hues: ['349', '329'], + key: '1', + name: 'OPL', + search: '/?s={}', + url: 'https://onepagelove.com/inspiration', + }, + { + hues: ['202', '222'], + key: 'P', + name: 'Pandora', + search: '/search/{}/all', + url: 'https://www.pandora.com', + }, + { + hues: ['243', '204'], + key: 'p', + name: 'Plausible', + url: 'https://plausible.io', + }, + { + hues: ['254', '234'], + key: 'r', + name: 'Reddit', + search: '/search?q={}', + url: 'https://www.reddit.com', + }, + { + hues: ['190', '210'], + key: 's', + name: 'Slack', + url: 'https://app.slack.com', + }, + { + hues: ['32', '22'], + key: 'o', + name: 'Sounds', + search: '/search?q={}', + url: 'https://soundcloud.com/discover', + }, + { + hues: ['264', '244'], + key: 'T', + name: 'Twitch', + url: 'https://www.twitch.tv/directory/following', + }, + { + hues: ['203', '183'], + key: 't', + name: 'Twitter', + search: '/search?q={}', + url: 'https://twitter.com/home', + }, + { + key: 'u', + name: 'Unsplash', + search: '/search/{}', + url: 'https://unsplash.com/images', + }, + { + hues: ['217', '237'], + key: 'w', + name: 'Wikipedia', + search: '/wiki/{}', + url: 'https://en.wikipedia.org/wiki/Main_Page', + }, + { + hues: ['5', '345'], + key: '=', + name: 'Wolfram', + search: '/input/?i={}', + url: 'https://www.wolframalpha.com', + }, + { hues: ['5', '355'], key: 'y', name: 'YouTube', search: '/results?search_query={}', url: 'https://youtube.com/feed/subscriptions', }, - { - category: 'Watch', - hues: ['264', '244'], - key: 'T', - name: 'Twitch', - url: 'https://www.twitch.tv/directory/following', - }, ], // Instantly redirect when a key is matched. Put a space before any other @@ -306,25 +284,24 @@ querySearchDelimiter: "'", // Scripts allow you to open or search multiple sites at once. For example, - // to search Google, DuckDuckGo, Ecosia and Bing for cats at the same time, - // you'd type "se'cats". + // to search Google, Bing, DuckDuckGo, Ecosia and Yahoo for cats at the same + // time, you'd type "/'cats". scripts: { - se: ['bing', 'ecosia', 'duckduckgo', '*'], - sn: ['f', 'n', 's'], - sp: ['g/notifications', 'a', 's/client/T7K3RFA1M', 'm/mail/u/1'], + '/': ['*', 'bing', 'ddg', 'eco', 'yah'], }, // Default search suggestions for the specified queries. suggestionDefaults: { - '.': ['./inout/in/invoices/create'], 0: ["0'8000", "0'8080"], + H: ['H/popular', 'H/popular/lastweek', 'H/tags'], c: ['c/calendar/u/1/r', 'c/calendar/u/2/r'], d: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'], e: ['e/brand/national-geographic', 'e/brand/marvel', 'e/brand/star-wars'], g: ['g/notifications', 'g/trending', 'g/ossu', 'g/cadejscroggins/tilde'], - h: ['h/popular', 'h/popular/lastweek', 'h/tags'], k: ['k/u/1', 'k/u/2'], m: ['m/mail/u/1', 'm/mail/u/2'], + o: ['o/discover/sets/new-for-you', 'o/discover/sets/weekly'], + p: ['p/beema.finance'], r: ['r/r/superstonk', 'r/r/fujix', 'r/r/unixporn', 'r/r/startpages'], s: ['s/client/T09M5UWSV'], y: ['y/feed/trending'], @@ -343,6 +320,7 @@ // To disable suggestions, remove all influencers. suggestionInfluencers: [ { name: 'Default', limit: 4, minChars: 1 }, + { name: 'History', limit: 4, minChars: 2 }, { name: 'DuckDuckGo', limit: 4, minChars: 2 }, ], @@ -354,55 +332,43 @@ -
  • - +
  • + ${key} - ${name} + ${name}
    • `; - }, - '' + }, '') ); - } - _getCategories() { - const categories = this._commands - .map((v) => v.category) - .filter((category) => category); - - return [...new Set(categories)]; + this._el.appendChild(list); } _handleKeydown(e) { @@ -893,19 +798,19 @@ if (this._isTooShort(rawQuery) || !query) return Promise.resolve([]); return new Promise((resolve) => { - const callback = 'autocompleteCallback'; - - window[callback] = (res) => { - const suggestions = res - .map((i) => i.phrase) - .filter((s) => s.toLowerCase() !== query.toLowerCase()) - .slice(0, this._limit); - - resolve(this._addSearchPrefix(suggestions, rawQuery)); - }; + window.autocompleteCallback = (res) => + resolve( + this._addSearchPrefix( + res + .map((i) => i.phrase) + .filter((s) => s.toLowerCase() !== query.toLowerCase()) + .slice(0, this._limit), + rawQuery + ) + ); const script = document.createElement('script'); - script.src = `https://duckduckgo.com/ac/?callback=${callback}&q=${query}`; + script.src = `https://duckduckgo.com/ac/?callback=autocompleteCallback&q=${query}`; $.el('head').appendChild(script); }); } @@ -983,7 +888,7 @@ this._influencers = options.influencers; this._limit = options.limit; this._currentInput = ''; - this._highlitedSuggestion = null; + this._highlightedSuggestion = null; this._suggestionEls = []; this._handleKeydown = this._handleKeydown.bind(this); this._setSuggestions = this._setSuggestions.bind(this); @@ -1009,7 +914,7 @@ suggest(input) { this._currentInput = input.trim(); - this._highlitedSuggestion = null; + this._highlightedSuggestion = null; if (!this._currentInput) { this._clearSuggestions(); @@ -1065,7 +970,7 @@ this._clearSuggestionHighlightEvents(); this._clearSuggestionClickEvents(); this._el.innerHTML = ''; - this._highlitedSuggestion = null; + this._highlightedSuggestion = null; this._suggestionEls = []; } @@ -1105,8 +1010,8 @@ _highlight(el, e) { this._unHighlight(); if (!el) return; - this._highlitedSuggestion = el.getAttribute('data-suggestion'); - this._onHighlight(this._highlitedSuggestion); + this._highlightedSuggestion = el.getAttribute('data-suggestion'); + this._onHighlight(this._highlightedSuggestion); el.classList.add('highlight'); if (e) e.preventDefault(); } @@ -1136,8 +1041,10 @@ } _rehighlight() { - if (!this._highlitedSuggestion) return; - this._highlight($.el(`[data-suggestion="${this._highlitedSuggestion}"]`)); + if (!this._highlightedSuggestion) return; + this._highlight( + $.el(`[data-suggestion="${this._highlightedSuggestion}"]`) + ); } _setSuggestions(newSuggestions) { @@ -1419,27 +1326,34 @@ } } - class CommandParser { + class CommandFormatter { static commandHuesToColor(command) { - const hsla = (hue, saturation = 'var(--command-color-saturation)') => - `hsla(${hue}, ${saturation}, var(--command-color-lightness), var(--command-color-alpha))`; - if (command.color) return command; - command.color = command.category ? hsla(0, '0%') : null; - if (!command.hues) return command; + const newCommand = { ...command }; + + newCommand.color = CommandFormatter.hsla(0, '0%'); + if (!command.hues) return newCommand; if (command.hues.length === 1) { - command.color = hsla(command.hues[0]); - return command; + newCommand.color = CommandFormatter.hsla(command.hues[0]); + return newCommand; } - const c = command.hues.reduce((a, h) => `${a}, ${hsla(h)}`, ''); - command.color = `linear-gradient(var(--command-color-gradient) ${c})`; - return command; + const c = command.hues.reduce( + (a, h) => `${a}, ${CommandFormatter.hsla(h)}`, + '' + ); + + newCommand.color = `linear-gradient(var(--command-color-gradient) ${c})`; + return newCommand; + } + + static hsla(hue, saturation = 'var(--command-color-saturation)') { + return `hsla(${hue}, ${saturation}, var(--command-color-lightness), var(--command-color-alpha))`; } } - const commands = CONFIG.commands.map(CommandParser.commandHuesToColor); + const commands = CONFIG.commands.map(CommandFormatter.commandHuesToColor); const queryParser = new QueryParser({ commands,