sneak

A template engine written with Tumblr in mind.

Usage no npm install needed!

<script type="module">
  import sneak from 'https://cdn.skypack.dev/sneak';
</script>

README

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