i'm not maintaining this package anymore
silhouette generates html from an array representation
{html, html5} = require 'silhouette'html5
['html',
['head',
['title', 'a title']
['script', {
src: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type: 'text/javascript'}]]
['body',
['div#container',
['h1', 'a heading']
['h2.secondary-heading', 'another heading']
['ul', 'first second third'.split(' ').map((x) -> ['li', ['a', x]])]
['p', 'Before the break', ['br'], 'After the break']]]]returns
<!DOCTYPE html>
<html>
<head>
<title>a title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>a heading</h1>
<h2 class="secondary-heading">another heading</h2>
<ul>
<li>
<a>first</a>
</li>
<li>
<a>second</a>
</li>
<li>
<a>third</a>
</li>
</ul>
<p>Before the break<br />
After the break</p>
</div>
</body>
</html>html5 prepends <!DOCTYPE html>\n to the output of html
silhouette generates html from tag forms. a tag form is defined as an array consisting of a name string, an optional attributes object and a variable number of content elements.
html ['p']returns
<p></p>html ['input']returns
<input />area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr and frame
are void tags. they have no closing tag and can't have content.
html ['p#my-id.my-class-1.my-class-2']returns
<p id="my-id" class="my-class-1 my-class-2"></p>html ['form', {method: 'post', action: '/submit'}]returns
<form method="post" action="/submit"></form>the class and id attributes overwrite classes and id parsed from the tag string.
html ['p', 'lorem ipsum']returns
<p>lorem ipsum</p>html
['p',
'lorem ipsum ',
['span',
'dolor sit ',
['b', 'amet']]]returns
<p>lorem ipsum <span>dolor sit <b>amet</b></span></p>a component is defined as an object which has a render property that is a function.
when silhouette encounters a component
it will call the render function of the component and use its return value in place of the component.
html ['div', {render: -> ['p', 'text inside a component']}]returns
<div><p>text inside a component</p><div>silhouette will just loop over any array that is not a tag form and concatenate the output.
html ['div', ['first', 'second', 'third'].map((x) -> ['p', x])]returns
<div><p>first</p><p>second</p><p>third</p><div>the empty array acts as the identity. use it for conditional markup.
renderSpan = false
html ['div', (if renderSpan then ['span'] else [])]returns
<div></div>silhouette will html escape text content.
silhouette will properly quote attributes using double quotes. properly quoted attributes can only be escaped with the corresponding quote. silhouette escapes all double quotes inside attributes values to prevent escaping.