❤
npm
Sign UpSign In

sneak

0.0.7 • Public • Published

sneak

NPM version tests

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 and renderFile the options object is also used to pass locals.

License & Contributing

Readme

Keywords

Package Sidebar

Install

npm i sneak

Repository

github.com/nporteschaikin/sneak

Homepage

github.com/nporteschaikin/sneak

Weekly Downloads

1

Version

0.0.7

License

MIT

Last publish

Collaborators

  • nporteschaikin
Try on RunKit
Report malware