Thiy (pronounced "thigh") is a templating engine that uses YAML templates to produce HTML files.
Templates for HTML In YAML.
Thiy is heavily inspired by Jade.
thiy [-d <DIALECT>] [FILE]
-n No wrap. Don't add the <!DOCTYPE html><html></html> surround.
Reads FILE as YAML, converts it into HTML, and outputs the result.
If FILE is missing or "-", input will be read from stdin.
If DIALECT is set, pre-processing will be performed. See the documentation for details.
Available dialects:
html (default)
bootstrap (implies html)
raw (no convenience tags)
The input document should be a map where each element represent an HTML node. The contents of each element should be a string, an array of strings and maps, or another map representing the contents of the HTML node.
The element keys take the form:
<TAG>[#<ID>][.CLASS...][(ATTRIBUTE...)]
Example:
head:
title: My first page
body:
h1: Hello, world
div#content:
p:
- Generated by
- a(href=https://github.com/stilvoid/thiy): Thiy
Result:
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello, world</h1>
<div id="content">
<p>
Generated by
<a href="https://github.com/stilvoid/thiy">Thiy</a>
</p>
</div>
</body>
</html>
Dialects add some preprocessing to your data. The rules are as follows:
-
meta(A): B-><meta name="A" content="B"> -
include: A.js-><script src="A.js"></script> -
include: A.css-><link rel="stylesheet" href="A.css" /> -
include: A.ico-><link rel="shortcut icon" href="A.ico" /> -
include: A.xml-><link rel="alternate" type="application/rss+xml" href="A.xml" /> -
include: A.atom-><link rel="alternate" type="application/atom+xml" href="A.atom" />
Everything that's included in the HTML dialect, plus:
-
panel: content-><div class="panel panel-default"> <div class="panel-body">content</div> </div> -
panel.primary: content-><div class="panel panel-primary"> <div class="panel-body">content</div> </div> -
panel(title="my title"): content-><div class="panel panel-default"> <div class="panel-heading panel-title">my title</div> <div class="panel-body">content</div> </div> -
input: null-><div class="form-group"> <input class="form-control" /> </div> -
input: placeholder text-><div class="form-group"> <input class="form-control" placeholder="placeholder text" /> </div> -
input(label=name): null-><div class="form-group"> <label class="control-label">name</label> <input class="form-control" /> </div> -
input#name-field(label=name): null-><div class="form-group"> <label class="control-label" for="name-field">name</label> <input id="name-field" class="form-control" /> </div> -
row: content-><div class="row">content</div> -
col(md=3 xs=6): content-><div class="col-md-3 col-xs-6">content</div> -
icon: plus-><span class="glyphicon glyphicon-plus"></span>