I often lament that I don't have enough time and energy to do things, and far too many things that I want to do. I have a full-time job and I collapse on my bed after work, so all I have is the weekend. Seems prudent to make good use of those 48 hours, right? "Hey what if you ignore all those things you want to do and just make a website instead?" my ADHD-addled brain said. "Just make a simple one, it'll be quick."
I ignored it at first. I ignored it when it said "Hey, aren't you tired of having to dig through multiple sites, just to get the lyrics to those songs you like?" or when it said "Hey don't you want to mess around with HTML again, come on you said you can make a site real quick, can you prove it?" or "You know we've never tried making a Github Pages with Jekyll like it's meant to be used, maybe you want to do that now?"
Or at least I want to say that ignored them. What my dumb ass did was look up what azlyrics look like, which was the website I used back when I still listened to mainstream songs. What my dumb ass did was look up GitHub Pages and and made a new Git project "just to see how it works" and then realising I don't want to install Ruby just for Jekyll and then I started looking up other static site generators.
And by this point I was like, fuck it, let's just work on it, it'll be quick.
My philosophy on this project was, "make it quick" and "don't put effort into it". Jekyll needs me to install Ruby? Too much effort. Then I looked up Hugo, which I remember using years back, but my eyes glazed over when I read the documentation so I moved on. I looked up Pelican next, but when it started going on about its organization I left. At the end I settled with an old favorite, Eleventy.
Eleventy's documentation sucks actually! It's been a while since I use it, so I was just guided with ideas of what I could do with it. Stuff like, the difference between "template" and "layout" tripped me out. Also things like not having to repeat my data or nesting my layouts. It took me a bit to figure things out, but Eleventy is pretty much as versatile as I remembered, so I was happy enogh with it.
Protip: the official documentation says to put your config in eleveny.js. This is wrong and will cause weird errors. Rename the file eleventy.config.js and you'll be good. I don't know why that is but it is what it is I guess.
For the actual codes, I was adamant on using plain vanilla HTML/CSS/JS because I am sick and tired of having to "scaffold" my project or set up a "stack" or whatever the hell. I went ColorHunt and just take whatever palette I found appealing first and then went on to lay out my site, code first. I usually lay out the design and general skeleton in Figma first, but you know, for this project, make it quick.
The first thing that tripped me was the song directory page. I was conflicted between using a simple <ol> list or a table. Tables are hell to style, but I do need to lay out at least two data for each (song's title and artist/lyricist). I end up just going with tables, getting tripped that I can't wrap a whole row in <a>, and then making a stupid workaround that I will never allow in a professional setting but thank goodness this isn't meant to be professional.
The next thing that tripped me was my hubris in wanting a "search input", where I can just type in the song and it'll link me to that. I used this opportunity to learn about HTML templates, which I've heard a bit about but have never tried myself. It is, apparently, no big whoop. You still have to clone it and then manage the nodes and innerText things yourself; template just means it's not gonna be rendered initially.
A thing that grates me (and did trip me up) is that cloneNode on a template create a Document Fragment, which is meant to be appended to existing element onscreen using appendChild. appendChild usually returns the appended node unless it's a document fragment. In which case it just returns an... empty document fragment instead. Useless!
I guess I understand why: when appending a document fragment, there might be multiple nodes being appended (why is this possible though? deadass? don't call it appendChild singular then) and, what, they can't just return all of them in an array or node collection? Odd design choice tbh.
The search function is pretty simple; it just looks through the string in a song's title and artist and see if there's a match with what's typed in the input. The data for the songs I made by just using the templating language to dumping them all as string within the