Gutenboarding: use static, tall screenshots

[simison]

Resolves #40564

Changes proposed in this Pull Request

• Add static screenshots for designs
• Add a script that generated those previews
• Use those screenshots in img tags — leaves mShots mechanism in place so we can easily work on it
• Make screenshots little taller (needs more work)

Testing instructions

Design

• See Gutenboarding design picker step:

CLI

• To ensure you'll have browser downloaded, remove PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true from package.json
• At Calypso root, install deps: npm i capture-website sharp.
• Remove old screenshots at static/page-templates/design-screenshots
• Run node bin/generate-gutenboarding-design-thumbnails.js to generate new ones
• Observe new files at static/page-templates/design-screenshots

[matticbot]

Test live: https://calypso.live/?branch=update/gutenboarding-static-screenshots

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~54 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +165 B  (+0.0%)      +54 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[simison]

Possible options for waitUntil would be

• load - consider navigation to be finished when the load event is fired.
• domcontentloaded - consider navigation to be finished when the DOMContentLoaded event is fired.
• networkidle0 - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
• networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.

via https://github.com/puppeteer/puppeteer/blob/3dff24ad35cd46754dbe0c77a9c7f7ade2454b88/docs/api.md#pagewaitfornavigationoptions

[dubielzyk]

Mobile layout looks funky. Let's make sure we look at the design file and replicate the mobile designs:

Other than that it looks good 👍

[simison]

We're kinda ignoring the mobile versions for this week and starting their implementation on next week. Ok of course to fix in the PR but ok to punt for now for later PRs.

[simison]

@dubielzyk Screenshots are sometimes shorter than the thumbnail area:

Luckily they're all the ones with a white background so it's not that bad looking, but do you have thoughts on how to address that? Should columns float as "masonry" (i.e. upper edges won't be aligned and it's ok to have different height thumbnails)?

It should be addressed in separate PR anyway, I think.

[dubielzyk]

Screenshots are sometimes shorter than the thumbnail area

I'll have a look, but I think it's a tradeoff worth taking since users wanted to see more of their page

[simison]

@dubielzyk Feels like that 4 columns takes affect little too early (somewhere at ~1400px), making thumbnails too small:

We can get these right in separate PR.

[sirreal]

I don't like that we're referencing static images directly rather than using webpack file-loader to import the images and get a generated path. That help with things like cache busting when image contents change.

Are these intended for use outside of Calypso?

This is fine to handle as a follow-up.

[sirreal]

Created #40708 to track.

[razvanpapadopol]

Looking great on all resolutions! Added #40711 and #40712 as follow-ups so we can 🚀 this.