A screenshot web component

[zachleat]

Customizable viewport size, toggle between JS enabled and not.

https://pptr.dev/#?product=Puppeteer&version=v5.5.0&show=api-pagescreenshotoptions

Stretch goal: Allow scrolling?

Would be great for https://www.11ty.dev/

[nhoizey]

Would it make a screenshot of the page where the component is used?

If so, that means all screenshots made with the component have the screenshot button visible? 🤔

[zachleat]

Ah, no sorry, you’d point it at a URL and it would display the screenshot of that URL.

I’m thinking a reusable thing for this (with a few more features) on the 11ty.dev home page and author pages:

[nhoizey]

Oooh, ok, now I understand.

I currently use thum.io for this (but it's limited), and resize with Cloudinary. A simple local solution would be great indeed! 👍

[zachleat]

This exists now https://github.com/11ty/api-screenshot but wow I want to do the scrolling thing 😅

[nhoizey]

With scrolling, do you aim for:

• full page screenshot?
• and/or animation of the scroll?

[zachleat]

(For future me) I did build a demo of this but it’s kinda half baked and not public yet. Dunno if I’ll circle back to it but a private repo is here: https://github.com/11ty/component-screenshot

The interaction would be smoother if you don’t have obtrusive scrollbars like me.

[nhoizey]

I don't really understand what happens here… 😅

It this whole animation an automated screencast with a mouse pointer "activating" an iframe and scrolling inside?

[zachleat]

It starts out with a standard screenshot, and then you can click to activate and load a full page screenshot in the same pane (which is scrollable). Not sure if it’s practical or worth it 😅 which is why I’ll probably just leave it private.

Gonna close this one

[nhoizey]

Ok! 😅