JSPN

JSON HTML Page Definitions. The Javascript on the bottom generates the output on the top. This will be served up by Node.

by Christopher McCulloh

HTML

<html>
    <head>
        <script src="require.js"></script>
        <style link="jquery-ui.css"/>
        <style link="bootstrap.css"/>
        <style link="main.css"/>
    </head>
    <body>
        <div class="container">
<div class="hero-unit">
	<p class="title"><img src="https://s3.amazonaws.com/fuelux/logo-gray.png" width="600" height="122" alt="Fuel UX">
		Version 2.6.1</p>

	<p>Fuel UX extends Bootstrap...</p>

	<p><a class="btn btn-large" href="https://github.com/ExactTarget/fuelux">View On GitHub &raquo;</a></p>
</div>
        </div>
    </body>
</html>

JavaScript

var doc = {
    //@ prefixed use bower & requirejs automatically to find and pull in script deps. Specify version requirements with ":" followed by number or range etc. Putting an '^' in front causes to load at top instead of bottom of page. Non-@-prefixed are name of local script files in js/ folder (unless you specificy different location in global settings)
    scripts: ['^@require','@jquery:1.9', '@jquery-ui', '@bootstrap', '@underscore', '@mustache', 'main', 'home'],
    styles: ['@jquery-ui', '@bootstrap', 'main'],
    container: {
        hero-unit: {
            //by default, these will use Handlebars to parse out the links, etc, but this can be set in the global settings to use something else
            p.title: "{{img:"https://s3.amazonaws.com/fuelux/logo-gray.png" w:600 h:122 alt:"Fuel UX"}} Version 2.6.1",
            p: "Fuel UX extends Bootstrap",
            p: "{{#a.btn.btn-large href:"https://github.com/ExactTarget/fuelux"}}View On GitHub &raquo{{/a}}"
        },
        main: {
            p: "This is just an amazing site! Here is a list:",
            ul: [
                "An item",
                "Another item"
                ],
            p: "I'm going to put an {{img:what.png}} here"
        },
        aside: {
            menu: ["http://www.google.com", "about", "search"]   
        }
    }
}