Skip to main content Skip to footer

Site Updates 1H23

by VoXil | 30 May 2023 | Diary, Site Updates | HashOver, IndieWeb, Jekyll

This article will take about 8 minutes to read.


Writing webpages by hand is fun and all but after a while there comes a point where efficiency drops as the site grows to large or due to lack of time for proper maintenance of code so I figured it was time to make as much as I could of this site’s operation as automatic as possible.

License Changes

Before we get into the backend changes, I’d like to first deal with licensing changes in regard to the website’s content.

Previously, all non-code content, unless otherwise stated, was licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License while code content was under the GNU GPL v3 license.

Legally speaking, Creative Commons licenses are not revocable so practically, if anyone has content of my site saved before today’s license change, they can and continue to use my content under the aforementioned Creative Commons license as long as they have it.

The same applies to GNU GPL version 3.

However, though I cannot revoke the existing license for anyone that has copies of the software before the change was made nor stop them from exercising the right of said license, I can change the license under which future content can be distributed as the copyright holder. Considering that the main non-code part of my site that doesn’t fall under my terms of use is this blog, I decided to extend the site’s terms of use to more explicitly include it as it would reduce the unnecessary overlap between both licenses and reduce any confusion as to what license should be used for the website’s content.

For code content, future code that is distributed to the public, unless otherwise stated, is done so under the X11 License.

tl;dr: As the copyright holder of this website, I’m changing the license under which code and non-code content is distributed.

I’d appreciate any feedback in ways I can improve the wording of these terms to make things less ambiguous and easier for use while retaining some restrictions on my works.

Privacy Policy

In addition to license changes, I’ve added a privacy notice to show what information for you, the user, is collected (and not) while using this site. It’s not that big of a deal since the majority of this website’s content is self-hosted and the few that are not are content that I can’t reasonably host myself (such as YouTube videos and other similar media hosting sites) but as a web user who appreciates when developers give users the choice to choose what cookies are used and how their information is used, I decided to do something for my own website as well.

As such, you can view my privacy policy here which goes into detail about what cookies are used, what they are used for, third party content that may be used on this site, and many more as well as a way to contact me if you have any questions or concerns.

As is the norm, I went with a cookie consent banner to allows users to opt-in or -out at any time. I found that Orest Bida’s Cookie Consent and Iframe Manager allowed me to proactively control how cookies for my self-hosted services as well as those from third parties through the use of embeds are allowed to the site.

As I don’t make use of analytic software or place advertisements as a form of revenue making on my site, there isn’t much at this time to (dis)allow at this time but prevention is always better than cure.

Jekyll

The most exciting part (for me) in all the changes done is definitely the complete Jekyllization of the website. Though some people may look at me weird since it is 2023 (can’t believe it’s been nearly 4 years already), outside of the blog because it was the one part of the site I truly hated to write by hand, I did indeed write the rest of the site by hand.

Released a new song and need to add a lyrics page? Copy and paste and replace everything to fit the new song. Want to add expand the about pages? Go to each page one by one, update the navbar, and do a full page by page test to ensure I didn’t forget any of them.

Many of my friends would say I’m an masochist for doing that to myself but I really did working on my websites in that way, until I didn’t.

My other site under my other pseudonym VocAddict was my first time doing a site entirely in Jekyll and as such, it’s quite clean in terms of structure. It showed me how simple adding new things or correcting mistakes was and what I was truly missing out on. So after years of putting it off, I finally got around to completing the transition.

There are a few things that are still not quite there yet but there’s really minor like the automatic page creation, and decoupling metadata from the content iteslf but everything else is complete and I’m really proud of what I’ve accomplished there.

Bootstrap 5

A lot more minor in the larger scheme of things though substantial nonetheless, Bootstrap was bumped from 4.4 to 5.2. As I tend to not deviate too much from the framework at its source, there were a few things that I did have to rewrite. I’m still on the fence whether I would shift to 5.3 when it’s released especially since 5.3 has some major changes when it comes to colour schemes and themes. Some may say “if it’s going to break things, don’t update to it” and that is true, but being on the cutting edge is fun…right?

Maybe I’m really an M

HashOver

Having a comment system was an early goal from when I started to make websites. Allowing visitors to leave their thoughts with it being optional to being have said comments attributed to your overarching online identity was something I wanted to have as a fundamental core of my site as more and more of the internet became centralised.

My first go was glosa. It did everything I wanted it to do from the get-go, easy to theme, a simple configuration file and a nice layout in general. I had a lot of fun setting it up on my local development system and trying to extend it to fit my use case more.

Screenshot showing a list of comments with the use of glosa
A look at the glosa comment system during development

Unfortunately, I did not get glosa to play well with my host due to the lack of mod_proxy support so I had to retire that idea. Which brings me to what I’m currently using, HashOver.

HashOver wasn’t my first choice nor was it my second or even third but at the end of the day, it worked and that’s the most important thing. HashOver is a PHP comment system that’s quite easy to integrate which supports a lot more than glosa does (many of which I won’t be using) so it was a bit of a learning slope to get everything up and running the way I wanted it to be.

It’s a self-hosted platform so there’s no third-party services being made use of. Currently, it’s only used for blog posts (such as this one!) and novels. I’d like to extend it to other parts of the site such as lyric pages but despite how easy it would be to make that possible, I don’t think that it is necessary just quite yet.

Search

Another neat feature that I’ve proud to have implemented is a site-wide search. It makes use of Lunr. As this is a static-site, I used Jekyll to build the indices before the rest of the site is built. The search system indexes all user-accessible information with the exception of user comments due to how the index currently functions. A bit of work can be done to make it more aesthetically pleasing but it works which is great.

It is easily accessible by clicking the magnifying glass in the navbar at the top of the page on devices with wide viewpoints while on smaller widths, it will be in the hamburger dropdown in the navbar.

Screenshot showing location of search feature in header navbar being highlighted with a red box on a wide viewpoint
Search location on wide viewpoints
Screenshot showing location of search feature in header navbar being highlighted with a red box on a narrow viewpoint
Search location on narrow viewpoints

More information on how to use the site search’s system can be found on the page itself.

Book reader

Last of the changes is the book reader. A long time ago relative to this site’s existence, I used to share my written works on a cool site called Wattpad. Wattpad is still a great place to read books but with its revenue model with premium accounts and advertisements, their desktop site being one of the slowest I’ve been on due to how heavy their assets be in loading and execution, as well as the complete removal of community interaction outside of books themselves, I was turned off from using there as site for my works.

For now it has support for changing the font, its size and line spacing within a paragraph in addition to accepting the dark mode from the website itself. In the future, I will like to add the ability to have more themes such a high contrast, as well as user-created/submitted themes and fonts.

GIF showing the features of the book reader: font size, line height, font, forward and back, dropdown listing, and site theme
Book reader showcase

VocaShots, a shorts vocalsynth fanfic I (used to) write once upon a time is now on this site. Perhaps with the change in environment, I will get back to writing more.

Custom Audio Player

I made a custom audio player for the site with use of a tutorial from CSS Tricks. It works which was a bit difficult to do with how I have my data files set up so I didn’t do much in regards to customisation but I like what I have so far. Here’s it in use with my song Sol County Fair.

Therea re some minor cosmetics that I would like to improve both visually and in the backend but I really like what I have so far.


There are also some things that I want to add to the site to improve its usability some time in the (not to distant) future.

Internationalisation

Being able to reach more than one demographic seamlessly is the dream for anyone who creates content. In fact, when I first released this site back in 2019, I did make the site with that in mind and even had a (very limited) translated version of the site in Spanish! However, even back then I realised how much work it would take to maintain two versions of the site in different languages on top of having to write it by hand…

Thought it was perhaps short sighted of me to not deal with this aspect during the Jekyllization of the site, I did want to reduce the amount of testing and development to get this update out of the door. Fortunately, due to the way the phrased the Liquid for the more modular aspects of the page, it will not be difficult to add in multi-language support when the time does come.

Webmention

Webmention is a protocol that allows for sending and receiving notifications between websites about link relations. Webmentions can be used to cover many things such as:

  • keeping track of links from on website to another
  • cross-sharing comments between blogs
  • notifications for when posts are shared
  • attribution when a website is linked on another
  • and many more

For me, it’s more about the last one. Though the number of websites out there supporting Webmention may not be large compared to the vertical silos known as social media, it’s still non-zero chances someone may reference a page from my site on theirs and I would be none the wiser unless they or someone who stumbles upon it gets back to me on it.

With Webmention, if their site supports sending notifications, I’ll get a notification of it on my end where it will be added to my site creating a web of sorts where pages that share common entries can be easily reached.


Comments

This site makes use of HashOver Comments to display and accept comments from visitors such as yourself. This system does not create cookies unless you allow it do so. If this comment section isn't loading, there may be an issue with the comment server. Please contact me so I can get the issue resolved as quickly as possible.

Current comment mode: Not Available

Back to top of page