i'm a silly girl

assets/styles.css

@@ -516,7 +516,11 @@ section.typewriting a,
 	list-style: none;
 }
 
-.fm-recent {
+.fm-recent:hover {
+	filter: none;
+}
+
+.fm-recent a {
 	display: flex;
 	flex-direction: column;
 	align-items: center;

components/Fm.tsx

@@ -17,13 +17,30 @@ export function Fm() {
 				<ul class="fm-recent-tracks">
 					{content.map((track) => (
 						<li class="fm-recent" key={track.artist + track.name}>
-							{track.cover && <img class="cover" src={track.cover} alt="" />}
+							<a href={track.url}>
+								<img
+									class="cover"
+									src={track.cover ||
+										"https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png"}
+									alt=""
+								/>
 
-							<div class="meta">
+								<div class="meta">
-								<strong class="title">{track.name}</strong>
+									<strong class="title">{track.name}</strong>
-								<span>{track.artist}</span>
+									<span>{track.artist}</span>
-								{track.loved && <span class="loved">❤</span>}
+									{track.playing
-							</div>
+										? (
+											<span class="loved" title="Now playing">
+												▷
+											</span>
+										)
+										: (track.loved && (
+											<span class="loved" title="Loved">
+												❤
+											</span>
+										))}
+								</div>
+							</a>
 						</li>
 					))}
 					<a class="fm-more" href="https://last.fm/user/favewa">

routes/index.tsx

@@ -135,7 +135,7 @@ export default function Home() {
 						<span class="key">WEB</span>
 						<code class="value">
 							<a href="https://ko-fi.com/west">west@ko-fi</a>
-							<a href="https://github.com/sponsors/favewa">favewa@github</a>
+							<a href="https://github.com/sponsors/misties">misties@github</a>
 						</code>
 					</div>
 					<div class="row">

utils/fm.ts

@@ -10,7 +10,9 @@ interface Track {
 	name: string;
 	artist: string;
 	loved: boolean;
+	playing: boolean;
 	cover?: string;
+	url: string;
 }
 
 const secret = Deno.env.get("FM_SECRET");
@@ -25,11 +27,13 @@ if (secret) {
 			extended: true,
 		});
 
-		return raw?.filter((x) => !x.nowPlaying).map((track) => ({
+		return raw?.map((track) => ({
 			artist: track.artist.name,
 			name: track.name,
 			loved: "loved" in track ? track.loved as boolean : false,
+			playing: track.nowPlaying || false,
 			cover: track.images.pop()?.url,
+			url: track.url || "#",
 		}));
 	}, 60);
 }