Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Render top 48 songs from last month

+42
+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>