website/music/index.md

# music
Music is a huge passion of mine. I prefer listening to albums in full from
start to finish in order. My favorite albums are usually experimental, unique,
or have a particular theme they explore
<script id="albums">
const thisScript = document.getElementById("albums");
fetch("/music/albums.json")
    .then((response) => response.json())
    .then((json) => {
            let html = "";
            for (const category in json) {
                let albums = json[category];
                html = html.concat(`<h2>${category}</h2><section>`);
                for (let i = 0; i < albums.length; i++) {
                    let album = albums[i];
                    let link = "/res/albums/" + album.link + ".webp";
                    let name = album.name;
                    let artist = album.artist;
                    let template = `<figure>
                    <img src="${link}">
                    <figcaption>
                    <b>${name}</b><br/><em>${artist}</em>
                    </figcaption>
                    </figure>`;
                    html = html.concat(template);
                }
                html = html.concat("</section>")
            }
            let section = document.createElement("div");
            section.innerHTML = html;
            thisScript.replaceWith(section); // lol
        });
</script>
<figure-grid src="/music/albums.json"></figure-grid>