Merge pull request #259 from alphagov/use-nunjucks-for-templating

Use Nunjucks for templating

.gitignore

@@ -3,6 +3,7 @@
 .start.pid
 node_modules
 govuk_modules
+lib/govuk_template.html
 
 # Ignore compiled stylesheets
 public/stylesheets/

Gruntfile.js

@@ -46,11 +46,19 @@ module.exports = function (grunt) {
         },
         {
           expand: true,
-          cwd: 'node_modules/govuk_template_mustache/',
+          cwd: 'node_modules/govuk_template_jinja/',
           src: '**',
           dest: 'govuk_modules/govuk_template/'
         }]
       },
+      govuk_template_jinja: {
+        files: [{
+          expand: true,
+            cwd: 'govuk_modules/govuk_template/views/layouts/',
+            src: '**',
+            dest: 'lib/'
+          }]
+      },
     },
 
     // workaround for libsass
@@ -110,28 +118,14 @@ module.exports = function (grunt) {
     'grunt-contrib-watch',
     'grunt-sass',
     'grunt-nodemon',
-    'grunt-text-replace',
     'grunt-concurrent',
     'grunt-shell'
   ].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',
-    'convert_template',
-    'replace',
     'sass',
     'concurrent:target'
   ]);
@@ -141,8 +135,6 @@ module.exports = function (grunt) {
     'Test that the default task runs the app',
     [
       'copy',
-      'convert_template',
-      'replace',
       'sass'
     ]
   );
@@ -155,7 +147,7 @@ module.exports = function (grunt) {
     }
   );
 
-   grunt.registerTask(
+  grunt.registerTask(
     'lint_message',
     'Output a message once linting is complete',
     function() {

app/routes.js

@@ -1,8 +1,8 @@
 module.exports = {
-  bind : function (app, assetPath) {
+  bind : function (app, asset_path) {
 
     app.get('/', function (req, res) {
-      res.render('index', {'assetPath' : assetPath });
+      res.render('index', {'asset_path' : asset_path });
     });
 
     // Redirect snippets page to the index page

app/views/examples/example_date.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Date — Form elements — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Date — Form elements — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -15,12 +15,10 @@ <h1 class="heading-xlarge">
         Example: Date
       </h1>
       <!-- Date of birth -->
-      {{> form_date }}
+      {% include "snippets/form_date.html" %}
 
     </div>
   </div>
 
 </main><!-- /#content -->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_details_summary.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Details summary — Typography — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Details summary — Typography — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -87,6 +87,4 @@ <h2 class="heading-medium">Example 3: Summary content is visible, details conten
   </div>
 
 </main><!-- /#content -->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_form_elements.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Form elements — Form elements — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Form elements — Form elements — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -501,37 +501,35 @@ <h3 class="heading-medium">
           These examples are one-question-per-page examples and use a heading for the question, with a visually hidden legend inside a fieldset.
         </h3>
         <!-- "Chunky" Radio buttons, stacked -->
-        {{> form_radio_buttons }}
+        {% include "snippets/form_radio_buttons.html" %}
       </div>
 
       <div class="form-section">
         <!-- "Chunky" Checkboxes, stacked -->
-        {{> form_checkboxes }}
+        {% include "snippets/form_checkboxes.html" %}
       </div>
 
       <div class="form-section">
         <!-- Yes or No question (without revealed content ) -->
-        {{> form_radio_buttons_inline }}
+        {% include "snippets/form_radio_buttons_inline.html" %}
       </div>
 
       <div class="form-section">
         <!-- Yes or No question (select one option to reveal content) -->
-        {{> form_radio_inline_yes_no }}
+        {% include "snippets/form_radio_inline_yes_no.html" %}
       </div>
 
       <div class="form-section">
         <!-- Radio buttons (select one option to reveal content) -->
-        {{> form_inset_radios }}
+        {% include "snippets/form_inset_radios.html" %}
       </div>
 
       <div class="form-section">
         <!-- Checkboxes (select more than option to reveal content) -->
-        {{> form_inset_checkboxes }}
+        {% include "snippets/form_inset_checkboxes.html" %}
       </div>
 
     </div>
   </div>
 </main><!-- / #content -->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_form_validation_multiple_questions.html

@@ -1,17 +1,17 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Form validation — Errors — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main class="js-error-example" id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
 
       <form method="post" action="/errors/example-form-validation-multiple-questions">
-        {{> form_error_multiple }}
+        {% include "snippets/form_error_multiple.html" %}
       </form>
 
       <h2 class="heading-medium implementation-advice">Implementation advice</h2>
@@ -65,6 +65,4 @@ <h2 class="heading-medium implementation-advice">Implementation advice</h2>
     </div>
   </div>
 </main>
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_form_validation_single_question_radio.html

@@ -1,17 +1,17 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Form validation — Errors — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main class="js-error-example" id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
 
       <form method="post" action="/errors/example-form-validation-single-question-radio">
-        {{> form_error_radio }}
+        {% include "snippets/form_error_radio.html" %}
       </form>
 
       <h2 class="heading-medium implementation-advice">Implementation advice</h2>
@@ -71,6 +71,4 @@ <h2 class="heading-medium implementation-advice">Implementation advice</h2>
     </div>
   </div>
 </main>
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_grid_layout.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Grid layout — Layout — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Grid layout — Layout — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -128,10 +128,10 @@ <h2 class="bold-medium">One quarter</h2>
 
 </main>
 
-{{/content}}
+{% endblock %}
 
-{{$bodyEnd}}
-  {{>scripts}}
+{% block body_end %}
+  {% include "includes/scripts.html" %}
   <script>
 
     // Toggle grid background colours
@@ -158,6 +158,4 @@ <h2 class="bold-medium">One quarter</h2>
     });
 
     </script>
-{{/bodyEnd}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_icons.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Icons — Icons and images — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Icons — Icons and images — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <style>
   .example-icon-list p { display: inline-block; font-size: 16px; padding-left: 1em; vertical-align: middle; margin-bottom: 0;}
@@ -118,6 +118,4 @@ <h2 class="heading-medium">White or semi-transparent icons</h2>
   </div>
 
 </main><!-- /#content-->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_radios_checkboxes.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Radio buttons and checkboxes — Form elements — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Radio buttons and checkboxes — Form elements — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -156,6 +156,4 @@ <h1 class="heading-large">
   </div>
 
 </main><!-- /#content-->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}

app/views/examples/example_typography.html

@@ -1,11 +1,11 @@
-{{<layout_example}}
+{% extends "layout_example.html" %}
 
-{{$pageTitle}}Example: Typography — Typography — GOV.UK elements{{/pageTitle}}
+{% block page_title %}Example: Typography — Typography — GOV.UK elements{% endblock %}
 
-{{$content}}
+{% block content %}
 <main id="content" role="main" tabindex="-1">
 
-  {{>breadcrumb}}
+  {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -76,6 +76,4 @@ <h4 class="heading-small">A 19px heading</h4>
     </div>
   </div>
 </main><!-- / #content -->
-{{/content}}
-
-{{/layout_example}}
+{% endblock %}