JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 32274
  • Score
    100M100P100Q155867F
  • License MIT

Wraps templates with layouts. Layouts can use other layouts and be nested to any depth. This can be used 100% standalone to wrap any kind of file with banners, headers or footer content. Use for markdown, HTML, handlebars views, lo-dash templates, etc. Layouts can also be vinyl files.

Package Exports

  • layouts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (layouts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

layouts NPM version Build Status

Wraps templates with layouts. Layouts can use other layouts and be nested to any depth. This can be used 100% standalone to wrap any kind of file with banners, headers or footer content. Use for markdown, HTML, handlebars views, lo-dash templates, etc. Layouts can also be vinyl files.

Install

Install with npm

$ npm i layouts --save

Usage

var renderLayouts = require('layouts');

Examples

Basic example

In this example, two layouts are used:

  • the first layout, one, will wrap the string
  • the second layout, two, will wrap the first layout
var layouts = {
  one: {content: 'one before\n{% body %}\none after', layout: 'two'},
  two: {content: 'two before\n{% body %}\ntwo after'},
};

// `one` is the name of the first layout to use on the provided string
renderLayouts('<div>Wrap me with a layout!!!</div>', 'one', layouts);

Results in:

two before
one before
<div>Wrap me with a layout!!!</div>
one after
two after

HTML

This example shows how to use nested HTML layouts to wrap content:

var layouts = {};

layouts.base = {
  content: [
    '<!DOCTYPE html>',
    '<html lang="en">',
    '  <head>',
    '    <meta charset="UTF-8">',
    '    <title>Home</title>',
    '  </head>',
    '  <body>',
    '    {% body %}',
    '  </body>',
    '</html>',
  ].join('\n')
};

// this `nav` layout will be wrapped with the `base` layout
layouts.nav = {
  layout: 'base',
  content: '<nav>\n{% body %}\n</nav>'
};

// this string will be wrapped with the `nav` layout
var str = [
  '<ul class="categories">',
  '  <li class="active"> <a href="#"> Development </a> </li>',
  '  <li> <a href="#"> Design </a> </li>',
  '  <li> <a href="#"> Node.js </a> </li>',
  '</ul>'
].join('\n')

// `nav` is the name of the layout to use
renderLayouts(str, nav, layouts);

Results in something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  </head>
  <body>
    <nav>
      <ul class="categories">
        <li class="active"> <a href="#"> Development </a> </li>
        <li> <a href="#"> Design </a> </li>
        <li> <a href="#"> Node.js </a> </li>
      </ul>
    </nav>
  </body>
</html>

Customization

By default, {% body %} is used as the placeholder (insertion point) for content, but this can easily be customized with the following options:

  • layoutDelims: the delimiters to use. This can be a regex, like /\{{([^}]+)\}}/, or an array of delimiter strings, like ['{{', '}}']
  • tag: the name of the placeholder tag.

API

renderLayouts

Wrap one or more layouts around string.

Params

  • string {String}: The string to wrap with a layout.
  • layoutName {String}: The name (key) of the layout object to use.
  • layoutStack {Object}: Object of layout objects.
  • options {Object}: Optionally define a defaultLayout (string), pass custom delimiters (layoutDelims) to use as the placeholder for the content insertion point, or change the name of the placeholder tag with the tag option.
  • fn {Function}: Optionally pass a function to modify the context as each layout is applied.
  • returns {String}: Returns the original string wrapped with one or more layouts.

Example

renderLayouts(string, layoutName, layoutStack, options, fn);
  • assemble: Static site generator for Grunt.js, Yeoman and Node.js. Used by Zurb Foundation, Zurb Ink, H5BP/Effeckt,… more
  • handlebars-helpers: 120+ Handlebars helpers in ~20 categories, for Assemble, YUI, Ghost or any Handlebars project. Includes… more
  • template: Render templates using any engine. Supports, layouts, pages, partials and custom template types. Use template… more
  • template-helpers: Generic JavaScript helpers that can be used with any template engine. Handlebars, Lo-Dash, Underscore, or… more
  • verb: Documentation generator for GitHub projects. Extremely powerful, easy to use, can generate anything from API… more

Running tests

Install dev dependencies:

$ npm i -d && npm test

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue

Author

Brian Woodward

License

Copyright © 2014-2015 Brian Woodward Released under the MIT license.

This file was generated by verb-cli on July 17, 2015.