Overview

What is it?

Tophat is a template pre-compilation engine. It allows you to compile your templates to generate and keep up to date complete html files. This is to prevent runtime compilation and template processing.

The problem it attempts to solve is the slow and often ugly way some 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.

Usage

Install

Install with npm as global.

npm install -g tophatjs

Setup html

Tophat makes use of a custom html5 data attribute data-th-include for including external files.

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

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

The engine fully supports mustache templates. If your included file contains mustache elements, provide a context for attribute replacement by including a script tag with type application/json and data attribute data-th-json which holds the json data.

<script data-th-json type="application/json">
  { "title" : "Hello, tophat!" }
</script> 

So, if header.th looks like the following --

<header>
<h1>{{title}}</h1>
</header>

-- then after tophat is run the html file will contain the following.

<div data-th-include="headter.th">
<header>
<h1>Hello, tophat!</h1>
</header>
</div>

Run program

Navigate to the directory that has your html files and run the following command.

tophatjs

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.

For usage options run tophatjs -h to see the following.

Usage: tophatjs [options] [dir]

Options:
-h, --help     output usage information
-V, --version  output the version number
-c, --collapse  collapse template

That's all there is to it.