more fixes, link screenshot itself, add timings

Author: sebastienbarre

build.js

@@ -1,3 +1,9 @@
+const chalk = require('chalk');
+const co = require('co');
+const prettyHrtime = require('pretty-hrtime');
+
+const startTime = process.hrtime();
+
 // require('./src/header-build')()
 // require('./src/gallery-build')()
 // require('./src/resources-build')()
@@ -9,24 +15,32 @@
 // require('./src/home-build')()
 // console.log('home build complete')
 
-// The rest of the build process is async and return promises
 const componentsBuildIndex = require('./src/components-build-index');
 const componentsBuildPages = require('./src/components-build-pages');
 const componentsBuildScreenshots = require('./src/components-build-screenshots');
 
-// See components-build-defaults for list of options
+// See src/components-build-defaults for list of options that can be overriden
 const options = {
   // componentsGlobPattern: 'src/components/text/*.html',
-  componentsBuildPages: true, // false to skip
-  componentsBuildScreenshots: true, // false to skip
 };
 
-componentsBuildIndex(options)
-.then(() => componentsBuildPages(options))
-.then(() => componentsBuildScreenshots(options))
-.then(() => {
-  console.log('All done');
-})
-.catch((err) => {
+// Note that componentsBuildIndex() generates the index *and* the JSON
+// file listing all the components pages and screenshots should be built for.
+// Scenario: if you are working on one component, uncomment and set componentsGlobPattern
+// in the options above to only (re-)generate the index, pages, and screenshots for the
+// corresponding category. When you are done, comment componentsGlobPattern back, comment
+// the line below that generate the screenshots, then run the script -- this will
+// re-create the full index page for all components, re-generate all the pages (since they need
+// to cross-reference the new component), and use the previously generated screenshots as well
+// as the new one (i.e. no need to re-generate *all* the screenshots unless you made
+// modifications to the screenshots script itself).
+co(function* generator() {
+  yield componentsBuildIndex(options);        // <- builds component index page and JSON index
+  yield componentsBuildPages(options);        // <- comment to skip building pages
+  yield componentsBuildScreenshots(options);  // <- comment to skip building screenshots
+}).then(() => {
+  const elapsed = process.hrtime(startTime);
+  console.log(chalk.green('All done'), chalk.dim(prettyHrtime(elapsed)));
+}).catch((err) => {
   console.log(err);
 });

package.json

@@ -39,6 +39,7 @@
     "filesize": "^3.3.0",
     "jimp": "^0.2.27",
     "nightmare": "^2.8.1",
+    "pretty-hrtime": "^1.0.3",
     "tachyons-background-size": "^5.0.3",
     "tachyons-base": "^1.2.5",
     "tachyons-border-colors": "^4.2.2",

src/components-build-defaults.js

@@ -1,19 +1,19 @@
 module.exports = {
   // Components
-  componentsForNavPath: 'tmp/componentsForNav.json',
-  componentsGlobPattern: 'src/components/**/*.html',
-  componentsIndexPath: 'components/index.html',
-  componentsBuildPages: true, // false to skip
-  componentsBuildScreenshots: true, // false to skip
+  componentsForNavPath: 'tmp/componentsForNav.json', // temporary file built by the index
+  componentsGlobPattern: 'src/components/**/*.html', // source components to process
+  componentsIndexPath: 'components/index.html',      // target location of components index
+  componentsBuildPages: true,                        // false to skip building pages
+  componentsBuildScreenshots: true,                  // false to skip building screenshots
   // Screenshots
-  screenshotName: 'screenshot.jpg',
-  screenshotAspectRatio: '4x3',
-  screenshotViewportWidth: 1024,
-  screenshotViewportMaxHeight: 768,
-  screenshotFinalMinWidth: 360,
-  screenshotFinalMinHeight: 128,
-  screenshotSelector: '[data-name="component-container"]',
-  screenshotCompressionQuality: 98,
+  screenshotName: 'screenshot.jpg',                  // name screenshot file in each component dir
+  screenshotAspectRatio: '4x3',                      // Tachyon aspect ratio of screenshot in index
+  screenshotViewportWidth: 1024,                     // viewport width used for capture
+  screenshotViewportHeight: 768,                     // viewport height used for capture
+  screenshotTargetMinWidth: 360,                     // min width of target, resized screenshot
+  screenshotTargetMinHeight: 128,                    // min height of target, resized screenshot
+  screenshotSelector: '[data-name="component-container"]', // DOM element to capture
+  screenshotCompressionQuality: 98,                  // JPEG compression quality before optimization
   // Misc
   tachyonsCssPath: 'src/css/tachyons.css',
   serverPort: 3333,

src/components-build-index.js

@@ -6,6 +6,7 @@ const fs = require('fs');
 const glob = require('glob');
 const mkdirp = require('mkdirp');
 const path = require('path');
+const prettyHrtime = require('pretty-hrtime');
 const rmHtmlExt = require('remove-html-extension');
 const titleize = require('titleize');
 
@@ -20,6 +21,7 @@ const getName = component => titleize(getTitle(component.split('/')[3]));
 
 module.exports = _options => new Promise((resolve, reject) => {
   const options = _.assign({}, defaults, _options);
+  const startTime = process.hrtime();
   glob(options.componentsGlobPattern, {}, (err, components) => {
     console.log(chalk.magenta('Working on components index...'));
     if (err) {
@@ -91,7 +93,8 @@ module.exports = _options => new Promise((resolve, reject) => {
     fs.writeFileSync(options.componentsIndexPath, compiledPage);
     console.log('- Created index:', options.componentsIndexPath);
 
-    console.log(chalk.magenta('Done with components index!'));
+    const elapsed = process.hrtime(startTime);
+    console.log(chalk.magenta('Done with components index!'), chalk.dim(prettyHrtime(elapsed)));
     resolve();
   }); // glob
 }); // return promise

src/components-build-pages.js

@@ -15,6 +15,7 @@ const mqPacker = require('css-mqpacker');
 const path = require('path');
 const perfectionist = require('perfectionist');
 const postcss = require('postcss');
+const prettyHrtime = require('pretty-hrtime');
 const removeComments = require('postcss-discard-comments');
 const removeEmpty = require('postcss-discard-empty');
 const select = require('postcss-select');
@@ -23,6 +24,7 @@ const defaults = require('./components-build-defaults');
 
 module.exports = _options => new Promise((resolve, reject) => {
   const options = _.assign({}, defaults, _options);
+  const startTime = process.hrtime();
   console.log(chalk.magenta('Working on components pages...'));
   if (options.componentsForNavPath === undefined || !fs.existsSync(options.componentsForNavPath)) {
     reject('Can not find components nav JSON file');
@@ -108,7 +110,8 @@ module.exports = _options => new Promise((resolve, reject) => {
       }
     }
   }).then(() => {
-    console.log(chalk.magenta('Done with components pages!'));
+    const elapsed = process.hrtime(startTime);
+    console.log(chalk.magenta('Done with components pages!'), chalk.dim(prettyHrtime(elapsed)));
   });
   resolve(renderPromise);
 }); // return promise

src/components-build-screenshots.js

@@ -7,6 +7,7 @@ const fs = require('fs');
 const Jimp = require('jimp');
 const Nightmare = require('nightmare');
 const path = require('path');
+const prettyHrtime = require('pretty-hrtime');
 const tmp = require('tmp');
 
 const defaults = require('./components-build-defaults');
@@ -38,6 +39,7 @@ const formatFromSizeToSize = (from, to) => `(${filesize(from)} => ${filesize(to)
 
 module.exports = _options => new Promise((resolve, reject) => {
   const options = _.assign({}, defaults, _options);
+  const startTime = process.hrtime();
   console.log(chalk.magenta('Working on components screenshots...'));
   if (options.componentsForNavPath === undefined || !fs.existsSync(options.componentsForNavPath)) {
     reject('Can not find components nav JSON file');
@@ -74,7 +76,7 @@ module.exports = _options => new Promise((resolve, reject) => {
         // Grab the size of the component enclosing rectangle
         // https://github.com/segmentio/nightmare/issues/498#issuecomment-189156529
         const componentRect = yield nightmare
-          .viewport(options.screenshotViewportWidth, options.screenshotViewportMaxHeight)
+          .viewport(options.screenshotViewportWidth, options.screenshotViewportHeight)
           // .wait(1000)
           .goto(`http://localhost:${options.serverPort}${component.href}`)
           .wait(selector)
@@ -101,12 +103,12 @@ module.exports = _options => new Promise((resolve, reject) => {
           continue; // eslint-disable-line
         }
         const tmpObj = tmp.fileSync({ dir: path.dirname(component.screenshot.path) });
-        componentRect.height = Math.min(componentRect.height, options.screenshotViewportMaxHeight);
+        componentRect.height = Math.min(componentRect.height, options.screenshotViewportHeight);
         yield nightmare
           // we can not use .screenshot() with componentRect, so constrain the viewport instead
           .viewport(
             componentRect.width || options.screenshotViewportWidth,
-            componentRect.height || options.screenshotViewportMaxHeight
+            componentRect.height || options.screenshotViewportHeight
           ).scrollTo(componentRect.y, componentRect.x)
           // .wait(1000)
           // do *not* use componentRect in .screenshot() below or risk distortions
@@ -119,13 +121,13 @@ module.exports = _options => new Promise((resolve, reject) => {
         yield new Promise((write_resolve, write_reject) => {
           if (component.frontMatter.screenshot === undefined ||
               component.frontMatter.screenshot.autocrop !== false) {
-            screenshot.autocrop(0.0, false);
+            screenshot.autocrop(false);
           }
           // Allow shrinking, up to a point
-          const scaleHeight = screenshot.bitmap.height <= options.screenshotFinalMinHeight
-            ? 0.0 : options.screenshotFinalMinHeight / screenshot.bitmap.height;
-          const scaleWidth = screenshot.bitmap.width <= options.screenshotFinalMinWidth
-            ? 0.0 : options.screenshotFinalMinWidth / screenshot.bitmap.width;
+          const scaleHeight = screenshot.bitmap.height <= options.screenshotTargetMinHeight
+            ? 0.0 : options.screenshotTargetMinHeight / screenshot.bitmap.height;
+          const scaleWidth = screenshot.bitmap.width <= options.screenshotTargetMinWidth
+            ? 0.0 : options.screenshotTargetMinWidth / screenshot.bitmap.width;
           const scale = Math.max(scaleHeight, scaleWidth);
           screenshot
             .scale(scale > 0 ? scale : 1.0)
@@ -152,9 +154,11 @@ module.exports = _options => new Promise((resolve, reject) => {
     yield nightmare.end();
     server.close();
     console.log('- Closed static HTML server');
+    const elapsed = process.hrtime(startTime);
     console.log(
       chalk.magenta('Done with components screenshots!'),
-      chalk.dim(formatFromSizeToSize(tmpTotalFileSize, screenshotTotalFileSize))
+      chalk.dim(formatFromSizeToSize(tmpTotalFileSize, screenshotTotalFileSize)),
+      chalk.dim(prettyHrtime(elapsed))
     );
   });
 

src/components/layout/flag-object-bottom.html

@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white",
   "screenshot" : {
-    "background-size" : "auto"
+    "background-size" : "contain"
   }
 }}}
 <div class="dt mw6 center pv4 pv5-m pv6-ns">

src/components/layout/flag-object-collapse.html

@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white",
   "screenshot" : {
-    "background-size" : "auto"
+    "background-size" : "contain"
   }
 }}}
 <div class="dt mw6 center pt0 pb5 pv5-m pv6-ns">

src/components/layout/flag-object-top.html

@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white",
   "screenshot" : {
-    "background-size" : "auto"
+    "background-size" : "contain"
   }
 }}}
 <div class="dt mw6 center pv4 pv5-m pv6-ns">

src/components/layout/flag-object.html

@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white",
   "screenshot" : {
-    "background-size" : "auto"
+    "background-size" : "contain"
   }
 }}}
 <div class="dt mw6 center pv4 pv5-m pv6-ns">