add component hash signature to cache bust screenshots

Author: sebastienbarre

build.js

@@ -16,7 +16,7 @@ const componentsBuildIndex = require('./src/components-build-index');
 const componentsBuildPages = require('./src/components-build-pages');
 const componentsBuildScreenshots = require('./src/components-build-screenshots');
 
-const globPattern = 'src/components/cards/*.html';
+const globPattern = 'src/components/banners/*.html';
 componentsBuildIndex(globPattern)
 .then(componentsForNavPath => componentsBuildPages(componentsForNavPath))
 .then(componentsForNavPath => componentsBuildScreenshots(componentsForNavPath))

src/components-build-index.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const chalk = require('chalk');
+const crypto = require('crypto');
 const fm = require('json-front-matter');
 const fs = require('fs');
 const glob = require('glob');
@@ -33,18 +34,27 @@ module.exports = globPattern => new Promise((resolve, reject) => {
       reject(err);
     }
 
+    const npmPackage = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+
     console.log('- Found', components.length, 'components');
 
     const componentsForNav = {};
     components.forEach((component) => {
       const componentTokens = component.replace('src/components/', '').split('/');
       const category = componentTokens[0];
 
-      // Check the front matter for screenshot overrides
       const componentHtml = fs.readFileSync(component, 'utf8');
       const fmParsed = fm.parse(componentHtml);
       const frontMatter = fmParsed.attributes || {};
       const dir = component.replace('src/', '').replace('.html', '');
+
+      // Compute component signature based on the Tachyons version and the contents of the
+      // component itself. This can be used to bust the browser cache of screenshots.
+      const md5sum = crypto.createHash('md5');
+      md5sum.update(npmPackage.version);
+      md5sum.update(componentHtml);
+      const signature = md5sum.digest('hex');
+
       componentsForNav[category] = componentsForNav[category] || [];
       componentsForNav[category].push({
         name: frontMatter.name || getName(component),
@@ -54,8 +64,9 @@ module.exports = globPattern => new Promise((resolve, reject) => {
         href: `/${dir}/index.html`,
         screenshot: {
           path: `${dir}/${screenshotBasename}.png`,
-          href: `/${dir}/${screenshotBasename}.png`,
+          href: `/${dir}/${screenshotBasename}.png?version=${signature}`,
         },
+        signature,
         frontMatter,
       });
     });

src/components-build-pages.js

@@ -94,7 +94,7 @@ module.exports = componentsForNavPath => new Promise((resolve, reject) => {
         const compiledComponent = _.template(componentTemplate)(frontMatter);
         mkdirp.sync(path.dirname(component.path));
         fs.writeFileSync(component.path, compiledComponent);
-        console.log('  * Created component:', component.path);
+        console.log('  * Created component:', component.href);
       }).catch((e) => {
         console.log(e);
       });

src/components-build-screenshots.js

@@ -87,7 +87,7 @@ module.exports = componentsForNavPath => new Promise((resolve, reject) => {
             // do *not* use componentRect in .screenshot() below or risk distortions
             .screenshot(component.screenshot.path)
             .then(() => {
-              console.log('  * Created screenshot: ', component.screenshot.path);
+              console.log('  * Created screenshot: ', component.screenshot.href);
             });
         }
       } // Loop over components