Improve setup documentation for the prototype kit

[jrbarnes9]

Tasks

Review the current documentation to outline steps to take ahead of setting up the ONS Prototype Kit. Check that it is up-to-date and that the guidance/instructions are correct.

• [ ] Git config
• [ ] Github accounts
• [ ] SSH and GPG keys (this is currently missing from the DS/Github README - we have some information in Confluence that can be reviewed by a content designer)
• [ ] Yarn, node, nvm etc.

This ticket blocks #45.

[daniellecorke]

This ticket was reviewed in the backlog review session - most of the setup guidance has now been added to the Service Manual, and/or, the Github README.

Discuss with Richard M to understand whether we need to expand the current documentation to include GPG and SSH info for deploying prototypes. If not, this ticket can be closed.

[SriHV]

Based on my testing with the prototype, I believe we can make some improvements, particularly in the installation process and prototype creation. Similar to the NHS and GOV.UK prototype kits, we can provide various installation guides. One guide will be for new users, explaining each step in detail with visual aids and another will be for advanced users, covering only the important steps For reference, see the NHS UK installation guide and the GOV.UK getting started guide.

For the new users installation kit, we can include:

• How to access Terminal
• Downloading VS code editor
• Setting up Git, including setting your username and commit email address
• SSH keys guide and GPG keys guide
• Setting up the kit(How to clone the prototype kit)
• Installing Node.js
• Installing Yarn
• Install the latest version of the ONS design system and running the kit

For advanced users, we can include:

• Requirements of the kit (Node.js, Yarn)
• Creating a prototype
• Running the kit

Then we can add instructions on how to create a new prototype(including visual aids).These can be explained using the existing example.Note-: I only had difficulty in this area once I cloned the prototype kit. I already had yarn,NodeJs and Git account setup in my system. The steps can include:

1. Explanation of important files and folders in the kit
2. Creating new pages
3. Adding custom CSS and JavaScript
4. Passing data between pages
5. Linking pages
6. Other essential information for running and updating kit

[e-livingstone]

pending G6 approval to attach to SNow request for a Mac

[e-livingstone]

Mac request approved; @Majsol collecting today