The wild broccoli 🥦

Current mood: feeling The current mood of oleracea at www.imood.com

Some small updates

Mood: ⌨️ accomplished


This might be silly, but I love converting everything to Hugo shortcodes. It’s fun to figure out how to pass arguments to the shortcode so I can create replicable, customizable snippets of website code. So when I found out that Hugo will automatically escape quotes in the {{ .Inner }} if you put it in Javascript, I decided to go for a little walk in the help documents. For reference, I don’t know Go at all, so all functions are being learned as I try to implement something.

The task: Pass some data into an array so I can customize the song list in a Javascript music player every time I call it

I start out with this from the code:

1//the rest of the code: initiate other variables, etc. I don't need to touch this
2let track_list = [
3    {
4    	name: "name",
5    	artist: "artist",
6    	path: "url"
7    },
8];
9//the rest of the code: load track, seek position, play, pause, etc. I also don't need to touch this

But I want to be able to update this whenever I want without changing the base shortcode. It turns out that SafeJS will strip out the escape characters from quotes and URLs.1 So I changed it to say:

1let track_list = [
2    {{ .Inner | safeJS }}
3];

and call it like this:

1{{< mp3player >}}
2{name: "Vonal Declosion", artist: "Stereolab", path: "/music/Vonal Declosion.mp3" },
3{name: "Orange-coloured Day", artist: "Liana Flores", path: "/music/Orange-coloured day.mp3"}
4{{< /mp3player >}}

And now I have a working audio player!

Song Name
00:00
0:00

Now I just need to get more audio files so I can make a nice playlist. I’ll use yt-dlp to do this. After setting up the configuration properly, I can create a config file in C:\Users\myusername\.yt-dlp\config.txt that will make it automatically convert to MP3 (I don’t want to download other file formats):

1# Always extract audio
2-x
3
4# Format as mp3
5--audio-format mp3

Now yt-dlp will always use these options unless I specify not to. Super useful!

I can now just run yt-dlp as normal and get an MP3 file easily. Check out my homepage for more songs!

I considered normalizing all the audio files but to be honest I don’t notice any major loudness problems. If I end up accidentally creating an extremely loud or quiet audio file, I might reconsider adding ffmpeg-normalize into my website build pipeline.


Oh, and in other news, I updated the reading list! So now all the articles have brief explanations. I’ve also added a changelog so I don’t have to write a blog post for each change. Sometimes I just change something small, and it doesn’t feel like it deserves a writeup. But I do like keeping track of what I did so I can remember how far I came from the blank Hugo template.

Please let me know if you want to read one of the articles but you don’t have access. I’ll consider hosting them on my website instead.


My next idea is to add a webgarden greenhouse or put in links to other people’s sites. But I don’t know who to link to yet! If you want me to link to you, just say the word… I’d like to make friends on the small web.

#Blog #Code