Adding information about using GitHub and GitHub Desktop

app/views/how-tos/git.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block pageTitle %}
-  How to setup Git - NHS prototype kit
+  How to setup Git using the terminal - NHS prototype kit
 {% endblock %}
 
 {% block beforeContent %}
@@ -14,7 +14,7 @@
     <div class="nhsuk-grid-column-two-thirds">
 
       <h1>
-        Setting up Git
+        Setting up Git using the terminal
       </h1>
 
       <p>Git is a type of version control software that tracks changes in your code. For example, when you edit a file, Git can help you determine exactly what changed, who changed it, and why.</p>

app/views/how-tos/github/collaborate.html

@@ -0,0 +1,130 @@
+{% extends "layout.html" %} {% block pageTitle %} Collaborate on prototypes
+using GitHub Desktop - NHS prototype kit {% endblock %} {% block beforeContent
+%} {{ breadcrumb({ items: [ { href: "/", text: "Home" }, { href: "/how-tos",
+text: "Guides" }, { href: "/how-tos/github/index", text: "Store code online with
+GitHub and GitHub desktop" } ] }) }} {% endblock %} {% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+    <h1 class="nhsuk-heading-xl">
+      Collaborate on prototypes using GitHub Desktop
+    </h1>
+
+    <p>
+      When you store a prototype on GitHub, you can collaborate on your code
+      with anyone in your team.
+    </p>
+    <p>
+      You can make a 'branch' (a separate version) so it doesn't affect anyone
+      else.
+    </p>
+    <p>
+      When you are ready to suggest your changes, you can make a 'pull request'
+      to the <code>main</code> branch. This will share your suggested changes
+      with the rest of the team for them to review.
+    </p>
+    <p>
+      If you are working on your own, you can make changes on
+      <code>main</code> without using branches.
+    </p>
+    <h2 class="nhsuk-heading-m">Create a branch</h2>
+
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        In Github Desktop top bar, select
+        <strong>Current branch</strong>.
+      </li>
+      <li>
+        Select
+        <strong>New branch</strong>.
+      </li>
+      <li>
+        Enter a branch name and select
+        <strong>Create branch based on 'main'</strong>.
+      </li>
+    </ol>
+    <h2 class="nhsuk-heading-m">Save and share changes</h2>
+
+    <p>
+      Make your changes to the prototype and save them in your code editor, then
+      you can share them by creating a 'pull request'.
+    </p>
+    <p>GitHub Desktop will show you the files that have changed.</p>
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        In Github Desktop, bottom left, enter a summary in the box above the
+        <strong>description</strong> (leave the description blank).
+      </li>
+      <li>Select <strong>Commit to branch-name</strong></li>
+      <li>
+        Click <strong>Publish repository</strong> - this publishes your code to
+        GitHub.
+      </li>
+      <li>
+        If you make more changes, commit them and select
+        <strong>Push origin</strong>.
+      </li>
+    </ol>
+
+    <h2 class="nhsuk-heading-m">Make a pull request</h2>
+
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        Select <strong>Create a pull request</strong> - this tells others about
+        your new branch, so they can review and suggest changes.
+        <br />
+        If you can't see that button, select the <strong>Branch</strong> menu,
+        then <strong>Create a pull request</strong>.
+      </li>
+      <li>
+        Creating a pull request will open GitHub website. Write a title and
+        description of your changes and select
+        <strong>Create pull request</strong>.
+      </li>
+    </ol>
+    <h2 class="nhsuk-heading-m">Review a pull request</h2>
+    <p>Another member of the team should review the pull request on GitHub.</p>
+
+    <p>They should:</p>
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>Go to the <strong>Files Changed</strong> tab.</li>
+      <li>Select <strong>Review changes</strong>.</li>
+    </ol>
+    <p>When they have approved the pull request:</p>
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>Go to the Conversation tab</li>
+      <li>Select Merge pull request</li>
+    </ol>
+
+    <h2 class="nhsuk-heading-m">Download changes</h2>
+
+    <p>
+      When a pull request is merged, you'll need to update your version (also
+      called 'pulling' changes).
+    </p>
+
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        In Github Desktop top bar, select <strong>Current branch</strong>.
+      </li>
+      <li>Select <strong>main</strong>.</li>
+      <li>
+        Click <strong>Fetch origin</strong> and then
+        <strong>Pull origin</strong>.
+      </li>
+      <li>
+        Select <strong>Open in Visual Studio Code</strong> to view the changes.
+      </li>
+    </ol>
+    <h2 class="nhsuk-heading-m">Dealing with conflicts</h2>
+    <p>
+      If 2 people edit the same file at the same time, it can sometimes cause an
+      error in GitHub called a conflict.
+    </p>
+    <p>
+      If there is a conflict, you must manually resolve the change - ask a
+      developer on your team to help.
+    </p>
+  </div>
+</div>
+{% endblock %}

app/views/how-tos/github/download-existing-prototype.html

@@ -0,0 +1,61 @@
+{% extends "layout.html" %} {% block pageTitle %} Download an existing prototype
+from GitHub - NHS prototype kit {% endblock %} {% block beforeContent %} {{
+breadcrumb({ items: [ { href: "/", text: "Home" }, { href: "/how-tos", text:
+"Guides" }, { href: "/how-tos/github/index", text: "Store code online with
+GitHub and GitHub desktop" } ] }) }} {% endblock %} {% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+    <h1 class="nhsuk-heading-xl">Download an existing prototype from GitHub</h1>
+
+    <p>
+      To store your new prototype in GitHub, you need to
+      <a href="index">set up GitHub Desktop</a>. If you work for NHS England,
+      you also need to followed
+      <a href="nhs-england">the extra GitHub steps</a>.
+    </p>
+    <p>
+      You can work with others on an existing prototype. For example, if you're
+      joining a team that has a prototype.
+    </p>
+    <h2 class="nhsuk-heading-m">Download the prototype</h2>
+    <p>
+      To work on an existing prototype, you'll need to download (or 'clone') the
+      repository.
+    </p>
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        Go to the prototype's repository on GitHub (if you do not have a link,
+        ask your team).
+      </li>
+      <li>
+        Select the <strong>Code</strong> button and
+        <strong>Open with GitHub Desktop</strong>.
+      </li>
+      <li>Choose a local path. This should be your prototypes folder.</li>
+    </ol>
+    <h2 class="nhsuk-heading-m">Open the prototype</h2>
+
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        In GitHub Desktop, select <strong>Open in Visual Studio Code</strong>.
+      </li>
+      <li>
+        Go to the terminal in Visual Studio Code. Select
+        <strong>Terminal</strong> and <strong>New Terminal</strong>.
+      </li>
+      <li>In the terminal, run <code>npm install</code></li>
+    </ol>
+
+    <h2 class="nhsuk-heading-m">What do do next</h2>
+    <p>
+      Go to the <a href="/how-tos">other guides</a> to find out how to make a
+      prototype.
+    </p>
+    <p>
+      If other people will be working on the same prototype, find out how to
+      <a href="collaborate">collaborate on prototypes</a>.
+    </p>
+  </div>
+</div>
+{% endblock %}

app/views/how-tos/github/index.html

@@ -0,0 +1,95 @@
+{% extends "layout.html" %} {% block pageTitle %} Store your code online with
+GitHub and GitHub Desktop - NHS prototype kit {% endblock %} {% block
+beforeContent %} {% include "how-tos/includes/breadcrumb.html" %} {% endblock %}
+{% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+    <h1 class="nhsuk-heading-xl">
+      Store your code online with GitHub and GitHub Desktop
+    </h1>
+
+    <p>
+      GitHub is a way to store code online so you can collaborate with others.
+      It also makes it easier to publish your prototype online using a hosting
+      service.
+    </p>
+
+    <p>Some concepts:</p>
+    <ul class="nhsuk-list nhsuk-list--bullet">
+      <li>Git - software that stores versions of your code</li>
+      <li>GitHub - a website that shares your code online</li>
+      <li>
+        GitHub Desktop - an app that puts your code on GitHub (so that you can
+        collaborate with others in your team)
+      </li>
+      <li>Repository/repo - a project stored in Git</li>
+      <li>
+        Organisation - a shared account normally run by an organisation or
+        community
+      </li>
+    </ul>
+
+    <div class="nhsuk-inset-text">
+      <span class="nhsuk-u-visually-hidden">Information: </span>
+      <p>
+        If you have never run the NHS prototype kit on your computer, finish the
+        <a href="/install/index">get started guide</a> first. This will mean
+        that you have the right tools to complete these steps.
+      </p>
+    </div>
+
+    <h2 class="nhsuk-heading-m">Set up GitHub Desktop</h2>
+
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        <a href="https://github.com/join">Create a free GitHub account</a> - if
+        you work for NHS England you must also
+        <a href="nhs-england"
+          >set up your account to be publish code in the right place</a
+        >.
+      </li>
+
+      <li>
+        <a href="https://desktop.github.com/">Download the GitHub Desktop app</a
+        >.
+      </li>
+
+      <li>Run GitHub Desktop.</li>
+
+      <li>Sign in with your GitHub account details.</li>
+    </ol>
+
+    <h2 class="nhsuk-heading-m">Using GitHub Desktop</h2>
+    <p>Use GitHub Desktop to work with repositories.</p>
+    <p>
+      A repository contains all of the files in a prototype. You can use the
+      repository to view the file history and work on your prototype with
+      others.
+    </p>
+    <p>You can now:</p>
+
+    <ul class="nhsuk-list nhsuk-list--bullet">
+      <li>
+        <a href="store-new-prototype">store your new prototype in GitHub</a>
+      </li>
+      <li>
+        <a href="download-existing-prototype"
+          >download an existing prototype from GitHub</a
+        >
+      </li>
+    </ul>
+    <p>
+      After you have stored or downloaded a prototype, you can
+      <a href="collaborate">collaborate with other people on your code</a>.
+    </p>
+    <p>
+      You can also
+      <a
+        href="https://docs.github.com/en/desktop/overview/getting-started-with-github-desktop"
+        >find out about how to use GitHub Desktop on the GitHub website</a
+      >.
+    </p>
+  </div>
+</div>
+{% endblock %}

app/views/how-tos/github/nhs-england.html

@@ -0,0 +1,49 @@
+{% extends "layout.html" %} {% block pageTitle %} Using GitHub if you work for
+NHS England - NHS prototype kit {% endblock %} {% block beforeContent %} {{
+breadcrumb({ items: [ { href: "/", text: "Home" }, { href: "/how-tos", text:
+"Guides" }, { href: "/how-tos/github/index", text: "Store code online with
+GitHub and GitHub desktop" } ] }) }} {% endblock %} {% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+    <h1 class="nhsuk-heading-xl">Using GitHub if you work for NHS England</h1>
+
+    <p>
+      Code repositories for NHS England digital teams are usually stored in the
+      <a href="https://github.com/nhsdigital">NHS Digital GitHub organisation</a
+      >. This is a shared account where administrators can manage all
+      repositories. Get added to it to:
+    </p>
+    <ul class="nhsuk-list nhsuk-list--bullet">
+      <li>
+        add a new repository that other people in the organisation can find and
+        make changes to
+      </li>
+      <li>make changes to an existing prototype</li>
+    </ul>
+
+    <div class="nhsuk-inset-text">
+      <span class="nhsuk-u-visually-hidden">Information: </span>
+      <p>
+        Some NHS prototype repositories are in different GitHub organisations.
+        These repositories are being merged - do not add new repositories to
+        them unless your team tells you to do it.
+      </p>
+    </div>
+    <h2 class="nhsuk-heading-m">How to get added to the organisation</h2>
+
+    <p>
+      An NHS England GitHub admin must add you to the NHS Digital organisation -
+      you cannot do it yourself. As your team for details on who to contact.
+    </p>
+    <p>If you already have a GitHub account you can use the same account.</p>
+    <h2 class="nhsuk-heading-m">Moving a repository into the organisation</h2>
+
+    <p>
+      If you create a repository somewhere else by mistake (for example, on your
+      own account), you can transfer it into the NHS Digital organisation. Ask
+      your team for help on what to do.
+    </p>
+  </div>
+</div>
+{% endblock %}