Merge pull request #721 from nyu-ossd-s20/cache_busting_quick_fix

Cache busting fix

Author: limzykenneth

Gruntfile.js

@@ -83,8 +83,8 @@ module.exports = function(grunt) {
         options: {
           expand: true,
           flatten: true,
-          helpers: ['<%= config.src %>/assets/js/translation.js'],
           assets: '<%= config.dist %>/assets',
+          helpers: ['<%= config.src %>/assets/js/translation.js', '<%= config.src %>/assets/js/cache-busting.js'],
           layout: '<%= config.src %>/templates/layouts/default.hbs',
           data: [
             '<%= config.src %>/data/**/*.{json,yml}',
@@ -411,8 +411,8 @@ module.exports = function(grunt) {
     'requirejs:yuidoc_theme',
     'requirejs',
     'copy',
-    'assemble',
     'optimize',
+    'assemble',
     'file_append',
     'compress',
     'i18n',

src/assets/js/cache-busting.js

@@ -0,0 +1,22 @@
+module.exports.register = function(Handlebars, options) {
+  Handlebars.registerHelper('versionedAsset', function(options) {
+    // node libraries
+    const crypto = require('crypto');
+    const path = require('path');
+    const fs = require('fs');
+    const filePath = options.fn(this);
+    const hash = crypto.createHash('sha256');
+    // creating full path from the root dir to the file
+    const fullPath = path.join(__dirname, "../../..", "dist", filePath);
+    let hashCode = "";
+    hash.on('readable', () => {
+      const data = hash.read();
+      if (data) hashCode = data.toString('hex');
+    })
+    hash.write(fs.readFileSync(fullPath, function (err) { if (err) return 0 }).toString());
+    hash.end();
+    // creating a version string from first 6 hash characters
+    hashCode = "/" + filePath + "?v=" + hashCode.substr(0, 6);
+    return hashCode;
+  });
+};

src/templates/layouts/default.hbs

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width">
     <meta name="description" content="p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.">
     <title tabindex="1">{{title}} | p5.js</title>
-    <link rel="stylesheet" href="/{{assets}}/css/all.css?v=1.0.1">
+    <link rel="stylesheet" href="{{#versionedAsset}}assets/css/all.css{{/versionedAsset}}">
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
 
     <link rel="shortcut icon" href="/{{assets}}/img/favicon.ico">
@@ -17,7 +17,7 @@
     <script src="/{{assets}}/js/vendor/ace-nc/ace.js"></script>
     <script src="/{{assets}}/js/vendor/ace-nc/mode-javascript.js"></script>
     <script src="/{{assets}}/js/vendor/prism.js"></script>
-    <script src="/{{assets}}/js/init.js?v=1.0.1"></script>
+    <script src="{{#versionedAsset}}assets/js/init.js{{/versionedAsset}}"></script>
 
     {{#ifLowerCaseEquals language "zh-Hans"}}
     <script src="/{{assets}}/js/vendor/pangu.min.js"></script>

src/templates/pages/reference/index.hbs

@@ -32,8 +32,8 @@ slug: reference/
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
   <script src="/reference/assets/js/require.min.js"></script>
-  <script src="/assets/js/render.js"></script>
-  <script src="/reference/assets/js/reference.js"></script>
+  <script src="{{#versionedAsset}}assets/js/render.js{{/versionedAsset}}"></script>
+  <script src="{{#versionedAsset}}reference/assets/js/reference.js{{/versionedAsset}}"></script>
 
   <script>