OrgPad logo

OrgPage screenshots

Created by Pavel KlavĂ­k

#OrgPad

OrgPage screenshots

environment.txt

We need to add a few variables:

Running npm install there

It will update all new dependencies. We are not changing them often, so it should be finished immediately.

Running the server

node screenshot.js

We need to add this as a service, so we can do systemctl screenshot start, etc. Environment variables need to be shared.

Building

It is done as part of uberjar compilation:

shadow-cljs release screenshot

Generates screenshot/screenshot.js.

Copying to some directory on the server

Together with package.json and config.edn in screenshot directory.

Block all operations

So we don't see changes in the screenshot when someone is still working on the Orgpage.

Deployment

Generating thumbnails

Should be relatively easy using this library:

https://sharp.pixelplumbing.com/

Set exact zoom level

Instead of rounding it, so we see as much as possible.

Display only Orgpage for screenshot

When screenshot=true is set, remove panel and all popups.

Also, add #screenshot into DOM when Orgpage is loaded.

29446482-04f7036a-841f-11e7-9872-91d1fc2ea683

Example code in ClojureScript

Without Shadow-cljs, there it should be even simpler.

https://gist.github.com/apeckham/ec1725b22642d9344e294c701de18fb2

Request for Orgpage route adds image url for FB, etc.

Assuming that the Orgpage is public or a valid token is passed within the URL.

Storing images directly to S3, also their thumbnails

https://stackoverflow.com/questions/56693877/what-is-the-recommended-way-to-save-image-data-from-a-puppeteer-screenshot

Puppeteer

https://github.com/puppeteer/puppeteer

Orgpad client

Blog post with example code

https://bitsofco.de/using-a-headless-browser-to-capture-page-screenshots/

OrgPad server

Running HTTP server on some port

We want to run it on localhost:3100. It should be accessible only from local machine (i.e., OrgPad server), not from outside. (At least for this moment.)

Remove sending preview sizes

Request for a preview or its thumbnail redirect to S3

After checking that you can access this resource.

Remove preview sizes

NodeJS server

Maybe we can build it with this: https://macchiato-framework.github.io/. We don't really need much from it anyway.

Schedules regeneration of screenshots

After every change, the screenshot is generated in 5 minutes. Further changes do not postpone this.

Scheduler sends an HTTP request

Containing orgpage-id and read access token.

nodejs-01