JanDW · JanDW · Mar 25, 2021 · Mar 26, 2021 · Mar 26, 2021 · Mar 27, 2021
diff --git a/.prettierrc b/.prettierrc
@@ -3,6 +3,6 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 120,
+  "printWidth": 80,
   "arrowParens": "always"
 }
diff --git a/netlify.toml b/netlify.toml
@@ -37,4 +37,4 @@
   [[headers]]
   for = "/*"
   [headers.values]
-    Permissions-Policy = "interest-cohort=()"
+    Permissions-Policy = "interest-cohort=()"
diff --git a/src/_data/site.js b/src/_data/site.js
@@ -1,16 +1,33 @@
+const resolveConfig = require('tailwindcss/resolveConfig');
+const tailwindConfig = require('../../tailwind.config.js');
+
+const cssConfig = resolveConfig(tailwindConfig);
+
 module.exports = {
+  language: 'en-US',
+  directionality: 'ltr',
   name: 'Wild Peaches',
   url: 'https://wildpeaches.xyz',
   email: '[email protected]',
   tagline: 'Mind-sized STEM ideas and experiments, beyond the textbook.',
-  imgDir: '/assets/img/',
+  icon: {
+    url: '/icon.png',
+    sizes: '512x512',
+    type: 'image/png',
+  },
+  favicon: '/favicon.svg',
+  themeColor: cssConfig.theme.colors.primary,
+  backgroundColor: cssConfig.theme.colors.backgroundColor,
+  imageDirectory: '/assets/img/',
+
   authors: [
     {
       firstName: 'Jan',
       lastName: 'De Wilde',
       url: 'https://jandewil.de',
       email: '[email protected]',
-      avatar: 'https://gravatar.com/avatar/0467288626c0cfc671200f96c34dc192?s=512',
+      avatar:
+        'https://gravatar.com/avatar/0467288626c0cfc671200f96c34dc192?s=512',
       social: {
         github: 'https://github.com/jandw',
         twitter: 'https://twitter.com/jandw',

diff --git a/src/_includes/head.html b/src/_includes/head.html
@@ -8,10 +8,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <meta name="google-site-verification" content="5Z_KiijxY41bgn9up8h0wpo_2REAC199OsmISONScjY" />
+  <meta name="theme-color" content="{{ site.themeColor }}" />
   {%- include "meta.html" %}
 
   <style>{{ css | safe }}</style> 
 
+  <link rel="manifest" href="/app.webmanifest">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+  <link rel="icon" href="{{ site.favicon }}">
+  <link rel="mask-icon" href="{{ site.favicon }}" color="{{ site.themeColor }}">
+  <link rel="apple-touch-icon" href="{{ site.icon.url }}">
+
 </head> 
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -4,7 +4,7 @@
 ---
 
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr">
+<html lang="{{ site.language }}" dir="{{ site.directionality }}">
   {% include 'head.html' %}
   <body
     class="text-base sm:text-lg md:text-xl overflow-x-hidden home-font-features {% if bodyClass %}{{ bodyClass }}{% endif %}"

diff --git a/src/app.webmanifest.njk b/src/app.webmanifest.njk
@@ -0,0 +1,20 @@
+---
+eleventyExcludeFromCollections: true
+permalink: /app.webmanifest
+---
+{
+  "lang": "{{ site.language }}",
+  "name": "{{ site.name }}",
+  "short_name": "{{ site.name }}",
+  "description": "{{ site.tagline }}",
+  "theme_color": "{{ site.themeColor }}",
+  "background_color": "{{ site.backgroundColor }}",
+  "start_url": "/",
+  "display": "standalone",
+  "display_override": ["minimal-ui"],
+  "icons": [{
+    "src": "{{ site.icon.url }}",
+    "sizes": "{{ site.icon.sizes }}",
+    "type": "{{ site.icon.type }}"
+  }]
+}
diff --git a/src/assets/siteroot/apple-touch-icon-114x114-precomposed.png b/src/assets/siteroot/apple-touch-icon-114x114-precomposed.png
diff --git a/src/assets/siteroot/apple-touch-icon-144x144-precomposed.png b/src/assets/siteroot/apple-touch-icon-144x144-precomposed.png
diff --git a/src/assets/siteroot/apple-touch-icon-57x57-precomposed.png b/src/assets/siteroot/apple-touch-icon-57x57-precomposed.png
diff --git a/src/assets/siteroot/apple-touch-icon-72x72-precomposed.png b/src/assets/siteroot/apple-touch-icon-72x72-precomposed.png
diff --git a/src/assets/siteroot/apple-touch-icon.png b/src/assets/siteroot/apple-touch-icon.png
diff --git a/src/assets/siteroot/favicon.ico b/src/assets/siteroot/favicon.ico
diff --git a/src/assets/siteroot/favicon.png b/src/assets/siteroot/favicon.png
diff --git a/src/assets/siteroot/favicon.svg b/src/assets/siteroot/favicon.svg
diff --git a/src/assets/siteroot/icon.png b/src/assets/siteroot/icon.png
diff --git a/src/assets/vectors/no-image.svg b/src/assets/vectors/no-image.svg
diff --git a/src/offline.html b/src/offline.html
@@ -4,7 +4,23 @@
 layout: default
 ---
 
-
 <main id="main" class="o-center mb-12">
   <h1>Offline!</h1>
+  <p>You can still read these pages:</p>
+  <ul id="history"></ul>
+  <script>
+    // Open the cache of pages
+    caches.open('pages').then((pagesCache) => {
+      pagesCache.keys().then((keys) => {
+        let markup = '';
+        // Loop through each item in the cache
+        keys.forEach((request) => {
+          // Make a link to the URL of each page
+          markup += `<li><a href="${request.url}">${request.url}</a></li>`;
+        });
+        // Display the list of links
+        document.getElementById('history').innerHTML = markup;
+      }); // end keys then
+    }); // end open
+  </script>
 </main>
diff --git a/src/service-worker.js.njk b/src/service-worker.js.njk
@@ -5,35 +5,90 @@ permalink: /service-worker.js
 
 const version = 'v0.0.1';
 
-const staticCacheName = version + 'staticfiles';
+const staticCacheName = `${version}-staticfiles`;
 const imageCacheName = 'images';
 const pagesCacheName = 'pages';
+const maxPages = 20; // maximum number of pages to cache
+const maxImages = 50; // maximum number of images to cache
 
 const cacheList = [staticCacheName, imageCacheName, pagesCacheName];
+const noImage = 
+
+function updateStaticCache() {
+  return caches.open(staticCacheName).then((staticCache) => {
+    staticCache.addAll(['{{ site.icon.url }}']);
+    return staticCache.addAll([
+      // @todo add fonts
+      '/assets/styles/style.min.css',
+      '/confirmed.html',
+      'offline.html',
+      '/assets/vectors/no-image.svg',
+    ]);
+  });
+}
+
+function clearOldCaches() {
+  return caches.keys().then((cacheNames) => {
+    Promise.all(
+      cacheNames
+        .filter((cacheName) => !cacheList.includes(cacheName))
+        .map((cacheName) => caches.delete(cacheName))
+    );
+  });
+}
+
+
+
+
+function trimCaches(cacheName, maxItems) {
+  cacheName.open( cache => {
+    cache.keys().then( (items) => {
+      if items.length > maxItems {
+        cache.delete(items[0])
+        .then(
+          trimCache(cacheName, maxItems)
+        )
+      }
+    })
+  })
+}
 
 addEventListener('install', (installEvent) => {
-  skipWaiting();
-  installEvent.waitUntil(
-    caches
-      .open(staticCacheName)
-      .then((staticCache) => {
-        staticCache.addAll(['/apple-touch-icon.png']);
-        return staticCache.addAll([
-          '/assets/styles/style.min.css',
-          '/confirmed.html',
-          'offline.html',
-          '/assets/vectors/no-image.svg',
-        ]);
-      })
-      .catch((error) => console.error('Failure'))
-  );
+  installEvent.waitUntil(updateStaticCache()).then(skipWaiting());
 });
 
 addEventListener('fetch', (fetchEvent) => {
   const request = fetchEvent.request;
 
   // is HTML?
   if (request.headers.get('Accept').includes('text/html')) {
+    if (request.url.includes('/blog/')) {
+      fetchEvent.respondWith(
+        caches.match(request).then((responseFromCache) => {
+          if (responseFromCache) {
+            fetchEvent.waitUntil(
+              fetch(request).then((responseFromFetch) => {
+                caches.open(pagesCacheName).then((pagesCache) => {
+                  return pagesCache.put(request, responseFromFetch);
+                });
+              })
+            );
+            console.info('Returned from cache');
+            return responseFromCache;
+          }
+
+          return fetch(request).then((responseFromFetch) => {
+            const copy = responseFromFetch.clone();
+            fetchEvent.waitUntil(
+              caches.open(pagesCacheName).then((pagesCache) => {
+                return pagesCache.put(request, copy);
+              })
+            );
+            return responseFromFetch;
+          });
+        })
+      );
+    }
     fetchEvent.respondWith(
       fetch(request)
         .then((responseFromFetch) => {
@@ -103,21 +158,7 @@ addEventListener('fetch', (fetchEvent) => {
       })
   );
 });
-addEventListener('activate', (activateEvent) => {
-  activateEvent.waitUntil(
-    caches
-      .keys()
-      .then((cacheNames) => {
-        return Promise.all(
-          cacheNames.map((cacheName) => {
-            if (!cacheList.includes(cacheName)) {
-              return caches.delete(cacheName);
-            }
-          })
-        );
-      })
-      .then(() => {
-        return clients.claim();
-      })
-  );
+
+self.addEventListener('activate', (activateEvent) => {
+  activateEvent.waitUntil();
 });
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,11 +4,24 @@ module.exports = {
   // prefix: 't-', /* BEM utility scoping */
   important: true,
   darkMode: 'media',
-  purge: ['./.eleventy.js', './src/**/*.html', './src/**/*.md', './src/**/*.json', './lib/shortcodes/**/*.js'],
+  purge: [
+    './.eleventy.js',
+    './src/**/*.html',
+    './src/**/*.md',
+    './src/**/*.json',
+    './lib/shortcodes/**/*.js',
+  ],
   theme: {
     fontFamily: {
       sans: ['Inter', 'sans-serif'],
-      serif: ['ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      serif: [
+        'ui-serif',
+        'Georgia',
+        'Cambria',
+        'Times New Roman',
+        'Times',
+        'serif',
+      ],
       mono: [
         'ui-monospace',
         'SFMono-Regular',
@@ -33,6 +46,8 @@ module.exports = {
       green: colors.green,
       red: colors.red,
       teal: colors.teal,
+      primary: colors.warmGray[700],
+      backgroundColor: colors.warmGray[50],
     },
     listStyleType: {
       none: 'none',