manifest icons

Author: dwightjack

package-lock.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "serve": "eleventy --serve",
-    "build": "eleventy"
+    "build": "ELEVENTY_ENV=production eleventy"
   },
   "repository": {
     "type": "git",
@@ -18,12 +18,17 @@
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-img": "^0.6.0",
     "@11ty/eleventy-plugin-rss": "^1.0.7",
+    "esbuild": "^0.8.28",
     "eslint": "^7.16.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-prettier": "^3.1.2",
     "js-yaml": "^3.13.1",
     "luxon": "^1.22.0",
     "prettier": "^2.2.1"
+  },
+  "dependencies": {
+    "workbox-routing": "^6.0.2",
+    "workbox-strategies": "^6.0.2"
   }
 }

package.json

@@ -79,11 +79,14 @@
     {% endif %}
 </script>
 <!-- Icons -->
-<!-- TODO: ADD ICON FILES -->
-<!--<link rel="icon" href="/favicon32.png" sizes="32x32">-->
-<!--<link rel="icon" href="/favicon192.png" sizes="192x192">-->
-<!--<link rel="apple-touch-icon-precomposed" href="/favicon180.png">-->
-<!--<meta name="msapplication-TileImage" content="/favicon270.png">-->
+
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/manifest.json">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
 
 <!-- CSS -->
 <link rel="preconnect" href="https://fonts.gstatic.com">

src/_includes/head.njk

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": 0,
+    "no-shadow": "warn",
+    "block-scoped-var": "error",
+    "consistent-return": "error",
+    "eqeqeq": "error"
+  }
+}

src/_js/.eslintrc

@@ -1,22 +1,18 @@
 /* eslint-disable no-undef */
 const cacheName = 'fevr-v2-cache';
-
-// import workbox
-importScripts(
-  'https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js',
-);
-const { routing, strategies } = workbox;
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
 
 const listRegExp = /^\/(index\.html|eventi\/index\.html)/;
 
-routing.registerRoute(
+registerRoute(
   ({ url }) => !listRegExp.test(url.pathname),
-  new strategies.StaleWhileRevalidate({ cacheName }),
+  new StaleWhileRevalidate({ cacheName }),
 );
 
-routing.registerRoute(
+registerRoute(
   ({ url }) => listRegExp.test(url.pathname),
-  new strategies.NetworkFirst({ cacheName: cacheName + '-list' }),
+  new NetworkFirst({ cacheName: cacheName + '-list' }),
 );
 
 // removes all caches not named <cacheName>

static/service-worker.js src/_js/service-worker.jsstatic/service-worker.js renamed to src/_js/service-worker.js

@@ -0,0 +1,30 @@
+const { resolve } = require('path');
+const esbuild = require('esbuild');
+
+const PRODUCTION = process.env.ELEVENTY_ENV === 'production';
+
+module.exports = class Scripts {
+  data() {
+    return {
+      permalink: '/service-worker.js',
+      eleventyExcludeFromCollections: true,
+    };
+  }
+
+  async render() {
+    const { outputFiles } = await esbuild.build({
+      entryPoints: [resolve(__dirname, './_js/service-worker.js')],
+      bundle: true,
+      minify: PRODUCTION,
+      sourcemap: false,
+      target: ['es2019'],
+      write: false,
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(
+          process.env.ELEVENTY_ENV || 'development',
+        ),
+      },
+    });
+    return outputFiles[0].contents;
+  }
+};

src/service-worker.11ty.js

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>