New version that has a mini-guide

nhsuk · Dec 7, 2024 · 05eb31d · 05eb31d
1 parent 1bdf396
commit 05eb31d
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 73 deletions.
diff --git a/app/views/how-tos/github/_BASE.njk b/app/views/how-tos/github/_BASE.njk
@@ -0,0 +1,112 @@
+{% extends "layout.html" %} 
+{% block pageTitle %} {{pageTitle}} - Store code online using Github and GitHub Desktop - NHS prototype kit {% endblock %} 
+{% block beforeContent
+%} 
+
+{% if pageTitle == "Get started"%}
+{% include "how-tos/includes/breadcrumb.html" %} 
+{% else %}
+{{ breadcrumb({ items: [ { href: "/", text: "Home" }, { href: "/how-tos",
+text: "Guides" }, { href: "/how-tos/github/index", text: "Store 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: "Get started",
+          current: ("true" if pageTitle and (pageTitle == "Get started") else '')  
+        },
+        {
+          href: "nhs-england",
+          text: "Using GitHub if you work for NHS England", 
+          current: ("true" if (pageTitle and  pageTitle == "Using GitHub if you work for NHS England") else '')  
+        },
+        {
+          href: "store-new-prototype",
+          text: "Store your new prototype online",
+          current: ("true" if (pageTitle and pageTitle == "Store your new prototype online") else '' ) 
+        }
+        ,
+        {
+          href: "/how-tos/github/download-existing-prototype",
+          text: "Download an existing prototype",
+          current: ("true" if (pageTitle and pageTitle == "Download an existing prototype") else '' ) 
+        }
+        ,
+        {
+          href: "/how-tos/github/collaborate",
+          text: "Collaborate on a prototype",
+          current: ("true" if (pageTitle and pageTitle == "Collaborate on a prototype") else '') 
+        }
+      ]
+    }) }}
+
+
+{% block hub %}
+
+
+    {% endblock %}
+
+
+{% if pageTitle == "Get started" %}{# first page #}
+
+{{ pagination({
+  nextUrl: "/how-tos/github/nhs-england",
+  nextPage: "Using GitHub if you work for NHS England"
+}) }}
+
+{% elif pageTitle == "Using GitHub if you work for NHS England" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/index",
+    previousPage: "Get started",
+    nextUrl: "/how-tos/github/store-new-prototype",
+    nextPage: "Store your new prototype online"
+}) }}
+
+{% elif pageTitle == "Store your new prototype online" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/nhs-england",
+    previousPage: "Using GitHub if you work for NHS England",
+    nextUrl: "/how-tos/github/download-existing-prototype",
+    nextPage: "Download an existing prototype"
+}) }}
+
+{% elif pageTitle == "Download an existing prototype" %}
+{{ pagination({
+    previousUrl: "/how-tos/github/download-existing-prototype",
+    previousPage: "Store your new prototype online",
+    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"
+}) }}
+
+{% endif %}
+  </div>
+</div>
+{% endblock %}
diff --git a/app/views/how-tos/github/collaborate.html b/app/views/how-tos/github/collaborate.html
@@ -1,14 +1,6 @@
-{% 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>
+{% 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
@@ -125,6 +117,4 @@ <h2 class="nhsuk-heading-m">Dealing with conflicts</h2>
       If there is a conflict, you must manually resolve the change - ask a
       developer on your team to help.
     </p>
-  </div>
-</div>
 {% endblock %}
diff --git a/app/views/how-tos/github/download-existing-prototype.html b/app/views/how-tos/github/download-existing-prototype.html
@@ -1,18 +1,12 @@
-{% 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>
+{% set pageTitle = "Download an existing prototype" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
 
     <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,
+      <a href="/how-tos/github/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>.
+      <a href="/how-tos/github/nhs-england">the extra GitHub steps</a>.
     </p>
     <p>
       You can work with others on an existing prototype. For example, if you're
@@ -49,13 +43,11 @@ <h2 class="nhsuk-heading-m">Open the prototype</h2>
 
     <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
+      Go to the <a href="/how-tos/index">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>.
+      <a href="/how-tos/github/collaborate">collaborate on prototypes</a>.
     </p>
-  </div>
-</div>
 {% endblock %}
diff --git a/app/views/how-tos/github/index.html b/app/views/how-tos/github/index.html
@@ -1,13 +1,6 @@
-{% 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>
+{% set pageTitle = "Get started" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
 
     <p>
       GitHub is a way to store code online so you can collaborate with others.
@@ -45,7 +38,7 @@ <h2 class="nhsuk-heading-m">Set up GitHub Desktop</h2>
       <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"
+        <a href="/how-tos/github/nhs-england"
           >set up your account to be publish code in the right place</a
         >.
       </li>
@@ -71,17 +64,17 @@ <h2 class="nhsuk-heading-m">Using GitHub Desktop</h2>
 
     <ul class="nhsuk-list nhsuk-list--bullet">
       <li>
-        <a href="store-new-prototype">store your new prototype in GitHub</a>
+        <a href="/how-tos/github/store-new-prototype">store your new prototype in GitHub</a>
       </li>
       <li>
-        <a href="download-existing-prototype"
+        <a href="/how-tos/github/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>.
+      <a href="/how-tos/github/collaborate">collaborate with other people on your code</a>.
     </p>
     <p>
       You can also
@@ -90,6 +83,5 @@ <h2 class="nhsuk-heading-m">Using GitHub Desktop</h2>
         >find out about how to use GitHub Desktop on the GitHub website</a
       >.
     </p>
-  </div>
-</div>
+
 {% endblock %}
diff --git a/app/views/how-tos/github/nhs-england.html b/app/views/how-tos/github/nhs-england.html
@@ -1,13 +1,6 @@
-{% 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>
-
+{% set pageTitle = "Using GitHub if you work for NHS England" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
     <p>
       Code repositories for NHS England digital teams are usually stored in the
       <a href="https://github.com/nhsdigital">NHS Digital GitHub organisation</a
@@ -44,6 +37,4 @@ <h2 class="nhsuk-heading-m">Moving a repository into the organisation</h2>
       own account), you can transfer it into the NHS Digital organisation. Ask
       your team for help on what to do.
     </p>
-  </div>
-</div>
 {% endblock %}
diff --git a/app/views/how-tos/github/store-new-prototype.html b/app/views/how-tos/github/store-new-prototype.html
@@ -1,18 +1,11 @@
-{% extends "layout.html" %} {% block pageTitle %} Store your new prototype in
-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">Store your new prototype in GitHub</h1>
-
+{% set pageTitle = "Store your new prototype online" %}
+{% extends "how-tos/github/_BASE.njk" %} 
+{% block hub %}
     <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,
+      <a href="/how-tos/github/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>.
+      <a href="/how-tos/github/nhs-england">the extra GitHub steps</a>.
     </p>
 
     <h2 class="nhsuk-heading-m">
@@ -66,16 +59,15 @@ <h2 class="nhsuk-heading-m">Upload your prototype to GitHub</h2>
     </p>
     <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
+      Go to the <a href="/how-tos/index">other guides</a> to find out how to make a
       prototype.
     </p>
     <p>
       If you are working with other people, you can
-      <a href="download-existing-prototype"
+      <a href="/how-tos/github/download-existing-prototype"
         >download an existing prototype from GitHub</a
       >
-      and <a href="collaborate">collaborate on prototypes</a>.
+      and <a href="/how-tos/github/collaborate">collaborate on prototypes</a>.
     </p>
-  </div>
-</div>
+
 {% endblock %}