Skip to content

Commit c0a3bbb

Browse files
bhansell1bhansell1
authored
CCM-5093: static landing page (#24)
* My Signed Commit Signed-off-by: ben.hansell1 <[email protected]> * My Signed Commit Signed-off-by: ben.hansell1 <[email protected]> * CCM-5093: Work in process * CCM-5093: comments * CCM-5093: update how-it-works section to use an ordered list. * CCM-5093: finalised stylized page * CCM-5093: add an example of a action-link, a table and a image with a caption * CCM-5093: make footer data driven * CCM-5093: make landing page data driven * CCM-5092: fix image path to no longer require assets/images prefix * CCM-5092: add logic to render images that are not from assets/images/** * CCM-5092: fix stlying with price cards * CCM-5092: update example pages with custom content * CCM-5092: accept bundler as an acceptable word * CCM-5092: formatting * CCM-5092: more formatting * CCM-5092: formatting... * CCM-5092: update description for see how your messages perform * CCM-5092: move js-enabled script to body. Remove /web-cms/ prefix from paths and change app base URL * CCM-5093: remove just-the-docs * CCM-5093: update wording content * CCM-5093: remove ID from styled list * CCM-5093: remove card-group component * CCM-5093: correctly encode characters * CCM-5093: make examples page avaliable only in debug mode * CCM-5093: remove nonce until we determine a CSP. The nonce | random string doesn't work as expected anyhow. * CCM-5093: use nhsuk-frontend node module css. * CCM-5093: cp over nhsuk.min.js file on make install. Ideally we need a better way of handling all the deps in nhsuk-frontend suchas the favions, svgs and other assets * CCM-5093: update README.md with install instructions * CCM-5093: home.html to include default.html * CCM-5093: make homepage a markdown file. And sort out layouts so all layouts inherit from default * CCM-5093: add endfor as an accepted word * CCM-5093: add ADRs and update README.md * CCM-5093: fix markdown formatting * CCM-5093: add npm as an accetped word * CCM-5093: fix usage of NPM instead of npm * CCM-5093: add npm install to postcreatecommand.sh to installs deps when running in a container * CCM-5093: add additional docs explaining components and disable no-bar-urls in md * CCM-5093: fix linting errors * CCM-5093: add src as an accepted word * CCM-5093: add url as an accepted word * CCM-5093: add inset element * CCM-5093: fix formatting * CCM-5093: fix md051 * CCM-5093: inset regex * CCM-5093: line endings * CCM-5093: remove head.html and just use it on the default.html layout. * CCM-5093: line endings... * CCM-5093: fix content wording * CCM-5093: fix heading for the ordered list so it's read out correctly. Remove banner element. Add a 1 to the page * CCM-5093: update margin bottom for ordered list * CCM-5093: fix wave alerts for potentional headings --------- Signed-off-by: ben.hansell1 <[email protected]>
1 parent 14ba71e commit c0a3bbb

File tree

75 files changed

+1268
-339
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+1268
-339
lines changed

‎docs/Makefile‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,14 @@ default: install
33
h help:
44
@egrep '^\S|^$$' Makefile
55

6+
include-npm-deps:
7+
@cp node_modules/nhsuk-frontend/dist/nhsuk.min.js assets/js/nhsuk.min.js
8+
69
install:
710
bundle config set --local path vendor/bundle
811
bundle install
12+
npm install
13+
make include-npm-deps
914

1015
s serve:
1116
bundle exec jekyll serve --trace --livereload

‎docs/README.md‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,79 @@
11
# Developer info for Public Website
22

3-
Document here.
3+
## Setup
4+
5+
In the `docs` directory run the following command:
6+
7+
```bash
8+
make install
9+
```
10+
11+
This will install dependencies required by `Jekyll` and `npm`. On this install step we copy out `nhsuk.min.js` from `node_modules/nhsuk-frontend/dist`.
12+
13+
## Running the application
14+
15+
Run the following command to run the application in `debug` mode:
16+
17+
```bash
18+
make debug
19+
```
20+
21+
When running the application in `debug` mode the `/examples` page is available.
22+
23+
Run the following command to run the application in `production` mode:
24+
25+
```bash
26+
make s
27+
```
28+
29+
## Writing content
30+
31+
This project aims to keep content written in pure markdown with the exception of certain components supplied by the nhsuk design system.
32+
33+
### Markdown and Jekyll Examples
34+
35+
We have an `/examples/` page which aims to provide examples on how to use `markdown` and `Jekyll` together to display different components such as `actions-links`, `images with captions` and `tables`.
36+
37+
The `/examples/` page is only available when the application is run in `debug` mode ([see Running the application](#running-the-application)).
38+
39+
## Creating Jekyll include components
40+
41+
To write a Jekyll component please follow the guidance in [Jekyll \_includes](https://jekyllrb.com/docs/includes/). We have also adopted a pattern to use [Jekyll liquid filters](https://jekyllrb.com/docs/liquid/filters/) to apply `escaping` and `encoding` to input variables notably;
42+
43+
- `uri_escape` to escape any passed in URLS
44+
- `xml_escape` to encode any special characters being used on HTML attributes
45+
46+
### Encoding special characters
47+
48+
> This only applies to a `Jekyll component` in your markdown file.
49+
> At time of writing this doc (14/06/2024) all `Jekyll` components will encode values correctly.
50+
51+
When writing content you may need to `encode` special characters. What this means is for certain characters we need to use the encoded value:
52+
53+
| Character | Encoded | Description |
54+
| --------- | -------- | ----------------- |
55+
| ' | `&#39;` | Single quote |
56+
| " | `&quot;` | Double quote |
57+
| < | `&lt;` | Less than sign |
58+
| > | `&gt;` | Greater than sign |
59+
60+
The above table contains the main characters which could cause issues. A more extensive list can be found [here](https://psdtowp.net/html-codes-special-characters.html).
61+
62+
## NHS styled Jekyll components
63+
64+
Below is a list of the supported nhsuk [design system components](https://service-manual.nhs.uk/design-system/components) to use in `markdown` and `html` files.
65+
66+
- [Image](_includes/components/docs/image.component.md)
67+
- [Action link](_includes/components/docs/action-link.component.md)
68+
- [Inset text](_includes/components/docs/inset-text.component.md)
69+
70+
## Assets
71+
72+
We have an assets folder which is used to put files such as;
73+
74+
- favicons
75+
- images
76+
- Javascript
77+
- CSS
78+
79+
If you have new images, favicons or other assets place them in the corresponding folder and the asset will be available via `/assets/<assert_type>/<asset_name>` for example `/assets/images/landing-main-image.svg`.

‎docs/_config.dev.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
21
baseurl: "" # the subpath of your site, e.g. /blog
2+
3+
include:
4+
- pages/examples/

‎docs/_config.yml‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ title: NHS Notify CMS
2222
# email: [email protected]
2323
description: >- # this means to ignore newlines until "baseurl:"
2424
NHS Notify Web CMS
25-
baseurl: "/nhs-notify-web-cms" # the subpath of your site, e.g. /blog
25+
baseurl: "" # the subpath of your site, e.g. /blog
2626
url: "https://nhsdigital.github.io" # the base hostname & protocol for your site, e.g. http://example.com
2727

2828
collections_dir: collections
@@ -33,7 +33,6 @@ collections:
3333
sort_by: order
3434

3535
# Build settings
36-
theme: just-the-docs
3736
plugins:
3837
- jekyll-feed
3938

@@ -68,6 +67,12 @@ callouts:
6867
title: Warning
6968
color: red
7069

70+
sass:
71+
style: compact # possible values: nested expanded compact compressed
72+
load_paths:
73+
- _sass/
74+
- node_modules/nhsuk-frontend/packages/
75+
7176
# Exclude from processing.
7277
# The following items will not be processed, by default.
7378
# Any item listed under the `exclude:` key here will be automatically added to
@@ -89,3 +94,6 @@ exclude:
8994
- vendor/cache/
9095
- vendor/gems/
9196
- vendor/ruby/
97+
- pages/examples/
98+
- adr/
99+
- '*.component.md'

‎docs/_data/footer-navigation.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# - title: Accessibility statement
2+
# link: /

‎docs/_data/home/benefits.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
- heading: Lower your messaging costs
2+
description: |
3+
Pay less for messages with our competitive rates and never pay any service or integration fees.
4+
5+
- heading: Increase your operating efficiency
6+
description: |
7+
Make procuring messages easier by using NHS Notify as a centralised all-in-one provider.
8+
9+
- heading: Message your audiences more effectively
10+
description: |
11+
Use a range of channels and formats to message people in the ways that work best for them.
12+

‎docs/_data/home/find-out-more.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
heading: Find out how you can start using NHS Notify
2+
description: |
3+
NHS England organisations and services that support direct care can register their interest and get started with NHS Notify.
4+
image: CTA-register-your-interest.svg
5+
image_alt: A graphic of a laptop screen with a draft email open.

‎docs/_data/home/heading.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
heading: Send NHS App messages, emails, tests and letters to patients and the public
2+
description: |
3+
You can use NHS Notify if you work in NHS England and support direct care.
4+
image: landing-main-image.svg
5+
image_alt: |
6+
A graphic representation of NHS Notify's message channels:
7+
NHS App messages, emails, text messages and letters.

‎docs/_data/home/how-it-works.yml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
- heading: Write your messages
2+
description: |
3+
Create and edit reusable templates for each message channel:
4+
- NHS App messages
5+
- emails
6+
- text messages (SMS)
7+
- letters
8+
image: 1-write-your-message.svg
9+
image_alt: A screenshot showing how you write messages using NHS Notify's user interface.
10+
11+
- heading: Choose your recipients
12+
description: |
13+
Provide the NHS numbers of the people you want to send messages to.
14+
image: 2-choose-your-recipients.svg
15+
image_alt: A screenshot of computer code showing how you choose your message recipients.
16+
17+
- heading: Plan how your messages will be sent
18+
description: |
19+
Set up routing plans to decide how your messages will be sent to your recipients.
20+
image: 3-plan-your-messages.svg
21+
image_alt: A graphic of a phone, laptop and letter (numbered 1, 2 and 3 in that order) to show that you can send messages with each message channel in a specific order.
22+
23+
- heading: See how your messages perform
24+
description: |
25+
Track how many messages you've sent and find out which ones are not being delivered.
26+
image: 4-see-message-performance.svg
27+
image_alt: Track how many messages you've sent and find out which ones are not being delivered.

‎docs/_data/home/pricing.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
- heading: NHS App
2+
description: unlimited messages
3+
pricing: Free
4+
5+
- heading: Emails
6+
description: unlimited emails
7+
pricing: Free
8+
9+
- heading: Texts (SMS)
10+
description: up to 30,000 free texts then
11+
pricing: 2.27p
12+
13+
- heading: Letters
14+
description: A4, 2 sides, sent 2nd class
15+
pricing: 54p

0 commit comments

Comments
 (0)