From b2f0ef8a6a567cebbef164cf056c516d606c5e9d Mon Sep 17 00:00:00 2001
From: yuki <yvki@riseup.net>
Date: Sat, 11 Oct 2025 09:04:20 -0300
Subject: [PATCH] add lastfm widget

---
 _layouts/base.njk    |   3 +++
 _layouts/home.njk    |  14 ++++++++++----
 css/main.scss        |  23 +++++++++++++++++++++++
 eleventy.config.js   |   1 +
 img/icons/lastfm.png | Bin 0 -> 1717 bytes
 js/lastfm.js         |  35 +++++++++++++++++++++++++++++++++++
 6 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 img/icons/lastfm.png
 create mode 100644 js/lastfm.js

diff --git a/_layouts/base.njk b/_layouts/base.njk
index d9555e5..cb9bd96 100644
--- a/_layouts/base.njk
+++ b/_layouts/base.njk
@@ -24,5 +24,8 @@
                 {% include "footer.njk" %}
             </footer>
         </div>
+    {% if lastfm %}
+    <script src="/js/lastfm.js"></script>
+    {% endif %}
     </body>
 </html>
\ No newline at end of file
diff --git a/_layouts/home.njk b/_layouts/home.njk
index 8e243e6..642d162 100644
--- a/_layouts/home.njk
+++ b/_layouts/home.njk
@@ -1,8 +1,18 @@
 ---
 layout: base
 title: home
+lastfm: true
 ---
 <div class="welcome-aside-left">
+    <div class="now-playing-wrapper box">
+        <h2>last played</h2>
+        <div id="listening"></div>
+        <div class="noscript">
+            <noscript>
+                <h3 style="padding: 0px 0px 4px 0px;">javascript is disabled...</h2>
+            </noscript>
+        </div>
+    </div>
     <div class="buttons-wrapper box">
         <h2>please visit...</h3>
         <div class="buttons">
@@ -17,10 +27,6 @@ title: home
             {% endfor %}
         </div>
     </div>
-    <div class="now-playing-wrapper box">
-        <h2>last played</h2>
-        <div class="now-playing"><p>test</p></div>
-    </div>
 </div>
 
 <div class="welcome-content">
diff --git a/css/main.scss b/css/main.scss
index bb8c860..1075a96 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -96,6 +96,29 @@ body {
 
     .welcome-aside-left {
         width: max-content;
+
+        .now-playing-wrapper {
+            width: 190px;
+            #listening {
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-evenly;
+                img {
+                    order: 1;
+                    max-width: 36px;
+                    padding: 4px;
+                }
+                h3 {
+                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+                    font-size: 0.8em;
+                    padding: 0px 0px 0px 4px;
+                }
+                p {
+                    font-size: 0.7em;
+                    padding: 0px 0px 2px 4px;
+                }
+            }
+        }
         
         .buttons-wrapper {
             width: 190px;
diff --git a/eleventy.config.js b/eleventy.config.js
index bff3f82..39e13a4 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -5,6 +5,7 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.setLayoutsDirectory("_layouts");
     eleventyConfig.addPassthroughCopy("img");
     eleventyConfig.addPassthroughCopy("css/fonts");
+    eleventyConfig.addPassthroughCopy("js");
     eleventyConfig.addPassthroughCopy("LICENSE.txt");
 
     eleventyConfig.addPlugin(eleventySass);
diff --git a/img/icons/lastfm.png b/img/icons/lastfm.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba2b24f28270e1362499552a82d74678830f27d5
GIT binary patch
literal 1717
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
LNkvXXu0mjfsTwp#

literal 0
HcmV?d00001

diff --git a/js/lastfm.js b/js/lastfm.js
new file mode 100644
index 0000000..1efdb82
--- /dev/null
+++ b/js/lastfm.js
@@ -0,0 +1,35 @@
+// this script is under the MIT license (https://max.nekoweb.org/resources/license.txt)
+                        
+const USERNAME = "kaaisudev"; // Put your LastFM username here
+const BASE_URL = `https://lastfm-last-played.biancarosa.com.br/${USERNAME}/latest-song`;
+
+const getTrack = async () => {
+    const request = await fetch(BASE_URL);
+    const json = await request.json();
+    let status
+
+    let isPlaying = json.track['@attr']?.nowplaying || false;
+
+    if(!isPlaying) {
+        // Trigger if a song isn't playing
+        return;
+    } else {
+        // Trigger if a song is playing
+    }
+
+    // Values:
+    // COVER IMAGE: json.track.image[1]['#text']
+    // TITLE: json.track.name
+    // ARTIST: json.track.artist['#text']
+
+    document.getElementById("listening").innerHTML = `
+    <img src="${json.track.image[1]['#text']}">
+    <div id="trackInfo">
+    <h3 id="trackName">${json.track.name}</h3>
+    <p id="artistName">${json.track.artist['#text']}</p>
+    </div>
+    `
+};
+
+getTrack();
+setInterval(() => { getTrack(); }, 10000);