Merge pull request #9 from thegeeklab/cache-busting

Cache busting

.gitignore

@@ -2,7 +2,7 @@
 .swp
 .env*
 dist/
-tmp/
+build/
 node_modules/
 lhci_reports/
 exampleSite/themes/
@@ -10,11 +10,15 @@ exampleSite/public/
 
 # auto-generated files
 layouts/partials/icons-svg-symbols.html
-static/main.*
+assets/*.css
+static/*.css
+!static/custom.css
+static/js/*.js
 static/favicon/
 static/fonts/GeekblogIcons.*
 resources/
 exampleSite/resources/
+data/assets.json
 
 # testing
 .lighthouseci/

.tarignore

@@ -11,4 +11,6 @@ node*
 local*
 dist
 src
-tmp
+build
+renovate*
+resources

CHANGELOG.md

@@ -1,14 +1,5 @@
 - ENHANCEMENT
-  - add node `gulp` script to package.json
-  - remove `title` and set empty `alt` tag on branding image
-  - add minimal working css for printing
-  - split out mobile css
   - load static css/js assets from data template:
-    This way users can hash static assets and overwrite the data template
+    Build-in assets are now hashed by default. The static assets are located
-    to deliver the hashed assets. Thats helpful if you have to deal with
+    in the `assets` directory. The theme will read and use the hashed files
-    long cache settings but wont to ensure your updated assets are delivered
+    from `data/assets.json`. Exception: `custom.css` will be used unhashed.
-    to clients.
-- BUGFIX
-  - use relative URL's for fonts
-- INTERNAL
-  - publish Lighthouse CI overwiew to PR's

data/assets-static.json

@@ -0,0 +1,3 @@
+{
+  "custom.css": "custom.css"
+}

data/assets.json

@@ -1,8 +0,0 @@
-{
-  "main.min.css": "main.min.css",
-  "mobile.min.css": "mobile.min.css",
-  "print.min.css": "print.min.css",
-  "custom.css": "custom.css",
-  "js/clipboard.min.js": "js/clipboard.min.js",
-  "js/mermaid.min.js": "js/mermaid.min.js"
-}

gulpfile.js

@@ -4,15 +4,17 @@ const sass = require("gulp-sass");
 const cleanCSS = require("gulp-clean-css");
 const autoprefixer = require("gulp-autoprefixer");
 const iconfont = require("gulp-iconfont");
+const clean = require("gulp-clean");
 
 const realFavicon = require("gulp-real-favicon");
 const path = require("path");
 const fs = require("fs");
 
 const svgSprite = require("gulp-svg-sprite");
+const rev = require("gulp-rev");
 
-var CSSDEST = "static/";
+var CSSDEST = "assets/";
-var FAVICON_DATA_FILE = "tmp/faviconData.json";
+var FAVICON_DATA_FILE = "build/faviconData.json";
 var TIMESTAMP = Math.round(Date.now() / 1000);
 
 gulp.task("sass", function () {
@@ -120,7 +122,7 @@ gulp.task("svg-sprite", function () {
         padding: 5,
         box: "content",
       },
-      dest: "tmp/intermediate-svg",
+      dest: "build/intermediate-svg",
     },
     svg: {
       xmlDeclaration: false,
@@ -169,23 +171,52 @@ gulp.task("iconfont", function () {
     .pipe(
       iconfont({
         startUnicode: lastUnicode,
-        fontName: "GeekblogIcons", // required
+        fontName: "GeekblogIcons",
-        prependUnicode: true, // recommended option
+        prependUnicode: true,
         normalize: true,
         fontHeight: 1001,
         centerHorizontally: true,
-        formats: ["woff", "woff2"], // default, 'woff2' and 'svg' are available
+        formats: ["woff", "woff2"],
-        timestamp: TIMESTAMP, // recommended to get consistent builds when watching files
+        timestamp: TIMESTAMP,
       })
     )
     .pipe(gulp.dest("static/fonts/"));
 });
 
+gulp.task("asset-rev", function () {
+  return gulp
+    .src(["assets/*.min.css", "assets/js/*.min.js"], {
+      base: "static",
+    })
+    .pipe(gulp.dest("build/assets"))
+    .pipe(rev())
+    .pipe(gulp.dest("static"))
+    .pipe(
+      rev.manifest("data/assets-static.json", {
+        base: "data",
+        merge: true,
+      })
+    )
+    .pipe(rename("assets.json"))
+    .pipe(gulp.dest("data"));
+});
+
+gulp.task("asset-rm", function () {
+  return gulp
+    .src(["build/assets", "static/js/*-*.js", "static/*-*.css"], {
+      read: false,
+      allowEmpty: true,
+    })
+    .pipe(clean());
+});
+
+gulp.task("asset", gulp.series("asset-rm", "asset-rev"));
+
 gulp.task(
   "default",
-  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate")
+  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate", "asset")
 );
 
 gulp.task("devel", function () {
-  gulp.watch("src/sass/**/*.*css", gulp.series("sass"));
+  gulp.watch("src/sass/**/*.*css", gulp.series("sass", "asset"));
 });

package-lock.json

@@ -1840,6 +1840,15 @@
         "parse-filepath": "^1.0.1"
       }
     },
+    "first-chunk-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz",
+      "integrity": "sha1-G97NuOCDwGZLkZRVgVd6Q6nzHXA=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "flagged-respawn": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
@@ -2786,6 +2795,71 @@
         }
       }
     },
+    "gulp-clean": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/gulp-clean/-/gulp-clean-0.4.0.tgz",
+      "integrity": "sha512-DARK8rNMo4lHOFLGTiHEJdf19GuoBDHqGUaypz+fOhrvOs3iFO7ntdYtdpNxv+AzSJBx/JfypF0yEj9ks1IStQ==",
+      "dev": true,
+      "requires": {
+        "fancy-log": "^1.3.2",
+        "plugin-error": "^0.1.2",
+        "rimraf": "^2.6.2",
+        "through2": "^2.0.3",
+        "vinyl": "^2.1.0"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz",
+          "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.0.1",
+            "array-slice": "^0.2.3"
+          }
+        },
+        "arr-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz",
+          "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=",
+          "dev": true
+        },
+        "array-slice": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
+          "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
+          "dev": true
+        },
+        "extend-shallow": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz",
+          "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^1.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+          "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=",
+          "dev": true
+        },
+        "plugin-error": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz",
+          "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=",
+          "dev": true,
+          "requires": {
+            "ansi-cyan": "^0.1.1",
+            "ansi-red": "^0.1.1",
+            "arr-diff": "^1.0.1",
+            "arr-union": "^2.0.1",
+            "extend-shallow": "^1.1.2"
+          }
+        }
+      }
+    },
     "gulp-clean-css": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz",
@@ -2855,6 +2929,22 @@
       "integrity": "sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==",
       "dev": true
     },
+    "gulp-rev": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-rev/-/gulp-rev-9.0.0.tgz",
+      "integrity": "sha512-Ytx/uzDA2xNxHlPG8GReS1ut00msd0HlKDk9Ai/0xF2yvg+DAeGRAviCFlQzQmdZtqAoXznYspwWoGEoxDvhyA==",
+      "dev": true,
+      "requires": {
+        "modify-filename": "^1.1.0",
+        "plugin-error": "^1.0.1",
+        "rev-hash": "^2.0.0",
+        "rev-path": "^2.0.0",
+        "sort-keys": "^2.0.0",
+        "through2": "^2.0.0",
+        "vinyl": "^2.1.0",
+        "vinyl-file": "^3.0.0"
+      }
+    },
     "gulp-sass": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
@@ -3460,6 +3550,12 @@
         }
       }
     },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "dev": true
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -4456,6 +4552,12 @@
         }
       }
     },
+    "modify-filename": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modify-filename/-/modify-filename-1.1.0.tgz",
+      "integrity": "sha1-mi3sg4Bvuy2XXyK+7IWcoms5OqE=",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -5590,6 +5692,21 @@
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
       "dev": true
     },
+    "rev-hash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rev-hash/-/rev-hash-2.0.0.tgz",
+      "integrity": "sha1-dyCiNu0MJY3z5kvsA+wEiwW5JMQ=",
+      "dev": true
+    },
+    "rev-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rev-path/-/rev-path-2.0.0.tgz",
+      "integrity": "sha512-G5R2L9gYu9kEuqPfIFgO9gO+OhBWOAT83HyauOQmGHO6y9Fsa4acv+XsmNhNDrod0HDh1/VxJRmsffThzeHJlQ==",
+      "dev": true,
+      "requires": {
+        "modify-filename": "^1.0.0"
+      }
+    },
     "rfg-api": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/rfg-api/-/rfg-api-0.5.0.tgz",
@@ -6195,6 +6312,15 @@
         }
       }
     },
+    "sort-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
+      "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "^1.0.0"
+      }
+    },
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6447,6 +6573,25 @@
         "is-utf8": "^0.2.0"
       }
     },
+    "strip-bom-buf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz",
+      "integrity": "sha1-HLRar1dTD0yvhsf3UXnSyaUd1XI=",
+      "dev": true,
+      "requires": {
+        "is-utf8": "^0.2.1"
+      }
+    },
+    "strip-bom-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-stream/-/strip-bom-stream-2.0.0.tgz",
+      "integrity": "sha1-+H217yYT9paKpUWr/h7HKLaoKco=",
+      "dev": true,
+      "requires": {
+        "first-chunk-stream": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      }
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -7278,6 +7423,19 @@
         "replace-ext": "^1.0.0"
       }
     },
+    "vinyl-file": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vinyl-file/-/vinyl-file-3.0.0.tgz",
+      "integrity": "sha1-sQTZ5ECf+jJfqt1SBkLQo7SIs2U=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "pify": "^2.3.0",
+        "strip-bom-buf": "^1.0.0",
+        "strip-bom-stream": "^2.0.0",
+        "vinyl": "^2.0.1"
+      }
+    },
     "vinyl-fs": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz",

package.json

@@ -16,11 +16,13 @@
   "devDependencies": {
     "gulp": "4.0.2",
     "gulp-autoprefixer": "7.0.1",
+    "gulp-clean": "^0.4.0",
     "gulp-clean-css": "4.3.0",
     "gulp-concat": "2.6.1",
     "gulp-iconfont": "10.0.3",
     "gulp-real-favicon": "0.3.2",
     "gulp-rename": "2.0.0",
+    "gulp-rev": "^9.0.0",
     "gulp-sass": "4.1.0",
     "gulp-svg-sprite": "1.5.0",
     "prettier": "2.2.0",

static/mobile.css

@@ -1,61 +0,0 @@
-@media screen and (max-width:45rem) {
-  .gblog-brand {
-    font-size: 2.2rem
-  }
-  .gblog-nav .container {
-    padding: 0
-  }
-  .gblog-nav__list {
-    background: #454b5b;
-    flex-direction: column;
-    justify-content: center;
-    max-height: 0;
-    overflow: hidden
-  }
-  .gblog-nav__entry {
-    padding: 1rem 0;
-    border: 0;
-    border-radius: 0;
-    display: block;
-    margin: 0;
-    text-align: center
-  }
-  .gblog-nav__entry.is-active,
-  .gblog-nav__entry:hover {
-    background: #3a3f4d
-  }
-  .gblog-nav__control {
-    display: block;
-    text-align: center
-  }
-  .gblog-nav__control label {
-    padding: 1rem 0
-  }
-  .gblog-error {
-    padding: 6rem 1rem
-  }
-  .gblog-error .icon {
-    font-size: 5rem
-  }
-  .gblog-error__message {
-    padding-left: 2rem
-  }
-  .gblog-error__line {
-    padding: .25rem 0
-  }
-  .gblog-error__title {
-    font-size: 2rem
-  }
-  .gblog-footer__item {
-    width: 100%
-  }
-}
-#menu-control:checked ~ .gblog-nav__list {
-  max-height: 100%
-}
-#menu-control:checked ~ .gblog-nav__control .icon.menu {
-  display: none
-}
-#menu-control:checked ~ .gblog-nav__control .icon.clear {
-  display: inline-block
-}

static/mobile.min.css

@@ -1 +0,0 @@
-@media screen and (max-width:45rem){.gblog-brand{font-size:2.2rem}.gblog-nav .container{padding:0}.gblog-nav__list{background:#454b5b;flex-direction:column;justify-content:center;max-height:0;overflow:hidden}.gblog-nav__entry{padding:1rem 0;border:0;border-radius:0;display:block;margin:0;text-align:center}.gblog-nav__entry.is-active,.gblog-nav__entry:hover{background:#3a3f4d}.gblog-nav__control{display:block;text-align:center}.gblog-nav__control label{padding:1rem 0}.gblog-error{padding:6rem 1rem}.gblog-error .icon{font-size:5rem}.gblog-error__message{padding-left:2rem}.gblog-error__line{padding:.25rem 0}.gblog-error__title{font-size:2rem}.gblog-footer__item{width:100%}}#menu-control:checked~.gblog-nav__list{max-height:100%}#menu-control:checked~.gblog-nav__control .icon.menu{display:none}#menu-control:checked~.gblog-nav__control .icon.clear{display:inline-block}

static/print.css

@@ -1,32 +0,0 @@
-@media print {
-  .gblog-footer .container div:not(:last-child),
-  .gblog-nav,
-  .gblog-paging,
-  .gblog-post__anchor,
-  .gblog-post__readmore {
-    display: none
-  }
-  .gblog-header {
-    border-bottom: 1px solid #dee2e6
-  }
-  .gblog-footer {
-    border-top: 1px solid #dee2e6
-  }
-  .gblog-markdown pre {
-    white-space: pre-wrap;
-    overflow-wrap: break-word
-  }
-  .chroma code {
-    border: 1px solid #dee2e6;
-    padding: .5rem!important;
-    font-weight: 400!important
-  }
-  .gblog-markdown code {
-    font-weight: 700
-  }
-  a,
-  a:visited {
-    color: inherit!important;
-    text-decoration: none!important
-  }
-}

static/print.min.css

@@ -1 +0,0 @@
-@media print{.gblog-footer .container div:not(:last-child),.gblog-nav,.gblog-paging,.gblog-post__anchor,.gblog-post__readmore{display:none}.gblog-header{border-bottom:1px solid #dee2e6}.gblog-footer{border-top:1px solid #dee2e6}.gblog-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gblog-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}}