Generate a page of screenshots

The design history project provides 2 scripts to help you generate a post featuring a list of screenshots. See an example.

The first allows you to capture these screenshots from a sequence of URLs, perhaps from a user journey you have prototyped, the second allows you to generate a page from a folder of images.

# Generate a post with screenshots taken from a sequence of URLs

Open scripts/screenshot.js. In this file you will see 2 values:
- domain: the website you want to screenshot, eg localhost:3000
- paths: an array of named paths
Replace these with your desired values.
In the terminal, type:

node scripts/screenshot.js [name-of-your-feature]

This will:
- visit each page lists in paths and save a screenshot
- save those screenshots in the named directory
- generate an index page with screenshots listed in order

# Example

With the following values in scripts/screenshots.js:

const domain = 'http://localhost:3000'
const paths = [
  { title: 'Start page', path: '/'},
  { title: 'Personal details', path: '/personal-details' },
  { title: 'Check your answers', path: '/check-your-answers' },
  { title: 'Confirmation', path: '/confirmation' }
]

running node scripts/screenshot.js submit-personal-details will generate the following images:

app/images/submit-personal-details/start-page.png
app/images/submit-personal-details/personal-details.png
app/images/submit-personal-details/check-your-answers.png
app/images/submit-personal-details/confirmation-page.png

A post will also be created, using the name of the directory and current date, for example:

app/posts/2021-05-14-submit-personal-details.md

# Generate a page of screenshots from a folder of images

Create a new folder within app/images.
Add images inside this folder. Screenshots will be generated in alphabetical order. If you want to have them appear in sequence, you can use numbered prefixes, ie. 01-index-page.png, 02-question-page.png.
In the terminal, type:
```
node scripts/generate.js [name-of-directory-holding-images]
```
This will generate an index page with screenshots listed in order, creating a post using the name of the containing folder.

# The generated post

This file will be pre-populated with a title, date, and a screenshots component:

---
title: Submit personal details
description:
date: 2021-05-14
---
{% from "screenshots/macro.njk" import appScreenshots with context %}
{{ appScreenshots({
  items: [
    { text: "Index page" },
    { text: "Personal details" },
    { text: "Check your answers" },
    { text: "Confirmation" }
  ]
}) }}

If you want to change the name of any images, you can use the id value to tell the screenshots component what filename to look for, for example:

{{ appScreenshots({
  items: [
    { text: "Index page", id: "01-index-page" },
    { text: "Personal details", id: "02-personal-details" },
    { text: "Check your answers", id: "03-check-your-answers" },
    { text: "Confirmation", id: "04-confirmation" }
  ]
}) }}