Merge pull request #9 from thegeeklab/cache-busting

Cache busting
This commit is contained in:
Robert Kaussow 2020-11-22 18:06:50 +01:00 committed by GitHub
commit cc7b3bc9f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 215 additions and 127 deletions

8
.gitignore vendored
View File

@ -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/

View File

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

View File

@ -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
to deliver the hashed assets. Thats helpful if you have to deal with
long cache settings but wont to ensure your updated assets are delivered
to clients.
- BUGFIX
- use relative URL's for fonts
- INTERNAL
- publish Lighthouse CI overwiew to PR's
Build-in assets are now hashed by default. The static assets are located
in the `assets` directory. The theme will read and use the hashed files
from `data/assets.json`. Exception: `custom.css` will be used unhashed.

3
data/assets-static.json Normal file
View File

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

View File

@ -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"
}

View File

@ -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 FAVICON_DATA_FILE = "tmp/faviconData.json";
var CSSDEST = "assets/";
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
prependUnicode: true, // recommended option
fontName: "GeekblogIcons",
prependUnicode: true,
normalize: true,
fontHeight: 1001,
centerHorizontally: true,
formats: ["woff", "woff2"], // default, 'woff2' and 'svg' are available
timestamp: TIMESTAMP, // recommended to get consistent builds when watching files
formats: ["woff", "woff2"],
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"));
});

158
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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
}

View File

@ -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}

View File

@ -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
}
}

View File

@ -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}}