add build time cache bouncing

.eleventy.js

@@ -8,6 +8,7 @@ const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 
 const figure = require('./src/_includes/components/figure.js');
+const bounce = require('./src/_includes/components/bounce.js');
 
 module.exports = function (eleventyConfig) {
   const parseDate = (str) => {
@@ -35,6 +36,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventySass);
 
   eleventyConfig.addShortcode('figure', figure(md));
+  eleventyConfig.addShortcode('bounce', bounce);
 
   eleventyConfig.addPassthroughCopy({ "src/static": "/" });
 

src/_includes/components/bounce.js

@@ -0,0 +1,22 @@
+const cache = new Map();
+
+module.exports = ({ path, check_path = 'src/static/' + path, type = "css"  }) => {
+    // caching hashes significantly speeds up build time
+    var hash = undefined;
+    if (cache.get(check_path)) {
+        hash = cache.get(check_path);
+    } else {
+        hash = revision = require('child_process')
+        .execSync(`git rev-list HEAD -1 -- ${check_path}`)
+        .toString().trim().slice(0, 7);
+        cache.set(check_path, hash);
+    }
+
+    if (type == "css") {
+        return `<link rel="stylesheet" href="${path}?h=${hash}"/>\n`;
+    } else if (type == "js") {
+        return `<script src="${path}?h=${hash}"></script>\n`;
+    } else {
+        throw new Error('undefined bounce type');
+    }
+}

src/_includes/layouts/default.njk

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title if title else site.title }}</title>
     
-    <link rel="stylesheet" href="/css/style.css?v=3"/>
+    {% bounce { path: '/css/style.css', check_path: 'src/css' } %}
     <link rel="stylesheet" href="/prism.css"/>
 
     <meta name="description" content="{{ description if description else site.description }}" />
@@ -42,5 +42,5 @@
     </div>
     {% include "components/footer.njk" %}
   </body>
-  <script src="/oneko.js"></script>
+  {% bounce { path: '/oneko.js', type: 'js' } %}
 </html>