README

hmpo-templates

Common page layouts and partials.

Installation

npm install [--save] hmpo-templates

Setup

Install hmpo-govuk-template, hogan-express-strict and express-partial-templates as part of your project.

var app = require('express')();

require('hmpo-govuk-template').setup(app);

app.set('view engine', 'html');
app.use(require('hmpo-templates'));
app.engine('html', require('hogan-express-strict'));
app.use(require('express-partial-templates')(app));

Basic usage

my-page.html

{{< hmpo-layout}}
    {{$pageTitle}}...page title...{{/pageTitle}}

    {{$header}}
        <h1>...heading...</h1>
    {{/header}}

    {{$content}}
        <p>...intro content...</p>
        {{< hmpo-partials-form}}
            {{$form}}
                ...form inputs...
                ...form submit button...
            {{/form}}
        {{/ hmpo-partials-form}}
    {{/content}}
{{/ hmpo-layout}}

Templates

The templates are added to res.locals with hmpo as a prefix to the template names.

Layout:

maincontent (sets maincontent-left as the default and provides a block to override)
maincontent-left
maincontent-right
maincontent-full
flash-card

Partials:

analytics
gtm
gtm-noscript
back-link
back
betatag
body-end
cookies
error-summary
form
head
new-window
sidebar
warning

Changing a page layout

Create layout.html in your views directory.

{{< hmpo-layout}}
    {{$pageTitle}}...page title...{{/pageTitle}}

    {{$main-content}}
        {{< hmpo-partials-maincontent-right}}
            {{$header}}...heading...{{/header}}
            {{$content}}...content...{{/content}}
        {{/ hmpo-partials-maincontent-right}}
    {{/main-content}}
{{/ hmpo-layout}}

This changes the main page layout to maincontent-right. In your custom pages you can now inherit from layout.html.

Compatibility

Use with hmpo-template-mixins for form inputs and view formatters. When used with hmpo-form-wizard you'll get a validation summary appearing at the top of your page when a form error occurs.

Google Analytics Classic

To enable Google Analytics tracking expose a GA ID as res.locals['ga-id'].

Page views and form validation error events will be sent to GA.

Events contained in the array res.locals.gaevents will be fired on page view, for instance:

res.locals.gaevents = [
    {
        gaCategory: 'Category',
        gaAction: 'Action',
        gaLabel: 'Label',
        gaValue: 42
    }
];

Google Tag Manager

To enable Google Tag Manager expose GTM settings as:

res.locals.gtm = {
    id: 'GT-XXXXXX',
    preview: 'env-1',
    auth: 'abcdefg'
};

For production environments only an ID is required.

Page views and form validation error events will be sent to GTM.