Switching from ikiwiki to staticsite

Earlier this year Enrico Zini experimented with static site generators and ended up with writing his own in python via component reuse. I was running ikiwiki until now myself, which is okay, but I never became ultra happy with it. One of the factors was that I don't speak Perl – but I don't speak Python either. The biggest annoyance of ikiwiki is that it supports so many many features which I don't want/need like online editing and other changes are very hard to do like working on the theme.

staticsite (aka ssite) on the other hand provides very little in terms of features in comparison, but that just means I had less to disable and could play a bit with python, markdown and jinja2 on my own to implement what I really wanted to have (which mostly isn't available in ikiwiki either, so I would have to anyway) and I like playing with such small features compared to rolling my own static site generator in perfect NIH fashion. So, what features? Thanks for asking!

Tag cloud

ssite supports tags just fine and clouds are a display thing, so that is a matter of the template – or so I thought at least. Counting is a bit hard as reassignments aren't easy and jinja2 tries to print what it can. So what I use at the moment looks like a scary hack, but it seems to work for me for now:

{%- for taxonomy in taxonomies() -%}
<ul class="tags">
  {%- set total_tag_number = [ 0 ] -%}
  {%- for t in taxonomy.items -%}
    {%- if total_tag_number.append(total_tag_number.pop() + 1) -%}{%- endif -%}
  {%- endfor -%}
  {%- for key in taxonomy.items.keys()|sort -%}
    {%- set t = taxonomy.items[key] -%}
<li data-rate="{{((10/total_tag_number[0])*(t.pages|length))|round(0,'ceil')|int}}"><a href="{{url_for_tags(t)}}">{{t.name}}</a></li>
  {%- endfor -%}
</ul>
{%- endfor -%}

The resulting unordered list can be styled at will with CSS, I opted for changing the font-size based on the data-rate field – manually for now as support for attr() isn't completely there yet – and making the list look less like a list.

ul li[data-rate] a { font-size: 80%; }
ul li[data-rate="1"] a { font-size: 90%; }
ul li[data-rate="2"] a { font-size: 100%; }
ul li[data-rate="3"] a { font-size: 110%; }
…
ul.tags, ul.tags li {
    list-style-type: none;
    display: inline;
}
ul.tags li:after { content: ", "; }
ul.tags li:last-child:after { content: ""; }

The result can be seen in the sidebar of this blog. Not completely happy yet, but a good first draft.

Smilies, Emojis, Emoticons and Unicode

ikiwiki has a plugin which uses a markdown list to define which text is mapped to other markdown text (usually an image). That is okayish, but results in a wild mixture of picture styles. It just looks strange if you have a blogpost and one of your smilies has a 3D effect and the other hasn't. Additionally, those are a bunch of small image files… for what is effectively a bit of text – or one (displayed) character: UTF-8 supports all kinds of smilies and other lovely pictures. Or, at least if the font you are using does, but that might be the topic of another post. Assuming good support you can do many cool things with UTF-8. The usual smilies like 🙂 😉 😄 😎 the absolutely needed cat variants like 🐱 😸 places on a 🗺 like the 🗽 and of course also various people like 👨 👩 💂‍♂ 👧 and 👦 who can travel to those places by 🚗 or 🚂 And some of those unicodes can be Fitzpatrick-skinned so that 👍 becomes 👍‍🏻 👍‍🏼 👍‍🏽 👍‍🏾 👍‍🏿 ❣

That feature isn't really ssite specific: It is implemented as a simple python-markdown extension replacing things like :) with 🙂 – just many many more of those replaces. You would think there are many pre-existing extensions dealing with this, but I couldn't really find one to my liking. Most of them are actually doing the same as the ikiwiki plugin: Mapping text to tiny images: Honorable mention is githubemoji which hotlinks the emojis github supports (& has replacement images for). There are others which do similar (hot)linking of images, but a small supported character range is common and funky stuff like the mentioned fitzpatrick or region letters creating flags ( 🇩 + 🇪 = 🇩‍🇪 ) stuff isn't supported in any. So, you guessed it: I implemented it myself. Partly at least. I am still working on making this great while learning python with it, so that will take some time still as I have basically reimplemented it a few times already… and there is also this problem that support for this isn't even close to be universal so something needs to be done about that, too.

Theme of the site

ssite comes by default with a bootstrap-based theme. That is okay, but that also means it looks like nearly every other page on the planet in terms of colors and stuff. It also means I have to include hundreds of kilobytes of frameworks in CSS and JavaScript (preferably via some CDN) to get that. And then I have to change the HTML to drop classes everywhere which control look and feel of the elements I have styled with them. That is okayish for large projects I guess. I used it myself in the past but perhaps the conversion of bootstrap2 to 3 I did as part of a university project some time ago distorts my feeling in the negative direction. I kinda like fiddling with CSS and Javascript (after all, I created my own Firefox extension to fiddle with them on all sites I visit: dotPageMod) on the other hand this is a personal page I don't have much problem if it isn't working in IE8 or what not, so the theme is a personal creation. Very minimal as I actually liked that property in ikwiki but with less ugly changes in the ikiwiki specific template syntax and more with jinja2 which is its own template syntax, but at least an independent engine used by others as well, so I might stumble over it again and it feels overall more powerful & natural.

So, perhaps not pretty and not a maximum in browser compatibility, but mine and that makes me happy. 😄 Various things I want/might change in this section as well, but a website is never really done anyhow… 🚧 👷.

anything else?

Not much actually. Enrico implemented a markdown jinja2-filter based on a proof-of-concept patch from me and fixed some bugs I had reported really quickly. All in all the journey so far was quite enjoyable and it will be interesting to see how my impression is next year! As mentioned I have some ideas still, but I wanted to make a cut now and declare it version 1…

Also: One last far well to ikiwiki. I leave you for a younger & prettier alternative, but don't you worry: You served me well (and still do in some places) and there are many others which still depend on you and who knows, perhaps I will leap back if I ever want to get into perl. After all, one of the reasons I opted for ikiwiki back then was that I might learn some perl in the process. Didn't work, but perhaps next time. So long and thanks for all the fish, ikiwiki!