Create demo app and move documentation to sub-app

Gruntfile.js

@@ -19,6 +19,13 @@ module.exports = function (grunt) {
           src: ['*.scss'],
           dest: 'public/stylesheets/',
           ext: '.css'
+        },
+        {
+          expand: true,
+          cwd: 'docs/assets/sass',
+          src: ['*.scss'],
+          dest: 'public/stylesheets/',
+          ext: '.css'
         }]
       }
     },
@@ -31,6 +38,11 @@ module.exports = function (grunt) {
           cwd: 'app/assets/',
           src: ['**/*', '!sass/**'],
           dest: 'public/'
+        }, {
+          expand: true,
+          cwd: 'docs/assets/',
+          src: ['**/*', '!sass/**'],
+          dest: 'public/'
         }],
         ignoreInDest: '**/stylesheets/**',
         updateAndDelete: true

app/config.js

@@ -12,6 +12,9 @@ module.exports = {
   // Enable or disable password protection on production
   useAuth: 'true',
 
+  // Enable or disable built-in docs and examples.
+  useDocumentation: 'true',
+
   // Force HTTP to redirect to HTTPs on production
   useHttps: 'true',
 

app/routes.js

@@ -1,33 +1,11 @@
 var express = require('express')
 var router = express.Router()
 
+// Route index page
 router.get('/', function (req, res) {
   res.render('index')
 })
 
-// Example routes - feel free to delete these
-
-// Passing data into a page
-
-router.get('/examples/template-data', function (req, res) {
-  res.render('examples/template-data', { 'name': 'Foo' })
-})
-
-// Branching
-
-router.get('/examples/over-18', function (req, res) {
-  // get the answer from the query string (eg. ?over18=false)
-  var over18 = req.query.over18
-
-  if (over18 === 'false') {
-    // redirect to the relevant page
-    res.redirect('/examples/under-18')
-  } else {
-    // if over18 is any other value (or is missing) render the page requested
-    res.render('examples/over-18')
-  }
-})
-
 // add your routes here
 
 module.exports = router

app/views/index.html

@@ -13,7 +13,7 @@
       <h1 class="heading-xlarge">
         The GOV.UK prototype kit
         <span class="heading-secondary">{{releaseVersion}}</span>
-      </h1>
+      </h1>{{releaseVersion | log }}
       <p>
         This kit lets you rapidly create HTML prototypes of GOV.UK services.
       </p>
@@ -31,9 +31,8 @@ <h2 class="heading-medium">About this page</h2>
 			<h2 class="heading-medium">Examples and documentation</h2>
 
 			<ul class="list list-bullet">
-				<li><a href="/examples">Example pages and patterns</a></li>
-				<li><a href="https://github.com/alphagov/govuk_prototype_kit/tree/master/docs">
-						Read the full documentation</a></li>
+				<li><a href="/docs/tutorials-and-examples">Example pages and documentation</a></li>
+				<li><a href="https://github.com/alphagov/govuk_prototype_kit">GitHub</a></li>
 			</ul>
 
       <h2 class="heading-medium">Other resources</h2>

docs/assets/javascripts/docs.js

@@ -0,0 +1,28 @@
+/* global $ */
+/* global GOVUK */
+
+// Warn about using the kit in production
+if (
+  window.sessionStorage && window.sessionStorage.getItem('prototypeWarning') !== 'false' &&
+  window.console && window.console.info
+) {
+  window.console.info('GOV.UK Prototype Kit - do not use for production')
+  window.sessionStorage.setItem('prototypeWarning', true)
+}
+
+$(document).ready(function () {
+  // Use GOV.UK selection-buttons.js to set selected
+  // and focused states for block labels
+  var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']")
+  new GOVUK.SelectionButtons($blockLabels) // eslint-disable-line
+
+  // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button,
+  // with role="button" when the space key is pressed.
+  GOVUK.shimLinksWithButtonRole.init()
+
+  // Show and hide toggled content
+  // Where .block-label uses the data-target attribute
+  // to toggle hidden content
+  var showHideContent = new GOVUK.ShowHideContent()
+  showHideContent.init()
+})

docs/assets/sass/docs.scss

@@ -0,0 +1,52 @@
+@import "govuk-elements";
+
+.markdown {
+	h1 {
+		@extend .heading-xlarge;
+	}
+
+	h2 {
+		@extend .heading-large;
+	}
+
+	h3 {
+		@extend .heading-medium;
+	}
+
+	h4 {
+		@extend .heading-small;
+	}
+
+	code {
+		background: $grey-4;
+		padding: 3px;
+		font-size: 1em;
+	}
+
+	pre > code {
+		@extend .code;
+		display: block;
+		@extend .panel;
+		@extend .panel-border-wide;
+		margin-bottom: 15px;
+	}
+
+	img {
+		max-width: 100%;
+	}
+
+	ul {
+		@extend .list;
+		@extend .list-bullet;
+	}
+
+	blockquote {
+		@extend .panel;
+		@extend .panel-border-wide;
+	}
+
+	strong {
+		font-weight: 700;
+	}
+}
+

docs/install/install-the-kit.md → docs/documentation/install/install-the-kit.md

@@ -12,7 +12,7 @@ We recommend keeping all your prototypes in one folder called `projects`.
 
 Create a folder called `projects` in your home folder. You can open your home folder by opening a new finder window, and selecting `go > home` from the top menu.
 
-![Screenshot of a 'projects' folder in the mac home folder](../assets/images/mac-home-folder-projects.png)
+![Screenshot of a 'projects' folder in the mac home folder](/public/images/docs/mac-home-folder-projects.png)
 
 #### Windows users
 
@@ -87,10 +87,4 @@ npm install
 ```
 The install may take up to a minute. Whilst installing it may `WARN` about some items - this is ok. As long as there are no `ERROR`s you can continue.
 
----
-[Previous page (requirements)](requirements.md)
-
-[Next page (run the kit)](run-the-kit.md)
-
----
-[Documentation index](../README.md)
+<a href="run-the-kit.md" class="button">Next (run the kit)</a>

docs/install/introduction.md → docs/documentation/install/introduction.md

@@ -12,10 +12,8 @@ If you’re comfortable using git and the terminal, you may prefer the [develope
 
 The prototype kit provides a simple way to make interactive prototypes that look and feel like pages on GOV.UK. These prototypes can be used to design and lay out pages, and to use in user research.
 
-You’ll use a copy of the kit for each different prototype you want to make - they’re self contained. Once installed, the kit uses about 100mb.
 
----
-[Next page (requirements)](requirements.md)
 
----
-[Documentation index](../README.md)
+You’ll use a copy of the kit for each different prototype you want to make - they’re self contained. Once installed, the kit uses about 100mb.
+
+<a href="requirements.md" class="button">Next (requirements)</a>

docs/install/requirements.md → docs/documentation/install/requirements.md

@@ -97,14 +97,8 @@ xcode-select --install
 ```
 If you already have command line tools, this will display `xcode-select: error: command line tools are already installed, use "Software Update" to install updates`.
 
-![Screenshot of Command line tools popup message](../assets/images/installing-mavericks-popup.png)
+![Screenshot of Command line tools popup message](/public/images/docs/installing-mavericks-popup.png)
 
 If you don’t have command line tools, it will open an installer. Follow the instructions to install the command line tools.
 
----
-[Previous page (introduction)](introduction.md)
-
-[Next page (install the kit)](install-the-kit.md)
-
----
-[Documentation index](../README.md)
+<a href="install-the-kit.md" class="button">Next (install the kit)</a>

docs/install/run-the-kit.md → docs/documentation/install/run-the-kit.md

@@ -24,7 +24,7 @@ In your web browser, visit <a href="http://localhost:3000" target="_blank">http:
 
 You should see the prototype welcome page.
 
-![Screenshot of the prototype kit homepage](../assets/images/prototype_kit_homepage.png)
+![Screenshot of the prototype kit homepage](/public/images/docs/prototype-kit-homepage.png)
 
 ## Quitting the kit
 
@@ -38,8 +38,4 @@ In terminal press the `ctrl` and `c` keys together.
 
 The kit is now installed. Congratulations!
 
----
-[Previous page (install the kit)](install-the-kit.md)
-
----
-[Documentation index](../README.md)
+<!-- <a href="../../readme.md" class="button">Return to Getting Started</a> -->

docs/guides/publishing-on-heroku.md → docs/documentation/publishing-on-heroku.md

@@ -66,7 +66,3 @@ After your work is deployed, you will be able to view it on the web by visiting
 You can run `heroku open` to open your prototype in a browser.
 
 > Heroku puts apps to sleep that haven’t been accessed in a while - so if you’ve not visited your prototype for a while it may take a few seconds to open.
-
-
----
-[Documentation index](../README.md)