Digital prevention services design history

A place for services within digital prevention services to document their design decisions and research learnings.

Installation and getting started

1. Clone the repo to a folder on your computer
2. In your terminal, cd to the folder
3. Run npm install to install pre-requisites
4. Run npm start to build the design history site and serve it
5. View the site locally at localhost:8080

Adding a new service

To add a new service, there is some set up involved.

You will need to create some files and folders based on the name of your service, using lowercase and hyphens. For example your-service-name.

You’ll need to:

• create a Markdown file in app/posts/, for example app/posts/your-service-name.md. Copy an existing example and update any references to match your service.
• create a folder for your service in app/images/, for example app/images/your-service-name/
• create a folder for your service in app/posts/, for example app/posts/your-service-name/
• inside your service’s post folder, create a JSON file your-service-name.json, for example app/posts/your-service-name/your-service-name.json. Copy an existing example for what to put in it.
• update eleventy.config.js to create a new ‘collection’ for your service (copy one of the existing examples)
• update app/_layouts/_product.njk to list your new service in the sections variable
• open a pull request with your changes

See Divide a design history into different sections.

Adding a new post

You have two choices for adding a post:

• Add a post manually
• Use the post generation scripts

Add a post manually

1. Draft your design history post - it’s often easiest to do this in SharePoint

2. Create a new markdown file in app/posts/[service-name]/YYYY/MM/[post-name].md

   It’s often easier to duplicate an existing post as that will have the headers you need

3. Edit the post with your content - make sure it has a title, subtitle, and date

4. If you have images, add them to a folder in app/images/[service-name]/YYYY/MM/[post-name]/

5. Make a pull request with your changes and get it reviewed

Add a post using the generation scripts

View more details on the scripts here.

1. Use a PNG optimiser like TinyPNG to reduce the file size of your images.
2. Create a folder for your images and put them in app/images/[service-name]/YYYY/MM/[post-name]/
3. From the terminal, run node scripts/generate.js [path] where path is the full path to the folder of images. The easiest way to do this is to type node scripts/generate.js and then drag the folder from Finder on to your terminal to fill in the path.
4. The script will generate a new post linking to each image and place it in app/posts/[service-name]/YYYY/MM/[post-name].md.
5. You should check the title text for each image and amend as needed.
6. The script will prepend the post filename with the current date but you can delete this if you like.

Deploying and publishing

Once you have a post you want to publish, make a pull request on this repo with your suggested change.

Once it is merged the updated design history will automatically deploy with your post.

Support

For issues relating to the NHS Digital prevention services design history, contact Ed Horsford, Frankie Roberto or Ralph Hawkins.

The GOV.UK design history project is maintained by a small number of volunteers working across government.

For questions about using a design history for your service, bug reports or feedback, submit a new issue.

Technical notes

The design history uses the GOV.UK Design System and the Eleventy static site generator with the GOV.UK Eleventy Plugin.