Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-05-29 23:03:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Post, Project and index pages

Browse source 
Example posts
This commit is contained in:
Michał Gdula 2024-05-22 22:05:26 +01:00
parent 5970f11bcc
commit d3dafddf74
21 changed files with 625 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/Music.astro Normal file
View file

@ -0,0 +1,58 @@
---
---
<div id="current-music">
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<ul>
<li id="current-music-title">Track Name</li>
<li id="current-music-artist">by Artist</li>
<li id="current-music-album">on Album</li>
</ul>
</div>
<script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
console.log(data);
document.getElementById("current-music-image").src = data["track"]["image"][1]["#text"];
document.getElementById("current-music-title").innerText = `Listening to ${data["track"]["name"]}`;
document.getElementById("current-music-artist").innerText = `by ${data["track"]["artist"]["#text"]}`;
document.getElementById("current-music-album").innerText = `on ${data["track"]["album"]["#text"]}`;
</script>
<style lang="scss">
@import "../styles/vars.scss";
#current-music {
padding: 8px;
display: flex;
flex-direction: row;
border-radius: $radius;
border: 2px solid $gray;
background-color: $dark;
color: $light;
> img {
margin-right: 16px;
width: 64px;
height: 64px;
border-radius: $radius;
}
> ul {
display: flex;
flex-direction: column;
> li {
font-size: 16px;
list-style: none;
}
}
}
</style>