From 5aeaf2f352e7da0a0d55a7ad2cd7dbd3869b875a Mon Sep 17 00:00:00 2001 From: Marc Pervaz Boocha Date: Sat, 8 Jan 2022 17:27:42 +0530 Subject: add service worker --- src/data/env.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/data/env.js (limited to 'src/data/env.js') diff --git a/src/data/env.js b/src/data/env.js new file mode 100644 index 0000000..f1d2920 --- /dev/null +++ b/src/data/env.js @@ -0,0 +1,8 @@ +const { env } = require("process") + +module.exports = () => { + return { + isdevel: env.NODE_ENV == "develoment", + env: env + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d363d4952fc318c51b6e11165b62ed2902eb23ab Mon Sep 17 00:00:00 2001 From: Marc Pervaz Boocha Date: Sat, 8 Jan 2022 18:37:38 +0530 Subject: fixed sw.js --- .eleventy.js | 6 ++-- src/assets/index.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++ src/assets/sw.11tydata.js | 3 +- src/assets/sw.mjs | 14 ++++----- src/data/env.js | 4 +-- src/index.css | 73 ----------------------------------------------- 6 files changed, 87 insertions(+), 86 deletions(-) create mode 100644 src/assets/index.css delete mode 100644 src/index.css (limited to 'src/data/env.js') diff --git a/.eleventy.js b/.eleventy.js index 96fd134..21850eb 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -37,8 +37,9 @@ module.exports = eleventyConfig => { eleventyConfig.addExtension("mjs", { outputFileExtension: "js", - compile: (content, filename) => - async data => { + compile: (content, filename) => { + return async data => { + console.log(data.page) const js = await babel.transformAsync(content, { presets: [ ["@babel/preset-env", { @@ -53,6 +54,7 @@ module.exports = eleventyConfig => { }) return js.code } + } }) diff --git a/src/assets/index.css b/src/assets/index.css new file mode 100644 index 0000000..7984af2 --- /dev/null +++ b/src/assets/index.css @@ -0,0 +1,73 @@ +:root { + font-family: serif; +} + +@media screen { + body { + max-width: 920px; + min-height: 98vh; + display: flex; + flex-direction: column; + margin: auto; + padding: 0.5rem; + } + main { + flex-grow: 1; + } + :any-link { + color: inherit; + text-decoration: underline; + } + :any-link:hover, + :any-link:active { + font-style: italic; + } + #menu { + background: darkred; + text-decoration: none; + font-weight: bold; + color: white; + 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; + margin-right: 1rem; + padding-left: 0rem; + padding-right: 0rem; + } + #menu :any-link:hover { + text-decoration: none; + } + .err { + color: darkred; + } + @media (prefers-color-scheme: dark) { + :root { + background: black; + color: white; + } + #menu nav { + background: red; + } + .err { + color: red; + } + } +} + +@media print { + header, + nav, + footer { + display: none; + } +} \ No newline at end of file diff --git a/src/assets/sw.11tydata.js b/src/assets/sw.11tydata.js index 3f89dbf..4a20677 100644 --- a/src/assets/sw.11tydata.js +++ b/src/assets/sw.11tydata.js @@ -1,3 +1,4 @@ module.exports = { - "permalink": "/sw.js" + dynamicPermalink: false, + permalink: "/sw.js" } \ No newline at end of file diff --git a/src/assets/sw.mjs b/src/assets/sw.mjs index 432e630..88bf684 100644 --- a/src/assets/sw.mjs +++ b/src/assets/sw.mjs @@ -2,7 +2,7 @@ const cache_name = "v3" const install_sw = async event => { const precache = async() => { - const cache = await caches.open(cache_name); + const cache = await window.caches.open(cache_name); return cache.addAll([ '/index.css', '/prism.css', @@ -20,11 +20,11 @@ const activate_sw = async event => { const cachepreserve = ['v3']; const invalidatecache = async() => { - const keys = await caches.keys() + const keys = await window.caches.keys() Promise.all( keys.map((key) => { if (cachepreserve.indexOf(key) === -1) { - return caches.delete(key) + return window.caches.delete(key) } })) } @@ -36,17 +36,17 @@ const fetch_sw = async event => { if (event.request.method != 'GET') { return } - const cacheres = await caches.match(event.request) + const cacheres = await window.caches.match(event.request) if (cacheres !== undefined) { return cacheres } try { - const response = await fetch(event.request) - const cache = await caches.open(cache_name) + const response = await window.fetch(event.request) + const cache = await window.caches.open(cache_name) cache.put(event.request, response.clone()) return response } catch { - return caches.match('/offline.html') + return window.caches.match('/offline.html') } } diff --git a/src/data/env.js b/src/data/env.js index f1d2920..8a3d3c1 100644 --- a/src/data/env.js +++ b/src/data/env.js @@ -1,8 +1,6 @@ const { env } = require("process") -module.exports = () => { - return { +module.exports = { isdevel: env.NODE_ENV == "develoment", env: env - } } \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 7984af2..0000000 --- a/src/index.css +++ /dev/null @@ -1,73 +0,0 @@ -:root { - font-family: serif; -} - -@media screen { - body { - max-width: 920px; - min-height: 98vh; - display: flex; - flex-direction: column; - margin: auto; - padding: 0.5rem; - } - main { - flex-grow: 1; - } - :any-link { - color: inherit; - text-decoration: underline; - } - :any-link:hover, - :any-link:active { - font-style: italic; - } - #menu { - background: darkred; - text-decoration: none; - font-weight: bold; - color: white; - 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; - margin-right: 1rem; - padding-left: 0rem; - padding-right: 0rem; - } - #menu :any-link:hover { - text-decoration: none; - } - .err { - color: darkred; - } - @media (prefers-color-scheme: dark) { - :root { - background: black; - color: white; - } - #menu nav { - background: red; - } - .err { - color: red; - } - } -} - -@media print { - header, - nav, - footer { - display: none; - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 244bdce8ee0b7bdb26c33b4f337a26e00374c6d0 Mon Sep 17 00:00:00 2001 From: Marc Pervaz Boocha Date: Sun, 9 Jan 2022 08:57:52 +0530 Subject: create a json file Signed-off-by: Marc Pervaz Boocha --- .eleventy.js | 10 ++- _headers | 2 +- src/assets/index.css | 34 +++++--- src/assets/index.mjs | 21 ++--- src/assets/sw.mjs | 51 +++++------- src/assets/sw_cache.11tydata.js | 22 ++++++ src/assets/sw_cache.njk | 4 + src/data/env.js | 7 +- src/data/err.js | 121 +++++++++++++++++++++++++++++ src/data/err.json | 166 ---------------------------------------- src/data/metadata.js | 12 +++ src/data/metadata.json | 12 --- src/data/navigator.js | 13 ++++ src/data/navigator.json | 14 ---- src/layouts/base.njk | 6 +- 15 files changed, 239 insertions(+), 256 deletions(-) create mode 100644 src/assets/sw_cache.11tydata.js create mode 100644 src/assets/sw_cache.njk create mode 100644 src/data/err.js delete mode 100644 src/data/err.json create mode 100644 src/data/metadata.js delete mode 100644 src/data/metadata.json create mode 100644 src/data/navigator.js delete mode 100644 src/data/navigator.json (limited to 'src/data/env.js') 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 @@
-
-- cgit v1.2.3-70-g09d2