Merge pull request #4 from tombye/add-template-inheritance

Add template inheritance

Gruntfile.js

@@ -68,7 +68,10 @@ module.exports = function(grunt){
     // nodemon watches for changes and restarts app
     nodemon: {
       dev: {
-        script: 'app.js'
+        script: 'app.js',
+        options: {
+          ext: 'html'
+        }
       }
     },
 
@@ -92,10 +95,22 @@ module.exports = function(grunt){
   ].forEach(function (task) {
     grunt.loadNpmTasks(task);
   });
+
+  grunt.registerTask(
+    'convert_template',
+    'Converts the govuk_template to use mustache inheritance',
+    function () {
+      var script = require(__dirname + '/lib/template-conversion.js');
+
+      script.convert();
+      grunt.log.writeln('govuk_template converted');
+    }
+  );
 
   grunt.registerTask('default', [
     'copy:govuk_template',
     'copy:govuk_assets',
+    'convert_template',
     'copy:govuk_frontend_toolkit',
     'replace',
     'sass',

app.js

@@ -1,45 +1,32 @@
 var express = require('express'),
-    cons = require('consolidate'),
     app = express(),
-    mustacheRender = require("./lib/mustacheRender").mustacheRender,
     port = (process.env.PORT || 3000);
 
 // Application settings
-app.engine('html', cons.mustache);
+app.engine('html', require(__dirname + '/lib/template-engine.js').__express);
 app.set('view engine', 'html');
+app.set('vendorViews', __dirname + '/govuk/views');
 app.set('views', __dirname + '/views');
 
 // Middleware to serve static assets
 app.use('/public', express.static(__dirname + '/public'));
 app.use('/public', express.static(__dirname + '/govuk/public'));
 
-// middleware to wrap mustache views in govuk template
-
-app.use(mustacheRender);
-
-//
-
-var commonHead = '<link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css" />';
-
 // routes
 
 app.get('/', function (req, res) {
 
-  var head = commonHead;
-
   res.render('index',
             {'pageTitle': 'index',
-            'head' : head });
+            'assetPath' : '/public/'});
 
 });
 
 app.get('/sample', function (req, res) {
 
-  var head = commonHead;
-
   res.render('sample',
             {'pageTitle': 'sample',
-            'head' : head });
+            'assetPath' : '/public/'});
 });
 
 // start the app

govuk/config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  assetPath: "{{assetPath}}",
+  afterHeader: "{{$afterHeader}}{{/afterHeader}}",
+  bodyClasses: "{{$bodyClasses}}{{/bodyClasses}}",
+  bodyEnd: "{{$bodyEnd}}{{/bodyEnd}}",
+  content: "{{$content}}{{/content}}",
+  cookieMessage: "{{$cookieMessage}}{{/cookieMessage}}",
+  footerSupportLinks: "{{$footerSupportLinks}}{{/footerSupportLinks}}",
+  footerTop: "{{$footerTop}}{{/footerTop}}",
+  head: "{{$head}}{{/head}}",
+  headerClass: "{{$headerClass}}{{/headerClass}}",
+  insideHeader: "{{$insideHeader}}{{/insideHeader}}",
+  pageTitle: "{{$pageTitle}}GOV.UK - The best place to find government services and information{{/pageTitle}}",
+  propositionHeader: "{{$propositionHeader}}{{/propositionHeader}}"
+};

govuk/public/javascripts/govuk-template.js

@@ -97,7 +97,7 @@
   }
 
   // header navigation toggle
-  if (document.querySelectorAll){
+  if (document.querySelectorAll && document.addEventListener){
     var els = document.querySelectorAll('.js-header-toggle'),
         i, _i;
     for(i=0,_i=els.length; i<_i; i++){

govuk/public/stylesheets/fonts-ie8.css

@@ -5,26 +5,26 @@
 
 @font-face {
   font-family: 'nta';
-  src: url(fonts/NTA-Light-20130221.eot?0.4.1#) format('embedded-opentype');
+  src: url(fonts/NTA-Light-20130221.eot?0.6.2#) format('embedded-opentype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'nta';
-  src: url(fonts/NTA-Bold-20130221.eot?0.4.1#) format('embedded-opentype');
+  src: url(fonts/NTA-Bold-20130221.eot?0.6.2#) format('embedded-opentype');
   font-weight: bold;
 }
 
 @font-face {
   font-family: 'ntatabularnumbers';
-  src: url(fonts/NTATabularNumbers-Light.eot?0.4.1#) format('embedded-opentype');
+  src: url(fonts/NTATabularNumbers-Light.eot?0.6.2#) format('embedded-opentype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'ntatabularnumbers';
-  src: url(fonts/NTATabularNumbers-Bold.eot?0.4.1#) format('embedded-opentype');
+  src: url(fonts/NTATabularNumbers-Bold.eot?0.6.2#) format('embedded-opentype');
   font-weight: bold;
 }

govuk/public/stylesheets/govuk-template-ie6.css

@@ -82,7 +82,7 @@ Example usage:
 
 */
 /* local styleguide includes */
-/* New Greys */
+/* Old depricated greys, new things should use the toolkit greys */
 html, body, button, input, table, td, th {
   font-family: "nta", Arial, sans-serif; }
 
@@ -135,9 +135,11 @@ fieldset {
   border: none;
   padding: 0; }
 
-a,
+a:link {
+  color: #005ea5; }
+
 a:visited {
-  color: #2e3191; }
+  color: #2e8aca; }
 
 a:hover {
   color: #2e8aca; }
@@ -146,11 +148,11 @@ a:active {
   color: #2e8aca; }
 
 a[rel="external"]:after {
-  background-image: url(external-link.png?0.4.1);
+  background-image: url(external-links/external-link.png?0.6.2);
   background-repeat: no-repeat; }
   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
     a[rel="external"]:after {
-      background-image: url(external-link-24x24.png?0.4.1);
+      background-image: url(external-links/external-link-24x24.png?0.6.2);
       background-size: 12px 400px; } }
 a[rel="external"]:after {
   content: "\A0\A0\A0\A0";
@@ -164,11 +166,11 @@ a[rel="external"]:hover:after {
 .external-link:hover:after {
   background-position: right 0px; }
 .external-link:after {
-  background-image: url(external-link-black-12x12.png?0.4.1);
+  background-image: url(external-links/external-link-black-12x12.png?0.6.2);
   background-repeat: no-repeat; }
   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
     .external-link:after {
-      background-image: url(external-link-black-24x24.png?0.4.1);
+      background-image: url(external-links/external-link-black-24x24.png?0.6.2);
       background-size: 12px 400px; } }
 
 /*
@@ -302,6 +304,7 @@ a:focus {
 input:focus,
 textarea:focus,
 select:focus,
+button:focus,
 #global-header input:focus {
   outline: 3px solid #ffbf47; }
 
@@ -593,10 +596,17 @@ select:focus,
           top: 0;
           width: 41px;
           height: 100%; }
-          #footer .footer-meta .footer-meta-inner .open-government-licence h2 a, #footer .footer-meta .footer-meta-inner .open-government-licence h2 img {
+          #footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
             display: block;
-            width: 43px;
-            height: 17px; }
+            width: 41px;
+            height: 17px;
+            overflow: hidden;
+            text-indent: -999em;
+            background: url(images/open-government-licence.png?0.6.2) 0 0 no-repeat; }
+            @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+              #footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
+                background-image: url(images/open-government-licence_2x.png?0.6.2);
+                background-size: 41px 17px; } }
         #footer .footer-meta .footer-meta-inner .open-government-licence p {
           font-family: "nta", Arial, sans-serif;
           font-size: 16px;
@@ -641,11 +651,11 @@ select:focus,
       #footer .footer-meta .copyright a {
         display: block;
         padding: 115px 0 0 0;
-        background: transparent url(images/govuk-crest.png?0.4.1) no-repeat 100% 0;
+        background: transparent url(images/govuk-crest.png?0.6.2) no-repeat 100% 0;
         text-align: right;
         text-decoration: none;
-        background-image: url(images/govuk-crest-ie.png?0.4.1); }
+        background-image: url(images/govuk-crest-ie.png?0.6.2); }
         @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
           #footer .footer-meta .copyright a {
-            background-image: url(images/govuk-crest-2x.png?0.4.1);
+            background-image: url(images/govuk-crest-2x.png?0.6.2);
             background-size: 125px 102px; } }

govuk/public/stylesheets/govuk-template-ie7.css

@@ -82,7 +82,7 @@ Example usage:
 
 */
 /* local styleguide includes */
-/* New Greys */
+/* Old depricated greys, new things should use the toolkit greys */
 html, body, button, input, table, td, th {
   font-family: "nta", Arial, sans-serif; }
 
@@ -135,9 +135,11 @@ fieldset {
   border: none;
   padding: 0; }
 
-a,
+a:link {
+  color: #005ea5; }
+
 a:visited {
-  color: #2e3191; }
+  color: #2e8aca; }
 
 a:hover {
   color: #2e8aca; }
@@ -146,11 +148,11 @@ a:active {
   color: #2e8aca; }
 
 a[rel="external"]:after {
-  background-image: url(external-link.png?0.4.1);
+  background-image: url(external-links/external-link.png?0.6.2);
   background-repeat: no-repeat; }
   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
     a[rel="external"]:after {
-      background-image: url(external-link-24x24.png?0.4.1);
+      background-image: url(external-links/external-link-24x24.png?0.6.2);
       background-size: 12px 400px; } }
 a[rel="external"]:after {
   content: "\A0\A0\A0\A0";
@@ -164,11 +166,11 @@ a[rel="external"]:hover:after {
 .external-link:hover:after {
   background-position: right 0px; }
 .external-link:after {
-  background-image: url(external-link-black-12x12.png?0.4.1);
+  background-image: url(external-links/external-link-black-12x12.png?0.6.2);
   background-repeat: no-repeat; }
   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
     .external-link:after {
-      background-image: url(external-link-black-24x24.png?0.4.1);
+      background-image: url(external-links/external-link-black-24x24.png?0.6.2);
       background-size: 12px 400px; } }
 
 /*
@@ -302,6 +304,7 @@ a:focus {
 input:focus,
 textarea:focus,
 select:focus,
+button:focus,
 #global-header input:focus {
   outline: 3px solid #ffbf47; }
 
@@ -590,10 +593,17 @@ select:focus,
           top: 0;
           width: 41px;
           height: 100%; }
-          #footer .footer-meta .footer-meta-inner .open-government-licence h2 a, #footer .footer-meta .footer-meta-inner .open-government-licence h2 img {
+          #footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
             display: block;
-            width: 43px;
-            height: 17px; }
+            width: 41px;
+            height: 17px;
+            overflow: hidden;
+            text-indent: -999em;
+            background: url(images/open-government-licence.png?0.6.2) 0 0 no-repeat; }
+            @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+              #footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
+                background-image: url(images/open-government-licence_2x.png?0.6.2);
+                background-size: 41px 17px; } }
         #footer .footer-meta .footer-meta-inner .open-government-licence p {
           font-family: "nta", Arial, sans-serif;
           font-size: 16px;
@@ -638,10 +648,10 @@ select:focus,
       #footer .footer-meta .copyright a {
         display: block;
         padding: 115px 0 0 0;
-        background: transparent url(images/govuk-crest.png?0.4.1) no-repeat 100% 0;
+        background: transparent url(images/govuk-crest.png?0.6.2) no-repeat 100% 0;
         text-align: right;
         text-decoration: none; }
         @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
           #footer .footer-meta .copyright a {
-            background-image: url(images/govuk-crest-2x.png?0.4.1);
+            background-image: url(images/govuk-crest-2x.png?0.6.2);
             background-size: 125px 102px; } }