-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gutenboarding: use static, tall screenshots #40632
Gutenboarding: use static, tall screenshots #40632
Conversation
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~54 bytes added 📈 [gzipped])
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. Generated by performance advisor bot at iscalypsofastyet.com. |
height: 2200, | ||
deviceScaleFactor: 1, | ||
} ); | ||
await page.goto( url, { waitUntil: 'networkidle0' } ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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. |
- Use `capture-website` instead of Puppeteer directly to simplify - To crop and resize the output image
eb23ddc
to
546bdd3
Compare
@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. |
I'll have a look, but I think it's a tradeoff worth taking since users wanted to see more of their page |
@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. |
// https://github.com/Automattic/mShots/issues/16 | ||
// https://github.com/Automattic/wp-calypso/issues/40564 | ||
if ( ! isEnabled( 'gutenboarding/mshot-preview' ) ) { | ||
return `/calypso/page-templates/design-screenshots/${ design.slug }_${ design.template }_${ design.theme }.jpg`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Created #40708 to track.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wrapping the mshot preload in a feature flag As noted in #40632, we must temporarily show pre-generated screenshots until we can generate tall versions dynamically using mshots
Resolves #40564
Changes proposed in this Pull Request
Testing instructions
Design
CLI
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
frompackage.json
npm i capture-website sharp
.static/page-templates/design-screenshots
node bin/generate-gutenboarding-design-thumbnails.js
to generate new onesstatic/page-templates/design-screenshots