nw-nerdlayoutjs
v0.1.0
Published
api wrapper for loading the nerdwallet header and footer into a js app
Downloads
3
Readme
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 theDOCTYPE
declaration through the opening of the#main
containerbottom
- the html from the close of the#main
container through the closinghtml
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
)
})