feat: Add automated screenshots for starter projects

[anishkny]

hi @zachleat @gerwitz and team,

First off, keep up the amazing work and looking forward to v1!

This is a proposal. What do you folks feel if the list of starter projects had automatically generated screenshots per entry.

I was thinking of using puppeteer (headless Chrome driver) to generate screenshots for the demo sites at build time. Pictures really add a lot of value e.g. Hugo Theme Gallery.

I have a working prototype but wanted to gather thoughts before going too far: PR, Demo.

I am no CSS expert - so I am totally open to styling and other presentation tweaks.

Eventually this idea can also be extended to Source Code Samples.

[Ryuno-Ki]

Where would Pupeteer run?

[gerwitz]

I think thumbnails to add visual interest to the catalog would be great. Though re-rendering them on every site build feels very heavy.

Maybe this could be a pre-build step, as with Zach's use of Grunt on his site, or Gulp on many.

[Ryuno-Ki]

Okay, so running on the developer's machine instead as part of a CI?

[gerwitz]

¯_(ツ)_/¯ there's a trade-off to be made between generating thumbnails as a "dev-time" activity vs. part of the build process. I guess it depends on how builds are performed (e.g. are there processing time costs, is puppeteer available…).

I do worry about introducing a build manager tot his project because it implies a standard, but that's a terrible reason to avoid pre-processing.

[Ryuno-Ki]

NPM comes with kinda one: run-scripts. It works okay for me. I was a Grunt-lover before. Not happy with the likes of Gulp or Brunch. Webpack feels overcomplicated and parcel too opinionated.

So I stick to npm run-scripts and rollup, in case I need a bundler. :-)

[zachleat]

We do have a screenshots script in place although I don’t think it runs for starters yet!

npm run get-new-screenshots

[anishkny]

Ah ok I see now there’s a screenshot generation step. Will try to update the PR to integrate starter screenshot generation into that.