Skip to content

Commit bbd62a1

Browse files
sebastienbarresebastienbarre
committed
more fixes, link screenshot itself, add timings
1 parent 5a1cb34 commit bbd62a1

38 files changed

+121
-77
lines changed

‎build.js

+25-11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
const chalk = require('chalk');
2+
const co = require('co');
3+
const prettyHrtime = require('pretty-hrtime');
4+
5+
const startTime = process.hrtime();
6+
17
// require('./src/header-build')()
28
// require('./src/gallery-build')()
39
// require('./src/resources-build')()
@@ -9,24 +15,32 @@
915
// require('./src/home-build')()
1016
// console.log('home build complete')
1117

12-
// The rest of the build process is async and return promises
1318
const componentsBuildIndex = require('./src/components-build-index');
1419
const componentsBuildPages = require('./src/components-build-pages');
1520
const componentsBuildScreenshots = require('./src/components-build-screenshots');
1621

17-
// See components-build-defaults for list of options
22+
// See src/components-build-defaults for list of options that can be overriden
1823
const options = {
1924
// componentsGlobPattern: 'src/components/text/*.html',
20-
componentsBuildPages: true, // false to skip
21-
componentsBuildScreenshots: true, // false to skip
2225
};
2326

24-
componentsBuildIndex(options)
25-
.then(() => componentsBuildPages(options))
26-
.then(() => componentsBuildScreenshots(options))
27-
.then(() => {
28-
console.log('All done');
29-
})
30-
.catch((err) => {
27+
// Note that componentsBuildIndex() generates the index *and* the JSON
28+
// file listing all the components pages and screenshots should be built for.
29+
// Scenario: if you are working on one component, uncomment and set componentsGlobPattern
30+
// in the options above to only (re-)generate the index, pages, and screenshots for the
31+
// corresponding category. When you are done, comment componentsGlobPattern back, comment
32+
// the line below that generate the screenshots, then run the script -- this will
33+
// re-create the full index page for all components, re-generate all the pages (since they need
34+
// to cross-reference the new component), and use the previously generated screenshots as well
35+
// as the new one (i.e. no need to re-generate *all* the screenshots unless you made
36+
// modifications to the screenshots script itself).
37+
co(function* generator() {
38+
yield componentsBuildIndex(options); // <- builds component index page and JSON index
39+
yield componentsBuildPages(options); // <- comment to skip building pages
40+
yield componentsBuildScreenshots(options); // <- comment to skip building screenshots
41+
}).then(() => {
42+
const elapsed = process.hrtime(startTime);
43+
console.log(chalk.green('All done'), chalk.dim(prettyHrtime(elapsed)));
44+
}).catch((err) => {
3145
console.log(err);
3246
});

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"filesize": "^3.3.0",
4040
"jimp": "^0.2.27",
4141
"nightmare": "^2.8.1",
42+
"pretty-hrtime": "^1.0.3",
4243
"tachyons-background-size": "^5.0.3",
4344
"tachyons-base": "^1.2.5",
4445
"tachyons-border-colors": "^4.2.2",

‎src/components-build-defaults.js

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

‎src/components-build-index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const fs = require('fs');
66
const glob = require('glob');
77
const mkdirp = require('mkdirp');
88
const path = require('path');
9+
const prettyHrtime = require('pretty-hrtime');
910
const rmHtmlExt = require('remove-html-extension');
1011
const titleize = require('titleize');
1112

@@ -20,6 +21,7 @@ const getName = component => titleize(getTitle(component.split('/')[3]));
2021

2122
module.exports = _options => new Promise((resolve, reject) => {
2223
const options = _.assign({}, defaults, _options);
24+
const startTime = process.hrtime();
2325
glob(options.componentsGlobPattern, {}, (err, components) => {
2426
console.log(chalk.magenta('Working on components index...'));
2527
if (err) {
@@ -91,7 +93,8 @@ module.exports = _options => new Promise((resolve, reject) => {
9193
fs.writeFileSync(options.componentsIndexPath, compiledPage);
9294
console.log('- Created index:', options.componentsIndexPath);
9395

94-
console.log(chalk.magenta('Done with components index!'));
96+
const elapsed = process.hrtime(startTime);
97+
console.log(chalk.magenta('Done with components index!'), chalk.dim(prettyHrtime(elapsed)));
9598
resolve();
9699
}); // glob
97100
}); // return promise

‎src/components-build-pages.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const mqPacker = require('css-mqpacker');
1515
const path = require('path');
1616
const perfectionist = require('perfectionist');
1717
const postcss = require('postcss');
18+
const prettyHrtime = require('pretty-hrtime');
1819
const removeComments = require('postcss-discard-comments');
1920
const removeEmpty = require('postcss-discard-empty');
2021
const select = require('postcss-select');
@@ -23,6 +24,7 @@ const defaults = require('./components-build-defaults');
2324

2425
module.exports = _options => new Promise((resolve, reject) => {
2526
const options = _.assign({}, defaults, _options);
27+
const startTime = process.hrtime();
2628
console.log(chalk.magenta('Working on components pages...'));
2729
if (options.componentsForNavPath === undefined || !fs.existsSync(options.componentsForNavPath)) {
2830
reject('Can not find components nav JSON file');
@@ -108,7 +110,8 @@ module.exports = _options => new Promise((resolve, reject) => {
108110
}
109111
}
110112
}).then(() => {
111-
console.log(chalk.magenta('Done with components pages!'));
113+
const elapsed = process.hrtime(startTime);
114+
console.log(chalk.magenta('Done with components pages!'), chalk.dim(prettyHrtime(elapsed)));
112115
});
113116
resolve(renderPromise);
114117
}); // return promise

‎src/components-build-screenshots.js

+13-9
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const fs = require('fs');
77
const Jimp = require('jimp');
88
const Nightmare = require('nightmare');
99
const path = require('path');
10+
const prettyHrtime = require('pretty-hrtime');
1011
const tmp = require('tmp');
1112

1213
const defaults = require('./components-build-defaults');
@@ -38,6 +39,7 @@ const formatFromSizeToSize = (from, to) => `(${filesize(from)} => ${filesize(to)
3839

3940
module.exports = _options => new Promise((resolve, reject) => {
4041
const options = _.assign({}, defaults, _options);
42+
const startTime = process.hrtime();
4143
console.log(chalk.magenta('Working on components screenshots...'));
4244
if (options.componentsForNavPath === undefined || !fs.existsSync(options.componentsForNavPath)) {
4345
reject('Can not find components nav JSON file');
@@ -74,7 +76,7 @@ module.exports = _options => new Promise((resolve, reject) => {
7476
// Grab the size of the component enclosing rectangle
7577
// https://github.com/segmentio/nightmare/issues/498#issuecomment-189156529
7678
const componentRect = yield nightmare
77-
.viewport(options.screenshotViewportWidth, options.screenshotViewportMaxHeight)
79+
.viewport(options.screenshotViewportWidth, options.screenshotViewportHeight)
7880
// .wait(1000)
7981
.goto(`http://localhost:${options.serverPort}${component.href}`)
8082
.wait(selector)
@@ -101,12 +103,12 @@ module.exports = _options => new Promise((resolve, reject) => {
101103
continue; // eslint-disable-line
102104
}
103105
const tmpObj = tmp.fileSync({ dir: path.dirname(component.screenshot.path) });
104-
componentRect.height = Math.min(componentRect.height, options.screenshotViewportMaxHeight);
106+
componentRect.height = Math.min(componentRect.height, options.screenshotViewportHeight);
105107
yield nightmare
106108
// we can not use .screenshot() with componentRect, so constrain the viewport instead
107109
.viewport(
108110
componentRect.width || options.screenshotViewportWidth,
109-
componentRect.height || options.screenshotViewportMaxHeight
111+
componentRect.height || options.screenshotViewportHeight
110112
).scrollTo(componentRect.y, componentRect.x)
111113
// .wait(1000)
112114
// do *not* use componentRect in .screenshot() below or risk distortions
@@ -119,13 +121,13 @@ module.exports = _options => new Promise((resolve, reject) => {
119121
yield new Promise((write_resolve, write_reject) => {
120122
if (component.frontMatter.screenshot === undefined ||
121123
component.frontMatter.screenshot.autocrop !== false) {
122-
screenshot.autocrop(0.0, false);
124+
screenshot.autocrop(false);
123125
}
124126
// Allow shrinking, up to a point
125-
const scaleHeight = screenshot.bitmap.height <= options.screenshotFinalMinHeight
126-
? 0.0 : options.screenshotFinalMinHeight / screenshot.bitmap.height;
127-
const scaleWidth = screenshot.bitmap.width <= options.screenshotFinalMinWidth
128-
? 0.0 : options.screenshotFinalMinWidth / screenshot.bitmap.width;
127+
const scaleHeight = screenshot.bitmap.height <= options.screenshotTargetMinHeight
128+
? 0.0 : options.screenshotTargetMinHeight / screenshot.bitmap.height;
129+
const scaleWidth = screenshot.bitmap.width <= options.screenshotTargetMinWidth
130+
? 0.0 : options.screenshotTargetMinWidth / screenshot.bitmap.width;
129131
const scale = Math.max(scaleHeight, scaleWidth);
130132
screenshot
131133
.scale(scale > 0 ? scale : 1.0)
@@ -152,9 +154,11 @@ module.exports = _options => new Promise((resolve, reject) => {
152154
yield nightmare.end();
153155
server.close();
154156
console.log('- Closed static HTML server');
157+
const elapsed = process.hrtime(startTime);
155158
console.log(
156159
chalk.magenta('Done with components screenshots!'),
157-
chalk.dim(formatFromSizeToSize(tmpTotalFileSize, screenshotTotalFileSize))
160+
chalk.dim(formatFromSizeToSize(tmpTotalFileSize, screenshotTotalFileSize)),
161+
chalk.dim(prettyHrtime(elapsed))
158162
);
159163
});
160164

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<div class="dt mw6 center pv4 pv5-m pv6-ns">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<div class="dt mw6 center pt0 pb5 pv5-m pv6-ns">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<div class="dt mw6 center pv4 pv5-m pv6-ns">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<div class="dt mw6 center pv4 pv5-m pv6-ns">

‎src/components/layout/four-column.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "contain"
4+
"background-size" : "contain",
5+
"autocrop" : false
56
}
67
}}}
78

‎src/components/layout/two-column-collapse-one.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "contain"
4+
"background-size" : "contain",
5+
"autocrop" : false
56
}
67
}}}
78
<article class="cf">

‎src/components/layout/two-column.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "contain"
4+
"background-size" : "contain",
5+
"autocrop" : false
56
}
67
}}}
78
<article class="cf">

‎src/components/links/animate-background-color.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-position" : "left center",
54
"background-size" : "auto"
65
}
76
}}}

‎src/components/links/animate-color.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-position" : "left center"
4+
"background-size" : "auto"
55
}
66
}}}
77

‎src/components/links/dim-no-underline.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-position" : "left center"
4+
"background-size" : "auto"
55
}
66
}}}
77

‎src/components/links/underline-on-hover.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-position" : "left center"
4+
"background-size" : "auto"
55
}
66
}}}
77

‎src/components/lists/block-item-dotted-border.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<div class="pa3 pa5-ns">

‎src/components/lists/border-spaced.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<article class="pa3 pa5-ns">

‎src/components/lists/border-tight.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<h1 class="f4 bold center mw5">Cats</h1>

‎src/components/lists/contact-phone.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<ul class="list pl0 mt0 measure center">

‎src/components/lists/follower-notifications-rounded-square-avatar.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<main class="mw6 center">

‎src/components/lists/follower-notifications.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<main class="mw6 center">

‎src/components/lists/items-image-title-price.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-size" : "auto"
4+
"background-size" : "contain"
55
}
66
}}}
77
<main class="mw6 center">

‎src/components/nav/fixed-semi-transparent.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{{{
22
"bodyClass" : "bg-white",
33
"screenshot" : {
4-
"background-position" : "center top"
4+
"background-position" : "center top",
5+
"autocrop": false
56
}
67
}}}
78
<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">

0 commit comments

Comments
 (0)