Formerly named set-head.
Framework agnostic, isomorphic <html>, <body and <head> rendering utility.
npm install set-pageimport Page from 'set-page'
// Create a new page element, this should be done once per request.
const page = new Page()
page
// Set html and body attributes.
.html({ lang: 'en' })
.body({ class: 'loading' })
// Add elements to <head> via method chaining.
.meta({ charset: 'utf8' })
.title('My App')
.base({ href: '/admin/' })
.meta({ name: 'description' content: 'Cool stuff' })
.link({ rel: 'stylesheet', href: 'index.css' })
.script({ async: true, src: 'index.js' })set-page makes overriding values easy. If you invoke page again later it will replace any existing similar head element and merge any body or html attributes.
The module uses special keying scheme for head elements found in ./src/base.js under const KEYS to understand which elements to replace and which to add. Ultimately this allows for efficient re-ordering and rendering without any 'key' non-sense.
// Setting defaults somewhere (perhaps in a middleware or plugin.)
page
.title('My App')
.meta({ name: 'author', content: 'Dylan Piercey' })
.meta({ name: 'description', content: 'Welcome to the site' })
.link({ rel: 'stylesheet', href: '/app.css' })
.script({ async: true, src: '/app.js' })
// The later in a specific route you can continue chaining like so to override.
page
.title('My App > My sub page')
.meta({ name: 'description', content: 'Sub page description' })To render to the browser, simply invoke 'render' after all setting up the page.
page.render()Server side rendering is accomplished by invoking renderToString after setting up the page.
export default (req, res) => {
const parts = page.renderToString()
res.end(`
<!doctype html>
<html${parts.htmlAttributes}>
<head>${parts.head}</head>
<body${parts.bodyAttributes}>
...
</body>
</html>
`)
}- Use
npm testto run tests.
Please feel free to create a PR!