Templification

Templification was created to generate HTML from templates without the need for frameworks or extensive dependencies. Currently it is designed for producing static sites. Although, if you’re crazy, you might make it work dynamically.

Templification was originally written in the V programming language. The desire is to have the program written in a language that is compiled to binary and does not depend on virtual machines or frameworks and as few libraries as possible. This translation/port (V => C#) will likely remain regardless of the eventual port back to a language that has minimal dependencies. It might even get prettied up at some point … but probably not.

Latest Changes

Feature Updates/Fixes

Not 100% of changes necessarily listed

• Fixed terminal display crash (when not run in a terminal)
• Fixed clear_between function
• Fixed file_parent function
• Fixed css unit generation: i.e. w-20% => width: 20%; w-20mm => width: 20mm;
• Fixed issue when removing tags that depend on non-provided slots
• Update/Fix to delete css and js files before creating new content
• Update to remove js or css files that are blank after processing
• Updated parsing to handle HTML comments with html inside of them
• Updated replace_vars to fix issues with “or” operations: i.e. class=”w-20|{widthVar}”
• Added feature to allow tag wrapping with “__wrapin” attrib: i.e. <sometag __wrapin=”li” … => <li><sometag parsed…

Quick Instructions

Building and Running Example

build.sh or build.bat file commands

./build.sh
./build.sh run
./build.sh help
  

Building code

Just build the code

cd ./src
dotnet build
  

Running Example

cd ./src
dotnet run -- -b ../examples/standard -style-dir ../style_configs/
  

*NOTE: style-dir is in this case relative to the base directory “../examples/standard”
Output files are in ../examples/standard/bin/[demo.html, bundle.js, bundle.css]

Purpose

The purpose of templification is the following

1. Create static web pages from a html templates
2. Autogenerate CSS based on class names like Tailwindcss E.G.

   bg-blue-800 => background: #3b82f6;
   my-4        => margin-top: 1rem;margin-bottom: 1rem;
   font-bold   => font-weight: 700;
       

3. Bundle up CSS and JS
4. One magical day minimize CSS and JS
5. … do whatever amazing thing we can think of
6. Do all this inside a single, beautiful executable with no dependencies. (This sadly… is not totally the case due to moving to C#… but one day)

Note on code state

The code is bad, mostly bad, well its ugly. I’m not proud of it, but it does it’s job. One day (meaning probably never) I’ll fix the code and make it beautiful.

• NOTE: The code is… shall we say, mostly stable. So, it might do something odd, no guarantees mate.

Reasoning / Why a single executable?

• We love svelte
• We love Tailwindcss
• We hate… HATE… nodejs
• We dislike frameworks in general
• We greatly dislike dependency hell
• The original code was written in the V language… we really like V, but things kept breaking; maybe we should write better code :(
• We want to have framework like capabilities to create static webpages, without the stinking framework
• Thus! Creating a single executable to generate HTML from templates sounded like good idea :)

Usage

Input and Template examples

For now, unfortunately, you will just have to clone the repo and inspect the example files to see how it works in detail.

Command Line Options

-basedir          (-b) : The, base directory for all others; [default './']
-output           (-o) : Directory, for the output files to be saved. It [default 'BASEDIR/bin']
-template         (-t) : Directory, to be searched to find templates. [default 'BASEDIR/template']
-input            (-i) : Directory, in which the source files to be compiled are located. [default 'BASEDIR/src']
-extension        (-x) : Output, filename extension, [default .html]
-out_css               : Path, to the css output file. [default 'OUTPUT/bundle.css']
-out_js                : Path, to the js output file. [default 'OUTPUT/bundle.js']
-css_in                : Path, to the css input files
-style-dir             : Location, of style files
-color-file            : Name of colors file
-rules-file            : Name of rules file
-debug            (-d) : Show, debug messages
-preprocess_razor      : Enable the preprocessing of razor files (beta) ..err (alpha)
-config           (-c) : Set a location for the config file. !Any additional flags will override flags set in the config file!
-test                  : Don"t, create files just do test
-autocreate_dirs  (-a) : Automatically create output dirs
-help             (-h) : Show, this help

Config File Details

Currently the config file is nothing more than a line by line read of command line options. Not sure there is a need to change it yet, but in the future it may become a bit more… pleasant to use. The pound/hash sign begins commented lines in the config file, everything else is read as command line entry.

• Valid Config

# Beginning of the config file
-b ./base/directory

• Invalid Config

# Valid comment
-b ./base/directory #invalid comment -h <- will produce help menu

*Comments must start a new line, they cannot follow an option or ever start after the first character. This will be updated… hopefully soon.

Simple Run Down

Here is the basic idea pulled from source comments.

Templification takes an html file(s) as a source, then scans it and
any number of template html files in a templates directory.
It then produces output files based on the input files and the
insertion of templates.

E.G.
\--\--\- Src\
    \        \- source.html <body><header/><widget><button>Click...
     \
      \- Templates\
                   \- Header.html
                    - Widget.html
                    - Button.html
\--\- OutDir\
             \- output.html <body><div class="header">Hello</d...
                                  <div><h3>Amazing header</h3></...
                                  <input type="button" ...