theophine savio theodore.

/home

/about

/rss

/changelog

i made a website for my father.

before i start, i’ll link the website here: https://songs.theophinetheodore.xyz

my father is the leader of our church choir. ever since i was a kid, i have seen him singing. and whenever he goes to the church, he takes me with him. i remember sitting at the bench near him while he sings. i remember the days when i run through the sacristy while he sings with the rest of the choir. one day i tripped on a cable when i was running, and a mic fell down hard on the floor and made a noise so loud everyone in the church stared at me for a solid minute. i remember the ball thing of the mic breaking open into two. and many other shenanigans.

good times. (hehe)

my father used to have this big “vanity bag” of sorts. it was full of diaries with song lyrics in them. and it’s not just the lyrics, it also has some kind of notations and stuff only choir members understand.

everyday before the evening mass, i saw him writing song lyrics on the diary. he had a couple of diaries for each type of song, such as offertory songs, communion songs etc. he wrote the lyrics by hand, and he maintained a whole index by himself. and sometimes, i’d see him copying lyrics from one old diary to a new one. and i’d ask him why he’s doing it. he told me he would have to replace the old diary soon, since it’s too old.

i knew there’s a better way. but if i started doing it then, i would have done something with microsoft word or something, because that was the only way i could do it back then. but now (i think) i know a thing or two about the web. so i decided to make a website for him.

the tools i used #

hugo #

for the website, hugo was an obvious pick, since i have already used to make this blog. i used to use svelte, but i don’t wanna go into that hellhole again. by hellhole, i mean the dumpster fire called the javascript ecosystem.

as for the structure, i don’t do any structuring of the files into separate folders. i dump all the markdown files into content/songs. but in its frontmatter, i have included the title of the song and the category with which i would sort them.

to display song-specific notation stuff, i went for a <table> based approach, but then replaced with regular <div> soup. (i’m sorry :( ) initially, i had a python script that would read a file and spit out a table that i would have to paste it directly in markdown manually, but it proved to be too messy. i try to implement the same logic with hugo syntax, but i couldn’t get so far. so i had to write some javascript that did the thing. it would only be added to the page if the markdown frontmatter had notation: true in it. here’s the code. i know it’s ugly and a mess, but hey, it works!

initially, i went with the /tags page, since i didn’t know how to group the songs based on its category, but later i learnt how to find the total list of pages in a section (say posts/ or songs/), and how to sort pages in a section based on their taxonomy. here’s the code.

later on, i included stuff like scale (eg. Dm, G), time_signature (eg. 2/4, 4/4), tempo (eg. 135bpm) into the song markdown frontmatter. if it exists, it would be displayed inside a blockquote. it can be found here .

i also disabled RSS, because i don’t see a reason.

typo #

i used the typo hugo theme, since i have already dabbled with it, and it seemed like a clean enough slate for me, but i had to make a lot of modifications for this website.

first of all, i replaced the default literata font with malini from smc. i disabled breadcrumbs, enabled hardwrap, and unsafe for embedding html directly in markdown. typo has this homeCollection thing which displays a list of posts or whatever in the main page, but since it wasn’t what i needed, i disabled it.

and i added a bunch of CSS too.

pagefind #

pagefind was very interesting, but i had to paste the CSS variables into themes/typo/assets/css/vars.css and modify them to work with dark mode.

another problem i had is, all the search results had the site title as the result title, instead of the page title. turns out, pagefind assigns ranks to headings (eg. <h1> all the way down to <h6>) and since the site title is the first <h1> on the page, it assumed it was the page title. i edited the header.html partial to replace the <h1> and that problem was solved.

misc #

i made a lil build.sh “build script” of sorts, and it does three things:

  1. trash the docs/ directory. (it’s where the publish the website to.)
  2. hugo build --minify -e production: building with minification enabled.
  3. pagefind --site docs: builds a search index based on html files.

other tools i used #

  • kate : my text editor. previously obsidian. both have vim mode and good malayalam support.
  • evil helix : for when i write js and edit html files with hugo syntax in em.
  • tesseract : for OCR (installed tesseract-data-mal for malayalam support.)
  • sed : quick text replacements across multiple files. i love good, ol’ reliable sed.
  • git : version control, and quick restore in case i messed up with sed.
  • yazi : fast terminal-based file manager.

i also “compiled” a font! #

i do not know if “compiled” is the correct word for it, but yeah.

for the website, i use a font called Malini . It’s a very beautiful font, but there’s one thing that kinda irks me: how it handles certain groups of characters. for example:

the first version is how the word “sneham” is rendered, but it’s not what I want. I like the second version, the split one. But to have that, I have to insert a ZWJ (zero-width joiner). I have no problems using it, but it gets in the way of search, because most people use keyboards on their phone and it does not insert ZWJs. But since I use ZWJs in lyrics, they end up getting no search results at all. but it’s all the same thing.

hopefully, malini has features , but it doesn’t have what i need. so what i did was, i got the source code, and deleted the glyphs of those “stacked characters” (and the ellipsis glyph) and “compiled” the font.

here are the steps: (nothing crazy)

git clone https://gitlab.com/smc/fonts/Malini
cd Malini
virtualenv -p python3 venv
source venv/bin/activate
pip install fontmake fontFeatures pyyaml munch ufonormalizer Brotli fontbakery

# this is the part where i delete the files from Malini/sources/glyphs, namely
# ക്ട.mp,  പ്ത.mp,  പ്ന.mp,  യ്ത.mp,  ശ്ന.mp,  ഷ്ക.mp,  ഷ്ക്ക.mp,  ഷ്ട.mp,  ഷ്ട്ര.mp,  ഷ്ഠ.mp,  ഷ്പ.mp,  സ്ക.mp,  സ്ക്ക.mp,  സ്ത.mp,  സ്ത്ര.mp,  സ്ന.mp,  സ്പ.mp and a bunch of others, i forgor

make -j4

# this is the part where i install the font

# and this is to verify whether the font has been installed
fc-list | rg -i malini

i also convert the variable .otf font to WOFF2 using woff2_compress.

and here are the results:

the left one is OG malini, and the right one is my “modification”. hopefully, my “solution” works, at least till now. again, maybe compilation wasn’t really needed, and there might have been some other way (i’m no expert in opentype features), but yeah.

back to top