Site Update > -- May 2024

Because it’s been a while since my last Site Update post, here’s a quick round up of what’s new.

Update May 18th: Made some tables sortable, more described in the section Sortable Tables.

1. Star Wars Theme

For May the Fourth, I changed the theme to one Star Wars related, complete with font change and logo CSV change.

The nice part was changing the logo without Javascript so I just used the CSS mask properties:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


#header h1 svg {
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-position: center;
    background-size: 100%;
    background-color: #ffe81f;
    mask-image: url(data:image/svg+xml,<svg ... /></svg>);
}

I changed my menu structure again a couple of months ago, made it a bit wider and collapsed some sections into submenus. I had something in my mind, inspired by Jen, but I didn’t get to finish my idea. Until …

3. Guestbook

In the area mentioned above, I wanted to add a guestbook. I was thinking to use a third-party service, but as I read that 123guestbook is shutting down and everyone in the personal web seems to freak out, I decided to code my own.

Based on Simple Guestbook written by Castor, I stripped down some things and integrated in into my theme using some AJAX requests, as my Hugo site is static and I needed something a bit more dynamic, without the need to fiddle with JSON files.

~~Soon I will write a dedicated page with all the entries listed, but it’s a work in progress.~~
Update: I made the dedicated page and I added it to the main site navigation.

4. Comment system

Once the guestbook was finished, it was fairly easy to port it to each article as a comment system. I don’t have any notification or subscriptions, so it might take me a while to respond to comments and to notify the users that I replied, but there’s time to code this as well.

Because both the guest book and the commenting system rely on external AJAX calls, I have disabled them on the TOR site, even if the calls are made towards systems I control.

Also if you’re wondering about privacy, the email is just used for identifying people (if they want to), it’s not used for confirmation, you can use whatever you want. Also, I’m not logging any digital fingerprint (no IP, no session, etc).

5. Sortable tables

Using the jQuery sortable plugin, but without the retarded npm stuff, edited the code a bit to use the Bootstrap glyphicons and dumped it into jquery.tablesorter.js. To make a table sortable, I just add the class="sortable" to the <table> element. To trigger the functionality, I needed to run the javascript below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


jQuery("table.sortable").tablesorter({
	theme : "bootstrap",
	widthFixed: true,
	headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
	widgets : [ "uitheme", "filter", "zebra" ],
	widgetOptions : {
		zebra : ["even", "odd"],
		filter_reset : ".reset"
	}
});

You can see it working in all its glory on the Top 250 Films, An Unordered List of 288 Movies article.

Guestbook