README
sneak
A template engine heavily inspired by jade and written with Tumblr in mind. It is a core component of peak, a Tumblr development environment.
Installation
$ npm install sneak -g
Why should you care?
Sneak is a template engine that looks familiar to jade users but has been sanded down and re-tooled for Tumblr theme development.
Example
! 5
html
head
- PageTitle:
title= Title
body
header.
My first Tumblr
- Posts:
h1 #{Title}
h1= Title
p= Content
<!DOCTYPE html>
<html>
<head>
{block:PageTitle}
<title>{Title}</title>
{/block:PageTitle}
</head>
<body>
<header>My first Tumblr</header>
{block:Posts}
<h1>{Title}</h1>
{/block:Posts}
</body>
</html>
Syntax
Blocks:
A Tumblr {block:} tag
- Posts:
h1 Title
{block:Posts}
<h1>Title</h1>
{/block:Posts}
Variables:
A Tumblr {variable} tag. Can be interpolated within text.
h1= Title
p Content: #{content}
<h1>{Title}</h1>
<p>Content: {Content}</p>
Tags:
HTML tags can be rendered in several different ways.
h1 Title
h2.subtitle Subtitle
#content Content
.footer Footer
footer(name: "bottom") Footer #2
meta(name: "description", content: description)/
<h1>Title</h1>
<h2 class="subtitle">Subtitle</h2>
<div id="content">Content</div>
<div class="footer">Footer</div>
<footer name="bottom">Footer #2</footer>
<meta name="description" content="{description}" />
Text:
All characters following a tag are treated as text
h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Tags followed by a dot (.) will make all following indented text into a text string.
#content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat odio nec magna fermentum, sit amet placerat nisl fringilla.
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat odio nec magna fermentum, sit amet placerat nisl fringilla.</div>
Doctype:
Render a doctype
! 5
<!DOCTYPE html>
Include:
Include sneak templates.
- Posts:
= "post.sneak"
{block:Posts}
<!-- parsed contents of post.sneak -->
{/block:Posts}
Comment:
Include comments
// Hello
<!-- Hello -->
Locals:
Sneak also accepts locals. Syntactically, they are variables with an exclamation mark appended to the end.
h1 #{foo!}
h2(name: name!)- bar!
<!-- assuming foo is "bar", bar is "foo", and name is "subheader" -->
<h1>bar</h1>
<h2 name="subheader">foo</h2>
Usage
CLI
$ npm install sneak -g
$ sneak --help
API
var sneak = require('sneak');
// render
sneak.render('h1 Title\n p Content', options);
// renderFile
sneak.renderFile('index.sneak', options);
// compile
sneak.compile('h1 Title\n p= foo!', options);
// compileFile
sneak.compileFile('index.sneak', options);
Options:
- basepath (string) a path to search for files included relatively.
- encoding (string) the encoding format to read and write files in.
for
render
andrenderFile
the options object is also used to pass locals.
License & Contributing
- Details on the license can be found here
- Details on running tests and contributing can be found here