This site is unlike other sites, and I’m not just being quirky when I say that. This website works quite a bit differently compared to the other sites on the internet or on the indie web.
The first thing to note in the index.html file on the root of the web-server is the iframe which creates the content box, where this HTML is being loaded. Now, usually in the indie web this is quite common, this technique can be used to create websites where only the needed sections are loaded when a user clicks on a button as only the iframe loads to show the new page and not the entire website.
Personally, I would prefer to write in Markdown documents rather than HTML documents, but if I do use something like Hugo or Jekyll I would have to learn their methods to style and implement JS into website pages which I really did not want to do.
I was thinking that I could use an HTML only theme for Hugo and use that to generate the blogs part of my website and connect that up to everything else using an iframe. And I would either, to add CSS and JS:
But both seemed clunky, and I thought there must be a better way to do this…
If you don’t know, Pandoc is a file
conversion program which supports a lot of file types. (As of
Pandoc 3.2 it is 45 input formats and 66 output formats). However, as
it’s a command line program that supports Unix systems, so we can use
bash to make scripts utilizing Pandoc. So that’s what I’ve done. And
after the HTML is made I use a temp file and mv
to create
the file with all the things I need on it.
This is one of things on this page which I am most proud of. It just works really well. It can play any music, and unlike hosting .mp3 files which other sites may do, I don’t have to worry about copyright claims.
To play music, we need an account to play it on. Luckily, Spotify’s API makes this very easy to do. We can use Spotify’s premade token giver, and we can just ask for the token from the user.
Now we have the token we can set up the player. We just make the
Player object with the token as a parameter, and we can add a listener
which is part that makes the website be able to output audio. Then,
viola, we can run player.connect
to connect to Spotify.
However, we currently do not have any way to, once an action takes place on the site, play music. We can only use the website as a device to output music. That is where the second API comes in, we can make a PUT request to Spotify to update the track with the tracks URI.