Personal Site
Render top 48 songs from last month
+42
+42
src/components/home/playing/TopSongs.astro
+42
src/components/home/playing/TopSongs.astro
···
1
+
---
2
+
import { sdk } from "./spotify";
3
+
import { throws } from "/utils";
4
+
5
+
const topSongs = await sdk.currentUser
6
+
.topItems("tracks", "short_term", 48)
7
+
.then((tracks) => (!tracks ? throws("Top tracks failed") : tracks))
8
+
.catch((err) => console.error(err));
9
+
10
+
if (!topSongs) return "Error 500 failed to get top songs!!";
11
+
---
12
+
13
+
<ul>
14
+
{
15
+
topSongs.items.map(
16
+
(song) =>
17
+
song.album.images[0].url && (
18
+
<li>
19
+
<a href={song.external_urls.spotify}>
20
+
<img
21
+
src={song.album.images[0].url}
22
+
alt={`${song.name} by ${song.artists.map((artist) => artist.name).join(", ")}`}
23
+
title={`${song.name} by ${song.artists.map((artist) => artist.name).join(", ")}`}
24
+
/>
25
+
</a>
26
+
</li>
27
+
),
28
+
)
29
+
}
30
+
</ul>
31
+
32
+
<style>
33
+
ul {
34
+
list-style: none;
35
+
display: grid;
36
+
grid-template-columns: repeat(3, 1fr);
37
+
}
38
+
39
+
img {
40
+
aspect-ratio: 1;
41
+
}
42
+
</style>