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

functionality tweaks & link changes

Browse Source
This commit is contained in:
Cade Scroggins
2021-01-12 16:42:13 +05:30
parent 4d2ca856d2
commit 88e4808c09
11 changed files with 178 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+20 -18
View File
@@ -1,34 +1,35 @@
# Tilde # Tilde
Inspired by [/r/startpages](https://www.reddit.com/r/startpages)—the idea is to Inspired by [/r/startpages](https://www.reddit.com/r/startpages)—the idea
have a homepage for your browser that is functional and sexy. is to have a homepage for your browser that is functional and sexy.
## Basic Usage ## Basic Usage
To go to a site, enter the corresponding key. To view the available sites and To go to a site, enter the corresponding key. To view the available sites and
their keys, press `?`. If your input doesn't match any of the commands, a their keys, press `?`. If your input doesn’t match any of the keys, a
generic Google search will be triggered. For example: generic DuckDuckGo search will be triggered. For example:
- Entering `r` would redirect you to [www.reddit.com](https://www.reddit.com). - Entering `t` would redirect you to [twitter.com](https://twitter.com/home).
- Entering `t` would redirect you to [twitch.tv](https://www.twitch.tv). - Entering `u` would redirect you to
- Entering `cats` would search [unsplash.com](https://unsplash.com/images).
[Google for "cats"](https://encrypted.google.com/search?q=cats). - Entering `google` would
[search DuckDuckGo for google](https://duckduckgo.com/?q=google).
### Searching ### Searching
You can search a site by typing a colon after the site's key, followed You can search a site by typing a single quote after the site’s key,
by your search query. For example: followed by your query. For example:
- Entering `g:tilde` would search - Entering `g'tilde` would
[GitHub for "tilde"](https://github.com/search?q=tilde). [search GitHub for tilde](https://github.com/search?q=tilde).
- Entering `s:san holo` would search - Entering `y'vox` would
[SoundCloud for "san holo"](https://soundcloud.com/search?q=san%20holo). [search YouTube for vox](https://www.youtube.com/results?search_query=vox).
### Specific Paths ### Specific Paths
You can go to a specific path on a site by typing a forward slash after the You can go to a specific path on a site by typing a forward slash after the
site's key, followed by the location on the site you'd like to be redirected to. site’s key, followed by the location on the site you’d like to be
For example: redirected to. For example:
- Entering `r/r/startpages` would redirect you to - Entering `r/r/startpages` would redirect you to
[www.reddit.com/r/startpages](https://www.reddit.com/r/startpages) [www.reddit.com/r/startpages](https://www.reddit.com/r/startpages)
@@ -52,6 +53,7 @@ read through the `CONFIG`!
## License ## License
[The Lato typeface](https://www.latofonts.com/lato-free-fonts/) has [The Inter typeface](https://rsms.me/inter/) has
[its own license](https://github.com/cadejscroggins/tilde/blob/master/fonts/LICENSE). [its own license](https://github.com/cadejscroggins/tilde/blob/master/fonts/LICENSE).
You can use and modify everything else [however you like](https://github.com/cadejscroggins/tilde/blob/master/LICENSE). You can use and modify everything else
[however you like](https://github.com/cadejscroggins/tilde/blob/master/LICENSE).
fonts/LICENSE
+4 -3
View File
@@ -1,5 +1,6 @@
Copyright (c) 2010-2015, Łukasz Dziedzic ([email protected]), Copyright (c) 2016-2021 The Inter Project Authors.
with Reserved Font Name Lato. "Inter" is a Reserved Font Name.
https://github.com/rsms/inter
This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: This license is copied below, and is also available with a FAQ at:
@@ -44,7 +45,7 @@ new environment.
"Author" refers to any designer, engineer, programmer, technical "Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software. writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify, a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font redistribute, and sell modified and unmodified copies of the Font
fonts/inter-v2-latin-900.woff
BIN
View File
Binary file not shown.
fonts/inter-v2-latin-900.woff2
BIN
View File
Binary file not shown.
fonts/inter-v2-latin-regular.woff
BIN
View File
Binary file not shown.
fonts/inter-v2-latin-regular.woff2
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-900.woff
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-900.woff2
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-regular.woff
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-regular.woff2
BIN
View File
Binary file not shown.
index.html
+153 -85
View File
@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" />
<script> <script>
const CONFIG = { const CONFIG = {
@@ -13,8 +14,13 @@
key: '*', key: '*',
url: 'https://duckduckgo.com', url: 'https://duckduckgo.com',
search: '?q={}', search: '?q={}',
color: '#222328',
}, },
// {
// name: 'Google',
// key: '*',
// url: 'https://www.google.com',
// search: '/search?q={}',
// },
{ {
category: 'Google', category: 'Google',
name: 'Mail', name: 'Mail',
@@ -54,13 +60,6 @@
url: 'https://app.slack.com/client/T09M5UWSV', url: 'https://app.slack.com/client/T09M5UWSV',
color: 'linear-gradient(135deg, #6e7adc, #6ebadc)', color: 'linear-gradient(135deg, #6e7adc, #6ebadc)',
}, },
{
category: 'Work',
name: 'AND.CO',
key: '.',
url: 'https://app.and.co/timers',
color: 'linear-gradient(135deg, #1773aa, #17b3aa)',
},
{ {
category: 'Work', category: 'Work',
name: 'Notion', name: 'Notion',
@@ -76,57 +75,73 @@
color: 'linear-gradient(135deg, #0a9fc0, #0adfc0)', color: 'linear-gradient(135deg, #0a9fc0, #0adfc0)',
}, },
{ {
category: 'Design', category: 'Work',
name: 'Figma', name: 'AND',
key: 'f', key: '.',
url: 'https://www.figma.com/files/recent', url: 'https://app.and.co/timers',
color: 'linear-gradient(135deg, #9762F6, #97a2F6)', color: 'linear-gradient(135deg, #1773aa, #17b3aa)',
}, },
{ {
category: 'Design', category: 'Create',
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', name: 'AWS',
key: 'A', key: 'A',
url: 'https://console.aws.amazon.com', url: 'https://console.aws.amazon.com',
color: 'linear-gradient(135deg, #ff6400, #ffa400)', color: 'linear-gradient(135deg, #ff6400, #ffa400)',
}, },
{ {
category: 'Code', category: 'Create',
name: 'GitHub', name: 'GitHub',
key: 'g', key: 'g',
url: 'https://github.com', url: 'https://github.com',
search: '/search?q={}', search: '/search?q={}',
color: 'linear-gradient(135deg, #478B47, #478B87)', color: 'linear-gradient(135deg, #3886df, #38c6df)',
}, },
{ {
category: 'Code', category: 'Create',
name: 'MDN', name: 'Figma',
key: 'M', key: 'f',
url: 'https://developer.mozilla.org/en-US', url: 'https://www.figma.com/files/recent',
search: '/en-US/search?q={}', color: 'linear-gradient(135deg, #9762F6, #97a2F6)',
color: 'linear-gradient(135deg, #5987a6, #59c7a6)',
}, },
{ {
category: 'Code', category: 'Create',
name: 'Local', name: 'Local',
key: '0', key: '0',
url: 'http://localhost:3000', url: 'http://localhost:3000',
search: ':{}', search: ':{}',
}, },
{
category: 'Learn',
name: 'Khan',
key: '+',
url: 'https://www.khanacademy.org',
search: '/search?page_search_query={}',
color: 'linear-gradient(135deg, #1865f2, #18a5f2)',
},
{
category: 'Learn',
name: 'Wolfram',
key: '=',
url: 'https://www.wolframalpha.com',
search: '/input/?i={}',
color: 'linear-gradient(135deg, #DD0E00, #DD4E00)',
},
{
category: 'Learn',
name: 'Wikipedia',
key: '"',
url: 'https://en.wikipedia.org/wiki/Main_Page',
search: '/wiki/{}',
color: 'linear-gradient(135deg, #6B6B6B, #7B7B7B)',
},
{
category: 'Learn',
name: 'MDN',
key: ';',
url: 'https://developer.mozilla.org/en-US',
search: '/en-US/search?q={}',
color: 'linear-gradient(135deg, #5987a6, #59c7a6)',
},
{ {
category: 'Lurk', category: 'Lurk',
name: 'Reddit', name: 'Reddit',
@@ -137,6 +152,45 @@
}, },
{ {
category: 'Lurk', category: 'Lurk',
name: 'Instagram',
key: 'i',
url: 'https://www.instagram.com',
color: 'linear-gradient(135deg, #833ab4, #837ab4)',
},
{
category: 'Lurk',
name: 'LinkedIn',
key: 'l',
url: 'https://www.linkedin.com',
search: '/search/results/all/?keywords={}',
color: 'linear-gradient(135deg, #0A66C2, #0Aa6C2)',
},
{
category: 'Lurk',
name: 'Twitter',
key: 't',
url: 'https://twitter.com/home',
search: '/search?q={}',
color: 'linear-gradient(135deg, #0d91e2, #0dd1e2)',
},
{
category: 'Inspire',
name: 'OPL',
key: '1',
url: 'https://onepagelove.com/inspiration',
search: '/?s={}',
color: 'linear-gradient(135deg, #EB3656, #EB7656)',
},
{
category: 'Inspire',
name: 'Dribbble',
key: 'b',
url: 'https://dribbble.com/shots/popular',
search: '/search/{}',
color: 'linear-gradient(135deg, #f042ac, #f082ac)',
},
{
category: 'Inspire',
name: 'Unsplash', name: 'Unsplash',
key: 'u', key: 'u',
url: 'https://unsplash.com/images', url: 'https://unsplash.com/images',
@@ -144,7 +198,7 @@
color: '#000', color: '#000',
}, },
{ {
category: 'Lurk', category: 'Inspire',
name: 'Hunt', name: 'Hunt',
key: 'p', key: 'p',
url: 'https://www.producthunt.com', url: 'https://www.producthunt.com',
@@ -154,7 +208,7 @@
{ {
category: 'Listen', category: 'Listen',
name: 'Spotify', name: 'Spotify',
key: 'sp', key: 'S',
url: 'https://open.spotify.com', url: 'https://open.spotify.com',
search: '/search/{}', search: '/search/{}',
color: 'linear-gradient(135deg, #1DB954, #1DB994)', color: 'linear-gradient(135deg, #1DB954, #1DB994)',
@@ -167,34 +221,50 @@
search: '/search?q={}', search: '/search?q={}',
color: 'linear-gradient(135deg, #ff8800, #ffc800)', color: 'linear-gradient(135deg, #ff8800, #ffc800)',
}, },
{
category: 'Listen',
name: 'Pandora',
key: 'P',
url: 'https://www.pandora.com',
search: 'https://www.pandora.com/search/{}/all',
color: 'linear-gradient(135deg, #005483, #009483)',
},
{ {
category: 'Listen', category: 'Listen',
name: 'Hypem', name: 'Hypem',
key: 'hy', key: 'h',
url: 'https://hypem.com/popular', url: 'https://hypem.com/popular',
search: '/search/{}', search: '/search/{}',
color: 'linear-gradient(135deg, #628441, #628481)', color: 'linear-gradient(135deg, #11172d, #11176d)',
}, },
{ {
category: 'Watch', category: 'Watch',
name: 'Netflix', name: 'Vimeo',
key: 'ne', key: 'v',
url: 'https://www.netflix.com/browse', url: 'https://vimeo.com/watch',
search: '/search?q={}', search: '/search?q={}',
color: 'linear-gradient(135deg, #e50914, #fe3914)', color: 'linear-gradient(135deg, #08a08C, #08e08C)',
}, },
{ {
category: 'Watch', category: 'Watch',
name: 'YouTube', name: 'YouTube',
key: 'yo', key: 'y',
url: 'https://youtube.com/feed/subscriptions', url: 'https://youtube.com/feed/subscriptions',
search: '/results?search_query={}', search: '/results?search_query={}',
color: 'linear-gradient(135deg, #fd201f, #cd301f)', color: 'linear-gradient(135deg, #fd201f, #cd301f)',
}, },
{
category: 'Watch',
name: 'Netflix',
key: 'N',
url: 'https://www.netflix.com/browse',
search: '/search?q={}',
color: 'linear-gradient(135deg, #e50914, #fe3914)',
},
{ {
category: 'Watch', category: 'Watch',
name: 'Twitch', name: 'Twitch',
key: 'tw', key: 'T',
url: 'https://www.twitch.tv/directory/following', url: 'https://www.twitch.tv/directory/following',
color: 'linear-gradient(135deg, #6441a5, #6461c5)', color: 'linear-gradient(135deg, #6441a5, #6461c5)',
}, },
@@ -207,8 +277,11 @@
suggestionsLimit: 4, suggestionsLimit: 4,
/** /**
* The order and limit for each suggestion influencer. An "influencer" is * The order, limit and minimum characters for each suggestion influencer.
* just a suggestion source. The following influencers are available: * An "influencer" is just a suggestion source. "limit" is the max number
* of suggestions an influencer will produce.
*
* The following influencers are available:
* *
* - "Default" suggestions come from CONFIG.defaultSuggestions (sync) * - "Default" suggestions come from CONFIG.defaultSuggestions (sync)
* - "History" suggestions come from your previously entered queries (sync) * - "History" suggestions come from your previously entered queries (sync)
@@ -232,15 +305,12 @@
defaultSuggestions: { defaultSuggestions: {
'.': ['./inout/in/invoices/create'], '.': ['./inout/in/invoices/create'],
0: ['0:8000', '0:8080'], 0: ['0:8000', '0:8080'],
b: ['b/shots/popular'],
c: ['c/calendar/u/1/r', 'c/calendar/u/2/r'], c: ['c/calendar/u/1/r', 'c/calendar/u/2/r'],
d: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'], d: ['d/drive/u/1/my-drive', 'd/drive/u/2/my-drive'],
g: ['g/ossu'], g: ['g/cadejscroggins/tilde', 'g/ossu'],
k: ['k/u/1', 'k/u/2'], k: ['k/u/1', 'k/u/2'],
m: ['m/mail/u/1', 'm/mail/u/2'], m: ['m/mail/u/1', 'm/mail/u/2'],
r: ['r/r/startpages', 'r/r/listentothis'],
s: ['s/client/T7K3RFA1M', 's/client/T018S4TL7CP'], s: ['s/client/T7K3RFA1M', 's/client/T018S4TL7CP'],
sc: ['sc/you/likes', 'sc/discover/the-upload'],
}, },
/** /**
@@ -261,9 +331,9 @@
/** /**
* The delimiter between a command key and your search query. For example, * The delimiter between a command key and your search query. For example,
* to search GitHub for potatoes, you'd type "g:potatoes". * to search GitHub for tilde, you'd type "g'tilde".
*/ */
searchDelimiter: ':', searchDelimiter: "'",
/** /**
* The delimiter between a command key and a path. For example, you'd type * The delimiter between a command key and a path. For example, you'd type
@@ -295,39 +365,34 @@
:root { :root {
/* colors */ /* colors */
--background: #fffef8; --background: #fffef8;
--foreground: #222328; --foreground: #424348;
--foregroundSubtle: #525358;
--searchBackground: #222328; --searchBackground: #222328;
--searchForeground: #fffef8; --searchForeground: #fffef8;
/* fonts */ /* fonts */
--font-family: Lato, sans-serif; --font-family: Inter, sans-serif;
--base-font-size: 18px; --base-font-size: 18px;
--font-weight-normal: 400; --font-weight-normal: 400;
--font-weight-bold: 700; --font-weight-bold: 900;
} }
/* to download a different font locally: /* to download a different font locally:
https://google-webfonts-helper.herokuapp.com/fonts */ https://google-webfonts-helper.herokuapp.com/fonts */
@font-face { @font-face {
font-family: Lato; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; src: url('./fonts/inter-v2-latin-regular.woff2') format('woff2'),
src: local('Lato Regular'), local('Lato-Regular'), url('./fonts/inter-v2-latin-regular.woff') format('woff');
url('./fonts/lato-v14-latin-regular.woff2') format('woff2'),
url('./fonts/lato-v14-latin-regular.woff') format('woff');
} }
@font-face { @font-face {
font-family: Lato; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; src: url('./fonts/inter-v2-latin-900.woff2') format('woff2'),
src: local('Lato Black'), local('Lato-Black'), url('./fonts/inter-v2-latin-900.woff') format('woff');
url('./fonts/lato-v14-latin-900.woff2') format('woff2'),
url('./fonts/lato-v14-latin-900.woff') format('woff');
} }
</style> </style>
@@ -413,7 +478,6 @@
.clock { .clock {
display: block; display: block;
font-size: 4rem; font-size: 4rem;
letter-spacing: 0.05rem;
cursor: pointer; cursor: pointer;
} }
@@ -435,7 +499,7 @@
.search-input { .search-input {
width: 100%; width: 100%;
padding: 0 1rem; padding: 0 1rem;
margin-bottom: 20px; margin-bottom: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
letter-spacing: 0.125rem; letter-spacing: 0.125rem;
@@ -477,7 +541,7 @@
height: 0.4rem; height: 0.4rem;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0.05rem; bottom: 0.1rem;
left: 0; left: 0;
background: var(--searchForeground); background: var(--searchForeground);
opacity: 0.4; opacity: 0.4;
@@ -488,15 +552,19 @@
} }
.help { .help {
padding: 3rem;
background: var(--background); background: var(--background);
z-index: 1; z-index: 1;
} }
.categories {
padding: 3rem;
}
.category { .category {
padding: 1.75rem 2.25rem; padding: 1.75rem 2.25rem;
vertical-align: text-top; vertical-align: text-top;
break-inside: avoid-column; break-inside: avoid-column;
page-break-inside: avoid;
} }
.category-name { .category-name {
@@ -526,14 +594,13 @@
border-radius: 50%; border-radius: 50%;
background: var(--foreground); background: var(--foreground);
color: var(--background); color: var(--background);
font-size: 0.8rem; font-size: 0.75rem;
line-height: 2rem; line-height: 2rem;
text-align: center; text-align: center;
} }
.command-name { .command-name {
position: relative; position: relative;
color: var(--foregroundSubtle);
} }
.command-name::after { .command-name::after {
@@ -541,7 +608,7 @@
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0.05rem; bottom: 0.1rem;
left: 0; left: 0;
height: 0.4rem; height: 0.4rem;
transition: 0.2s; transition: 0.2s;
@@ -565,7 +632,7 @@
visibility: visible; visibility: visible;
} }
@media (min-width: 600px) { @media (min-width: 650px) {
.clock { .clock {
font-size: 6rem; font-size: 6rem;
} }
@@ -583,9 +650,9 @@
} }
} }
@media (min-width: 850px) { @media (min-width: 900px) {
.search-input { .search-input {
font-size: 2.5rem; font-size: 3rem;
} }
.search-suggestions { .search-suggestions {
@@ -597,7 +664,7 @@
} }
} }
@media (min-width: 1100px) { @media (min-width: 1200px) {
.categories { .categories {
columns: 4; columns: 4;
} }
@@ -1176,6 +1243,7 @@
if (query === key) { if (query === key) {
res.key = key; res.key = key;
res.isKey = true; res.isKey = true;
res.query = '';
res.redirect = url; res.redirect = url;
return true; return true;
} }
@@ -1194,6 +1262,7 @@
res.isPath = true; res.isPath = true;
res.split = this._pathDelimiter; res.split = this._pathDelimiter;
res.path = QueryParser._shiftAndTrim(splitPath, res.split); res.path = QueryParser._shiftAndTrim(splitPath, res.split);
res.query = '';
res.redirect = QueryParser._prepPath(url, res.path); res.redirect = QueryParser._prepPath(url, res.path);
return true; return true;
} }
@@ -1211,10 +1280,11 @@
static _getColorFromUrl(commands, url) { static _getColorFromUrl(commands, url) {
const domain = new URL(url).hostname; const domain = new URL(url).hostname;
const domainRegex = new RegExp(`${domain}$`);
return ( return (
commands commands
.filter((c) => new URL(c.url).hostname.includes(domain)) .filter((c) => domainRegex.test(new URL(c.url).hostname))
.map((c) => c.color)[0] || null .map((c) => c.color)[0] || null
); );
} }
@@ -1347,9 +1417,7 @@
_setBackgroundFromQuery(query) { _setBackgroundFromQuery(query) {
if (!this._colors) return; if (!this._colors) return;
const color = this._parseQuery(query).color; this._formEl.style.background = this._parseQuery(query).color || '';
if (!color) return;
this._formEl.style.background = color;
} }
_submitForm(e) { _submitForm(e) {