create a json file

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

15 files changed, 239 insertions, 256 deletions

diff --git a/.eleventy.js b/.eleventy.js
index 4da8b9b..d913ac6 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -19,6 +19,8 @@ module.exports = eleventyConfig => {
     }).use(markdownattrs))
 
     eleventyConfig.addFilter('datefmt', date => DateTime.fromJSDate(date, { zone: 'utc' }).toFormat("dd LLL yyyy"))
+    eleventyConfig.addFilter("tojson", obj => JSON.stringify(obj))
+
 
     eleventyConfig.addExtension("css", {
         outputFileExtension: "css",
@@ -31,13 +33,17 @@ module.exports = eleventyConfig => {
                     .use(postcssenv)
                     .process(content, {
                         from: filename,
-                        map: data.env.isdevel
+                        map: data.env.NODE_ENV == "develoment"
                     })
 
                 return css.css
             }
     })
 
+    eleventyConfig.setBrowserSyncConfig({
+        snippet: false,
+    });
+
     eleventyConfig.addExtension("mjs", {
         outputFileExtension: "js",
         compileOptions: {
@@ -54,7 +60,7 @@ module.exports = eleventyConfig => {
                             bugfixes: true
                         }]
                     ],
-                    sourceMaps: data.env.isdevel ? "inline" : false,
+                    sourceMaps: data.env.NODE_ENV == "develoment" ? "inline" : false,
                     sourceFileName: filename
                 })
                 return js.code
diff --git a/_headers b/_headers
index f5711e6..cab0f76 100644
--- a/_headers
+++ b/_headers
@@ -2,4 +2,4 @@
   X-Frame-Options: DENY
   X-Content-Type-Options: nosniff
   Permissions-Policy: document-domain=()
-  Content-Security-Policy: default-src 'self'; script-src 'self' static.cloudflareinsights.com; connect-src self cloudflareinsights.com frame-ancestors 'none';
\ No newline at end of file
+  Content-Security-Policy: default-src 'self'; script-src 'self' static.cloudflareinsights.com 'unsafe-inline'; connect-src 'self' cloudflareinsights.com 'unsafe-inline'; frame-ancestors 'none';
\ No newline at end of file
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 }}
diff --git a/src/data/env.js b/src/data/env.js
index 8a3d3c1..91842b4 100644
--- a/src/data/env.js
+++ b/src/data/env.js
@@ -1,6 +1,3 @@
-const { env } = require("process")
+const process = require("process")
 
-module.exports = {
-    isdevel: env.NODE_ENV == "develoment",
-    env: env
-}
\ No newline at end of file
+module.exports = () => process.env
\ No newline at end of file
diff --git a/src/data/err.js b/src/data/err.js
new file mode 100644
index 0000000..0e3fe56
--- /dev/null
+++ b/src/data/err.js
@@ -0,0 +1,121 @@
+module.exports = [{
+        code: "offline",
+        msg: "The Page is offline"
+    },
+    {
+        code: 400,
+        msg: "Bad Request"
+    },
+    {
+        code: 401,
+        msg: "Unauthorized"
+    },
+    {
+        code: 402,
+        msg: "Payment Required"
+    },
+    {
+        code: 403,
+        msg: "Forbidden"
+    },
+    {
+        code: 404,
+        msg: "Not Found"
+    },
+    {
+        code: 405,
+        msg: "Method Not Allowed"
+    },
+    {
+        code: 406,
+        msg: "Not Acceptable"
+    },
+    {
+        code: 407,
+        msg: "Proxy Authentication Required"
+    },
+    {
+        code: 408,
+        msg: "Request Timeout"
+    },
+    {
+        code: 409,
+        msg: "Conflict"
+    },
+    {
+        code: 410,
+        msg: "Gone"
+    },
+    {
+        code: 411,
+        msg: "Length Required"
+    },
+    {
+        code: 412,
+        msg: "Precondition Failed"
+    },
+    {
+        code: 413,
+        msg: "Payload Too Large"
+    },
+    {
+        code: 414,
+        msg: "URI Too Long"
+    },
+    {
+        code: 415,
+        msg: "Unsupported Media Type"
+    },
+    {
+        code: 416,
+        msg: "Range Not Satisfiable"
+    },
+    {
+        code: 417,
+        msg: "Expectation Failed"
+    },
+    {
+        code: 418,
+        msg: "I\"m a teapot"
+    },
+    {
+        code: 421,
+        msg: "Misdirected Request"
+    },
+    {
+        code: 422,
+        msg: "Unprocessable Entity"
+    },
+    {
+        code: 423,
+        msg: "Locked"
+    },
+    {
+        code: 424,
+        msg: "Failed Dependency"
+    },
+    {
+        code: 425,
+        msg: "Too Early"
+    },
+    {
+        code: 426,
+        msg: "Upgrade Required"
+    },
+    {
+        code: 428,
+        msg: "Precondition Required"
+    },
+    {
+        code: 429,
+        msg: "Too Many Requests"
+    },
+    {
+        code: 431,
+        msg: "Request Header Fields Too Large"
+    },
+    {
+        code: 451,
+        msg: "Unavailable For Legal Reasons"
+    }
+]
\ No newline at end of file
diff --git a/src/data/err.json b/src/data/err.json
deleted file mode 100644
index 87e3603..0000000
--- a/src/data/err.json
+++ /dev/null
@@ -1,166 +0,0 @@
-[
-	{
-		"code": "offline",
-		"msg": "The Page is offline"
-	},
-	{
-		"code": 400,
-		"msg": "Bad Request"
-	},
-	{
-		"code": 401,
-		"msg": "Unauthorized"
-	},
-	{
-		"code": 402,
-		"msg": "Payment Required"
-	},
-	{
-		"code": 403,
-		"msg": "Forbidden"
-	},
-	{
-		"code": 404,
-		"msg": "Not Found"
-	},
-	{
-		"code": 405,
-		"msg": "Method Not Allowed"
-	},
-	{
-		"code": 406,
-		"msg": "Not Acceptable"
-	},
-	{
-		"code": 407,
-		"msg": "Proxy Authentication Required"
-	},
-	{
-		"code": 408,
-		"msg": "Request Timeout"
-	},
-	{
-		"code": 409,
-		"msg": "Conflict"
-	},
-	{
-		"code": 410,
-		"msg": "Gone"
-	},
-	{
-		"code": 411,
-		"msg": "Length Required"
-	},
-	{
-		"code": 412,
-		"msg": "Precondition Failed"
-	},
-	{
-		"code": 413,
-		"msg": "Payload Too Large"
-	},
-	{
-		"code": 414,
-		"msg": "URI Too Long"
-	},
-	{
-		"code": 415,
-		"msg": "Unsupported Media Type"
-	},
-	{
-		"code": 416,
-		"msg": "Range Not Satisfiable"
-	},
-	{
-		"code": 417,
-		"msg": "Expectation Failed"
-	},
-	{
-		"code": 418,
-		"msg": "I\"m a teapot"
-	},
-	{
-		"code": 421,
-		"msg": "Misdirected Request"
-	},
-	{
-		"code": 422,
-		"msg": "Unprocessable Entity"
-	},
-	{
-		"code": 423,
-		"msg": "Locked"
-	},
-	{
-		"code": 424,
-		"msg": "Failed Dependency"
-	},
-	{
-		"code": 425,
-		"msg": "Too Early"
-	},
-	{
-		"code": 426,
-		"msg": "Upgrade Required"
-	},
-	{
-		"code": 428,
-		"msg": "Precondition Required"
-	},
-	{
-		"code": 429,
-		"msg": "Too Many Requests"
-	},
-	{
-		"code": 431,
-		"msg": "Request Header Fields Too Large"
-	},
-	{
-		"code": 451,
-		"msg": "Unavailable For Legal Reasons"
-	},
-	{
-		"code": 500,
-		"msg": "Internal Server Error"
-	},
-	{
-		"code": 501,
-		"msg": "Not Implemented"
-	},
-	{
-		"code": 502,
-		"msg": "Bad Gateway"
-	},
-	{
-		"code": 503,
-		"msg": "Service Unavailable"
-	},
-	{
-		"code": 504,
-		"msg": "Gateway Timeout"
-	},
-	{
-		"code": 505,
-		"msg": "HTTP Version Not Supported"
-	},
-	{
-		"code": 506,
-		"msg": "Variant Also Negotiates"
-	},
-	{
-		"code": 507,
-		"msg": "Insufficient Storage"
-	},
-	{
-		"code": 508,
-		"msg": "Loop Detected"
-	},
-	{
-		"code": 510,
-		"msg": "Not Extended"
-	},
-	{
-		"code": 511,
-		"msg": "Network Authentication Required"
-	}
-]
\ No newline at end of file
diff --git a/src/data/metadata.js b/src/data/metadata.js
new file mode 100644
index 0000000..c8403bb
--- /dev/null
+++ b/src/data/metadata.js
@@ -0,0 +1,12 @@
+module.exports = {
+    title: "Sudomsg",
+    url: "https://sudomsg.xyz/",
+    language: "en-GB",
+    description: "Messages from root",
+    feed: "/feed.xml",
+    author: {
+        name: "Marc Pervaz Boocha",
+        email: "mboocha@sudomsg.xyz",
+        url: "https://sudomsg.xyz/about"
+    }
+}
\ No newline at end of file
diff --git a/src/data/metadata.json b/src/data/metadata.json
deleted file mode 100644
index e2d7d6c..0000000
--- a/src/data/metadata.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "title": "Sudomsg",
-  "url": "https://sudomsg.xyz/",
-  "language": "en-GB",
-  "description": "Messages from root",
-  "feed": "/feed.xml",
-  "author": {
-    "name": "Marc Pervaz Boocha",
-    "email": "mboocha@sudomsg.xyz",
-    "url": "https://sudomsg.xyz/about"
-  }
-}
diff --git a/src/data/navigator.js b/src/data/navigator.js
new file mode 100644
index 0000000..2081e7d
--- /dev/null
+++ b/src/data/navigator.js
@@ -0,0 +1,13 @@
+module.exports = [{
+        url: "/",
+        title: "Home"
+    },
+    {
+        url: "/blog/",
+        title: "Blog"
+    },
+    {
+        url: "/about/",
+        title: "About"
+    }
+]
\ No newline at end of file
diff --git a/src/data/navigator.json b/src/data/navigator.json
deleted file mode 100644
index 5fb27a7..0000000
--- a/src/data/navigator.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-  {
-    "url": "/",
-    "title": "Home"
-  },
-  {
-    "url": "/blog/",
-    "title": "Blog"
-  },
-  {
-    "url": "/about/",
-    "title": "About"
-  }
-]
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index 53560f4..98b9c37 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -25,10 +25,10 @@
 	</head>
 	<body>
 		<header>
-			<nav id="menu">
-				<a href="#">Sudomsg</a>
+			<nav class="topnav">
+				<a href="#" id="nav-toogle">Sudomsg</a>
 				{% for nav in navigator %}
-					<a href="{{ nav.url | url }}">{{ nav.title }}</a>
+					<a class="navlinks" href="{{ nav.url | url }}">{{ nav.title }}</a>
 				{% endfor %}
 			</nav>
 		</header>