add lastfm widget

_layouts/base.njk

@@ -24,5 +24,8 @@
                 {% include "footer.njk" %}
             </footer>
         </div>
+    {% if lastfm %}
+    <script src="/js/lastfm.js"></script>
+    {% endif %}
     </body>
 </html>

_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">

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;

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);

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);