Embeddable theme previews

[lmorchard]

Total blue sky idea: Might be interesting to offer embeddable theme previews for third-party pages (ie. blogs) and social media. Easiest would be via iframe - but not useful for social media. Harder would be to somehow generate an image preview for Twitter & Facebook & friends. (i.e. we'd need some kind of active server-side component to turn theme JSON into an image, from an automatic screenshot or templated SVG or some other weird idea)

[pdehaan]

Is this something that Screenshots would be able to do? Or does Screenshots require somebody to manually select a DOM element and we should use something like a headless PhantomJS, webshot, or whatever the kids use these days puppeteer.

---

UPDATE: Possibly relevant/interesting https://medium.com/@danielsternlicht/capturing-dom-elements-screenshots-server-side-vs-client-side-approaches-6901c706c56f

[lmorchard]

@Screenshots is manual, we'd have to use something like webshot or puppeteer.

Another approach might be to construct an SVG with the colors filled in from a theme and then use something like svg2png to rasterize it, since I don't think Twitter or Facebook accept SVG for thumbnails

[pdehaan]

+1 to SVG idea. I was trying to figure out Puppeteer API and didn't see an obvious way of selecting a single DOM element to snapshot (but you can set a viewport and a x/y width/height).

[lmorchard]

Yeah, I think we'd probably want to customize the particular thumbnail for sharing, versus trying to take a direct screen shot of some DOM elements