Pigeon

Build Status Dependency Status

Pigeon is an HTML preprocessor / template engine written in Javascript.

Installation

npm install pigeon-js

About

Pigeon is an HTML preprocessor. However, you do not need to learn a new language — you can stick to Javascript. Pigeon is an alternative to Absurd's HTML preprocessor.

Usage

var pigeon = require('pigeon-js');

var data = {
    content: 'Content'
};

var convert = {

    _: 'html',

    html: {
        head: {
            style: '.example {display: block;}',
            title: 'My title',
            script: 'function helloWorld () { console.log("Hello World"); }',
        },

        body: {
            '.main#ID': {
                '.child.child': 'Content',
                '.anotherchild': 'Content',
                '.lastchild': data.content

            },
        },
    }

};

pigeon.render(convert, function(err, html) {
    console.log(html);
});

Displays

<!DOCTYPE html>
<html>

<head>
    <style>
        .example {
            display: block;
        }
    </style>
    <title>My title</title>
    <script>
        function helloWorld() {
            console.log("Hello World");
        }
    </script>
</head>

<body>
    <div id="ID" class="main">
        <div class="child">Content</div>
        <div class="anotherchild">Content</div>
        <div class="lastchild">Content</div>
    </div>
</body>

</html>

Usage: YAML

Template file:

_: 'html'
html:
  head: 
    script[src="/somewhereovertherainbow.js"]: ''
    title: 'My title'
  body:
    '.class#id': '{{content}}'
    .anotherclass: 
      - .class: 'Content'
      - .anotherclass: '{{name}} is {{age}} today!'
      - .lastclass: 'Content'
    footer.footer:
      span: 
        a[href="/signup"]: 'Sign up'

Javascript:

var pigeon = require('pigeon-js');

var data = {content: 'Content', name: 'John', age: '20'};

var html = pigeon.renderFromYAML('/home/user/path/to/template.yml', {data: data});

console.log(html);

Displays

<!DOCTYPE html>
<html>

<head>
  <script src="/somewhereovertherainbow.js"></script>
  <title>My title</title>
</head>

<body>
  <div id="id" class="class">Content</div>
  <div class="anotherclass">
    <div class="class">Content</div>
    <div class="anotherclass">John is 20 today!</div>
    <div class="lastclass">Content</div>
  </div>
  <footer class="footer"><span><a  href="/signup">Sign up</a></span></footer>
</body>

</html>

Todo

License

The MIT License is a free software license originating at the Massachusetts Institute of Technology (MIT). It is a permissive free software license, meaning that it permits reuse within proprietary software provided all copies of the licensed software include a copy of the MIT License terms and the copyright notice.