β

STM - So bad it's good

Have these thoughts ever haunted you: I need to make a solution, so why don't I make the best solution right away? Logically, it's the best in long term, so why bother with some temporary solutions, when it won't go a long way?

How this website came to be

Psst... This part may be boring. If you just want to hear about STM, click here.

It started back in 2022 when I bought the domain name. I was long intending on having a website, ever since 2017. At first it was just an alias for my Github Pages, later I started renting a VPS from OVH for very cheap. I knew I needed to give more serious attention to the website, but I was quite lazy and burnt out from other projects, so the website was a simple HTML page, with no stylization or any interesting content to speak of. It was served by a customized file server written in Go, serving HTML pages I manually put out there with SSH. Each HTML page was handcrafted. That wasn't a problem at the time, because I had almost nothing to showcase, but I knew it was going to be a problem later on, after all that's why I bought the VPS in the first place. There was a time I tried to update how the site looked, but I still used the old copy-paste method of templating. I was going to implement the backend, but I was dreading it so much that the website remained as a useless HTML page collection until 2 days ago (2024/09/19).

September 2024 was a really tough time in my personal life, but it gave me motivation to finally work on myself, my employment, and finally, my website. For the website, there were only 2 real options: static generator (temporary), proper website with a backend (forever). First option would be the easiest to start with - I don't need to write any backend code, the results will be immediate, and I can easily make a mock-up page that I can skin on actual content. Second option was the best, but implementing backend would take me a long time, and my motivation, just wasn't out there.

So, begrudgingly I chose to use a static generator. At first, it seemed like a deliberate mistake on my side - making a temporary solution that I know is going to be replaced is going to cause a lot of trouble in the long term.

I had a few options for static generators, there're most famous - Jekyll and Hugo. Both are great and popular choices. But I was stubborn and couldn't bother to learn any of these. So what do I do instead? Implement my own, of course! That's surely quicker! :V

STM was made

Enough yapping. All I needed is the ability to include other pages as components. So I started to work on STM "Simple Template Manager". It's a very original non-generic name, don't steal!

It started with a simple [[include file.html]] directive. You would have some template files which you would include into other files. At first, it seemeed like all I needed - including components like footer, sidebar, onto every page is much more reliable than copy-pasting it manually every time I need to change. Over time, however, I realized that using just includes won't be good enough. My website was going to have a blog, and if I want to have a blog, I need to enumerate the posts and display them on the main page, which the person can click to read in more detail. If I simply include the article page, it will also include all the navigation, sidebars, and things the main page already has, not to mention that it will also include the text of the entire article, when I only want a short blurb.

At that moment, I figured I needed some sort of "polymorphism" model. First thing I thought of - page inheritance. And that's what I implemented. well, it really took me only 40 minutes to implement, the rest of the time was spent overthinking it's implementation

STM inheritance system

In short, how it works is that every template page, can have an [[insert field_name]] directive. In this website, I have templates/basic.html, which has a single field - main. This alone simplifies one thing - you don't have to sandwich code between [[include templates/basic_begin.html]] and [[include templates/basic_end.html]]. To inherit a template, you would use [[use path/to/template.html]] directive. For example, let's look at the index page of this website:

[[use template/basic.html]]
[[section main]]
<header>
    <p>Ramblings about gamedev, systems programming and Windows!</p>
    <a id="hireme" href="/cv.html">Hire me!</a>
</header>
[[enumerate template/article_card.html posts]]

Now's probably the right time to explain enumerate, the format is [[enumerate template_path directory_to_enumerate]]. In short, it takes a directory with the HTML files you want to enumerate, and shows them in descending order. The template_path is the key aspect here, it allows us to substitute the template the page will inherit from, so by substituting the default article.html with article_card.html, we can reinterpret the article template however we want.

<article>
    <div class="caption">
        <h2><a href="[[insert $location]]">[[insert title]]</a></h2>
        <small><span class="date">[[insert date]]</span>[[insert series]]</small>
    </div>
    [[insert short]]
    [[ignore content]]
</article>
How article_card.html template looks like on this website.
[[use template/basic.html]]
[[section main]]
<article class="article-page">
    <div class="caption">
        <h2>[[insert title]]</h2>
        <small><span class="date">[[insert date]]</span> [[insert series]]</small>
    </div>
    [[ignore short]]
    [[insert content]]
</article>
How article.html template looks like on this website.

Conclusion

When I finished implementing STM, I realized how easy it would be to advance to using an actual backend. The simple non-turing complete model of the blogs and pages can easily be automatically transformed into database fields by writing a simple script.

At this point in time, STM is slim enough, but robust enough for me to have more expriemental freedom with this website. And that's where I think temporary solutions can outshine outright "best" solutions. Giving a breathing room, time to experiment and settle on something is as important as the long term sustenance. While STM will be a stepping stone for a future backend, it will not slow my progress down by virtue of being a temporary solution, quite the opposite - it made the progress so much quicker.

Check out STM

Please note, it's a really hacky tool, don't expect it to be perfect because it's not supposed to be. It's written in the Umka programming language, make sure you have that installed first. Additionally it uses Umbox to load some packages.

https://github.com/skejeton/stm

-*-