ho-code hocode

website/scripts/lastfm.ts

@@ -1,32 +1,33 @@
 import { timeAgo } from "./util";
 
+interface Track {
+  artist: {
+    mbid: string;
+    "#text": string;
+  };
+  streamable: string;
+  image: Array<{
+    size: string;
+    "#text": string;
+  }>;
+  mbid: string;
+  album: {
+    mbid: string;
+    "#text": string;
+  };
+  name: string;
+  "@attr"?: {
+    nowplaying: string;
+  };
+  url: string;
+  date?: {
+    uts: string;
+    "#text": string;
+  };
+}
 interface GetRecentTracksType {
   recenttracks: {
-    track: Array<{
-      artist: {
-        mbid: string;
-        "#text": string;
-      };
-      streamable: string;
-      image: Array<{
-        size: string;
-        "#text": string;
-      }>;
-      mbid: string;
-      album: {
-        mbid: string;
-        "#text": string;
-      };
-      name: string;
-      "@attr"?: {
-        nowplaying: string;
-      };
-      url: string;
-      date?: {
-        uts: string;
-        "#text": string;
-      };
-    }>;
+    track: Array<Track>;
     "@attr": {
       user: string;
       totalPages: string;
@@ -61,18 +62,13 @@ const lastFM = {
   },
   getRecentTracks: async (user: string): Promise<GetRecentTracksType> => {
     const request = await fetch(
-      lastFM.constructUrl("User.getrecenttracks", { user, limit: 1 })
+      lastFM.constructUrl("User.getrecenttracks", { user, limit: 4 })
     );
     return await request.json();
   },
 };
 
-(async () => {
-  const recentTracks = await lastFM.getRecentTracks("fucksophie");
-  const track = recentTracks.recenttracks.track[0];
-  if (!track) return;
-  const lastFMElement = document.getElementById("lastfm")!;
-  lastFMElement.innerHTML = "";
+function renderTrack(element: HTMLDivElement, track: Track) {
   const img = document.createElement("img");
   img.width = 174;
   img.height = 174;
@@ -81,7 +77,7 @@ const lastFM = {
   if (!imageUrl) imageUrl = track.image.at(-1)?.["#text"]!;
 
   img.src = imageUrl;
-  lastFMElement?.appendChild(img);
+  element?.appendChild(img);
 
   const div = document.createElement("div");
   const h1 = document.createElement("h1");
@@ -102,5 +98,27 @@ const lastFM = {
   div.appendChild(h1);
   div.appendChild(spanArtist);
   div.appendChild(spanTitle);
-  lastFMElement?.appendChild(div);
+  element?.appendChild(div);
+
+}
+(async () => {
+  const recentTracks = await lastFM.getRecentTracks("fucksophie");
+  const track = recentTracks.recenttracks.track.shift();
+  const lastFMElement = document.getElementById("lastfm") as HTMLDivElement;
+  lastFMElement.innerHTML = "";
+  if (track) {
+    renderTrack(lastFMElement, track)
+
+    const div = document.createElement('div');
+
+    div.className = "inner";
+    for (let i = 0; i < 2; i++) {
+      const div2 = document.createElement('div');
+      div2.className = "inner-inner";
+      renderTrack(div2, recentTracks.recenttracks.track[i])
+      div.appendChild(div2)
+    }
+
+    lastFMElement.appendChild(div);
+  }
 })();

website/scripts/webrings.ts

@@ -2,11 +2,6 @@ document.addEventListener("DOMContentLoaded", () => {
   const webringsElement = document.querySelector(".webrings");
   if (!webringsElement) return;
 
-  const pmoringScript = document.createElement("script");
-  pmoringScript.src = "https://palette.nekoweb.org/pmoring.js";
-  pmoringScript.setAttribute("data-type", "noir");
-  webringsElement.appendChild(pmoringScript);
-
   const bucketIframe = document.createElement("iframe");
   bucketIframe.title = "the bucket webring";
   bucketIframe.id = "bucket-webring";