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" %} + {% if lastfm %} + + {% endif %} \ 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 ---
+
+

last played

+
+
+ +
+

please visit...

@@ -17,10 +27,6 @@ title: home {% endfor %}
-
-

last played

-

test

-
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 0000000..ba2b24f Binary files /dev/null and b/img/icons/lastfm.png differ 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 = ` + +
+

${json.track.name}

+

${json.track.artist['#text']}

+
+ ` +}; + +getTrack(); +setInterval(() => { getTrack(); }, 10000);