Overview

Why?

Tophat is a compile-time templating engine. The problem it attempts to solve is the slow and often ugly way other templating engines do run-time template processing. On the other hand, without a templating engine, trying to maintain the same html code in 100 different files is a nightmare. Tophat falls in the middle of these two options; it is a utility that does template processing not at run time, but before-hand, before the html files are pushed to a server. You could consider it a compilation step of sorts.

Usage

Html

Tophat makes use of a couple custom html5 data attributes. They are data-th-template and data-th-attr.

If you have a partial file that needs to be included into your html, add a div and point to the partial with the data-th-template attribute.

<div data-th-template="header.th"></div>

The engine also supports doing attribute replacement. In your partial, first prefix your attributes to be replaced with @.

<header>
  <h1>@header</h1>
  <p>@first-p</p>
</header>

Then in your html use the data-th-attr attribute in the same div as the template definition to give it values. It uses the same syntax as inline css.

<div data-th-template="header.th" data-th-attr="header:hello; first-p: hi, there;"></div>

The properties will be replaced on the next run.

<header>
  <h1>hello</h1>
  <p>hi, there</p>
</header>

Node

Tophat relies on and is run via node. To use it, run the following command.

node tophat.js

Tophat will look for all html files in the current directory, scan them for the data attributes above, and include the referenced partials' contents into the file.

That's all there is to it.