search

smartcoop / design

An open source design system for Smart applications
https://design.smart.coop
Other
4 stars 1 forks source link

Generate PNGs of the example pages #156

Open thusc opened 3 years ago

thusc commented 3 years ago

I think it would be nice that for an example page, e.g. https://design.smart.coop/development/template-examples/app-form.html, we get screenshot as, e.g. https://design.smart.coop/development/template-examples/app-form.png.

This would make it easy to refer visually to an example page in a documentation page.

Depending on the "scrollability" of the page, we could also offer "full page" renders, i.e. that show the whole page, not just a single top screen viewport.

Wolfr commented 2 years ago

We could maybe use a script to make screenshots of the public pages. I tried something:

npm -g screenshoteer
screenshoteer  --url https://design.smart.coop/development/tools/simulation-empty --w 1280 --h 800 --file ./content/images/screenshots/simulation-empty.png
screenshoteer  --url https://design.smart.coop/development/tools/contracts-empty --w 1280 --h 800 --file ./content/images/screenshots/contracts-empty.png
screenshoteer  --url https://design.smart.coop/development/tools/contracts --w 1280 --h 800 --file ./content/images/screenshots/contracts.png
screenshoteer  --url https://design.smart.coop/development/tools/simulation-loading --w 1280 --h 800 --file ./content/images/screenshots/simulation-loading.png
screenshoteer  --url https://design.smart.coop/development/tools/simulation --w 1280 --h 800 --file ./content/images/screenshots/simulation.png
screenshoteer  --url https://design.smart.coop/development/template-examples/app-datagrid --w 1280 --h 800 --file ./content/images/screenshots/app-datagrid.png
screenshoteer  --url https://design.smart.coop/development/template-examples/app-form-alt-scroll --w 1280 --h 800 --file ./content/images/screenshots/app-form-alt-scroll.png
screenshoteer  --url https://design.smart.coop/development/template-examples/app-form --w 1280 --h 800 --file ./content/images/screenshots/app-form.png
screenshoteer  --url https://design.smart.coop/development/template-examples/app-side-menu --w 1280 --h 800 --file ./content/images/screenshots/app-side-menu.png
screenshoteer  --url https://design.smart.coop/development/template-examples/contact-form --w 1280 --h 800 --file ./content/images/screenshots/contact-form.png
screenshoteer  --url https://design.smart.coop/development/template-examples/dialog --w 1280 --h 800 --file ./content/images/screenshots/dialog.png
screenshoteer  --url https://design.smart.coop/development/template-examples/global-banner --w 1280 --h 800 --file ./content/images/screenshots/global-banner.png
screenshoteer  --url https://design.smart.coop/development/template-examples/horizontal-form --w 1280 --h 800 --file ./content/images/screenshots/horizontal-form.png
screenshoteer  --url https://design.smart.coop/development/template-examples/register-form --w 1280 --h 800 --file ./content/images/screenshots/register-form.png
screenshoteer  --url https://design.smart.coop/development/template-examples/sign-in-form --w 1280 --h 800 --file ./content/images/screenshots/sign-in-form.png
screenshoteer  --url https://design.smart.coop/development/template-examples/wizard --w 1280 --h 800 --file ./content/images/screenshots/wizard.png

This puts some screenshots in the images folder that we could then use to have a more visual overview for the templates.