Hi! 
As of right now, I manage two pages that have a blog-like structure to them. This one, and the website for my band Sweetums. currently, i write out the entries as separated html divs straight into the source code of each 'blog'. it works fine, but it can get a little frustrating sometimes trying to scroll around and find stuff, or really get into writing something without being distracted by the code flying around. today, i'm going to try to take a page that looks like this:

to instead be empty and then populated with a script sourcing each song from a folder of text files. i'll try doing that for the sweetums website first, and then depending how smoothly that goes, i'll do it for this blog too!

i'll start by creating a new folder at the root directory of the sweetums repository and just call it "songs", and set it up to represent one of my favorite songs that i dearly wish i've written, Roadrunner by The Modern Lovers.

before we set up our text file, here's an example of a song file and how it's formatted:

Each song has a title, lyrics, images, tabs, and notes. You might notice that the chords are formatted with brackets -- deep at the bottom of the source code for the sweetums site there's a script to process this fake little markdown language, taking any characters that are found between a [ ] and making them bold and with a larger font. this way, when i write out the songs, i don't have to go to the trouble of separating the chords into new divs or spans every time. 

for example, we can take this text (inside an html div)

    [C]                 [G]
    well the lease is up, and i don't know 
    the terms of the legalese but i'm pretty
                        [F]
    sure i'd have to [WHY DIDN'T YOU SIGN IT?]
                    (have someone look it over first)
    i could've. i could've.

            [C]                 [G]
    anneliese is up, or at least i hope she is,
                                                    [F]
    becuase she just sent me a picture of [SHE'S STARING AT HER WALL]
                                        (her cat against a yellow wall)
    i should be with her. i miss her.



and it'll display like this:


what we're going to do with this text file conversion is sort of one step beyond. we're going to set up the text file with text delimiters. . .

(e.g characters that can be recognized by a script as indicating something related to how we should be organizing our data rather than something for the user to read. for example, in a csv (comma separated values) table, columns of data are separated by a comma. so, you can represent any amount of data in a simple, straightforward way. let's say you're a dj keeping track of songs people requested at a set on the fly:
    

        date, venue, person, song
        09/21, tourist trap, sophia, heart of glass (bossa nova remix)
        11/22, sinclair, cameron, cosmic surfin
    
    can then be uploaded into any spreadsheet software or parsed by a script, easy as pie.) not all csvs have a comma delimiter, but that's another can of worms.)

. . .to automatically process our sections into generated divs, and then from there, process the text in the divs to whatever specific text markdown they need! i know i could probably use an already existing markup language to speed this up, but where's the fun in that?



here's a first pass-through. i'm using a double @ sign as a delimiter. in order, we've got our song title, the lyrics, images, tabs, any special notes on it! it's music notes, not music notes. it's a good idea to choose something you would never use in any context but as a delimiter. now, let's load our txt file as a string in javascript and split it up into its separate elements.

here's my first attempt at grabbing our roadrunner.txt file:


    async function fetchSong() {
        try {
            console.log("fetching!")
            const response = await fetch('songs/roadrunner.txt');
            const text = await response.text();
            console.log("logging roadrunner")
            console.log(text)
        } catch (error) {
            console.log("fetch failed")
            console.log(error)
        }
    }

fetchTextFile();



does anyone want to guess what happened? some mysterious reader much more well-versed in web development than i? or maybe just someone with common sense?

here, i'll hide the answer. highlight the text right after this to see: 
Access to fetch at 'file:///Users/archieoconnell/dev/sweetum.github.io/songs/roadrunner.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

what's going on here? 

you might recognize the evil mosquito that is CORS, which you can read more about here. long story short, CORS makes the internet "safer" and "more secure" blah blah blah, e.g it's a pain in the ass to access resources from one webpage to another

we're trying to load the .txt file from a local file:// path, which is not how the fetch api works. it has to be one of the whitelisted schemes (https, data, etc.). when i try grabbing the content of a text file that's up on the web already, like, say, flagday.txt (more on flag day later), our scripe works PERFECTLY!



how can we use a whitelisted scheme while still working locally with our roadrunner.txt that hasn't yet been pushed to github? we'll start a local server with python!


    ➜  archizzl.github.io git:(master) ✗ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [21/Jul/2024 17:20:16] "GET / HTTP/1.1" 200 -
::1 - - [21/Jul/2024 17:20:16] "GET /hpi/salmon.mov HTTP/1.1" 200 -
::1 - - [21/Jul/2024 17:20:16] "GET /hpi/indexbackground.mp4 HTTP/1.1" 200 -
::1 - - [21/Jul/2024 17:20:16] code 404, message File not found
::1 - - [21/Jul/2024 17:20:16] "GET /favicon.ico HTTP/1.1" 404 -
::1 - - [21/Jul/2024 17:20:25] "GET /log.txt HTTP/1.1" 200 -
::1 - - [21/Jul/2024 17:20:32] "GET /b.txt HTTP/1.1" 200 -
::1 - - [21/Jul/2024 17:20:35] "GET /blag.html HTTP/1.1" 200 -



by opening a terminal from the directory we're working in and using the python command python3 -m http.server, we can now access the page we're working in from the port localhost:8000! you'll also get to see an ongoing log of any requests that you make to your local server! you can close it using control + c 
(or at least if you're on a mac. i'm not sure about other platforms)

now, when we try it after opening a server in the sweetum repository, we get:



fetching!
(index):1860 @@ 
Roadrunner
@@ 
One, two, three, four, five, six
Roadrunner, roadrunner
Going faster miles an hour
Gonna drive past the Stop 'n' Shop
With the radio on
I'm in love with Massachusetts
And the neon when it's cold outside
And the highway when it's late at night
Got the radio on
I'm like the roadrunner
Alright
@@ 
https://images.squarespace-cdn.com/content/v1/600594e0259ef06ca93df13f/1611700204786-C9KJL0LTFR154X6VVM6K/TT-60547-Richman+10162.jpg
@@
e|---------------------------------------------------------------|
B|---------------------------------------------------------------|
G|---------------------------------------------------------------|
D|---------------------------------------------------------------|
A|---------------------------------------------------------------|
E|---------------------------------------------------------------|
@@
this song rocks!
porpoise.dashboard.wrbbradio.org/:1 Access to XMLHttpRequest at 'https://api.wrbbradio.org/getSchedule' from origin 'https://porpoise.dashboard.wrbbradio.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.



we're still getting a CORS issue, but that is for a different, stupid reason that i will get to at another point. perhaps i will write about it and link back to it here. for now, all you need to know is that you don't need to know about it.

we've got our song! let's load it in!

(at this point, i decided to switch to doing this with an actual song by my band so that whatever i'm doing can be troubleshot with a real example. sorry to all the modern lovers out there! peace and love!)

here's some more code for you:


    
    songs = ["pinky"]

    for (song of songs) {
        fetchSong(song).then((foo) => {
            console.log("foo:")
            console.log(foo)
            console.log(foo.split("@@"))
        })
    }



since we're just working on song right now but want to eventually have this work for every song, we're going to define our songs as an array and then use a for each loop to run our function for each song we want to display on the sweetums website. you might have noticed above that our fetchSong() function had an async label. async functions return Promises, which are then accessed using the .then() property. We need to use an async function because we're using the fetch api to request resources from a web server, so our code should (a)wait a response before proceeding with its operations.

our response looks something like this:



    (5) ['Pinky%%pinky%%https://maps.google.com\n', "\n            \n            [G]                 [B7]…t at least it's not a spiderbee\n        like me!\n", '\nhttps://upload.wikimedia.org/wikipedia/commons/1/…GcSlknVy6nECWqgdwVY78ysRMlFZWXT3V89CJl2QhRMoZQ&s\n', '\n    NO TABS!        \n         BUMMER!\n', '\nat "take your breath away", drum beat switches to…  *\nand strums go slower. father john misty vibes']
    0
    : 
    "Pinky%%pinky%%https://maps.google.com\n"
    1
    : 
    "\n            \n            [G]                 [B7]       \n    (oh,) won't you fix me, fix me\n                [C]                  [G]\n        will you heal my broke-back pinky\n                                (Amaj7)   [D]\n        when my hands finally do what i want them to do\n            [G]        [B7]     [C]     [Cmin]\n        and snap themselves in half\n                    [G]   [Emaj7]   [Amaj7]     [D]  [Amaj7] [D]  [G]\n        so they can never put their grip around your gentle neck again\n\n        [G]                 [B7]       \n    (oh,) if you'll only wish me\n                [C]                  [G]\n        to give up what i brought with me\n                                                        (Amaj7)   [D]\n        i'll wrap it up and spit it out and chew it up and throw it out\n                                                    (aughhghgh!!!)\n            [G]        [B7]     [C]     [Cmin]\n        so dear, if you'll forgive me, we'll walk around sing tweedle-dee\n            [G]   [Emaj7]   [Amaj7]     [D]     [Amaj7]     [D]     [G]\n        i'll be your one and only spiderbee!\n\n        ++\n\n        same chords for two solos\n\n        ++ \n\n        (just keyboard)\n\n        [G]                 [B7]       \n        i can be better, folded down\n                [C]                  [G]\n        an upright pillar, a drone too loud\n                                    (Amaj7)   [D]\n        while baby midas combs around the wreckage\n            [G]                 [B7]           [C]           [Cmin]\n        he doesn't catch those sordid eyes linger on what he leaves behind\n\n        (hold Cmin)\n\n            [G]   [Emaj7]   [Amaj7]     [D]     [Amaj7]     [D]     [G]\n        it makes you wonder why we pay so much for that shit anyway!\n\n        [G]                 [B7]       \n    (oh,) won't you fix me, fix me\n                [C]                  [G]\n        will you heal my broke-back pinky\n                                (Amaj7)   [D]\n        when my hands finally do what i want them to do\n\n        ++ \n\n            [G]        [B7]     [C]     \n        and take your breath away\n                [G]        [B7]     [C]     \n        leave my claw marks there to stay\n\n        i'll be your\n        [G]\n        widowmaker\n        [B7]\n        endless taker\n        [C]                 \n        apologetic motion faker\n        [Cmin]\n        former governor charlie baker\n        artisinal sourdough creator\n        point guard for the l.a lakers\n\n        [G]   [Emaj7]   [Amaj7]     [D]     [Amaj7]     [D]\n        baby, i can be a spiderbee, it's a real thing!\n\n        [G]                 [B7]       \n        (oh,) won't you fix me, fix me\n                [C]                  [G]\n        will you heal my broke-back pinky\n                                (Amaj7)   [D]\n        when my hands finally do what i want them to do\n        \n        and \n        get a little brittle\n        when i rosin up the fiddle\n        on a wednesday night\n        with my whereabouts a riddle\n        where'd he get ya?\n        in the middle!\n        does it sting?\n        just a little!\n        but at least it's not a spiderbee\n        like me!\n"
    2
    : 
    "\nhttps://upload.wikimedia.org/wikipedia/commons/1/1b/Spiderbee.jpg%%spiderbee\nhttps://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlknVy6nECWqgdwVY78ysRMlFZWXT3V89CJl2QhRMoZQ&s\n"
    3
    : 
    "\n    NO TABS!        \n         BUMMER!\n"
    4
    : 
    "\nat \"take your breath away\", drum beat switches to\nride    *   *   *   *   *   *   *   *\nsnare           *   *           *\nkick    *               *   *       *\nand strums go slower. father john misty vibes"
    length
    : 
    5
    [[Prototype]]
    : 
    Array(0)



which is a bit scary! but it's working!! our .txt file has been grabbed and split up by its delimiter into an array of its sections. now, we can use it to populate our songs. 

right?

well, while putting together the .txt file for pinky, i ran into a slight problem -- the photo i use for the song entry for pinky has a strange size formatting issue. to amend it, i gave it a somewhat hacky solution, which was giving the image a unique id and formatting it directly from the css of the page, making it an outlier from the other images. another issue is that i forgot each song has an id and an optional link, along with everything else. we're starting to build a system with a lot more complexity than we initially prepared for. have we been too cocky? 

let's take a step back and reassess what the point of this project is. the lyrics of my songs take up too much space in my html page, and i would prefer writing my song lyrics unencumbered by code flying around. that's all. it's never been a problem managing the images or titles or ids. let's scale our attempts back.

new goal: 
    just write our lyrics in the text file. manage everything else in the html. maybe we'll add tabs and notes at a later time, but right now, we're just focusing on getting something done.

here's the code:



    async function fetchSong(song) {
        try {
            const response = await fetch('songs/' + song.getAttribute("id") + '.txt');
            const text = await response.text()
            return {
                "foo": song,
                "bar": text
            }
        } catch (error) {
            console.log("fetch failed")
            console.log(error)
        }
    }

    songs = document.querySelectorAll(".song")
    songs_navbar = document.getElementById("next_top_link")
    show_songs = []

    for(song of songs) {
        fetchSong(song).then((love) => {
            song = love["foo"]
            song.querySelector(".brochure").querySelector(".lyrics").innerHTML = formatText(love["bar"])
            show_songs.push(song)
            foo = document.createElement("a")
            foo.setAttribute("href", "#" + song.getAttribute("id"))
            foo.innerHTML = song.querySelector(".song_title").querySelector(".song_link").innerHTML
            songs_navbar.appendChild(foo)
        })
    }



now that we've got this working, it would be pretty straightforward to set up the template with tabs and notes too, using a handy dandy delimiter and split() method. but i'm not going to do that right now. because i have other stuff to do! but thanks to my halfway goal adjustment, something was finished instead of a bunch being half-assed :)