From 7f281d3380458ed71f3e35c4decb0d56eb0b931e Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Thu, 4 Jul 2024 16:52:51 -0600
Subject: [PATCH] lastfm widget

---
 public/scripts/lastfm.js |  9 +++++++++
 src/pages/index.astro    | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 public/scripts/lastfm.js

diff --git a/public/scripts/lastfm.js b/public/scripts/lastfm.js
new file mode 100644
index 0000000..8df8a4f
--- /dev/null
+++ b/public/scripts/lastfm.js
@@ -0,0 +1,9 @@
+let user = 'limepotato';
+let url = 'https://lastfm-last-played.biancarosa.com.br/' + user + '/latest-song';
+let song = document.querySelector('#song');
+fetch(url)
+    .then(function (response) {
+        return response.json()
+    }).then(function (json) {
+        song.innerHTML = json['track']['name'] + ' - ' + json['track']['artist']['#text'];
+    });
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8cf4e6f..4f8744f 100755
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,7 @@ import Layout from "../layouts/Layout.astro";
       <h3 class="subtitle" style="text-align: center;">Welcome to my weird little spot of the internet :3</h3>
     </div>
     <br>
-    <div class="content">
+    <div class="content"><!-- 
       <figure>
         <figcaption>
     <h2 class="subtitle" style="text-align: center;">Some Ambience?</h2>
@@ -28,7 +28,15 @@ import Layout from "../layouts/Layout.astro";
           src="/assets/sounds/ambience/383506__klankbeeld__pinewood-in-memoriam-febr-05-nl-giersbergen-33db-170215_1085.flac"
         >
         </audio>
-      </figure>
+      </figure>-->
+      <div id="lastfm-widget" style="text-align: center;">
+        <div id="widget"><a href="https://www.last.fm/user/LimePotato">&#127911; <span id="song">&#8987</span></a></div>
+        <div>
+            <span style="font-size: small;">latest played song on <a href="http://last.fm" target="_blank">last.fm</a></span>
+            <span style="font-size: small;">powered by <a href="https://github.com/biancarosa/lastfm-last-played" target="_blank">@biancarosa/lastfm-last-played</a></span>
+        </div>
+    </div>
+    <script type='text/javascript' src='/scripts/lastfm.js'></script>
     </div>
     <div class="content">
     <h2 class="subtitle" style="text-align: center;">About The Me</h2>