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/about.md | 1 + src/assets/assets.11tydata.json | 3 + src/assets/atom.njk | 26 ++++++++ src/assets/error.md | 11 ++++ src/assets/index.mjs | 13 ++++ src/assets/json.njk | 30 ++++++++++ src/assets/manifest.njk | 29 +++++++++ src/assets/prism.css | 130 ++++++++++++++++++++++++++++++++++++++++ src/assets/robot.njk | 6 ++ src/assets/sitemap.njk | 14 +++++ src/assets/sw.11tydata.json | 3 + src/assets/sw.mjs | 63 +++++++++++++++++++ src/blog.njk | 7 +-- src/css.11ty.js | 36 ----------- src/data/env.js | 8 +++ src/error.md | 12 ---- src/feed.njk | 27 --------- src/index.css | 121 ++++++++++++++++++++----------------- src/js.11ty.js | 35 ----------- src/layouts/base.njk | 41 +++++++++---- src/layouts/post.njk | 2 +- src/post/hello_world.md | 2 +- src/post/post.11tydata.js | 8 +++ src/post/post.json | 3 - src/prism.css | 130 ---------------------------------------- src/robot.njk | 7 --- src/sitemap.njk | 15 ----- 27 files changed, 446 insertions(+), 337 deletions(-) create mode 100644 src/assets/assets.11tydata.json create mode 100644 src/assets/atom.njk create mode 100644 src/assets/error.md create mode 100644 src/assets/index.mjs create mode 100644 src/assets/json.njk create mode 100644 src/assets/manifest.njk create mode 100644 src/assets/prism.css create mode 100644 src/assets/robot.njk create mode 100644 src/assets/sitemap.njk create mode 100644 src/assets/sw.11tydata.json create mode 100644 src/assets/sw.mjs delete mode 100644 src/css.11ty.js create mode 100644 src/data/env.js delete mode 100644 src/error.md delete mode 100644 src/feed.njk delete mode 100644 src/js.11ty.js create mode 100644 src/post/post.11tydata.js delete mode 100644 src/post/post.json delete mode 100644 src/prism.css delete mode 100644 src/robot.njk delete mode 100644 src/sitemap.njk (limited to 'src') diff --git a/src/about.md b/src/about.md index 4524f7a..207b2e3 100644 --- a/src/about.md +++ b/src/about.md @@ -6,3 +6,4 @@ tags: --- # About Me +This Marc Pervaz Boocha diff --git a/src/assets/assets.11tydata.json b/src/assets/assets.11tydata.json new file mode 100644 index 0000000..45b2b90 --- /dev/null +++ b/src/assets/assets.11tydata.json @@ -0,0 +1,3 @@ +{ + "eleventyExcludeFromCollections": true +} \ No newline at end of file diff --git a/src/assets/atom.njk b/src/assets/atom.njk new file mode 100644 index 0000000..4e517ca --- /dev/null +++ b/src/assets/atom.njk @@ -0,0 +1,26 @@ +--- +permalink: /feed.xml +--- + + + {{ metadata.title }} + {{ metadata.description }} + + + {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }} + {{ metadata.url }} + + {{ metadata.author.name }} + {{ metadata.author.email }} + + {% for post in collections.posts %} + {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %} + + {{ post.data.title }} + + {{ post.date | dateToRfc3339 }} + {{ '/' | url | absoluteUrl(metadata.url) }} + + + {% endfor %} + diff --git a/src/assets/error.md b/src/assets/error.md new file mode 100644 index 0000000..65655f3 --- /dev/null +++ b/src/assets/error.md @@ -0,0 +1,11 @@ +--- +layout: base.njk +pagination: + data: err + size: 1 + alias: error +permalink: "/{{ error.code }}.html" +--- +# ERROR: {{ error.code }} {.err} + +{{ error.msg }} diff --git a/src/assets/index.mjs b/src/assets/index.mjs new file mode 100644 index 0000000..99a92fc --- /dev/null +++ b/src/assets/index.mjs @@ -0,0 +1,13 @@ +const main = async () => { + window.addEventListener('load', async () => { + if ('serviceWorker' in navigator) { + try { + var sw = await navigator.serviceWorker.register('/sw.js') + } catch { + console.log("Service Worker failed to register") + } + } + }) +} + +main() diff --git a/src/assets/json.njk b/src/assets/json.njk new file mode 100644 index 0000000..6d8c7ec --- /dev/null +++ b/src/assets/json.njk @@ -0,0 +1,30 @@ +--- +permalink: /feed.json +--- +{ + "version": "https://jsonfeed.org/version/1.1", + "title": "{{ metadata.title }}", + "language": "{{ metadata.language }}", + "home_page_url": "{{ "/" | url | absoluteUrl(metadata.url) }}", + "feed_url": "{{ permalink | url | absoluteUrl(metadata.url) }}", + "description": "{{ metadata.description }}", + "author": { + "name": "{{ metadata.author.name }}" + }, + "items": [ + {%- for post in collections.posts | reverse %} + {%- set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset -%} + { + "id": "{{ absolutePostUrl }}", + "url": "{{ absolutePostUrl }}", + "title": "{{ post.data.title }}", + "content_html": {% if post.templateContent %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }} + {% else %}""{% endif %}, + "date_published": "{{ post.date | rssDate }}" + } + {%- if not loop.last -%} + , + {%- endif -%} +{%- endfor %} +] +} diff --git a/src/assets/manifest.njk b/src/assets/manifest.njk new file mode 100644 index 0000000..3942d06 --- /dev/null +++ b/src/assets/manifest.njk @@ -0,0 +1,29 @@ +--- +permalink: /app.webmanifest +--- +{ + "$schema": "https://json.schemastore.org/web-manifest-combined.json", + "name": "{{ metadata.title }}", + + "lang": "en-GB", + "start_url": "{{ '/' | url }}", + "id": "{{ '/' | url }}", + "scope": "{{ '/' | url }}", + "display": "minimal-ui", + "background_color": "red", + "theme_color": "red", + "description": "{{ metadata.description }}", + "icons": [ + { + "src": "{{ '/favicon.ico' | url }}", + "sizes": "256x256", + "type": "image/vnd.microsoft.icon" + }, + { + "src": "{{ '/favicon.svg' | url }}", + "sizes": "any", + "type": "image/svg+xml" + } + ] + +} diff --git a/src/assets/prism.css b/src/assets/prism.css new file mode 100644 index 0000000..431fe8a --- /dev/null +++ b/src/assets/prism.css @@ -0,0 +1,130 @@ +code[class*="language-"],pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + tab-size: 4; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"],pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment,.token.prolog,.token.doctype,.token.cdata { + color: #8292a2; +} + +.token.punctuation { + color: #f8f8f2; +} + +.token.namespace { + opacity: .7; +} + +.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted { + color: #f92672; +} + +.token.boolean,.token.number { + color: #ae81ff; +} + +.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted { + color: #a6e22e; +} + +.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable { + color: #f8f8f2; +} + +.token.atrule,.token.attr-value,.token.function,.token.class-name { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex,.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +@media screen and (prefers-color-scheme: dark){ + code[class*="language-"],pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + } + + :not(pre) > code[class*="language-"], pre[class*="language-"] { + background: #f5f2f0; + } + + .token.comment,.token.prolog,.token.doctype,.token.cdata { + color: slategray; + } + + .token.punctuation { + color: #999; + } + + .token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted { + color: #905; + } + + .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted { + color: #690; + } + + .token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); + } + + .token.atrule,.token.attr-value,.token.keyword { + color: #07a; + } + + .token.function,.token.class-name { + color: #DD4A68; + } + + .token.regex,.token.important,.token.variable { + color: #e90; + } +} \ No newline at end of file diff --git a/src/assets/robot.njk b/src/assets/robot.njk new file mode 100644 index 0000000..dcaa728 --- /dev/null +++ b/src/assets/robot.njk @@ -0,0 +1,6 @@ +--- +permalink: /robot.txt +--- +User-agent: * +Allow: / +Sitemap: {{ "/"| url | absoluteUrl(metadata.url) }}/sitemap.xml \ No newline at end of file diff --git a/src/assets/sitemap.njk b/src/assets/sitemap.njk new file mode 100644 index 0000000..910b238 --- /dev/null +++ b/src/assets/sitemap.njk @@ -0,0 +1,14 @@ +--- +permalink: /sitemap.xml +--- + + +{%- for page in collections.all %} + {% set absoluteUrl %}{{ page.url | url | absoluteUrl(metadata.url) }}{% endset %} + + {{ absoluteUrl }} + {{ page.date | datefmt }} + +{%- endfor %} + + diff --git a/src/assets/sw.11tydata.json b/src/assets/sw.11tydata.json new file mode 100644 index 0000000..55b70b5 --- /dev/null +++ b/src/assets/sw.11tydata.json @@ -0,0 +1,3 @@ +{ + "permalink": "/sw.js" +} \ No newline at end of file diff --git a/src/assets/sw.mjs b/src/assets/sw.mjs new file mode 100644 index 0000000..432e630 --- /dev/null +++ b/src/assets/sw.mjs @@ -0,0 +1,63 @@ +const cache_name = "v3" + +const install_sw = async event => { + const precache = async() => { + const cache = await caches.open(cache_name); + return cache.addAll([ + '/index.css', + '/prism.css', + '/index.js', + '/sw.js', + '/favicon.svg', + '/offline.html', + '/' + ]) + } + event.waitUntil(precache()) +} + +const activate_sw = async event => { + const cachepreserve = ['v3']; + + const invalidatecache = async() => { + const keys = await caches.keys() + Promise.all( + keys.map((key) => { + if (cachepreserve.indexOf(key) === -1) { + return caches.delete(key) + } + })) + } + event.waitUntil(invalidatecache()) +} + +const fetch_sw = async event => { + const cache_fetch = async() => { + if (event.request.method != 'GET') { + return + } + const cacheres = await caches.match(event.request) + if (cacheres !== undefined) { + return cacheres + } + try { + const response = await fetch(event.request) + const cache = await caches.open(cache_name) + cache.put(event.request, response.clone()) + return response + } catch { + return caches.match('/offline.html') + } + } + + 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 diff --git a/src/blog.njk b/src/blog.njk index d2ac3e7..f4b9ad5 100644 --- a/src/blog.njk +++ b/src/blog.njk @@ -4,9 +4,8 @@ title: Blog tags: - navigator --- - + diff --git a/src/css.11ty.js b/src/css.11ty.js deleted file mode 100644 index 3a5b9df..0000000 --- a/src/css.11ty.js +++ /dev/null @@ -1,36 +0,0 @@ -const fs = require('fs') -const path = require('path') -const postcss = require('postcss') - -module.exports = class { - async data() { - return { - inputs: [ - 'index.css', - 'prism.css' - ], - - pagination: { - data: 'inputs', - alias: 'inputfiles', - size: 1 - }, - - permalink: ({ inputfiles }) => `/${inputfiles}`, - - eleventyExcludeFromCollections: true - } - }; - - async render({ inputfiles}) { - const inputfile = path.join(__dirname, inputfiles); - return await postcss([ - require('postcss-import'), - require('autoprefixer'), - ]) - .process(await fs.readFileSync(inputfile), { - from: inputfile - }) - .then(result => result.css) - }; -} 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 diff --git a/src/error.md b/src/error.md deleted file mode 100644 index a84fe07..0000000 --- a/src/error.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: base.njk -pagination: - data: err - size: 1 - alias: error -permalink: "/{{ error.code }}.html" -eleventyExcludeFromCollections: true ---- -# ERROR: {{ error.code }} {.err} - -{{ error.msg }} diff --git a/src/feed.njk b/src/feed.njk deleted file mode 100644 index 120c33b..0000000 --- a/src/feed.njk +++ /dev/null @@ -1,27 +0,0 @@ ---- -permalink: /feed.xml -eleventyExcludeFromCollections: true ---- - - - {{ metadata.title }} - {{ metadata.description }} - - - {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }} - {{ metadata.url }} - - {{ metadata.author.name }} - {{ metadata.author.email }} - - {% for post in collections.posts %} - {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %} - - {{ post.data.title }} - - {{ post.date | dateToRfc3339 }} - {{ '/' | url | absoluteUrl(metadata.url) }} - {{ post.templateContent | htmlToAbsoluteUrls( absolutePostUrl ) }} - - {% endfor %} - diff --git a/src/index.css b/src/index.css index a55d276..7984af2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,62 +1,73 @@ :root { - font-family: sans-serif; + font-family: serif; } @media screen { - - body { - max-width: 920px; - margin: auto; - padding: 0.5rem; - } - - :any-link { - color: inherit; - text-decoration: underline; - } - - .menu :any-link { - text-decoration: inherit; - } - - .menu ul { - background: darkred; - color: white; - padding: 1rem; - font-size: 1rem; - } - - .menu li { - display: inline; - margin-right: 1rem; - padding-left: 0rem; - padding-right: 0rem; - } - - .err { - color: darkred; - } - - @media (prefers-color-scheme: dark) { - :root { - background: black; - color: white; - } - - .menu ul { - background: red; - } - - .err { - color: red; - } - - } + 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; - } -} - + header, + nav, + footer { + display: none; + } +} \ No newline at end of file diff --git a/src/js.11ty.js b/src/js.11ty.js deleted file mode 100644 index b4b04c7..0000000 --- a/src/js.11ty.js +++ /dev/null @@ -1,35 +0,0 @@ -const fs = require('fs') -const path = require('path') -const postcss = require('postcss') - -module.exports = class { - async data() { - return { - inputs: [ - ], - - pagination: { - data: 'inputs', - alias: 'inputfiles', - size: 1 - }, - - permalink: ({ inputfiles }) => `/${inputfiles}.css`, - - eleventyExcludeFromCollections: true - } - }; - - async render({ inputfiles}) { - const inputfile = path.join(__dirname, inputfiles); - return await postcss([ - require('postcss-import'), - require('autoprefixer'), - require('cssnano') - ]) - .process(await fs.readFileSync(inputfile), { - from: inputfile - }) - .then(result => result.css) - }; -} diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 10e448f..879d2d5 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -2,28 +2,47 @@ + {{ title or metadata.title }} + + + + + + + - - - + + + + {% if syntaxhighlight %}{% endif %} +
- +
- {{ content | safe }} + {{ content | safe }}
+ + {% if not env.isdevel %} + + + + {% endif %} - - + \ No newline at end of file diff --git a/src/layouts/post.njk b/src/layouts/post.njk index b2eb5e5..70e3be8 100644 --- a/src/layouts/post.njk +++ b/src/layouts/post.njk @@ -6,7 +6,7 @@ tags:

{{ title }}

- - {{ metadata.author.name }} + - {{ metadata.author.name }} {{ content | safe }}
diff --git a/src/post/hello_world.md b/src/post/hello_world.md index 923ad0b..741c490 100644 --- a/src/post/hello_world.md +++ b/src/post/hello_world.md @@ -4,5 +4,5 @@ description: The First Post to the World date: 2021-09-12 --- This is the first post on my blog. - + Eleventy is super fresh init. diff --git a/src/post/post.11tydata.js b/src/post/post.11tydata.js new file mode 100644 index 0000000..68f56d2 --- /dev/null +++ b/src/post/post.11tydata.js @@ -0,0 +1,8 @@ +const slugify = require("@sindresorhus/slugify") + +module.exports = () => ({ + layout: "post.njk", + eleventyComputed: { + permalink: data => `/posts/${slugify(data.title)}/` + } +}) \ No newline at end of file diff --git a/src/post/post.json b/src/post/post.json deleted file mode 100644 index 60ff6df..0000000 --- a/src/post/post.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "layout": "post.njk" -} \ No newline at end of file diff --git a/src/prism.css b/src/prism.css deleted file mode 100644 index 431fe8a..0000000 --- a/src/prism.css +++ /dev/null @@ -1,130 +0,0 @@ -code[class*="language-"],pre[class*="language-"] { - color: #f8f8f2; - background: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - tab-size: 4; - hyphens: none; -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*="language-"],pre[class*="language-"] { - background: #272822; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment,.token.prolog,.token.doctype,.token.cdata { - color: #8292a2; -} - -.token.punctuation { - color: #f8f8f2; -} - -.token.namespace { - opacity: .7; -} - -.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted { - color: #f92672; -} - -.token.boolean,.token.number { - color: #ae81ff; -} - -.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted { - color: #a6e22e; -} - -.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable { - color: #f8f8f2; -} - -.token.atrule,.token.attr-value,.token.function,.token.class-name { - color: #e6db74; -} - -.token.keyword { - color: #66d9ef; -} - -.token.regex,.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -@media screen and (prefers-color-scheme: dark){ - code[class*="language-"],pre[class*="language-"] { - color: black; - text-shadow: 0 1px white; - } - - :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; - } - - .token.comment,.token.prolog,.token.doctype,.token.cdata { - color: slategray; - } - - .token.punctuation { - color: #999; - } - - .token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted { - color: #905; - } - - .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted { - color: #690; - } - - .token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); - } - - .token.atrule,.token.attr-value,.token.keyword { - color: #07a; - } - - .token.function,.token.class-name { - color: #DD4A68; - } - - .token.regex,.token.important,.token.variable { - color: #e90; - } -} \ No newline at end of file diff --git a/src/robot.njk b/src/robot.njk deleted file mode 100644 index 79c49c0..0000000 --- a/src/robot.njk +++ /dev/null @@ -1,7 +0,0 @@ ---- -permalink: /robot.txt -eleventyExcludeFromCollections: true ---- -User-agent: * -Allow: / -Sitemap: {{ "/"| url | absoluteUrl(metadata.url) }}/sitemap.xml \ No newline at end of file diff --git a/src/sitemap.njk b/src/sitemap.njk deleted file mode 100644 index b2ff291..0000000 --- a/src/sitemap.njk +++ /dev/null @@ -1,15 +0,0 @@ ---- -permalink: /sitemap.xml -eleventyExcludeFromCollections: true ---- - - -{%- for page in collections.all %} - {% set absoluteUrl %}{{ page.url | url | absoluteUrl(metadata.url) }}{% endset %} - - {{ absoluteUrl }} - {{ page.date | datefmt }} - -{%- endfor %} - - -- cgit v1.2.3-70-g09d2