-
Notifications
You must be signed in to change notification settings - Fork 66
/
takeScreenshots.js
175 lines (144 loc) · 4.56 KB
/
takeScreenshots.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
const samples = require('./src/_data/samples.json');
const puppeteer = require('puppeteer');
const { exit } = require('process');
const yargs = require('yargs');
const fs = require('fs');
const args = yargs(process.argv.slice(2))
.usage('Usage: $0 [options]')
.describe('f', 'Font to use for screenshots')
.alias('f', 'font')
.describe('l', 'Code sample to use for screenshot')
.alias('l', 'lang')
.describe('t', 'Theme to use for screenshots')
.alias('t', 'theme')
.describe(
'parallel',
'Run the screenshots in parallel\n ~ Be careful when running too many screenshots at once.'
)
.help('h')
.alias('h', 'help')
.example(
'node $0 -f source-code-pro -l js -t dark',
'Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.\n'
)
.example(
'node $0 -f menlo -l all -t light',
'Take a screenshot of the Menlo font, using all of the code samples, and the light theme.\n'
)
.example(
'node $0 -f all -l all -t all',
'Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.\n'
)
.example(
'node $0 -f input -l all -t all --parallel',
'Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel.'
)
.demandOption(['lang', 'font', 'theme'])
.wrap(115)
.epilog('Developed for Coding Fonts (https://coding-fonts.css-tricks.com/)')
.argv;
const buildFontDirectories = (fonts) => {
fonts.forEach((font) => {
const directory = `src/screenshots/${font}`;
if (!fs.existsSync(directory)) {
console.log(`${directory} does not exist. Making directory...`);
fs.mkdirSync(directory);
}
});
};
const takeScreenshots = async (font, lang, theme) => {
console.log(`Taking screenshot for:`);
console.log(` => Font:\t${font}`);
console.log(` => Language:\t${lang}`);
console.log(` => Theme:\t${theme}`);
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
await page.setViewport({
width: 800,
height: 600,
deviceScaleFactor: 2
});
page.on('console', (msg) =>
console.warn(`Browser Log [${font}]: ${msg.text()}`)
);
await page.goto(
`http://localhost:8080/code_samples/${lang}?font=${font}&theme=${theme}`,
{
waitUntil: 'networkidle0',
timeout: 100000
}
);
await page.screenshot({
path: `src/screenshots/${font}/${lang}-${theme}.png`
});
await browser.close();
};
const parseInputs = (fonts, langs, themes) => {
fonts =
fonts === 'all'
? fs
.readdirSync('./src/fonts')
.filter((file) => file.endsWith('.md'))
.map((file) => file.replace('.md', '').toLocaleLowerCase())
: [fonts.toLocaleLowerCase()];
langs =
langs === 'all' ? samples.languages.map((lang) => lang.value) : [langs];
themes = themes === 'all' ? samples.themes : [themes];
return [fonts, langs, themes];
};
const run = async (fonts, langs, themes, parallel) => {
console.log(`Running in ${parallel ? 'parallel' : 'serial'} mode`);
console.log(
`Taking ${fonts.length * langs.length * themes.length} screenshots\n`
);
const asyncForEach = async (array, callback) => {
for (let i = 0; i < array.length; i++) {
await callback(array[i], i, array);
}
};
if (parallel) {
fonts.forEach(async (font) => {
langs.forEach(async (lang) => {
themes.forEach(async (theme) => {
try {
await takeScreenshots(font, lang, theme);
} catch (e) {
console.error(
'\nAn error occurred. Please review the stack trace below and report the issue if necessary.\n'
);
console.error(e);
exit();
}
});
});
});
} else {
await asyncForEach(fonts, async (font) => {
await asyncForEach(langs, async (lang) => {
await asyncForEach(themes, async (theme) => {
try {
await takeScreenshots(font, lang, theme);
} catch (e) {
console.error(
'\nAn error occurred. Please review the stack trace below and report the issue if necessary.\n'
);
console.error(e);
exit();
}
});
});
});
}
};
const main = async () => {
let fonts = args.font;
let langs = args.lang;
let themes = args.theme;
let parallel = args.parallel;
[fonts, langs, themes] = parseInputs(fonts, langs, themes);
buildFontDirectories(fonts);
run(fonts, langs, themes, parallel);
};
main();