diff --git a/README.md b/README.md index 7c1baea..0c3a05b 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,4 @@ ![](./media/logo.png)
-# How to install -1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts -2. Clone repository -3. Go to `chrome://extensions` -4. Enable `Developer mode` -5. Click `Load unpacked` > select repo's folder -6. Enjoy your new tab/home page \ No newline at end of file +# Install +[`Chrome-based browser`](./docs/INSTALL_CHROME.md) [`Firefox-based browser`](./docs/INSTALL_FIREFOX.md) diff --git a/docs/INSTALL_CHROME.md b/docs/INSTALL_CHROME.md new file mode 100644 index 0000000..8d84f9e --- /dev/null +++ b/docs/INSTALL_CHROME.md @@ -0,0 +1,10 @@ +[← Back](../) + +# Install to Chrome-based browser +1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts +2. Download [`this`](https://github.com/ktnk-dev/LittleHome/archive/refs/heads/main.zip) archive +3. Extract it somewhere +4. Go to `chrome://extensions` +5. Enable `Developer mode` +6. Click `Load unpacked` > select your exctracted folder (should me `LittleHome-main`) +7. Enjoy your new tab/home page \ No newline at end of file diff --git a/docs/INSTALL_FIREFOX.md b/docs/INSTALL_FIREFOX.md new file mode 100644 index 0000000..e3427f1 --- /dev/null +++ b/docs/INSTALL_FIREFOX.md @@ -0,0 +1,9 @@ +[← Back](../) + +# Install to Firefox-based browser +1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts +2. Download [`this`](https://github.com/ktnk-dev/LittleHome/archive/refs/heads/main.zip) archive +3. Go to `about:debugging` +4. Select `This Firefox` +5. Click `Load Temporary Add-on...` > select downloaded ZIP archive (should me `LittleHome-main.zip`) +6. Enjoy your new tab/home page \ No newline at end of file diff --git a/manifest.json b/manifest.json index 4a1ceee..6a388f0 100644 --- a/manifest.json +++ b/manifest.json @@ -22,10 +22,6 @@ "" ], "js": [ - "src/js/abstract.js", - "src/js/storage.js", - "src/js/bang.js", - "src/js/main.js" ] } ] diff --git a/src/css/update.css b/src/css/update.css new file mode 100644 index 0000000..7859ee5 --- /dev/null +++ b/src/css/update.css @@ -0,0 +1,24 @@ +#update { + position: fixed; + bottom: 0; + right: 0; + font-size: 13px; + font-family: 'Nunito'; + background: rgba(255,255,255,.1); + border-radius: 100px; + margin: 10px; + display: flex; + z-index: 20; + transition: transform .5s; +} #update > * { + padding: 5px 10px; +} #update > a { + text-decoration: none; + background: rgba(255,255,255,.1); + border-radius: 100px; + cursor: pointer; +} + +#update.hidden { + transform: translateY(40px); +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 0d9361d..71f416d 100644 --- a/src/index.html +++ b/src/index.html @@ -5,10 +5,10 @@ Home - +
@@ -17,10 +17,12 @@

Search via Google

- + + + \ No newline at end of file diff --git a/src/js/builtin.js b/src/js/builtin.js new file mode 100644 index 0000000..58a9fd3 --- /dev/null +++ b/src/js/builtin.js @@ -0,0 +1,75 @@ +const clock = async () => { + const render = async () => { + const baseOffset = 109.12 + const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset) + const time = new Date() + var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat() + var fe = [ + document.querySelectorAll('.digit.h')[0], + document.querySelectorAll('.digit.h')[1], + document.querySelectorAll('.digit.m')[0], + document.querySelectorAll('.digit.m')[1], + document.querySelectorAll('.digit.s')[0], + document.querySelectorAll('.digit.s')[1] + ] + var _ = [...Array(6).keys()].map(i => { + const value = ft[i] + const element = fe[i] + element.style = `transform: translateY(-${value}px)` + }) + } + + document.querySelector('body').appendChild( + $.div( + {id: 'clock'}, + $.div({class: 'digit h'}, [...Array(3).keys()].map(_ => $.span(_.toString()))), + $.div({class: 'digit h'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), + $.div({class: 'digit l'}, $.span(':')), + $.div({class: 'digit m'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), + $.div({class: 'digit m'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), + $.div({class: 'digit l'}, $.span(':')), + $.div({class: 'digit s'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), + $.div({class: 'digit s'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), + ) + ) + render() + setInterval(() => render(), 500); +} + + +searcher = () => { + const findbang = query => { + if (query.indexOf('!') == -1) return {found: false, valid: false} + const inputed = query.split('!')[1] + for (const bang of bangs) { + if (bang.t == inputed) return {found: true, valid: true, inputed: inputed, data: bang} + } + return {found: true, valid: false, inputed: inputed} + + } + var lastquery = '' + const proceed = query => { + if (query == lastquery) return + lastquery = query + document.querySelector('#clock').style.opacity = query == '' ? 1 : 0 + document.querySelector('#searcher').style.opacity = query == '' ? 0 : 1 + const fb = findbang(query) + if (fb.found) query = query.replace('!'+fb.inputed, `!${fb.inputed}`) + console.log(query) + document.querySelector('#searcher > h1').innerHTML = query + document.querySelector('#searcher > p').innerHTML = `Search via ${fb.valid? fb.data.s : 'Google'}` + + } + const find = element => { + const query = element.target.value.trim() + const fb = findbang(query) + const url = fb.valid ? fb.data.u : 'https://www.google.com/search?q={{{s}}}' + window.location.href = url.replace('{{{s}}}', encodeURI(fb.found ? query.replace('!'+fb.inputed, '').trim() : query.trim())) + } + document.querySelector('#search_ddd').addEventListener('change', find) + document.querySelector('#search_ddd').addEventListener('input', (e) => {proceed(e.target.value.trim())}) + setInterval(() => { + document.querySelector('#search_ddd').focus() + proceed(document.querySelector('#search_ddd').value.trim()) + }, 100); +} \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 2b870bb..2251375 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,79 +1,3 @@ -const clock = async () => { - const render = async () => { - const baseOffset = 109.12 - const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset) - const time = new Date() - var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat() - var fe = [ - document.querySelectorAll('.digit.h')[0], - document.querySelectorAll('.digit.h')[1], - document.querySelectorAll('.digit.m')[0], - document.querySelectorAll('.digit.m')[1], - document.querySelectorAll('.digit.s')[0], - document.querySelectorAll('.digit.s')[1] - ] - var _ = [...Array(6).keys()].map(i => { - const value = ft[i] - const element = fe[i] - element.style = `transform: translateY(-${value}px)` - }) - } - - document.querySelector('body').appendChild( - $.div( - {id: 'clock'}, - $.div({class: 'digit h'}, [...Array(3).keys()].map(_ => $.span(_.toString()))), - $.div({class: 'digit h'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), - $.div({class: 'digit l'}, $.span(':')), - $.div({class: 'digit m'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), - $.div({class: 'digit m'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), - $.div({class: 'digit l'}, $.span(':')), - $.div({class: 'digit s'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), - $.div({class: 'digit s'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))), - ) - ) - render() - setInterval(() => render(), 500); -} - - -searcher = () => { - const findbang = query => { - if (query.indexOf('!') == -1) return {found: false, valid: false} - const inputed = query.split('!')[1] - for (const bang of bangs) { - if (bang.t == inputed) return {found: true, valid: true, inputed: inputed, data: bang} - } - return {found: true, valid: false, inputed: inputed} - - } - var lastquery = '' - const proceed = query => { - if (query == lastquery) return - lastquery = query - document.querySelector('#clock').style.opacity = query == '' ? 1 : 0 - document.querySelector('#searcher').style.opacity = query == '' ? 0 : 1 - const fb = findbang(query) - if (fb.found) query = query.replace('!'+fb.inputed, `!${fb.inputed}`) - console.log(query) - document.querySelector('#searcher > h1').innerHTML = query - document.querySelector('#searcher > p').innerHTML = `Search via ${fb.valid? fb.data.s : 'Google'}` - - } - const find = element => { - const query = element.target.value.trim() - const fb = findbang(query) - const url = fb.valid ? fb.data.u : 'https://www.google.com/search?q={{{s}}}' - window.location.href = url.replace('{{{s}}}', encodeURI(fb.found ? query.replace('!'+fb.inputed, '').trim() : query.trim())) - } - document.querySelector('#search_ddd').addEventListener('change', find) - document.querySelector('#search_ddd').addEventListener('input', (e) => {proceed(e.target.value.trim())}) - setInterval(() => { - document.querySelector('#search_ddd').focus() - proceed(document.querySelector('#search_ddd').value.trim()) - }, 100); -} - window.addEventListener('DOMContentLoaded', async () => { clock() searcher() diff --git a/src/js/storage.js b/src/js/storage.js index 771afea..299fab0 100644 --- a/src/js/storage.js +++ b/src/js/storage.js @@ -25,9 +25,9 @@ const CookieManager = { function getFromStorage(variable_name) { const c = CookieManager.get(variable_name) - return c === '' ? null : c + return c === '' ? null : JSON.parse(c).data } function setToStorage(variable_name, value) { - CookieManager.set(variable_name, value) + CookieManager.set(variable_name, JSON.stringify({data: value})) } \ No newline at end of file diff --git a/src/js/update.js b/src/js/update.js new file mode 100644 index 0000000..4ed2090 --- /dev/null +++ b/src/js/update.js @@ -0,0 +1,21 @@ +check_update = async () => { + if (!getFromStorage('update')) setToStorage('update', { + required_update: false, + installed: '-1', + remote: '-1', + last: 0 + }) + const stored = getFromStorage('update') + const installed = await fetch('/.git/ORIG_HEAD').then(e => e.text()) + if (installed != stored.installed) { + stored.installed = installed + stored.required_update = false + } + if (((new Date() - stored.last) > 1000*60 *60 *5) && (stored.remote == stored.installed || stored.remote == '-1') ) { + const remote = (await fetch('https://api.github.com/repos/ktnk-dev/LittleHome/commits').then(e => e.json()))[0].sha + '\n' + stored.remote = remote + stored.last = (new Date() - 0) + } + setToStorage('update', stored) + if (stored.remote != stored.installed) document.querySelector('#update').classList = '' +} \ No newline at end of file