Code snippets of this website

I sometimes forget how things have been changed in this website, so where best than annotate them here. This is basically trivial css/html, but it’s a way for me to record how things change in case I want to tinker with them again.

This was a suggestion by Pedro that I quite liked. External and internal links are differenciated now so that external links have a small icon next to them, but internal ones don’t.

Most of the styling of this website comes from two .scss files directly sourced from the researcher theme I run (in Hugo, the static webpage I’ve been using for a while, that’d be theme/researcher/assets/sass/*.scss.

Anyway, this is what links look like in there:

$red = #dc3545

%link-default {
    color: $red;
    text-decoration: none;
    &:hover {
        color: $red;
        text-decoration: underline;

Pretty standard. To differenciate between internal and external links, it turns out there are such things as conditions in css, so first I tried this to see what happens:

%link-default[href^="http*"] {

Meaning: use this class for links with an object containing any substring in “http”. I’m aware this is scss, not css, but I didn’t want to create a whole new class for external links, or worse, use javascript (ugh).

My config TOML looks like this (following some Hugo reference guide, probably):

  "/" = "/:filename/"

…meaning this snippet of Markdown: [link](/) produces this link that doesn’t have “https” in it when processed by scss.

Anyway, the reason this didn’t work is that my log and wiki index files where not just templates. My post index was written by hand, since I wanted a small handwritten summary for each and I didn’t have time to deal with Hugo shenannigans, but I didn’t want to keep the same for my wiki, for example, since note-taking should be frictionless).

So, inside my website-building folder, in layouts, I created \log\list.html (specifically in layouts since I didn’t want to change the theme itself, and Hugo always takes your personal layouts over the theme).

In there, I fine-tunned things until I reached this:

{{ define "main" }}
<div class="container">
    <h1>Personal log</h1>
    <p> Here's a list of yada yada yada. </p>
        {{ range .Pages }}
            <p>  </p>
            <li><a href="{{ .Permalink }}">{{ .Title }}</a>: {{ .Description }} </li>
        {{ end }}
{{ end }}

This iterates between the pages of the folder content\log\ in my Hugo website-building folder, and takes out their titles with a link and description (or {{ .Params.Tags }} in my wiki’s case).

Roughly, this code is producing what you can see here. But notice how the links in there don’t have the external link icon I put on the rest, while the code above did produce the icon. The problem was {{ .Permalink }}. This below worked:

<li><a href="{{ .RelPermalink }}">{{ .Title }}</a>: {{ .Description }} </li>

So now my Log index is a list of relative links (such as /log/reading_log) rather than full permalinks (such as

Now I just had to add a small bit for external links (urls containing “//”). This was done directly in the other file in layouts, variables.scss. The rest was a matter of adding a small symbol for those and some styling with :after.:

@import "variables";
#content {
        font-size: 8px;
        padding: 12px 2px;
        content: "↪";
     a {
        @extend %link-default

And that’s it.

Arvelie date calculation

I used to do this by hand, but once I noticed I was getting some dates wrong (by counting days 01-14 instead of 0-13) I wrote a small bash script to keep in my .bashrc and get the daily date.

#current day arvelie date
    DATE=$(date +%j)
    MT=$(expr $DATE / 14)
    REST=$(expr $DATE % 14)

    let i=0
    for letter in {A..Z}
        if [ $i -eq $MT ] && [ $REST -lt 10 ] ;
                echo 00"${letter}"0$REST
        elif [ $i -eq $MT ] && [ $REST -ge 10] ;
                echo 00$letter$REST

Not very elegant bash fu, but works fine.

Progress bars in reading lists

I could do automate this further, but at the moment to avoid any bloating nonsense I’m trying to keep things minimal. This is the basic python script I’m using for quick progressbar building:

import sys

num = sys.argv[1]

def progress(num):
	num = int(round(int(num),-1)/10)
	rest = 10-num
	print("`"+"█"*num+"_"*rest+"` "+sys.argv[1]+"%")


Calling it with 30 returns: ███_______ 30%

Again, basic, but functional.

Automatic album counter updates

Applied to the automatic updating function. This small function just counts how many albums & concerts have I anotated at my listening log, and changes the relevant phrase each time I update the website. It should not take into account live concerts, but I’ll change that later.

albumcounter() {
        count=$(sed -n '/### 2022/,$p' /local/path/to/website/log/  | grep  "^\`00" | wc -l)
        days=$(date +%j)
        perc=$(echo "($count*100)/$days" | bc)
        sed -i s/"The current figure is .*"/"The current figure t
his year is \*\*$count albums\*\* (out of \*\*$days days\*\*). Th
at is approx. $perc% as many albums as days."/g /local/path/to/log/

By the end of the year I’m also thinking about doing a retrospective on albums listened, genres and such, just for fun. If you are curious, so far I’ve found that the day I’ve listened to most albums I was able to hear 5.

grep -Po '00[A-Z][0-9]+' |  uniq -c |sort

Now section updating

I wanted to add a log for day-to-day, kind of current status stuff, so I added this to my updateweb function (below):

updatenow() {
        now=$(grep -Pm1 '\`\s.*' pathtowebsite/content/log/ | sed s/\`.*\`//g)
	sed -iE "s,^>.*,> \`$(arvelie)\`$now,g" content/

Some Regex magic was needed for sed to handle links properly (hence the , instead of /, the usual sed substitution separator).

Note that that version changes the date to the last updated day, instead of the date in the now log. I’ve recently modified this a bit to only use the date from there instead.

now=$(grep -Pm1 '\`\s.*' /path/to/content/log/
sed -iE "s,^>.*,> $now,g" /path/to//content/

Automatic updating workflow

As I moved this website to a raspberry pi, I ditched the git workflow for a simple rsync solution since I didn’t really need version control. I made a small script to build, update the date at the footer automatically and sync. It even inclues some classic sed spike fence nonesense (who doesn’t like some /\\/\//\\//\\/\\//!).

I also included a functionality to automatically update the album listening log counter, as described above.

updateweb() {
	cd /absolut/path/to/hugo/builder

	#update footer date
	today=$(date +%x)
	sed -i s/"Last updated\: .*"/"Last updated\: $(arvelie), or ${today//\//\\\/}\""/g config.toml 

	# automatically update album counter
	#update now status

	# build, sync
        rsync -aP public/ user@ip:/directory/for/publishing

Local css and fonts

As of now, my website does this every time it loads:

<link rel="stylesheet" href="" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href=";700&amp;display=swap" rel="stylesheet">

Oh boy… not a fan. This is built in hugo’s researcher theme.

I’ve been trying to get rid of it for a while, but it’s a pain. I’ll report my solution as soon as I find one (I know, this should be quick to solve).

Musical content

I wanted to add musical content to this website, so I was working these days on building a lilypond integration pipeline. I’m kind of there locally for transcriptions in my local machine (see progress here!) but I still have to decide how I want to render things here: direct recordings of me playing? SVGs with scores? Midi? Nothing at all?

Things I’d like to do in the future