Merge pull request #256 from alphagov/restructure-like-prototype-kit

Restructure like prototype kit

Gruntfile.js

@@ -17,7 +17,10 @@ module.exports = function (grunt) {
           'public/stylesheets/prism.css': 'public/sass/prism.scss',
         },
         options: {
-          includePaths: ['govuk_modules/public/sass'],
+          includePaths: [
+            'govuk_modules/govuk_template/assets/stylesheets',
+            'govuk_modules/govuk_frontend_toolkit/stylesheets'
+          ],
           outputStyle: 'expanded',
           imagePath: '../images'
         }
@@ -26,47 +29,28 @@ module.exports = function (grunt) {
 
     // Copies templates and assets from external modules and dirs
     copy: {
-
-      govuk_template: {
-        src: 'node_modules/govuk_template_mustache/views/layouts/govuk_template.html',
-        dest: 'govuk_modules/views/',
-        expand: true,
-        flatten: true,
-        filter: 'isFile'
-      },
-
-      govuk_assets: {
-        files: [
-          {
-            expand: true,
-            src: '**',
-            cwd: 'node_modules/govuk_template_mustache/assets',
-            dest: 'govuk_modules/public/'
-          }
-        ]
-      },
-
-      govuk_frontend_toolkit_scss: {
-        expand: true,
-        src: '**',
-        cwd: 'node_modules/govuk_frontend_toolkit/stylesheets/',
-        dest: 'govuk_modules/public/sass/'
-      },
-
-      govuk_frontend_toolkit_js: {
-        expand: true,
-        src: '**',
-        cwd: 'node_modules/govuk_frontend_toolkit/javascripts/',
-        dest: 'govuk_modules/public/javascripts/'
+      assets: {
+        files: [{
+          expand: true,
+          cwd: 'app/assets/',
+          src: ['**/*', '!sass/**'],
+          dest: 'public/'
+        }]
       },
-
-      govuk_frontend_toolkit_img: {
-        expand: true,
-        src: '**',
-        cwd: 'node_modules/govuk_frontend_toolkit/images/',
-        dest: 'govuk_modules/public/images/'
+      govuk: {
+        files: [{
+          expand: true,
+          cwd: 'node_modules/govuk_frontend_toolkit/',
+          src: '**',
+          dest: 'govuk_modules/govuk_frontend_toolkit/'
+        },
+        {
+          expand: true,
+          cwd: 'node_modules/govuk_template_mustache/',
+          src: '**',
+          dest: 'govuk_modules/govuk_template/'
+        }]
       },
-
     },
 
     // workaround for libsass
@@ -93,7 +77,7 @@ module.exports = function (grunt) {
     // nodemon watches for changes and restarts app
     nodemon: {
       dev: {
-        script: 'app.js',
+        script: 'server.js',
         options: {
           ext: 'html, js'
         }
@@ -145,12 +129,8 @@ module.exports = function (grunt) {
   );
 
   grunt.registerTask('default', [
-    'copy:govuk_template',
-    'copy:govuk_assets',
+    'copy',
     'convert_template',
-    'copy:govuk_frontend_toolkit_scss',
-    'copy:govuk_frontend_toolkit_js',
-    'copy:govuk_frontend_toolkit_img',
     'replace',
     'sass',
     'concurrent:target'
@@ -160,12 +140,8 @@ module.exports = function (grunt) {
     'test_default',
     'Test that the default task runs the app',
     [
-      'copy:govuk_template',
-      'copy:govuk_assets',
+      'copy',
       'convert_template',
-      'copy:govuk_frontend_toolkit_scss',
-      'copy:govuk_frontend_toolkit_js',
-      'copy:govuk_frontend_toolkit_img',
       'replace',
       'sass'
     ]

routes.js → app/routes.js

@@ -13,15 +13,15 @@ module.exports = {
     // Layout
     app.get('/layout', function (req, res) {
       var page_name = "Layout";
-      res.render('guide_layout', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_layout', { 'page_name' : page_name });
     });
 
     // Example page: Grid layout
     app.get('/layout/example-grid-layout', function (req, res) {
       var section = "layout";
       var section_name = "Layout";
       var page_name = "Example: Grid layout";
-      res.render('examples/example_grid_layout', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_grid_layout', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /examples/ to /section/example-name-of-example
@@ -32,15 +32,15 @@ module.exports = {
     // Typography
     app.get('/typography', function (req, res) {
       var page_name = "Typography";
-      res.render('guide_typography', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_typography', { 'page_name' : page_name });
     });
 
     // Example page: Typography
     app.get('/typography/example-typography', function (req, res) {
       var section = "typography";
       var section_name = "Typography";
       var page_name = "Example: Typography";
-      res.render('examples/example_typography', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_typography', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /examples/ to /section/example-name-of-example
@@ -53,7 +53,7 @@ module.exports = {
       var section = "typography";
       var section_name = "Typography";
       var page_name = "Example: Details summary";
-      res.render('examples/example_details_summary', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_details_summary', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /patterns/ to /section/example-name-of-example
@@ -64,47 +64,47 @@ module.exports = {
     // Colour
     app.get('/colour', function (req, res) {
       var page_name = "Colour";
-      res.render('guide_colour', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_colour', { 'page_name' : page_name });
     });
 
     // Icons and images
     app.get('/icons-images', function (req, res) {
       var page_name = "Icons and images";
-      res.render('guide_icons_images', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_icons_images', { 'page_name' : page_name });
     });
 
     // Example page: Icons
     app.get('/icons-images/example-icons', function (req, res) {
       var section = "icons-images";
       var section_name = "Icons and images";
       var page_name = "Example: Icons";
-      res.render('examples/example_icons', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_icons', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Data
     app.get('/data', function (req, res) {
       var page_name = "Data";
-      res.render('guide_data', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_data', { 'page_name' : page_name });
     });
 
     // Buttons
     app.get('/buttons', function (req, res) {
       var page_name = "Buttons";
-      res.render('guide_buttons', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_buttons', { 'page_name' : page_name });
     });
 
     // Forms
     app.get('/form-elements', function (req, res) {
       var page_name = "Form elements";
-      res.render('guide_form_elements', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_form_elements', { 'page_name' : page_name });
     });
 
     // Example page: Basic form
     app.get('/form-elements/example-forms', function (req, res) {
       var section = "form-elements";
       var section_name = "Form elements";
       var page_name = "Example: Form";
-      res.render('examples/example_forms', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_forms', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /examples/ to /section/example-name-of-example
@@ -117,7 +117,7 @@ module.exports = {
       var section = "form-elements";
       var section_name = "Form elements";
       var page_name = "Example: Date";
-      res.render('examples/example_date', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_date', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /patterns/ to /section/example-name-of-example
@@ -130,7 +130,7 @@ module.exports = {
       var section = "form-elements";
       var section_name = "Form elements";
       var page_name = "Example: Radio buttons and checkboxes";
-      res.render('examples/example_radios_checkboxes', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_radios_checkboxes', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Redirect examples from /patterns/ to /section/example-name-of-example
@@ -143,21 +143,21 @@ module.exports = {
       var section = "form-elements";
       var section_name = "Form elements";
       var page_name = "Example: Form elements";
-      res.render('examples/example_form_elements', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_form_elements', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     // Errors and validation
     app.get('/errors', function (req, res) {
       var page_name = "Errors and validation";
-      res.render('guide_errors', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_errors', { 'page_name' : page_name });
     });
 
     // Example page: Form validation
     app.get('/errors/example-form-validation-single-question-radio', function (req, res) {
       var section = "errors";
       var section_name = "Errors and validation";
       var page_name = "Example: Form validation - single question";
-      res.render('examples/example_form_validation_single_question_radio', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     app.post('/errors/example-form-validation-single-question-radio', function (req, res) {
@@ -171,7 +171,7 @@ module.exports = {
       } else {
         error = false;
       }
-      res.render('examples/example_form_validation_single_question_radio', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name, 'personal_details': personal_details, 'error': error});
+      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name' : section_name, 'page_name' : page_name, 'personal_details': personal_details, 'error': error});
     });
 
     // Redirect examples from /examples/ to /section/example-name-of-example
@@ -183,7 +183,7 @@ module.exports = {
       var section = "errors";
       var section_name = "Errors and validation";
       var page_name = "Example: Form validation - multiple questions";
-      res.render('examples/example_form_validation_multiple_questions', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name });
+      res.render('examples/example_form_validation_multiple_questions', { 'section': section, 'section_name' : section_name, 'page_name' : page_name });
     });
 
     app.post('/errors/example-form-validation-multiple-questions', function (req, res) {
@@ -198,7 +198,7 @@ module.exports = {
       } else {
         error = false;
       }
-      res.render('examples/example_form_validation_multiple_questions', {'assetPath' : assetPath, 'section': section, 'section_name' : section_name, 'page_name' : page_name, 'fullName': fullName, 'niNo': niNo, 'error': error});
+      res.render('examples/example_form_validation_multiple_questions', { 'section': section, 'section_name' : section_name, 'page_name' : page_name, 'fullName': fullName, 'niNo': niNo, 'error': error});
     });
 
     // Redirect examples from /examples/ to /section/example-name-of-example
@@ -209,7 +209,7 @@ module.exports = {
     // Alpha and beta banners
     app.get('/alpha-beta-banners', function (req, res) {
       var page_name = "Alpha and beta banners";
-      res.render('guide_alpha_beta', {'assetPath' : assetPath, 'page_name' : page_name });
+      res.render('guide_alpha_beta', { 'page_name' : page_name });
     });
 
   }

lib/template-conversion.js

@@ -1,7 +1,7 @@
 var Hogan = require('hogan.js'),
     fs = require('fs'),
     path = require('path'),
-    govukDir = path.normalize(__dirname + '/../govuk_modules'),
+    govukDir = path.normalize(__dirname + '/../govuk_modules/'),
     govukConfig = require(__dirname + '/template-config'),
     compiledTemplate,
     govukTemplate,
@@ -15,8 +15,8 @@ handleErr = function (err) {
 
 module.exports = {
   convert : function () {
-    govukTemplate = fs.readFileSync(govukDir + '/views/govuk_template.html', { encoding : 'utf-8' });
+    govukTemplate = fs.readFileSync(govukDir + '/govuk_template/views/layouts/govuk_template.html', { encoding : 'utf-8' });
     compiledTemplate = Hogan.compile(govukTemplate);
-    fs.writeFileSync(govukDir + '/views/govuk_template.html', compiledTemplate.render(govukConfig), { encoding : 'utf-8' });
+    fs.writeFileSync(govukDir + '/govuk_template/views/layouts/govuk_template.html', compiledTemplate.render(govukConfig), { encoding : 'utf-8' });
   }
 };

app.js → server.js

@@ -1,25 +1,33 @@
 var express = require('express'),
     bodyParser = require('body-parser'),
-    routes = require(__dirname + '/routes.js'),
+    routes = require(__dirname + '/app/routes.js'),
     app = express(),
     port = (process.env.PORT || 3000);
 
 // Application settings
 app.engine('html', require(__dirname + '/lib/template-engine.js').__express);
 app.set('view engine', 'html');
-app.set('vendorViews', __dirname + '/govuk_modules/views');
-app.set('views', __dirname + '/views');
+app.set('vendorViews', __dirname + '/govuk_modules/govuk_template/views/layouts');
+app.set('views', __dirname + '/app/views');
 
 // Middleware to serve static assets
 app.use('/public', express.static(__dirname + '/public'));
 app.use('/public', express.static(__dirname + '/govuk_modules/public'));
+app.use('/public', express.static(__dirname + '/govuk_modules/govuk_template/assets'));
+app.use('/public', express.static(__dirname + '/govuk_modules/govuk_frontend_toolkit'));
 
 // Support for parsing data in POSTs
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({
 	extended: true
 }));
 
+// send assetPath to all views
+app.use(function (req, res, next) {
+  res.locals.assetPath="/public/";
+  next();
+});
+
 // routes (found in routes.js)
 
 routes.bind(app, '/public/');