Initial commit

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/dependabot.yml

@@ -0,0 +1,13 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: markdown-it-anchor
+    versions:
+    - 7.0.0
+    - 7.0.1
+    - 7.0.2

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '38 15 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: deploy
+
+on:
+  push:
+    branches:
+      - main
+
+  # Enable running this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Set permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with Eleventy
+        run: npm run-script build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,4 @@
+# Folders to ignore
+node_modules
+_site
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+audit=false

.nvmrc

@@ -0,0 +1 @@
+18

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.18.0

LICENSE.txt

@@ -0,0 +1,22 @@
+The MIT License
+
+Copyright (c) 2021 X-GOVUK
+Copyright (c) 2020 Crown Copyright (Government Digital Service)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Procfile

@@ -0,0 +1 @@
+web: npm run serve

README.md

@@ -0,0 +1,27 @@
+# Design history for NHS.UK services
+
+A place for you to document your NHS.UK service designs.
+
+## Purpose of this project
+
+This repository makes it easy to:
+
+* screenshot your designs
+* create pages of screenshots to document designs
+* document designs using the [GOV.UK Design System](https://design-system.service.gov.uk/)
+* print pages of designs
+* make designs shareable and linkable
+
+## Installation and getting started
+
+Read our guide on how to [set up a design history](https://x-govuk.github.io/govuk-design-history/get-started/).
+
+## Support
+
+This 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](https://github.com/x-govuk/govuk-design-history-template/issues/new).
+
+## Technical notes
+
+The design history uses the [GOV.UK Design System](https://design-system.service.gov.uk) and the [Eleventy](https://www.11ty.dev) static site generator with the [GOV.UK Eleventy Plugin](https://x-govuk.github.io/govuk-eleventy-plugin/).

app/_components/_all.scss

@@ -0,0 +1,3 @@
+@import "email/email";
+@import "header/header";
+@import "screenshots/screenshots";

app/_components/email/_email.scss

@@ -0,0 +1,19 @@
+.app-email {
+  border: $govuk-border-width solid $govuk-border-colour;
+  padding: govuk-spacing(4);
+  margin-bottom: govuk-spacing(8);
+  max-width: 40rem;
+
+  h1, h2, h3, h4 {
+    @include govuk-font-size($size: 27);
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(4);
+  }
+}
+
+.app-email__subject {
+  padding-bottom: govuk-spacing(4);
+  margin-top: 0;
+  margin-bottom: govuk-spacing(4);
+  border-bottom: 1px solid $govuk-border-colour;
+}

app/_components/email/macro.njk

@@ -0,0 +1,3 @@
+{% macro appEmail(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/_components/email/template.njk

@@ -0,0 +1,6 @@
+<div class="app-email{%- if params.classes %} {{ params.classes }}{% endif %}">
+{%- if params.subject -%}
+  <h3 class="app-email__subject govuk-heading-m">{{- params.subject | safe if params.subject -}}</h3>
+{%- endif %}
+{{- params.content | markdown | safe if params.content -}}
+</div>

app/_components/header/_header.scss

@@ -0,0 +1,39 @@
+.app-header {
+  background-color: #005eb8;
+  border: 0;
+}
+
+.app-header__container {
+  border-bottom: 1px solid rgba(govuk-colour("white"), 0.2);
+  margin-bottom: 0;
+  padding-bottom: govuk-spacing(4);
+  padding-top: govuk-spacing(4);
+}
+
+.govuk-header__logo {
+  margin: 0;
+}
+
+.govuk-header__link--homepage {
+  display: flex;
+  align-items: center;
+  gap: govuk-spacing(3);
+
+  &:hover {
+    border-color: transparent;
+
+    .govuk-header__product-name {
+      text-decoration: underline;
+    }
+  }
+}
+
+.govuk-header__product-name {
+  @include govuk-font(19);
+  margin: 0;
+}
+
+.app-site-search:defined {
+  margin: 0;
+  padding: 0;
+}

app/_components/screenshots/_screenshots.scss

@@ -0,0 +1,22 @@
+.app-screenshots__contents,
+.app-screenshots__screenshot {
+  margin-bottom: govuk-spacing(9);
+}
+
+@include govuk-media-query($media-type: print) {
+  // Separate screenshots from surrounding content
+  .app-screenshots {
+    page-break-before: always;
+    page-break-after: always;
+  }
+
+  .app-screenshots__screenshot {
+    // New page per screenshot
+    page-break-before: always;
+
+    // Hide image URLs
+    a:after {
+      display: none;
+    }
+  }
+}

app/_components/screenshots/macro.njk

@@ -0,0 +1,3 @@
+{% macro appScreenshots(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/_components/screenshots/template.njk

@@ -0,0 +1,30 @@
+{%- set title = params.title or "Screenshots" -%}
+{%- set id = title | slugify -%}
+{%- set headingLevel = params.headingLevel or 2 -%}
+<section class="app-screenshots app-prose govuk-!-margin-top-9" id="{{ id }}">
+  <div class="govuk-!-display-none-print">
+    <h{{ headingLevel }} class="govuk-heading-l" tabindex="-1">
+      <a class="app-link--heading govuk-link" href="#{{ id }}">{{ title }}</a>
+    </h{{ headingLevel }}>
+    <ul class="govuk-list app-screenshots__contents">
+      {%- for item in params.items %}
+        {%- set itemTitle = item.text or item -%}
+        {%- set itemId = item.id or (itemTitle | slugify) -%}
+        <li><a class="govuk-link" href="#{{ itemId }}">{{ itemTitle }}</a></li>
+      {%- endfor %}
+    </ul>
+  </div>
+{% for item in params.items -%}
+  {%- set itemTitle = item.text or item -%}
+  {%- set itemId = item.id or (itemTitle | slugify) -%}
+  {%- set file = item.src or (itemId + ".png") -%}
+  {%- set alt = item.alt or ("Screenshot of " + itemTitle) -%}
+  <figure class="app-screenshots__screenshot" id="{{ itemId }}">
+    <h{{ headingLevel + 1 }} class="govuk-heading-m" tabindex="-1">
+      <a class="app-link--heading govuk-link" href="#{{ itemId }}">{{ itemTitle }}</a>
+    </h{{ headingLevel + 1 }}>
+    <a class="govuk-link" href="{{ file }}"><img src="{{ file }}" alt="{{ alt }}"></a>
+    {%- if item.caption %}<figcaption>{{ item.caption | markdown | safe }}</figcaption>{% endif %}
+  </figure>
+{%- endfor %}
+</section>

app/_layouts/collection.njk

@@ -0,0 +1 @@
+{% extends "layouts/collection.njk" %}

app/_layouts/page.njk

@@ -0,0 +1,19 @@
+{% extends "layouts/page.njk" %}
+
+{% from "screenshots/macro.njk" import appScreenshots %}
+
+{% block content %}
+  {{ appDocumentHeader({
+    title: title | noOrphans
+  }) }}
+
+  {% call appProseScope() %}
+    {{ content }}
+
+    {% for collection in screenshots %}
+      {{ appScreenshots(collection) }}
+    {% else %}
+      {{ appScreenshots(screenshots) if screenshots }}
+    {% endfor %}
+  {% endcall %}
+{% endblock %}