How this site works

Introduction

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 .html file

Dynamic loading with iframes

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.

Creating the HTML documents

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.

An early idea on how to fix this

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:

  1. Change the Hugo theme to implement my own CSS.
  2. Using Unix command line tools to add links to a CSS stylesheet on top of every HTML file generated with Hugo.

But both seemed clunky, and I thought there must be a better way to do this…

Introducing Pandoc

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.

The Radio / Spotify player

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.

Getting authorization into users accounts

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.

Initializing the player

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.

Changing the music

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.