Compare commits

...

3 commits

Author SHA1 Message Date
da5638f74c fix broken scribbles link 2024-05-01 16:58:58 -05:00
jbowdre
9b5f37a310 convert Markdown post to Gempost 2024-05-01 21:55:16 +00:00
9e8edc75dc incoming from scribbles 2024-05-01 16:54:35 -05:00
3 changed files with 100 additions and 16 deletions

View file

@ -0,0 +1,80 @@
It's been a few months since I shared how I had integrated (near) realtime weather station data[1] into my omg.lol profile page[2]. I've since done a little bit more work to start managing that (and the related /now[3] page) with GitOps[4]. Not only has that allowed me to update my pages from my terminal, but it's also made it easier (and safer) for me to tinker with the presentation.
=> https://runtimeterror.dev/display-tempest-weather-static-site/ 1: integrated (near) realtime weather station data
=> https://jbowdre.lol 2: omg.lol profile page
=> https://now.jbowdre.lol 3: /now
=> https://scribbles.jbowdre.lol/post/gitops-for-omg-lol 4: with GitOps
So today I knocked out something I'd been intended to do for ages: I set up my /now page to pull the latest album or track from my "Now Playing" thread on MusicThread[1]. I opted for this approach rather than direct last.fm (or other scrobbler) integration for two important reasons:
=> https://musicthread.app/thread/2aVjZUocjk96LELFbV5JvJjm14v 1: "Now Playing" thread on MusicThread
1. It was easier, and 2. I want there to still be some degree of personal curation occurring.
I want it to answer the question, "Hey, what are you listening to lately?" rather than just blindly reporting whatever happens to be queued up. As a visitor to someone's page, I'm less interested in what song is currently playing than I am in what music has caught their ear recently. So that's what I wanted to present on my page.
All that is to say, this integration was pretty straight forward and I didn't even need to mess with any messy authentication. MusicThread has a very simple API[1], so I quickly determine that all I needed to do was make a `GET` request against:
=> https://musicthread.app/api 1: very simple API
```
https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v
```
And it would return the thread in JSON:
```
{
"links": [
{
"artist": "Stone Sour",
"description": "",
"key": "2fnI6uEVJdT5kPyRho6XQhebmVO",
"page_url": "https://musicthread.app/link/2fnI6uEVJdT5kPyRho6XQhebmVO",
"submitted_at": "2024-04-29T22:37:22.740999Z",
"thumbnail_url": "https://img.musicthread.app/37d8a80b52457eba701fedba13a39f4687c290da/68747470733a2f2f692e7363646e2e636f2f696d6167652f61623637363136643030303062323733623432346165623531303031366461613162633032353163",
"title": "Through Glass",
"type": "track"
},
{
"artist": "Logic, Eminem",
"description": "",
"key": "2fWfoHJysUL8LlwyiIZoo6Vjmck",
"page_url": "https://musicthread.app/link/2fWfoHJysUL8LlwyiIZoo6Vjmck",
"submitted_at": "2024-04-24T01:25:27.31569Z",
"thumbnail_url": "https://img.musicthread.app/ff084172da28a68d863de47e1e1481ba6a201fae/68747470733a2f2f692e7363646e2e636f2f696d6167652f61623637363136643030303062323733343163306164336533393338386162333332666662303233",
"title": "Homicide (feat. Eminem)",
"type": "track"
}
]
}
```
I'm only interested in the newest (0th) entry, and I only need the title, artist, and page\_url. So here's the JS I hastily threw together to throw into the head element of my web/now page:
```
// retrieves latest link from a musicthread thread and displays it on the page
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
fetch(musicthread)
.then(res => res.json())
.then(function(res){
let nowPlaying = res.links[0];
document.getElementById('now-playing').innerHTML = "" + nowPlaying.title + " by " + nowPlaying.artist;
});
```
And then I can just replace the list-item where I'd been manually inputting the music info (like a cave person) with something like this:
```
- Silence {headphones}
```
So that's now live on now.jbowdre.lol[1], and the source for the whole shebang is in my GitHub[2]. I even have a quick musicthread.html[3]page I made for testing in case you want a quick peak at just this piece.
=> https://now.jbowdre.lol 1: now.jbowdre.lol
=> https://github.com/jbowdre/lolz 2: my GitHub
=> https://github.com/jbowdre/lolz/blob/main/musicthread.html 3: musicthread.html
=> https://scribbles.jbowdre.lol/post/adding-musicthread-to-my-now-page 📡 Originally posted on Scribbles

View file

@ -0,0 +1,4 @@
id: "urn:uuid:0b7f0a13-1749-4625-a54e-c367bff63649"
title: "Adding MusicThread to My /now Page"
published: "2024-05-01T20:28:09.000000Z"
updated: "2024-05-01T20:28:09.000000Z"

View file

@ -1,18 +1,18 @@
--- ---
title: "" title: "Adding MusicThread to My /now Page"
published: "2024-05-01T20:28:09.000000Z" published: "2024-05-01T20:28:09.000000Z"
updated: "2024-05-01T20:28:09.000000Z" updated: "2024-05-01T20:28:09.000000Z"
--- ---
It's been a few months since I shared how I had [integrated (near) realtime weather station data](https://runtimeterror.dev/display-tempest-weather-static-site/) into my [omg.lol profile page](https://jbowdre.lol). I've since done a little bit more work to start managing that (and the related [/now](https://now.jbowdre.lol) page) [with GitOps](https://scribbles.jbowdre.lol/post/gitops-for-omg-lol). Not only has that allowed me to update my pages from my terminal, but it's also made it easier (and safer) for me to tinker with the presentation. It's been a few months since I shared how I had [integrated (near) realtime weather station data](https://runtimeterror.dev/display-tempest-weather-static-site/) into my [omg.lol profile page](https://jbowdre.lol). I've since done a little bit more work to start managing that (and the related [/now](https://now.jbowdre.lol) page) [with GitOps](https://scribbles.jbowdre.lol/post/gitops-for-omg-lol). Not only has that allowed me to update my pages from my terminal, but it's also made it easier (and safer) for me to tinker with the presentation.
So today I knocked out something I'd been intended to do for ages: I set up my /now page to pull the latest album or track from my ["Now Playing" thread on MusicThread](https://musicthread.app/thread/2aVjZUocjk96LELFbV5JvJjm14v). I opted for this approach rather than direct last.fm (or other scrobbler) integration for two important reasons: So today I knocked out something I'd been intended to do for ages: I set up my /now page to pull the latest album or track from my ["Now Playing" thread on MusicThread](https://musicthread.app/thread/2aVjZUocjk96LELFbV5JvJjm14v). I opted for this approach rather than direct last.fm (or other scrobbler) integration for two important reasons:
1. It was easier, and 1. It was easier, and
2. I want there to still be some degree of personal curation occurring. 2. I want there to still be some degree of personal curation occurring.
I want it to answer the question, "Hey, what are you listening to lately?" rather than just blindly reporting whatever happens to be queued up. As a visitor to someone's page, I'm less interested in what song is currently playing than I am in what music has caught their ear recently. So that's what I wanted to present on my page. I want it to answer the question, "Hey, what are you listening to lately?" rather than just blindly reporting whatever happens to be queued up. As a visitor to someone's page, I'm less interested in what song is currently playing than I am in what music has caught their ear recently. So that's what I wanted to present on my page.
All that is to say, this integration was pretty straight forward and I didn't even need to mess with any messy authentication. MusicThread has a [very simple API](https://musicthread.app/api), so I quickly determine that all I needed to do was make a `GET` request against: All that is to say, this integration was pretty straight forward and I didn't even need to mess with any messy authentication. MusicThread has a [very simple API](https://musicthread.app/api), so I quickly determine that all I needed to do was make a `GET` request against:
``` ```
@ -51,24 +51,24 @@ And it would return the thread in JSON:
I'm only interested in the newest (0th) entry, and I only need the title, artist, and page\_url. So here's the JS I hastily threw together to throw into the head element of my web/now page: I'm only interested in the newest (0th) entry, and I only need the title, artist, and page\_url. So here's the JS I hastily threw together to throw into the head element of my web/now page:
``` ```
<script>
// retrieves latest link from a musicthread thread and displays it on the page // retrieves latest link from a musicthread thread and displays it on the page
const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v'; const musicthread = 'https://musicthread.app/api/v0/thread/2aVjZUocjk96LELFbV5JvJjm14v';
fetch(musicthread) fetch(musicthread)
.then(res => res.json()) .then(res => res.json())
.then(function(res){ .then(function(res){
let nowPlaying = res.links[0]; let nowPlaying = res.links[0];
document.getElementById('now-playing').innerHTML = "<a href='" + nowPlaying.page_url + "'>" + nowPlaying.title + "</a> by " + nowPlaying.artist; document.getElementById('now-playing').innerHTML = "" + nowPlaying.title + " by " + nowPlaying.artist;
}); });
</script>
``` ```
And then I can just replace the list-item where I'd been manually inputting the music info (like a cave person) with something like this: And then I can just replace the list-item where I'd been manually inputting the music info (like a cave person) with something like this:
``` ```
- <span id="now-playing">Silence</span> {headphones} - Silence {headphones}
``` ```
So that's now live on [now.jbowdre.lol](https://now.jbowdre.lol), and the source for the whole shebang is in [my GitHub](https://github.com/jbowdre/lolz). I even have a quick [musicthread.html](https://github.com/jbowdre/lolz/blob/main/musicthread.html)page I made for testing in case you want a quick peak at just this piece. So that's now live on [now.jbowdre.lol](https://now.jbowdre.lol), and the source for the whole shebang is in [my GitHub](https://github.com/jbowdre/lolz). I even have a quick [musicthread.html](https://github.com/jbowdre/lolz/blob/main/musicthread.html)page I made for testing in case you want a quick peak at just this piece.
=> https://scribbles.jbowdre.lol/post/2024-05-01 📡 Originally posted on Scribbles => https://scribbles.jbowdre.lol/post/2024-05-01 📡 Originally posted on Scribbles