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>
@@ -23,6 +23,7 @@ <h1>
 
       <div class="nhsuk-inset-text">
         <p>Git is not the same as GitHub. Git stores versions of your work, and lets you collaborate more easily with others. GitHub puts it all online with a web interface.</p>
+        <p>If you want to use GitHub Desktop, go to our guide for <a href="/how-tos/github/index">using GitHub and GitHub Desktop</a>.</p>
       </div>
 
       <h2 id="install-git">1. Install Git</h2>

app/views/how-tos/github/_BASE.njk

@@ -0,0 +1,113 @@
+{% extends "layout.html" %} 
+{% block pageTitle %} {{pageTitle}} - Store code online using GitHub and GitHub Desktop - NHS prototype kit {% endblock %} 
+{% block beforeContent
+%} 
+
+{% if pageTitle == "Set up GitHub and GitHub Desktop"%}
+{% include "how-tos/includes/breadcrumb.html" %} 
+{% else %}
+{{ breadcrumb({ items: [ { href: "/", text: "Home" }, { href: "/how-tos",
+text: "Guides" }, { href: "/how-tos/github/index", text: "Store your code online with
+GitHub and GitHub desktop" } ] }) 
+}} 
+{% endif %}
+{% endblock %} 
+{% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-three-quarters">
+
+    <h1>
+      <span role="text">
+        {{pageTitle | default("pageTitle")}}
+        <span class="nhsuk-caption-xl nhsuk-caption--bottom">
+          <span class="nhsuk-u-visually-hidden">
+          -
+          </span>
+            Store code online with GitHub and GitHub Desktop
+        </span>
+      </span>
+    </h1>
+
+    {{ contentsList({
+      items: [
+        {
+          href: "index",
+          text: "Overview",
+          current: ("true" if pageTitle and (pageTitle == "Overview") else '')  
+        },
+        {
+          href: "setup-github-desktop",
+          text: "Set up GitHub and GitHub Desktop", 
+          current: ("true" if (pageTitle and  pageTitle == "Set up GitHub and GitHub Desktop") else '')  
+        },
+        {
+          href: "store-new-prototype",
+          text: "Store a new prototype on GitHub",
+          current: ("true" if (pageTitle and pageTitle == "Store a new prototype on GitHub") else '' ) 
+        }
+        ,
+        {
+          href: "/how-tos/github/download-existing-prototype",
+          text: "Download an existing prototype from GitHub",
+          current: ("true" if (pageTitle and pageTitle == "Download an existing prototype from GitHub") else '' ) 
+        }
+        ,
+        {
+          href: "/how-tos/github/collaborate",
+          text: "Collaborate on a prototype",
+          current: ("true" if (pageTitle and pageTitle == "Collaborate on a prototype") else '') 
+        }
+      ]
+    }) }}
+
+
+{% block hub %}
+<p>
+[add text here ]
+</p>
+    {% endblock %}
+
+
+{% if pageTitle == "Overview" %}{# first page #}
+
+{{ pagination({
+  nextUrl: "/how-tos/github/setup-github-desktop",
+  nextPage: "Set up GitHub and GitHub Desktop"
+}) }}
+
+{% elif pageTitle == "Set up GitHub and GitHub Desktop" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/index",
+    previousPage: "Overview",
+    nextUrl: "/how-tos/github/store-new-prototype",
+    nextPage: "Store a new prototype on GitHub"
+}) }}
+
+{% elif pageTitle == "Store a new prototype on GitHub" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/setup-github-desktop",
+    previousPage: "Set up GitHub and GitHub Desktop",
+    nextUrl: "/how-tos/github/download-existing-prototype",
+    nextPage: "Download an existing prototype from GitHub"
+}) }}
+
+{% elif pageTitle == "Download an existing prototype from GitHub" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/store-new-prototype",
+    previousPage: "Store a new prototype on GitHub",
+    nextUrl: "/how-tos/github/collaborate",
+    nextPage: "Collaborate on a prototype"
+}) }}
+
+{% else %}{# last page #}
+
+{{ pagination({
+  previousUrl: "/how-tos/github/download-existing-prototype",
+  previousPage: "Download an existing prototype from GitHub"
+}) }}
+
+{% endif %}
+  </div>
+</div>
+{% endblock %}

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

@@ -0,0 +1,118 @@
+{% set pageTitle = "Collaborate on a prototype" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
+
+    <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 does not 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 other people about
+        your new branch, so they can review and suggest changes. If you cannot 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 <strong>Merge pull request</strong></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>
+{% endblock %}

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

@@ -0,0 +1,38 @@
+{% set pageTitle = "Download an existing prototype from GitHub" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
+
+
+    <p>
+      After you have <a href="/how-tos/github/setup-github-desktop">set up GitHub Desktop</a>, 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
+      repo.
+    </p>
+    <ol class="nhsuk-list nhsuk-list--number">
+      <li>
+        Go to the prototype's repo 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>
+{% endblock %}

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

@@ -0,0 +1,37 @@
+{% set pageTitle = "Overview" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
+
+    <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 or "repo" – a project stored in Git</li>
+      <li>
+        Organisation – a shared account normally run by an organisation or
+        community
+      </li>
+    </ul>
+
+
+
+    {{ insetText({
+      html: '<p>
+        If you do not want to use GitHub or GitHub Desktop, go to our instructions for
+        <a href="/how-tos/git">setting up Git using the terminal</a>.
+      </p>'
+    }) }}
+
+
+
+{% endblock %}

app/views/how-tos/github/setup-github-desktop.html

@@ -0,0 +1,57 @@
+{% set pageTitle = "Set up GitHub and GitHub Desktop" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
+
+<p>To use GitHub Desktop you need to:</p>
+
+<ol class="nhsuk-list nhsuk-list--number">
+  <li>Install Git.</li>
+  <li>Create a GitHub account.</li>
+  <li>Download and set up the GitHub Desktop app.</li>
+</ol>
+
+
+{{ insetText({
+  html: '<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>'
+}) }}
+
+  <h2 class="nhsuk-heading-m">1. Install Git</h2>
+<p>The first thing you need to do is <a href="https://git-scm.com/downloads" target="_blank" rel="noopener">install Git (opens in new tab)</a>.</p>
+<p>You do not need to set your name and email address now. You will do that later. </p>
+
+
+<h2 class="nhsuk-heading-m">2. Create a GitHub account</h2>
+
+<p>
+    Go to GitHub.com and <a href="https://github.com/join">create a free GitHub account</a>.</p>
+
+
+<h3 class="nhsuk-heading-s">If you work for NHS England</h3>
+
+<p>
+  Code repositories or "repos" for NHS England digital teams are usually stored in the
+  <a href="https://github.com/nhsdigital">NHS Digital GitHub organisation</a
+  > shared account. Ask your development team or technical leadership where you should store your prototype.</p> 
+  <p>It is usually easiest if you get your account added to the organisation first. An NHS England GitHub administrator must add you. Ask your team who to talk to.
+  </p>
+
+
+
+
+<h2 class="nhsuk-heading-m">3. Download and set up the GitHub Desktop app</h2>
+    <p><a href="https://desktop.github.com/">Download the GitHub Desktop app</a
+    >.</p>
+
+   <p>Sign in with your GitHub account details.</p>
+
+<p>You can now use GitHub Desktop to work with repos.
+  A repo contains all of the files in a prototype. You can use the
+  repo to view the file history and work on your prototype with
+  others.
+</p>
+
+{% endblock %}