Skip to content

Commit

Permalink
First version of adding collaboration section
Browse files Browse the repository at this point in the history 
Ported over the GOV.UK Prototype Kit guides:
1. Store your code online with GitHub and GitHub Desktop
2. Store your new prototype in GitHub
3. Download an existing prototype from GitHub4.
Collaborate on prototypes using GitHub Desktop

Reformatted the guides page to have a section.
  • Loading branch information
@vickytnz
vickytnz committed Dec 4, 2024
1 parent d2a453e commit c91bcb4
Show file tree
Hide file tree
Showing 5 changed files with 321 additions and 4 deletions.
129 changes: 129 additions & 0 deletions app/views/how-tos/github-collaborate.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
{% extends "layout.html" %} {% block pageTitle %} Collaborate on prototypes
using 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">
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 %}
63 changes: 63 additions & 0 deletions app/views/how-tos/github-desktop.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{% 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>
</ul>
<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>
</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="github-store-new-prototype">store your new prototype in GitHub</a>
</li>
<li><a href="github-download-existing-prototype">download an existing prototype from GitHub</a></li>
</ul>

<p>You can also <a href="https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/overview/getting-started-with-github-desktop">find out about how to use GitHub Desktop on the GitHub website</a>.</p>

</div>
</div>
{% endblock %}
47 changes: 47 additions & 0 deletions app/views/how-tos/github-download-existing-prototype.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{% extends "layout.html" %} {% block pageTitle %} Download an existing prototype from GitHub
- 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">Download an existing prototype from GitHub </h1>

<p>
To store your new prototype in GitHub, you need to
<a href="github-desktop">set up GitHub Desktop</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>
</div>
</div>
{% endblock %}
60 changes: 60 additions & 0 deletions app/views/how-tos/github-store-new-prototype.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{% extends "layout.html" %} {% block pageTitle %} Store your new prototype in
GitHub - 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 new prototype in GitHub</h1>

<p>
To store your new prototype in GitHub, you need to
<a href="github-desktop">set up GitHub Desktop</a>.
</p>

<h2 class="nhsuk-heading-m">
Add the prototype on your computer to Github
</h2>

<ol class="nhsuk-list nhsuk-list--number">
<li>
In GitHub Desktop, select
<strong>Add an Existing Repository</strong> (if it's not on the screen,
click the <strong>File</strong> menu and select
<strong>Add Local Repository</strong>).
</li>
<li>
Click the <strong>Choose</strong> button and select your prototype
folder.
</li>
</ol>
<h3 class="nhsuk-heading-s">If Github Desktop shows a warning</h3>
<p>
You may get a warning saying that the directory does not appear to be a
Git directory - this is the correct process.
</p>
<ol class="nhsuk-list nhsuk-list--number">
<li>
In the warning, click the <strong>create a repository</strong> link.
</li>
<li>
On the next screen, titled <strong>Create a repository</strong>, click
the <strong>Create repository</strong> button.
</li>
</ol>
<h2 class="nhsuk-heading-m">Upload your prototype to GitHub</h2>

<ol class="nhsuk-list nhsuk-list--number">
<li>In the top right, click <strong>publish repository</strong>.</li>
<li>
Make sure '<strong>Keep this code private'</strong> is not ticked, as we
need others to be able to see and collaborate on it.
</li>
<li>Click <strong>publish repository.</strong></li>
</ol>
<p>
Your prototype code is now on GitHub, which means other people can see and
collaborate on your code.
</p>
</div>
</div>
{% endblock %}
26 changes: 22 additions & 4 deletions app/views/how-tos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h1>Guides</h1>
</div>
<div class="nhsuk-grid-row">

<div class="nhsuk-grid-column-one-half">
<div class="nhsuk-grid-column-one-third">
<h2 class="nhsuk-heading-s">Download and install</h2>

<ul class="nhsuk-list">
Expand Down Expand Up @@ -81,7 +81,7 @@ <h2 class="nhsuk-heading-s">Build a basic prototype tutorial</h2>
</ul>

</div>
<div class="nhsuk-grid-column-one-half">
<div class="nhsuk-grid-column-one-third">

<h2 class="nhsuk-heading-s">General use</h2>

Expand All @@ -93,13 +93,31 @@ <h2 class="nhsuk-heading-s">General use</h2>
<li><a href="/how-tos/branching">Branching</a> – show a different page based on user input</li>
</ul>

<h2 class="nhsuk-heading-s">Share your prototype</h2>
<h2 class="nhsuk-heading-s">Version control and collaboration</h2>

<ul class="nhsuk-list">
<li><a href="/how-tos/git">Setting up Git</a></li>
<li><a href="/how-tos/github-desktop">Store your code online with GitHub and GitHub Desktop</a>

<ul class="nhsuk-list nhsuk-list--bullet">
<li><a href="/how-tos/github-store-new-prototype">Store your new prototype in GitHub</a></li>

<li><a href="/how-tos/github-download-existing-prototype">Download an existing prototype from GitHub</a></li>
<li><a href="/how-tos/github-collaborate">Collaborate on prototypes using GitHub Desktop</a></li>
</ul>
</li>
<li><a href="/how-tos/git">Setting up Git</a> (manual process)</li>
</ul>


</div>
<div class="nhsuk-grid-column-one-third">
<h2 class="nhsuk-heading-s">Sharing your prototype</h2>

<ul class="nhsuk-list">
<li><a href="/how-tos/publish-your-prototype-online">Publish your prototype online</a></li>
</ul>


<h2 class="nhsuk-heading-s">Updating the kit</h2>

<ul class="nhsuk-list">
Expand Down

0 comments on commit c91bcb4

Please sign in to comment.