create a json file

Signed-off-by: Marc Pervaz Boocha <mboocha@sudomsg.xyz>

5 files changed, 79 insertions, 53 deletions

diff --git a/src/assets/index.css b/src/assets/index.css
index 7984af2..3d04fb2 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -22,7 +22,7 @@
      :any-link:active {
         font-style: italic;
     }
-    #menu {
+    .topnav {
         background: darkred;
         text-decoration: none;
         font-weight: bold;
@@ -30,23 +30,33 @@
         padding: 1rem;
         font-size: 1rem;
     }
-    @media (max-width: 450px) {
-        #menu a {
-            display: block;
-            text-align: center;
-            margin: auto;
-            padding: 20px;
-        }
-    }
-    #menu :any-link {
-        text-decoration: none;
+    #nav-toogle,
+    .topnav a {
         margin-right: 1rem;
         padding-left: 0rem;
         padding-right: 0rem;
     }
-    #menu :any-link:hover {
+    .topnav :any-link {
+        text-decoration: none;
+    }
+    .topnav :any-link:hover {
         text-decoration: none;
     }
+    @media (max-width: 450px) {
+        #nav-toogle,
+        .topnav a {
+            display: block;
+            margin: auto;
+            text-align: center;
+            padding: 16px;
+        }
+        .topnav .navlinks {
+            display: none;
+        }
+        .topnav .navlinks.navopen {
+            display: block
+        }
+    }
     .err {
         color: darkred;
     }
diff --git a/src/assets/index.mjs b/src/assets/index.mjs
index 17062bc..4d7c2b0 100644
--- a/src/assets/index.mjs
+++ b/src/assets/index.mjs
@@ -1,9 +1,12 @@
-const main = async() => {
-    window.addEventListener('load', async() => {
-        if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('/sw.js')
-        }
-    })
-}
-
-main()
\ No newline at end of file
+document.getElementById("nav-toogle").addEventListener("click", async() => {
+    const navlinks = Array.from(document.getElementsByClassName("navlinks"))
+    for (const navlink of navlinks) {
+        navlink.classList.toggle("navopen")
+    }
+    return false
+})
+window.addEventListener('load', async() => {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js')
+    }
+})
\ No newline at end of file
diff --git a/src/assets/sw.mjs b/src/assets/sw.mjs
index f981da5..e20102a 100644
--- a/src/assets/sw.mjs
+++ b/src/assets/sw.mjs
@@ -1,38 +1,34 @@
-const cache_name = "v3"
+const get_cache_info = async() => {
+    const response = await fetch('/cache.json')
+    return response.json()
+}
 
-const install_sw = async event => {
+self.addEventListener('install', async event => {
     const precache = async() => {
-        const cache = await self.caches.open(cache_name);
-        return cache.addAll([
-            '/index.css',
-            '/prism.css',
-            '/index.js',
-            '/sw.js',
-            '/favicon.svg',
-            '/offline.html',
-            '/'
-        ])
+        const ver = await get_cache_info()
+        const cache = await self.caches.open(ver.store);
+        return cache.addAll(ver.default)
     }
     event.waitUntil(precache())
-}
-
-const activate_sw = async event => {
-    const cachepreserve = ['v3'];
+})
 
+self.addEventListener('activate', async event => {
     const invalidatecache = async() => {
+        const ver = await get_cache_info()
         const keys = await self.caches.keys()
         Promise.all(
-            keys.map((key) => {
-                if (cachepreserve.indexOf(key) === -1) {
+            keys.map(key => {
+                if (key !== ver.store) {
                     return self.caches.delete(key)
                 }
             }))
     }
     event.waitUntil(invalidatecache())
-}
+})
 
-const fetch_sw = async event => {
+self.addEventListener('fetch', async event => {
     const cache_fetch = async() => {
+        const ver = await get_cache_info()
         if (event.request.method != 'GET') {
             return
         }
@@ -42,22 +38,13 @@ const fetch_sw = async event => {
         }
         try {
             const response = await self.fetch(event.request)
-            const cache = await self.caches.open(cache_name)
+            const cache = await self.caches.open(ver.store)
             cache.put(event.request, response.clone())
             return response
         } catch {
-            return self.caches.match('/offline.html')
+            return self.caches.match(ver.offline)
         }
     }
 
     event.respondWith(cache_fetch())
-}
-
-const main = async() => {
-    self.addEventListener('install', install_sw)
-    self.addEventListener('activate', activate_sw)
-    self.addEventListener('fetch', fetch_sw)
-
-}
-
-main()
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/assets/sw_cache.11tydata.js b/src/assets/sw_cache.11tydata.js
new file mode 100644
index 0000000..377753f
--- /dev/null
+++ b/src/assets/sw_cache.11tydata.js
@@ -0,0 +1,22 @@
+const crypto = require('crypto')
+
+module.exports = () => {
+    return {
+        sw_cache: {
+            offline: "/offline.html",
+            default: [
+                "/index.css",
+                "/prism.css",
+                "/index.js",
+                "/favicon.svg",
+                "/offline.html",
+                "/"
+            ],
+        },
+        eleventyComputed: {
+            sw_cache: {
+                store: data => `${data.env.CF_PAGES_BRANCH || "default"}-${data.env.CF_PAGES_COMMIT_SHA || crypto.randomUUID()}`
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/sw_cache.njk b/src/assets/sw_cache.njk
new file mode 100644
index 0000000..52a0e58
--- /dev/null
+++ b/src/assets/sw_cache.njk
@@ -0,0 +1,4 @@
+---
+permalink: /cache.json
+--- 
+{{ sw_cache | tojson | safe }}