fingerprint CSS and JS, set one week browser cache

...and LOTS of tidying partials

.github/workflows/ci.yml

@@ -78,9 +78,8 @@ jobs:
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-yarn-
-    - run: |
+    - run: yarn install --no-ignore-optional --frozen-lockfile
-        yarn install --no-ignore-optional --frozen-lockfile
+    - run: yarn build:preview
-        yarn build:preview
     - run: yarn lint
       continue-on-error: true
     - name: Include .percy.yml in artifact

assets/img/safari-pinned-tab.svg

@@ -1,15 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="1364px" height="2048px" viewBox="0 0 1364 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 96 144" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+  <g fill="#000000">
-    <title>safari-pinned-tab</title>
+    <polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
-    <desc>Created with Sketch.</desc>
+    <polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>
-    <g id="export" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
-        <g id="safari-pinned-tab" fill="#000000" fill-rule="nonzero">
+    <polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
-            <polygon id="Path" points="546.103321 158.142388 1091.36777 472.216732 1364 314.502099 818.735547 0"></polygon>
+    <polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
-            <polygon id="Path" points="546.103321 473.986721 819.154982 630.305926 819.154982 1260.50123 1092.20664 1418.64362 1091.36777 472.216732 546.103321 158.142388"></polygon>
+  </g>
-            <polygon id="Path" points="273.051661 1260.50123 0 1101.99509 0 1732.19084 546.103321 2048 546.103321 1733.56002 273.051661 1574.99754"></polygon>
+</svg>
-            <polygon id="Path" points="0 1101.99509 273.051661 1260.50123 546.103321 1101.99509 273.051661 946.004914"></polygon>
-            <polygon id="Path" points="273.051661 1574.99754 546.103321 1733.56002 1092.20664 1418.64362 819.154982 1260.50123"></polygon>
-        </g>
-    </g>
-</svg>

assets/vendor/emoji/emoji.js

@@ -1,7 +1,10 @@
-/*jslint indent: 2, browser: true, bitwise: true, plusplus: true */
+/* jshint indent: 2, browser: true, bitwise: true, plusplus: true */
 
-/*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
+/*!
-    https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
+*
+*  Copyright Twitter Inc. and other contributors. Licensed under MIT.
+*  https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
+*
 */
 
 var emoji = (function (
@@ -14,7 +17,7 @@ var emoji = (function (
 ) {
   'use strict';
 
-  /*jshint maxparams:4 */
+  /* jshint maxparams:4 */
 
   var
     // the exported module object

config.toml

@@ -90,6 +90,8 @@ disableAliases = true
 [mediaTypes]
   [mediaTypes."application/atom+xml"]
     suffixes = ["atom"]
+  [mediaTypes."application/manifest+json"]
+    suffixes = ["webmanifest"]
   [mediaTypes."text/netlify"]
     delimiter = ""
 
@@ -112,8 +114,8 @@ disableAliases = true
     isPlainText = true
     notAlternative = true
   [outputFormats.MANIFEST]
-    mediaType = "application/json"
+    mediaType = "application/manifest+json"   # https://github.com/w3c/manifest/issues/689
-    baseName = "manifest"
+    baseName = "site"   # /site.webmanifest
     isPlainText = true
     notAlternative = true
   [outputFormats.REDIRECTS]

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 {{ printf "<!--\n     ,,,        ,,,\n   ;\"   ^;    ;\"   \",\n  ;     s$$$$$s      ;\n   ,  ss$$$$$$$ss  ,\"\n   ;$$$$$$$$$$$$$$$$\n   $$$$$$$$$$$$$$$$$$           Hello, human. :)\n  $$$$$\"\"\"$$$\"\"\"$$$$$$\n $$$$$  p\"$$$\"q  $$$$$     %s\n  $$$$  .$$$$$.  $$$$\n   $$$$$$$$$$$$$$$$$\n     \"$$$$\"*\"$$$$\"\n        \"$$.$$\"\n-->" ("humans.txt" | absURL) | safeHTML }}
 <html lang="{{ .Site.LanguageCode | default "en" }}">
   <head>
-{{ partial "head/head" . }}
+{{ partial "head/_head" . }}
   </head>
   <body class="light">
 {{ partialCached "page/header" . }}

layouts/_default/single.amp.html

@@ -226,14 +226,13 @@
     {{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32 48") }}
     {{ partialCached "head/feeds" . }}
     <link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
-    {{ partial "head/schema-person" . }}
+    {{ partial "head/schema" . }}
-    {{ partial "head/schema-article" . }}
   </head>
   <body>
     <header>
       <nav>
         <a id="logo" href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">
-          {{ partialCached "page/logo" . }}
+          {{ partialCached "svg/logo.svg" (dict "width" 30 "height" 45) }}
           <span id="name">{{ .Site.Title }}</span>
         </a>
 

layouts/index.headers

@@ -5,18 +5,10 @@
   X-Frame-Options: sameorigin
   X-XSS-Protection: 1; mode=block
 
-# Super long cache (one year) for vendored assets:
+# Long cache (one week) for vendored and fingerprinted assets:
-# web fonts, emojis, etc.
+/css/*
+  Cache-Control: public, max-age=604800, immutable
+/js/*
+  Cache-Control: public, max-age=604800, immutable
 /vendor/*
-  Cache-Control: public, max-age=31536000, immutable
+  Cache-Control: public, max-age=604800, immutable
-
-# Proper MIME type for Atom feed:
-/feed.atom
-  Content-Type: application/atom+xml
-
-# Recommended MIME type for PWA manifests:
-# https://github.com/w3c/manifest/issues/689
-/manifest.json
-  Content-Type: application/manifest+json
-/site.webmanifest
-  Content-Type: application/manifest+json

layouts/partials/head/_head.html

@@ -0,0 +1,11 @@
+{{ partial "head/meta" . -}}
+{{ partial "functions/social-images" . -}}
+{{ partial "head/open-graph" . -}}
+{{ partialCached "head/mobile" . -}}
+{{ partial "head/preload" . -}}
+{{ partial "head/styles" . -}}
+{{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32 48") -}}
+{{ partialCached "head/feeds" . -}}
+{{ partialCached "head/webmention" . -}}
+{{ partial "head/canonical" . -}}
+{{ partial "head/schema" . -}}

layouts/partials/head/canonical.html

@@ -0,0 +1,7 @@
+<link rel="canonical" href="{{ .Permalink }}">
+{{ if and .IsPage (eq .Type .Site.Params.mainSection) }}
+  {{- with .OutputFormats.Get "amp" -}}
+  <link rel="amphtml" href="{{ .Permalink }}">
+  {{ end -}}
+{{ end -}}
+<link rel="author" href="{{ "humans.txt" | absURL }}">

layouts/partials/head/favicons.html

@@ -4,7 +4,6 @@
 {{- $safariIcon := resources.Get "img/safari-pinned-tab.svg" }}
 <link rel="mask-icon" href="{{ $safariIcon.Permalink }}" color="#009cdf">
 
-{{/* TODO: automate shrinking to given sizes based on one super big favicon */}}
 {{- range (split .pngSizes " ") }}
   {{- $faviconPng := resources.Get (printf "img/favicon-%v.png" .) }}
   <link rel="icon" href="{{ $faviconPng.Permalink }}" sizes="{{ . }}x{{ . }}">

layouts/partials/head/head.html

@@ -1,21 +0,0 @@
-{{ partial "head/meta" . -}}
-{{ partial "functions/social-images" . -}}
-{{ partial "head/open-graph" . -}}
-{{ partialCached "head/mobile" . -}}
-{{ partial "head/preload" . -}}
-{{ partial "head/styles" . -}}
-{{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32 48") -}}
-<link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
-<link rel="canonical" href="{{ .Permalink }}">
-{{ partialCached "head/feeds" . -}}
-{{ partialCached "head/webmention" . -}}
-<link rel="author" href="{{ "humans.txt" | absURL }}">
-{{ if and .IsPage (eq .Type .Site.Params.mainSection) }}
-  {{- with .OutputFormats.Get "amp" -}}
-  <link rel="amphtml" href="{{ .Permalink }}">
-  {{- end }}
-  {{ partial "head/schema-person" . }}
-  {{ partial "head/schema-article" . }}
-{{ else }}
-  {{ partial "head/schema-person" . }}
-{{ end -}}

layouts/partials/head/mobile.html

@@ -2,3 +2,4 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
 <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
 <meta name="theme-color" content="#0e6dc2">
+<link rel="manifest" href="{{ "site.webmanifest" | absURL }}">

layouts/partials/head/schema.html

@@ -0,0 +1,6 @@
+{{ if and .IsPage (eq .Type .Site.Params.mainSection) }}
+  {{ partial "head/schema/person" . }}
+  {{ partial "head/schema/article" . }}
+{{ else }}
+  {{ partial "head/schema/person" . }}
+{{ end -}}

layouts/partials/head/styles.html

@@ -1,12 +1,12 @@
-{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
+{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.min.css") | resources.PostCSS (dict "config" "postcss.config.js") | resources.Fingerprint "sha256" }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
 
 {{/* Page-specific styles set via front matter, scoped via SCSS */}}
 {{ with .Params.css }}
   {{- $sass := printf "div#content { %s }" . }}
-  {{- $target := path.Join $.File.Dir "css/inline.scss" }}
+  {{- $target := path.Join $.File.Dir "css/inline.min.scss" }}
 
-  {{- $css := $sass | resources.FromString $target | resources.ToCSS | resources.PostCSS (dict "config" "postcss.config.js") -}}
+  {{- $css := $sass | resources.FromString $target | resources.ToCSS | resources.PostCSS (dict "config" "postcss.config.js") | resources.Fingerprint "sha256" -}}
 
   <link rel="stylesheet" href="{{ $css.Permalink }}">
 {{ end }}

layouts/partials/head/webmention.html

@@ -1,2 +1,2 @@
-<link rel="webmention" href="https://webmention.io/jarv.is/webmention">
 <link rel="pingback" href="https://webmention.io/jarv.is/xmlrpc">
+<link rel="webmention" href="https://webmention.io/jarv.is/webmention">

layouts/partials/page/header.html

@@ -1,7 +1,7 @@
 <header>
   <nav>
     <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
-      {{ partialCached "page/logo" . }}
+      {{ partialCached "svg/logo.svg" (dict "width" 30 "height" 45) }}
       <h1 id="name">{{ .Site.Title }}</h1>
     </a>
     <ul>

layouts/partials/page/logo.html

@@ -1,7 +0,0 @@
-{{ $logo := resources.Get "img/logo.svg" -}}
-{{ $svg := $logo.Content -}}
-{{ $svg = replaceRE "<\\?xml.+\\?>" "" $svg -}}
-{{ $svg = replace $svg "<svg" "<svg width=\"30\" height=\"45\"" -}}
-
-{{ printf "<!-- inlined: %s -->" $logo.Permalink | safeHTML }}
-{{ $svg | safeHTML -}}

layouts/partials/scripts/_bundle.html

@@ -1,5 +1,5 @@
 {{ $darkmode := resources.Get "js/dark-mode.js" }}
 {{ $twemoji := resources.Get "vendor/emoji/emoji.js" | resources.ExecuteAsTemplate "vendor/emoji/emoji.min.js" . }}
 
-{{ $js := slice $darkmode $twemoji | resources.Concat "/js/main.js" }}
+{{ $js := slice $darkmode $twemoji | resources.Concat "/js/main.js" | resources.Minify | resources.Fingerprint "sha256" }}
-<script src="{{ $js.Permalink }}"></script>
+<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>

layouts/partials/svg/logo.svg.html

@@ -0,0 +1,14 @@
+{{ $svg := resources.Get "img/logo.svg" -}}
+{{ $html := $svg.Content -}}
+
+{{/* remove unneeded tags/attributes when SVG is inlined versus a .svg file */}}
+{{ $html = replaceRE "<\\?xml.+\\?>" "" $html -}}
+{{ $html = replaceRE " version=\"(.*?)\"" "" $html -}}
+{{ $html = replaceRE " xmlns=\"(.*?)\"" "" $html -}}
+
+{{ $wxh := printf "<svg width=\"%d\" height=\"%d\"" .width .height }}
+
+{{ $html = replace $html "<svg" $wxh -}}
+
+{{ printf "<!-- auto-inlined from: %s -->" $svg.Permalink | safeHTML }}
+{{ $html | safeHTML -}}

package.json

@@ -22,7 +22,6 @@
     "start": "hugo server --disableFastRender --buildDrafts --buildFuture --port 1337 --bind 0.0.0.0 --verbose",
     "optimize": "run-s optimize:**",
     "optimize:html": "html-minifier --html5 --collapse-whitespace --collapse-boolean-attributes --preserve-line-breaks --minify-css --file-ext html --input-dir public --output-dir public **/*.html",
-    "optimize:js": "terser public/js/main.js --comments '/^!/' --output public/js/main.js",
     "optimize:img": "find ./public -type d ! -path './public/vendor*' | xargs -n1 -P8 -I{} imagemin {}/* --plugin=jpegoptim --plugin.jpegoptim.progressive --plugin.jpegoptim.stripAll --plugin=pngquant --plugin.pngquant.quality={0.1,0.3} --plugin.pngquant.speed=1 --plugin.pngquant.strip --plugin=gifsicle --plugin=svgo --out-dir={}",
     "lint": "run-s lint:**",
     "lint:scss": "stylelint assets/sass/**/* --syntax scss",
@@ -53,8 +52,7 @@
     "rimraf": "^3.0.2",
     "stylelint": "~13.3.3",
     "stylelint-config-sass-guidelines": "~7.0.0",
-    "stylelint-scss": "~3.17.1",
+    "stylelint-scss": "~3.17.1"
-    "terser": "^4.6.12"
   },
   "resolutions": {
     "postcss-clean/postcss": "^7.x"

yarn.lock

@@ -540,11 +540,6 @@ buffer-fill@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
   integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
 
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
 buffer@^5.2.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
@@ -848,15 +843,15 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
+commander@^2.19.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@^5.0.0:
-  version "5.0.0"
+  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.0.0.tgz#dbf1909b49e5044f8fdaf0adc809f0c0722bdfd0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-JrDGPAKjMGSP1G0DUoaceEJ3DZgAfr/q6X7FVk4+U5KxUSKviYGM2k6zWkfyyBHy5rAtzgYJFa1ro2O9PtoxwQ==
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commander@~2.8.1:
   version "2.8.1"
@@ -1258,9 +1253,9 @@ duplexer3@^0.1.4:
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
 electron-to-chromium@^1.3.413:
-  version "1.3.417"
+  version "1.3.418"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.417.tgz#7663efb1e81911d56be8f39d12cdc63b86011ee1"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.418.tgz#840021191f466b803a873e154113620c9f53cec6"
-  integrity sha512-IMNamkpoT3lVSHC16QPx3lbLt/WBuoPtAmMGLbVVJTwKR/rjohP+Y+j4xHSSgvylICvT5HOnnPha+uJMqwmUWg==
+  integrity sha512-i2QrQtHes5fK/F9QGG5XacM5WKEuR322fxTYF9e8O9Gu0mc0WmjjwGpV8c7Htso6Zf2Di18lc3SIPxmMeRFBug==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -4193,20 +4188,12 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-map-support@~0.5.12:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@^0.6.1, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -4670,15 +4657,6 @@ tempfile@^2.0.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
-terser@^4.6.12:
-  version "4.6.12"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.12.tgz#44b98aef8703fdb09a3491bf79b43faffc5b4fee"
-  integrity sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"