POSIX-Shell as Template Engine

2022/01/02

<<<< <> >>>><<>><><<>><<< <> >>><<>><><<>><<<< <> >>>>

Here is a neat little shell-scripting trick:

eval "echo $(cat $1)"

This lovely piece of code is a simple template engine! Based on that you may use your imagination to grow your own static-site-generator exactly the way you need it.

Minimalism

This site is generated using only shell-scripting and a makefile. To show you how many lines of sourcecode this page weighs, I can now just create a subshell with the following command, directly from the markdown source of this article

$(tokei -C -e public)

and its output will get inserted into the final page, like here:

===============================================================================
 Language            Files        Lines         Code     Comments       Blanks
===============================================================================
 CSS                     2          303          257            4           42
 HTML                    1           39           30            0            9
 Makefile                1           44           30            0           14
 Markdown               12          389            0          268          121
 Shell                   4          137          102            6           29
===============================================================================
 Total                  20          912          419          278          215
===============================================================================

As you can see, everything combined is still relatively slim. Just around 100 lines of shell script to implement link-replacements, indexing and an rss feed from scratch.

What is horrible about it?

Error Messages

Line numbers in error messages get scrambled up and don't mean much anymore. Generally, debugging is very dreadful.

Escaping

Since the argument for 'eval' uses double-quotation marks, we need to make sure that all double-quotes in the template are escaped. This is just very annoying to write by hand, especially when you start to escape the escape sequences. So I added a regex-replace to escape them automatically.. useful until it breaks things in unexpected ways. Its just a mess. Also, have you ever heard of the Leaning Toothpick Syndrome? It's really bad. We could solve that with color coding I think :)

Editor Support

I do not know of any editor that is capable of correctly supporting multiple languages nested into oneanother with syntax highlighting etc. Please enlighten me. Until then I will be working on my intentional shell.

Background

Especially in the process of creating websites, so-called template-engines play an important role. They allow to reuse the same (HTML-)corpus, which defines the general layout and headers/footers, for multiple subpages through the replacement of a placeholder with the actual content. It is simply a practical implementation of the DRY-Principle on our HTML-files.

Moreover there exist entire frameworks to assist in creating static webpages, also called static-site-generators (SSG). They may also incorporate tools for generating HTML from other formats (e.g. markdown) in which the content is written. Additionally they may provide functionality to generate menus and index pages from collections of pages.

For a while I successfully used such an SSG, namely Zola. I thought it was cool, until I hit its limitations when developing the virtual gallery of mentalFragments. My issue there was that the paradigm in Zola (and other SSGs too I suppose) is to primarily think of 'pages' and 'sections', which are text. This is fine for a simple blog, but every slight deviation from the predefined features causes trouble. Yes, you can include images, zola even scales them down automatically, but they are secondary constitutents, merely 'assets' of a 'page'. However for our application in this virtual gallery, pictures are the primary source medium. There I wanted to automatically create CSS animations and interactive album-views, given a directory of picture files. In theory it was possible with zola, but I had to do whacky stuff like create dummy markdown files just in order to create a new section just so that I was able to iterate over a directory with pictures from within the tera-template-language.

With shell-scripting this is so much easier. Just use 'find' or something in a for loop, and you are done. Now that I switched over to a purely shell based approach, its also very easy to automatically transcode soundfiles, convert images into multiple resolutions and implement dynamic refinement etc. with much less hassle and less dependencies.

[Index]