nw-nerdlayoutjs

Client wrapper for calling out to the global-nav service.

installation

npm i nw-nerdlayoutjs --save

usage

var nerdlayout = require('nw-nerdlayoutjs')

nl = nerdlayout({
  title : 'Test title',
  keywords: 'foo, bar, baz',
  description: 'a beautiful test',
  theme: 'health',
  forceDesktop: 'true',
  includePathsJS: ['../app-site/js/test.js'],
  includePathsCSS: ['../app-site/css/test.css'],
  ogTags: {
    title: 'TEST TITLE',
    image: 'http://assets.nerdwallet.com/img/nw-logos/NW_logo_200x200.png',
  },
  canonicalURL: 'http://www.nerdwallet.com',
  disclaimers: ['nonCommissionedContent']
})

nl.fetch(console.log)

methods

var nl = nerdlayout(options)

var options = {
  title : 'Test title',  // page title
  keywords: 'foo, bar, baz', // keywords for meta keywords tag
  description: 'a beautiful test', // description for meta description tag
  theme: 'health', // used primarily by legacy NW php apps as a way to namespace asset paths
  forceDesktop: 'true', // sets viewport width to desktop size
  includePathsJS: ['../app-site/js/test.js'], // paths to additional js files that should be included on the page (these will be added to the page before the close of the body tag)
  includePathsCSS: ['../app-site/css/test.css'], // paths to additional js files that should be included
  ogTags: {
    title: 'TEST TITLE',
    image: 'http://assets.nerdwallet.com/img/nw-logos/NW_logo_200x200.png',
  }, // facebook og meta tags
  canonicalURL: 'http://www.nerdwallet.com', // href for canonical link tag
  disclaimers: ['nonCommissionedContent'] // list of disclaimer types to be added to the footer
}

nl.fetch(callback)

Will make an http request to the global nav service that will include the config options specified by the caller. callback will be invoked when the response is returned from the global nav service. It will be passed the following three params:

• error - an exception object if an error occured (otherwise it will be null)
• top - the html from the DOCTYPE declaration through the opening of the #main container
• bottom - the html from the close of the #main container through the closing html tag

middleware

Included is a function for creating connect middleware that will fetch global-nav data for you adding it to res.locals.nerdlayout for easy access in your route handlers.

This will fetch global-nav data w/ sane defaults.

var app = require('express')()
var middleware = require('nw-nerdlayoutjs/lib/middleware')

app.use(middleware())
app.get('/nerd', function (req, res) {
  res.send(
    res.locals.nerdlayout.top +
    'My content' +
    res.locals.nerdlayout.bottom
  )
})

You'll probably want to customize the configuration sent to global-nav such as the page title and additional assets. You can pass in a callback hook and return your own configuration which will be extended w/ the sane defaults.

var app = require('express')()
var middleware = require('nw-nerdlayoutjs/lib/middleware')

var custom = middleware(function (req, res, callback) {
  var config = {
    title: 'Nerdy Title'
  }

  callback(null, config)
})

app.use(custom)
app.get('/nerd', function (req, res) {
  res.send(
    res.locals.nerdlayout.top +
    'My content' +
    res.locals.nerdlayout.bottom
  )
})