code separation, updater, simple docs

2025-05-13 23:33:10 +03:00 · 2025-05-13 23:33:10 +03:00 · 831cbcfa5d
commit 831cbcfa5d
parent 33778e3234
10 changed files with 147 additions and 91 deletions
--- a/README.md
+++ b/README.md
@ -1,9 +1,4 @@
 ![](./media/logo.png) <br>

-# 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
+# Install
+[`Chrome-based browser`](./docs/INSTALL_CHROME.md)  [`Firefox-based browser`](./docs/INSTALL_FIREFOX.md)
--- a/docs/INSTALL_CHROME.md
+++ 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
--- a/docs/INSTALL_FIREFOX.md
+++ 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
--- a/manifest.json
+++ b/manifest.json
@ -22,10 +22,6 @@
                "<all_urls>"
            ],
            "js": [
-                "src/js/abstract.js",
-                "src/js/storage.js",
-                "src/js/bang.js",
-                "src/js/main.js"
            ]
        }
    ]
--- a/src/css/update.css
+++ 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);
+}
--- a/src/index.html
+++ b/src/index.html
@ -5,10 +5,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="shortcut icon" href="icon.svg" type="image/x-icon">
-
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/clock.css">
    <link rel="stylesheet" href="css/search.css">
+    <link rel="stylesheet" href="css/update.css">
 </head>
 <body>
    <div id="background"></div>
@ -17,10 +17,12 @@
        <p>Search via Google</p>
    </div>
    <input type="text" id="search_ddd" autocorrect="off" autocomplete="off" autofocus>
-
+    <div id="update" class="hidden"><span>update available</span> <a href="https://github.com/ktnk-dev/LittleHome">download</a></div>
    <script src="js/abstract.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/bang.js"></script>
+    <script src="js/builtin.js"></script>
+    <script src="js/update.js"></script>
    <script src="js/main.js"></script>
 </body>
 </html>
--- a/src/js/builtin.js
+++ 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, `<span class="${fb.valid? '' : 'error'}">!${fb.inputed}</span>`)
+        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);
+}
--- 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, `<span class="${fb.valid? '' : 'error'}">!${fb.inputed}</span>`)
-        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()
--- 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}))
 }
--- a/src/js/update.js
+++ 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 = ''
+}