Devographics | chart screenshot capturing tool

This project generate screenshots of the survey result apps which can then be used for social sharing for example.

It's gonna generate screenshots for every locale and every exportable block.

It also provides an extra utility to generate a mosaic of all screenshots for every available locale.

requirements | install | usage | contributing

Requirements

Tooling

• node.js v15
• yarn

Results project

This project relies on the sitemap generated by our gatsby results app, thus, you should have both a config/capture.yml and config/sitemap.yml file available in the project's directory.

:warning: we're using sitemap.yml (VS raw_sitemap.yml), so you need to run gatsby develop or gatsby build prior to trying to capture. You also need to make sure the application is running :)

Install

pnpm i

Usage

First you need to compile TypeScript:

pnpm run build

Generate the screenshots

You can use the following command to run the captures:

./capture.mjs ../results/surveys/css2023/config/config.yml ../images/captures/css2023
# or if you want to monitor how long it takes
time ./capture.mjs ../StateOfCSS-2020 ../screenshots/css_2020
# restart from a specific locale
./capture.mjs ../results/surveys/graphql2022/config/config.yml ../stateof-images/captures/graphql2022 de-DE+

where ../monorepo/results/surveys/css2022/ is the relative path to the survey results app, and ../images/captures/css2022 the relative path to the directory used to save the screenshots.

Some logs are gonna be generated in capture.log.

Use local config and sitemap

If the path computed automatically or config from the result app are not correct, you can put a config and sitemap directly in the "./config" folder:

./capture ./config/config.yml ../images/captures/css2022

The file config/config.yml should have the following structure:

# the base URL to use, can be either local or remote,
baseUrl: http://localhost:9000
# optionnaly if you want to use a local sitemap
sitemap: './sitemap.yml'
# configuration for mosaic generation
mosaic:
    thumb_width: 500
    thumb_height: 400
    columns: 14
    # background color to use for the generated image
    # which should be aligned with the survey styles
    background: 0x232840FF

Regarding the structure of the sitemap.yml file, please have a look at the Sitemap type in src/types.ts.

Generating a mosaic of all screenshots

You can use the following command to generate the mosaics:

./mosaic ../StateOfCSS-2020 ../screenshots/css_2020

then each locale screenshot folder will contain a mosaic.png file.

Contributing

This project use prettier to maintain a consistent formatting, in order to format your code, please run:

yarn fmt

You can also check that the code was properly formatted using:

yarn fmt:check