add screenshots to components gallery

.gitignore

@@ -2,3 +2,4 @@ node_modules
 npm-debug.log
 .DS_STORE
 *.swp
+tmp

build.js

@@ -1,12 +1,46 @@
-require('./src/header-build')()
-require('./src/gallery-build')()
-require('./src/resources-build')()
-console.log('header build complete')
-require('./src/table-of-styles-build')()
-console.log('table of styles build complete')
-require('./src/table-of-properties-build')()
-console.log('table of properties build complete')
-require('./src/home-build')()
-console.log('home build complete')
-//require('./src/components-build')()
-//console.log('components build complete')
+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')()
+// console.log('header build complete')
+// require('./src/table-of-styles-build')()
+// console.log('table of styles build complete')
+// require('./src/table-of-properties-build')()
+// console.log('table of properties build complete')
+// require('./src/home-build')()
+// console.log('home build complete')
+
+const componentsBuildIndex = require('./src/components-build-index');
+const componentsBuildPages = require('./src/components-build-pages');
+const componentsBuildScreenshots = require('./src/components-build-screenshots');
+
+// See src/components-build-defaults for list of options that can be overriden
+const options = {
+  // componentsGlobPattern: 'src/components/buttons/*.html',
+};
+
+// 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

@@ -24,7 +24,10 @@
     "doc:images": "watch 'node src/modules/images.js' src/templates/docs/images",
     "doc:bgsize": "watch 'node src/modules/background-size.js' src/templates/docs/background-size",
     "build:all": "node build.js && bash script.sh",
-    "cson": "node src/components-cson-build.js"
+    "cson": "node src/components-cson-build.js",
+    "copy:lazysizes": "cp node_modules/lazysizes/lazysizes.min.js js/",
+    "copy:lazysizes:plugins": "cp node_modules/lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js js/",
+    "postinstall": "npm run copy:lazysizes && npm run copy:lazysizes:plugins"
   },
   "repository": "tachyons-css/tachyons-css.github.io",
   "author": "mrmrs",
@@ -33,6 +36,16 @@
     "url": "https://github.com/tachyons-css/tachyons-css.github.io/issues"
   },
   "dependencies": {
+    "chalk": "^1.1.3",
+    "co": "^4.6.0",
+    "express": "^4.14.0",
+    "filesize": "^3.3.0",
+    "imagemin": "^5.2.2",
+    "imagemin-mozjpeg": "^6.0.0",
+    "jimp": "^0.2.27",
+    "lazysizes": "^3.0.0-rc2",
+    "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",
@@ -81,7 +94,8 @@
     "tachyons-white-space": "^4.0.1",
     "tachyons-widths": "^5.0.1",
     "tachyons-word-break": "3.0.1",
-    "tachyons-z-index": "^1.0.4"
+    "tachyons-z-index": "^1.0.4",
+    "tmp": "0.0.31"
   },
   "devDependencies": {
     "autoprefixer": "^6.5.1",

src/components-build-defaults.js

@@ -0,0 +1,29 @@
+module.exports = {
+  // Components
+  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',                  // name JPEG screenshot 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: 400,                     // min width of target, resized screenshot
+  screenshotTargetMinHeight: 160,                    // min height of target, resized screenshot
+  mozjpegQuality: 90,                                // mozjpeg optimizer quality (default 75)
+  screenshotSelector: '[data-name="component-container"]', // DOM element to capture
+  // Misc
+  tachyonsCssPath: 'src/css/tachyons.css',
+  serverPort: 3333,
+  // Templates
+  analyticsTemplatePath: 'src/templates/ga.html',
+  componentsIndexTemplatePath: 'src/templates/components-index.html',
+  componentsTemplatePath: 'src/templates/components.html',
+  footerTemplatePath: 'src/templates/footer.html',
+  headerTemplatePath: 'src/templates/header.html',
+  headTemplatePath: 'src/templates/head.html',
+  highlightTemplatePath: 'src/templates/highlight.html',
+  lazysizesTemplate: 'src/templates/lazysizes.html',
+};

src/components-build-index.js

@@ -0,0 +1,102 @@
+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');
+const mkdirp = require('mkdirp');
+const path = require('path');
+const prettyHrtime = require('pretty-hrtime');
+const rmHtmlExt = require('remove-html-extension');
+const titleize = require('titleize');
+
+const defaults = require('./components-build-defaults');
+
+const getTitle = (component) => {
+  const title = rmHtmlExt(component).replace('src/components/', '').replace(/(\/|_|-)/g, ' ');
+  return titleize(title);
+};
+
+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) {
+      reject(err);
+      return;
+    }
+
+    const npmPackage = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+
+    const componentsForNav = {};
+    components.forEach((component) => {
+      const componentTokens = component.replace('src/components/', '').split('/');
+      const category = componentTokens[0];
+
+      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),
+        title: frontMatter.title || getTitle(component),
+        src: component,
+        path: `${dir}/index.html`,
+        href: `/${dir}/index.html`,
+        screenshot: {
+          path: `${dir}/${options.screenshotName}`,
+          href: `/${dir}/${options.screenshotName}?version=${signature}`,
+        },
+        signature,
+        frontMatter,
+      });
+    });
+
+    const categories = Object.keys(componentsForNav);
+    console.log(
+      '- Found', components.length, components.length > 1 ? 'components' : 'component',
+      'in', categories.length, categories.length > 1 ? 'categories' : 'category'
+    );
+
+    mkdirp.sync(path.dirname(options.componentsForNavPath));
+    fs.writeFileSync(options.componentsForNavPath, JSON.stringify(componentsForNav, undefined, 2));
+    console.log('- Created navigation JSON:', options.componentsForNavPath);
+
+    const analytics = fs.readFileSync(options.analyticsTemplatePath, 'utf8');
+    const footer = fs.readFileSync(options.footerTemplatePath, 'utf8');
+    const head = fs.readFileSync(options.headTemplatePath, 'utf8');
+    const header = fs.readFileSync(options.headerTemplatePath, 'utf8');
+    const componentsIndexTemplate = fs.readFileSync(options.componentsIndexTemplatePath, 'utf8');
+    const lazysizesTemplate = fs.readFileSync(options.lazysizesTemplate, 'utf8');
+
+    const compiledPage = _.template(componentsIndexTemplate)({
+      componentsForNav,
+      title: 'Components',
+      analytics,
+      footer,
+      head,
+      header,
+      lazysizesTemplate,
+      options,
+    });
+    mkdirp.sync(path.dirname(options.componentsIndexPath));
+    fs.writeFileSync(options.componentsIndexPath, compiledPage);
+    console.log('- Created index:', options.componentsIndexPath);
+
+    const elapsed = process.hrtime(startTime);
+    console.log(chalk.magenta('Done with components index!'), chalk.dim(prettyHrtime(elapsed)));
+    resolve();
+  }); // glob
+}); // return promise