Html Awesomely Simple Templating Engine
Go Makefile
Clone or download

README.md

Haste

HTML Awesomely Simple Templating Engine

Haste is a really simple templating system for static HTML files.

Templating System

The templating system uses a really simple syntax for templating out HTML via the use of custom tag names. Here is an example of this syntax:

<!-- index.html -->
<div>
  <t:button>Click Here</t:button>
</div>

<!-- button.html -->
<button class="btn btn-default">@content</button>

In the above example we have a custom tag in index.html named <t:button>. When built haste will look for a file named button.html and bring it in, Replacing the custom element. The contents of the custom tag are marked with the text @content. This will be replaced with the contents in the original file. The result of the above example will look like this:

<div>
  <button class="btn btn-default">Click Here</button>
</div>

Here are some more advanced example of what you can do with the syntax:

<!-- This will look for a html file with a location of 'parts/button.html', relative to the original file -->
<t:parts.button>Click Here</t:parts.button>

<!-- This will look up a directory, At the path '../button.html', relative to the orginal file -->
<t::button>Click Here</t::button>

<!-- You can nest templates as much as you want -->
<!-- Templates will always search for others relative to their own file location -->
<t:table-wrap>
  <tr>
    <td>Actions</td>
    <td><t:button>Click Here</t:button></td>
  </tr>
</t:table-wrap>

<!-- If no content injection is required, template tags can be self-closing -->
<t:button/>

<!-- Included CSS and JS files will have their contents injected into <style> or <script> tags -->
<t:styles.css/>
<t:styles.js/>

Variables

You can have simple name, value pairs of variables in your templates. These are defined and used in the following format:

@var1=This is my first variable
@title=Haste Templating System
@bodyStyles=padding:0;margin:0;font-size:16px;
@primary=#00ACED
<html lang="en">
<head>
	<title>{{{title}}}</title>
</head>
<body style="{{{bodyStyles}}}">
	<t:parts.header-list>
		<span style="color:{{{primary}}}">{{{var1}}}</span>
	</t:parts.header-list>
</body>
</html>

Variables must be defined on the first lines of a file with no whitespace proceeding the starting @ symbol. It's one variable per line in the format @name=value. Variables can then be used via triple braces in the format {{{name}}}. Again, Watch any whitespace you enter in the tags as any differences to the declarations will not be forgiven.

Variables will pass down through template files but will not pass back up so parent template files will not see variables defined in child templates. Child variables inherit parent variables and will overwrite any existing if redefined.

Variable Injection via Attributes

Variables can be injected into child templates via the use of attributes on the template tag. For example, in the HTML below the variable named author will be available as a variable to the child template book with a value of Dan Brown.

  <t:book author="Dan Brown"></t:book>

Command Line Usage

Download the relevant executable file for your platform from the latest release page and ensure it has executable permissions. Rename the executable to haste to make it quicker to run. Place haste either local to your HTML file or move it somewhere in your path so it can be executed globally.

By default the application outputs to the command line. With the -w flag files can be watched and auto-built when changed. Additionally you can enable livereload with the -l flag which will auto-reload the browser on change.

./haste [OPTIONS] file

Available Options

Flag Default Description
-b Batch parse mode. Reads in multiple files and
outputs to the folder given as the last parameter.
-w Watch file for changes and auto-compile on change.
Outputs to <filename>.gen.html.
Starts a http server for file serving and opens the browser automatically.
-l Enable livereload (When watching)
-p 8081 Port to listen on (When watching)
-d 2 Folder depth to watch for changes (When watching)
-v Show verbose output

Usage Examples

# Build index.html and output the result to the command line.
./haste index.html

# Build index.html save output to index.build.html
./haste index.html > index.build.html

# Watch index.html and build on change whilst also enabling livereload
./haste -w -l index.html

# As above but listen on port 80 (Instead of the 8081 default)
# and listen to file changes up to 5 folder levels deep.
./haste -w -l -p 80 -d 5 index.html

# Build all files with the extension of .haste.html and output to
# the folder 'dist' keeping the same folder structure as the input files.
./haste -b **/*.haste.html dist

Issues and Contribution

Haste is in its early days at the moment and I'm no golang pro so bugs are highly likely, Especially while my tests are sparse. Feel free to create an issue or create a pull request.

License and Attribution

Haste is licensed under the MIT license.

This software includes works from the following great open source projects: