Silly self eating js

music/albums.json

@@ -0,0 +1,162 @@
+[
+  {
+    "name": "27 Demos",
+    "artist": "Margo Guryan ",
+    "link": "27_demos"
+  },
+  {
+    "name": "Choose your Weapon",
+    "artist": "Hiatus Kaiyote",
+    "link": "choose_your_weapon"
+  },
+  {
+    "name": "Ciao! Baby",
+    "artist": "The Marshmallow Kisses",
+    "link": "ciao_baby"
+  },
+  {
+    "name": "Cosmos",
+    "artist": "Yuji Ohno",
+    "link": "cosmos"
+  },
+  {
+    "name": "Deep Breakfast",
+    "artist": "Ray Lynch",
+    "link": "deep_breakfast"
+  },
+  {
+    "name": "Departing",
+    "artist": "Jesus Molina",
+    "link": "departing"
+  },
+  {
+    "name": "Dune",
+    "artist": "David Matthews",
+    "link": "dune"
+  },
+  {
+    "name": "Each and Every Word Leaves Me Here Alone",
+    "artist": "Foreground Eclipse",
+    "link": "fge_1"
+  },
+  {
+    "name": "Missing, Loving, Suffering",
+    "artist": "Foreground Eclipse",
+    "link": "fge_2"
+  },
+  {
+    "name": "Funky Stuff",
+    "artist": " Jiro Inagaki",
+    "link": "funky_stuff"
+  },
+  {
+    "name": "the first glass beach album",
+    "artist": "Glass Beach",
+    "link": "glass_beach"
+  },
+  {
+    "name": "God's Trashmen Sent to Right the Mess",
+    "artist": "Fievel is Glauque",
+    "link": "gods_trashmen"
+  },
+  {
+    "name": "H.A.Q.Q.",
+    "artist": "Liturgy",
+    "link": "haqq"
+  },
+  {
+    "name": "Her Abiding Memory",
+    "artist": "Pitcher56",
+    "link": "her_abiding_memory"
+  },
+  {
+    "name": "High Society",
+    "artist": "Enon",
+    "link": "high_society"
+  },
+  {
+    "name": "Hold Your Horse Is",
+    "artist": "Hella",
+    "link": "hold_your_horse_is"
+  },
+  {
+    "name": "Hylics 2 Original Soundtrack",
+    "artist": "Chuck Salamone",
+    "link": "hylics2"
+  },
+  {
+    "name": "Iron Hummer Alternative",
+    "artist": "IRONBUNNY",
+    "link": "ironbunny"
+  },
+  {
+    "name": "ITEKOMA HITS",
+    "artist": "Otoboke Beaver",
+    "link": "itekoma_hits"
+  },
+  {
+    "name": "Live at Bush Hall",
+    "artist": "Black Country, New Road",
+    "link": "live_at_bush_hall"
+  },
+  {
+    "name": "Los Desamores de Dewey Martino",
+    "artist": "Dewey Martino",
+    "link": "los_desamores_de_dewey_martino"
+  },
+  {
+    "name": "MACROCOSM",
+    "artist": "BALTHVS",
+    "link": "macrocosm"
+  },
+  {
+    "name": "Make Up City",
+    "artist": "CASIOPEA",
+    "link": "make_up_city"
+  },
+  {
+    "name": "Mass Teen Fainting",
+    "artist": "Plumtree",
+    "link": "mass_teen_fainting"
+  },
+  {
+    "name": "Mint Jams",
+    "artist": "CASIOPEA",
+    "link": "mint_jams"
+  },
+  {
+    "name": "an anxious object",
+    "artist": "mouse on the keys",
+    "link": "mouse_on_the_keys"
+  },
+  {
+    "name": "My Caution Line",
+    "artist": "Citrobal",
+    "link": "my_caution_line"
+  },
+  {
+    "name": "New History Warfare Vol. 3: To See More Light",
+    "artist": "Colin Stetson",
+    "link": "new_history_warfare_3"
+  },
+  {
+    "name": "New Levels New Devils",
+    "artist": "Polyphia",
+    "link": "new_levels_new_devils"
+  },
+  {
+    "name": "Oncle Jazz",
+    "artist": "Men I Trust",
+    "link": "oncle_jazz"
+  },
+  {
+    "name": "One Year Madness",
+    "artist": "Golemm",
+    "link": "one_year_madness"
+  },
+  {
+    "name": "Parousia",
+    "artist": "XI",
+    "link": "parousia"
+  }
+]

music/index.md

@@ -1,5 +1,31 @@
 # Music
 My favorite songs, albums, and artists
 ## albums
+
+<script id="albums">
+const thisScript = document.getElementById("albums");
+fetch("/music/albums.json")
+    .then((response) => response.json())
+    .then((json) => {
+            let html = "";
+            for (let i = 0; i < json.length; i++) {
+                let album = json[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);
+            }
+            let section = document.createElement("section");
+            section.innerHTML = html;
+            thisScript.replaceWith(section); // lol
+        });
+</script>
+
 ## artists
 ## songs

style.css

@@ -81,9 +81,27 @@ h1 {
   padding-bottom: 0.2em;
 }
 
-img {
+section {
-  width: 40%;
+  content-align: center;
-  height: auto;
+  text-align: center;
-  align-content: center;
-  margin: auto;
 }
+
+figure {
+  display: inline-block;
+  width: 10em;
+  max-height: 14em;
+  margin: auto;
+  padding: 0.8em;
+}
+
+figcaption {
+  margin-top: 0.4em;
+  line-height: 110%;
+}
+
+img {
+  display: block;
+  width: 100%
+}
+
+