From b9ce32ea8d08cdaa698f79f16cb635b928cdfc0d Mon Sep 17 00:00:00 2001 From: Logan Date: Sat, 7 Sep 2024 19:35:31 -0500 Subject: [PATCH] Simplified component --- src/js/components.js | 62 +++++------ src/music/albums.json | 234 +++++++++++++++++++++--------------------- src/music/index.md | 30 +----- 3 files changed, 141 insertions(+), 185 deletions(-) diff --git a/src/js/components.js b/src/js/components.js index b871cd3..8cc74d5 100644 --- a/src/js/components.js +++ b/src/js/components.js @@ -1,52 +1,36 @@ -function createH2(headerName) { - return `

${headerName}

`; -} - -function createFigure(imageURL, heading, subheading) { - return `
- -
- ${heading}
- ${subheading} -
-
`; -} - -function createSection(headerName, figureArray) { - let figuresHTML = ""; - for (let i = 0; i < figureArray.length; i++) { - let figure = figureArray[i]; - figuresHTML = figuresHTML.concat( - createFigure(figure.url, figure.main, figure.sub) - ); +async function figureGrid(jsonURL) { + const response = await fetch(jsonURL); + const json = await response.json(); + let html = ""; + for (const headerName in json) { + html = html.concat("
") + let entries = json[headerName]; + for (let i = 0; i < entries.length; i++) { + let entry = entries[i]; + html = html.concat( + `
+ +
+ ${entry.main}
+ ${entry.sub} +
+
` + ); + } + html = html.concat("
") } - return `
${figuresHTML}
` -} - -function figureGrid(jsonURL, targetID) { - fetch(source) - .then((response) => response.json()) - .then((json) => { - let html = ""; - for (const headerName in json) { - let figureArray = json[category]; - html = html.concat(createSection(headerName, figureArray)); - } - const thisScript = document.getElementById("albums"); - return html; - }); + return html; } class FigureGrid extends HTMLElement { static observedAttributes = ["src"]; constructor() { super(); - this._internals = this.attachInternals(); } - attributeChangedCallback(name, oldValue, newValue) { + async attributeChangedCallback(name, oldValue, newValue) { if (name == "src") { - this.innerHTML = + this.innerHTML = await figureGrid(newValue); } } } diff --git a/src/music/albums.json b/src/music/albums.json index ee120ac..008a51c 100644 --- a/src/music/albums.json +++ b/src/music/albums.json @@ -1,207 +1,207 @@ { "chill": [ { - "name": "Cosmos", - "artist": "Yuji Ohno", - "link": "cosmos" + "main": "Cosmos", + "sub": "Yuji Ohno", + "url": "/res/albums/cosmos.webp" }, { - "name": "Deep Breakfast", - "artist": "Ray Lynch", - "link": "deep_breakfast" + "main": "Deep Breakfast", + "sub": "Ray Lynch", + "url": "/res/albums/deep_breakfast.webp" }, { - "name": "Dune", - "artist": "David Matthews", - "link": "dune" + "main": "Dune", + "sub": "David Matthews", + "url": "/res/albums/dune.webp" }, { - "name": "God's Trashmen Sent to Right the Mess", - "artist": "Fievel is Glauque", - "link": "gods_trashmen" + "main": "God's Trashmen Sent to Right the Mess", + "sub": "Fievel is Glauque", + "url": "/res/albums/gods_trashmen.webp" }, { - "name": "MACROCOSM", - "artist": "BALTHVS", - "link": "macrocosm" + "main": "MACROCOSM", + "sub": "BALTHVS", + "url": "/res/albums/macrocosm.webp" }, { - "name": "Ciao! Baby", - "artist": "The Marshmallow Kisses", - "link": "ciao_baby" + "main": "Ciao! Baby", + "sub": "The Marshmallow Kisses", + "url": "/res/albums/ciao_baby.webp" }, { - "name": "an anxious object", - "artist": "mouse on the keys", - "link": "mouse_on_the_keys" + "main": "an anxious object", + "sub": "mouse on the keys", + "url": "/res/albums/mouse_on_the_keys.webp" }, { - "name": "Funky Stuff", - "artist": " Jiro Inagaki", - "link": "funky_stuff" + "main": "Funky Stuff", + "sub": " Jiro Inagaki", + "url": "/res/albums/funky_stuff.webp" }, { - "name": "Make Up City", - "artist": "CASIOPEA", - "link": "make_up_city" + "main": "Make Up City", + "sub": "CASIOPEA", + "url": "/res/albums/make_up_city.webp" }, { - "name": "Mint Jams", - "artist": "CASIOPEA", - "link": "mint_jams" + "main": "Mint Jams", + "sub": "CASIOPEA", + "url": "/res/albums/mint_jams.webp" } ], "experimental": [ { - "name": "Departing", - "artist": "Jesus Molina", - "link": "departing" + "main": "Departing", + "sub": "Jesus Molina", + "url": "/res/albums/departing.webp" }, { - "name": "Choose your Weapon", - "artist": "Hiatus Kaiyote", - "link": "choose_your_weapon" + "main": "Choose your Weapon", + "sub": "Hiatus Kaiyote", + "url": "/res/albums/choose_your_weapon.webp" }, { - "name": "Hold Your Horse Is", - "artist": "Hella", - "link": "hold_your_horse_is" + "main": "Hold Your Horse Is", + "sub": "Hella", + "url": "/res/albums/hold_your_horse_is.webp" }, { - "name": "Mother Earth's Plantasia", - "artist": "Mort Garson", - "link": "plantasia" + "main": "Mother Earth's Plantasia", + "sub": "Mort Garson", + "url": "/res/albums/plantasia.webp" }, { - "name": "The Wozard of Iz - An Electronic Odyssey", - "artist": "Mort Garson", - "link": "wozard_of_iz" + "main": "The Wozard of Iz - An Electronic Odyssey", + "sub": "Mort Garson", + "url": "/res/albums/wozard_of_iz.webp" }, { - "name": "Los Desamores de Dewey Martino", - "artist": "Dewey Martino", - "link": "los_desamores_de_dewey_martino" + "main": "Los Desamores de Dewey Martino", + "sub": "Dewey Martino", + "url": "/res/albums/los_desamores_de_dewey_martino.webp" }, { - "name": "New History Warfare Vol. 3: To See More Light", - "artist": "Colin Stetson", - "link": "new_history_warfare_3" + "main": "New History Warfare Vol. 3: To See More Light", + "sub": "Colin Stetson", + "url": "/res/albums/new_history_warfare_3.webp" }, { - "name": "Hylics 2 Original Soundtrack", - "artist": "Chuck Salamone", - "link": "hylics2" + "main": "Hylics 2 Original Soundtrack", + "sub": "Chuck Salamone", + "url": "/res/albums/hylics2.webp" } ], "electronic": [ { - "name": "H.A.Q.Q.", - "artist": "Liturgy", - "link": "haqq" + "main": "H.A.Q.Q.", + "sub": "Liturgy", + "url": "/res/albums/haqq.webp" }, { - "name": "One Year Madness", - "artist": "Golemm", - "link": "one_year_madness" + "main": "One Year Madness", + "sub": "Golemm", + "url": "/res/albums/one_year_madness.webp" }, { - "name": "Cyberspace", - "artist": "Yameii Online", - "link": "cyberspace" + "main": "Cyberspace", + "sub": "Yameii Online", + "url": "/res/albums/cyberspace.webp" }, { - "name": "Wlfgrl", - "artist": "Machine Girl", - "link": "wlfgrl" + "main": "Wlfgrl", + "sub": "Machine Girl", + "url": "/res/albums/wlfgrl.webp" }, { - "name": "...Because I'm Young Arrogant and Hate Everything You Stand For", - "artist": "Machine Girl", - "link": "young_arrogant" + "main": "...Because I'm Young Arrogant and Hate Everything You Stand For", + "sub": "Machine Girl", + "url": "/res/albums/young_arrogant.webp" }, { - "name": "Parousia", - "artist": "XI", - "link": "parousia" + "main": "Parousia", + "sub": "XI", + "url": "/res/albums/parousia.webp" }, { - "name": "www.", - "artist": "cosmic collective", - "link": "www" + "main": "www.", + "sub": "cosmic collective", + "url": "/res/albums/www.webp" }, { - "name": "TMP2", - "artist": "Graham Kartna", - "link": "tmp2" + "main": "TMP2", + "sub": "Graham Kartna", + "url": "/res/albums/tmp2.webp" } ], "high energy": [ { - "name": "Each and Every Word Leaves Me Here Alone", - "artist": "Foreground Eclipse", - "link": "fge_1" + "main": "Each and Every Word Leaves Me Here Alone", + "sub": "Foreground Eclipse", + "url": "/res/albums/fge_1.webp" }, { - "name": "Missing, Loving, Suffering", - "artist": "Foreground Eclipse", - "link": "fge_2" + "main": "Missing, Loving, Suffering", + "sub": "Foreground Eclipse", + "url": "/res/albums/fge_2.webp" }, { - "name": "ITEKOMA HITS", - "artist": "Otoboke Beaver", - "link": "itekoma_hits" + "main": "ITEKOMA HITS", + "sub": "Otoboke Beaver", + "url": "/res/albums/itekoma_hits.webp" }, { - "name": "World is Yours", - "artist": "MASS OF THE FERMENTING DREGS", - "link": "world_is_yours" + "main": "World is Yours", + "sub": "MASS OF THE FERMENTING DREGS", + "url": "/res/albums/world_is_yours.webp" }, { - "name": "New Levels New Devils", - "artist": "Polyphia", - "link": "new_levels_new_devils" + "main": "New Levels New Devils", + "sub": "Polyphia", + "url": "/res/albums/new_levels_new_devils.webp" } ], "misc": [ { - "name": "27 Demos", - "artist": "Margo Guryan ", - "link": "27_demos" + "main": "27 Demos", + "sub": "Margo Guryan ", + "url": "/res/albums/27_demos.webp" }, { - "name": "the first glass beach album", - "artist": "Glass Beach", - "link": "glass_beach" + "main": "the first glass beach album", + "sub": "Glass Beach", + "url": "/res/albums/glass_beach.webp" }, { - "name": "Her Abiding Memory", - "artist": "Pitcher56", - "link": "her_abiding_memory" + "main": "Her Abiding Memory", + "sub": "Pitcher56", + "url": "/res/albums/her_abiding_memory.webp" }, { - "name": "High Society", - "artist": "Enon", - "link": "high_society" + "main": "High Society", + "sub": "Enon", + "url": "/res/albums/high_society.webp" }, { - "name": "Live at Bush Hall", - "artist": "Black Country, New Road", - "link": "live_at_bush_hall" + "main": "Live at Bush Hall", + "sub": "Black Country, New Road", + "url": "/res/albums/live_at_bush_hall.webp" }, { - "name": "Mass Teen Fainting", - "artist": "Plumtree", - "link": "mass_teen_fainting" + "main": "Mass Teen Fainting", + "sub": "Plumtree", + "url": "/res/albums/mass_teen_fainting.webp" }, { - "name": "My Caution Line", - "artist": "Citrobal", - "link": "my_caution_line" + "main": "My Caution Line", + "sub": "Citrobal", + "url": "/res/albums/my_caution_line.webp" }, { - "name": "Oncle Jazz", - "artist": "Men I Trust", - "link": "oncle_jazz" + "main": "Oncle Jazz", + "sub": "Men I Trust", + "url": "/res/albums/oncle_jazz.webp" } ] } diff --git a/src/music/index.md b/src/music/index.md index 9c1f57a..7cc161b 100644 --- a/src/music/index.md +++ b/src/music/index.md @@ -2,33 +2,5 @@ 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 - +