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.
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.
So, if header.th
looks like the following --
{{title}}
-- then after tophat is run the html file will contain the following.
Hello, tophat!
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.