From: Ben Beltran <redacted>
Date: Tue, 11 Dec 2018 03:04:39 +0000 (+0100)
Subject: Add progressive webapp optimizations
X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/commitdiff_plain/35ed3bd381fa8994619d523c4cfbff0b536b6d3b?hp=bab5978db23d48f91701650ee89341c613e6a5e8

Add progressive webapp optimizations
---

diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html
index 16af887..55eff9c 100644
--- a/jekyll/_layouts/default.html
+++ b/jekyll/_layouts/default.html
@@ -3,11 +3,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="RubÃ©n BeltrÃ¡n del RÃ­o">
     <meta name="description" content="{{ page.description }}">
-    <link rel="stylesheet" type="text/css" href="/css/application.css">
+
+    <meta name="theme-color" content="#db5945">
+
     <title>Unlimited &#127829; {{ page.title }}</title>
 
+    <link rel="manifest" href="/manifest.webmanifest">
+
+    <link rel="stylesheet" type="text/css" href="/css/application.css" media="none" onload="if (media!=='all') { media = 'all'; }">
+    <noscript>
+      <link rel="stylesheet" type="text/css" href="/css/application.css">
+    </noscript>
+
+    <script src="/js/offline_support.js" defer></script>
+
     <!--
         /\
        / O\ U N L I M I T E D
diff --git a/jekyll/css/application.css b/jekyll/css/application.css
index 45a6657..5150064 100644
--- a/jekyll/css/application.css
+++ b/jekyll/css/application.css
@@ -1,4 +1,5 @@
 body {
+  margin: 0;
   background-color: white;
   font-family: times, 'Times New Roman', serif;
   font-smooth: never;
@@ -22,6 +23,7 @@ em {color:#99a3a4}
 h1,
 h2,
 h3 {
+  margin-left: 10px;
   font-weight: 300;
 }
 
@@ -41,6 +43,10 @@ a:visited {
   color: purple;
 }
 
+ul, p {
+  margin-left: 10px;
+}
+
 ul {
   list-style: square;
 }
@@ -48,3 +54,8 @@ ul {
 li {
   line-height: 1.82em;
 }
+
+img,
+video {
+  max-width: 100vw;
+}
diff --git a/jekyll/img/touch/homescreen144.png b/jekyll/img/touch/homescreen144.png
new file mode 100644
index 0000000..2800522
Binary files /dev/null and b/jekyll/img/touch/homescreen144.png differ
diff --git a/jekyll/img/touch/homescreen168.png b/jekyll/img/touch/homescreen168.png
new file mode 100644
index 0000000..d4cb1aa
Binary files /dev/null and b/jekyll/img/touch/homescreen168.png differ
diff --git a/jekyll/img/touch/homescreen192.png b/jekyll/img/touch/homescreen192.png
new file mode 100644
index 0000000..258b4f1
Binary files /dev/null and b/jekyll/img/touch/homescreen192.png differ
diff --git a/jekyll/img/touch/homescreen256.png b/jekyll/img/touch/homescreen256.png
new file mode 100644
index 0000000..46bad52
Binary files /dev/null and b/jekyll/img/touch/homescreen256.png differ
diff --git a/jekyll/img/touch/homescreen48.png b/jekyll/img/touch/homescreen48.png
new file mode 100644
index 0000000..16d3131
Binary files /dev/null and b/jekyll/img/touch/homescreen48.png differ
diff --git a/jekyll/img/touch/homescreen512.png b/jekyll/img/touch/homescreen512.png
new file mode 100644
index 0000000..3dc7409
Binary files /dev/null and b/jekyll/img/touch/homescreen512.png differ
diff --git a/jekyll/img/touch/homescreen72.png b/jekyll/img/touch/homescreen72.png
new file mode 100644
index 0000000..ffd9819
Binary files /dev/null and b/jekyll/img/touch/homescreen72.png differ
diff --git a/jekyll/img/touch/homescreen96.png b/jekyll/img/touch/homescreen96.png
new file mode 100644
index 0000000..cc8b6b1
Binary files /dev/null and b/jekyll/img/touch/homescreen96.png differ
diff --git a/jekyll/index.html b/jekyll/index.html
index 524550f..9fe064f 100644
--- a/jekyll/index.html
+++ b/jekyll/index.html
@@ -63,7 +63,10 @@ description: "unlimited.pizza - ruben beltran del rÃ­o surfs the internet: progr
 
   <h2>Even more stuff.</h2>
 
-  <p><img src="/img/selfie.gif" alt="An image of @pigeonfolk."/></p>
+  <video autoplay muted loop>
+    <source src="/video/selfie.webm" type="video/webm">
+    <source src="/video/selfie.mp4" type="video/mp4">
+  </video>
 
   <p>ð Unlimited pizza ð is brought to you by blood magic, ancient rituals and
   me, RubÃ©n BeltrÃ¡n del RÃ­o. I have words written <span lang="es-mx">(espaÃ±ol e inglÃ©s)</span> on
diff --git a/jekyll/js/offline_support.js b/jekyll/js/offline_support.js
new file mode 100644
index 0000000..b29c04c
--- /dev/null
+++ b/jekyll/js/offline_support.js
@@ -0,0 +1,4 @@
+if ('serviceWorker' in navigator) {
+
+  navigator.serviceWorker.register('/service_worker.js');
+}
diff --git a/jekyll/manifest.webmanifest b/jekyll/manifest.webmanifest
new file mode 100644
index 0000000..fb582ab
--- /dev/null
+++ b/jekyll/manifest.webmanifest
@@ -0,0 +1,52 @@
+{
+  "name": "Unlimited Pizza",
+  "short_name": "Unlmtd ð",
+  "start_url": "/",
+  "display": "minimal-ui",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "description": "unlimited.pizza - ruben beltran del rÃ­o surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza",
+  "lang": "en-US",
+  "icons": [
+    {
+      "src": "img/touch/homescreen48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen168.png",
+      "sizes": "168x168",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "img/touch/homescreen512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/jekyll/service_worker.js b/jekyll/service_worker.js
new file mode 100644
index 0000000..8237198
--- /dev/null
+++ b/jekyll/service_worker.js
@@ -0,0 +1,90 @@
+'use strict';
+
+const internals = {
+  version: '1',
+  offlineEssentials: [
+  '/',
+  '/css/application.css'
+  ],
+
+  // Response for when network is not available
+
+  errorResponse: '<h1>Service Unavailable</h1>',
+
+  // Main entry point, adds event listeners for service worker
+
+  main() {
+
+    self.addEventListener('install', internals.onInstall);
+    self.addEventListener('fetch', internals.onFetch);
+    self.addEventListener('activate', internals.onActivate);
+  },
+
+  // Runs on installation of the service worker
+
+  onInstall(event) {
+
+    event.waitUntil(
+      caches.open(`${internals.version}/essentials`)
+        .then((cache) => {
+
+          return cache.addAll(internals.offlineEssentials)
+        })
+    );
+  },
+
+  // Runs when a path is fetched, returns files from cache
+
+  onFetch(event) {
+
+    if (event.request.method !== 'GET') {
+      return;
+    }
+
+    event.respondWith(
+      caches.match(event.request)
+        .then((cached) => {
+
+          const freshContent = fetch(event.request)
+            .then((response) => {
+
+              caches.open(`${internals.version}/paths`)
+                .then((cache) => cache.put(event.request, response.clone()));
+            }, internals.onFetchFail)
+            .catch(internals.onFetchFail);
+
+            return cached || freshContent;
+        })
+    );
+  },
+
+  onActivate(event) {
+
+    event.waitUntil(
+      caches.keys()
+        .then((keys) => {
+
+          return Promise.all(keys
+            .filter((key) => !key.startsWith(internals.version))
+            .map((key) => caches.delete(key))
+          );
+        })
+    );
+  },
+
+  // Responds with Servie Unavailable if we can't fetch a
+  // file from network
+
+  onFetchFail() {
+
+    return new Response(internals.errorResponse, {
+      status: 503,
+      statusText: 'Service Unavailable',
+      headers: new Headers({
+        'Content-Type': 'text/html'
+      })
+    });
+  }
+};
+
+internals.main();
diff --git a/jekyll/video/selfie.mp4 b/jekyll/video/selfie.mp4
new file mode 100644
index 0000000..1d9edd8
Binary files /dev/null and b/jekyll/video/selfie.mp4 differ
diff --git a/jekyll/video/selfie.webm b/jekyll/video/selfie.webm
new file mode 100644
index 0000000..0aa93b3
Binary files /dev/null and b/jekyll/video/selfie.webm differ
