lastfm #freaky

global.d.ts

@@ -1,5 +1,4 @@
 declare global {
     let __BLOG_POSTS__: string[]
-    let __STICKERS__: string[]
 }
 export { };

src/plugins/variables.ts

@@ -15,9 +15,6 @@ export default class Variables extends Plugin {
     this.variables["__BLOG_POSTS__"] = JSON.stringify(
       fs.readdirSync("./website/blogs").map((z) => z.replace(".md", ""))
     );
-    this.variables["__STICKERS__"] = JSON.stringify(
-      fs.readdirSync("./website/assets/stickers")
-    );
     const templatePath = path.resolve(__dirname, "../../website/templates");
     if (fs.existsSync(templatePath)) {
       for (const file of fs.readdirSync(templatePath)) {

website/assets/style.css

@@ -18,9 +18,10 @@ a {
   grid-template-areas:
     "details   skills"
     "details    donations"
+    "details    lastfm"
     "webrings   webrings"
     "status     binkies"
-    "stickers   blog";
+    "blog   blog";
   grid-gap: 5px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: repeat(25vh, 6);
@@ -57,14 +58,18 @@ a {
   background-position: 20px 20px;
 }
 
-.paper > h1,
+.paper > :nth-child(1) {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  margin: 0;
-  padding: 0;
+  text-shadow: 0px 0px 4px white;
 }
 .details {
   grid-area: details;
@@ -72,20 +77,19 @@ h6 {
 .donations {
   grid-area: donations;
 }
-.status {
-  grid-area: status;
-}
-.stickers {
-  grid-area: stickers;
+.lastfm {
+  grid-area: lastfm;
   display: flex;
-  flex-direction: column;
-  max-height: 75vh;
+  flex-direction: row;
   gap: 20px;
 }
-.stickers > img,
-.stickers > video {
-  object-fit: scale-down;
-  height: 100%;
+.lastfm > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.status {
+  grid-area: status;
 }
 .skills {
   grid-area: skills;
@@ -103,7 +107,7 @@ h6 {
 }
 .blog {
   grid-area: blog;
-  max-height: 75vh;
+  min-height: 75vh;
 }
 
 webring-container {
@@ -117,20 +121,16 @@ webring-container {
       "status"
       "skills "
       "donations  "
+      "lastfm"
       "webrings"
-      "blog "
-      "blog "
       "binkies"
-      "stickers";
+      "blog "
+      "blog ";
     grid-template-columns: 1fr;
   }
   body {
     scrollbar-width: auto !important;
   }
-  .stickers {
-    flex-direction: row;
-    max-height: auto;
-  }
   .blog {
     max-height: unset;
   }

website/index.html

@@ -1,22 +1,10 @@
 __TEMPLATE_HEAD__
 
+<script type="module" src="scripts/util.js"></script>
 <script type="module" src="scripts/blog.js"></script>
 <script type="module" src="scripts/status_cafe.js"></script>
 <script type="module" src="scripts/particles.js"></script>
-
-<script>
-    window.addEventListener("load", () => {
-        const stickers = document.getElementById("stickers");
-        const binkies = document.getElementById("binkies");
-        if (!stickers) return;
-
-        for (const sticker of __STICKERS__) {
-            const img = document.createElement("img");
-            img.src = "assets/stickers/" + sticker;
-            stickers.appendChild(img);
-        }
-    })
-</script>
+<script type="module" src="scripts/lastfm.js"></script>
 
 <link rel="stylesheet" href="assets/style.css">
 </head>
@@ -90,7 +78,6 @@ __TEMPLATE_HEAD__
             </ul>
         </div>
         <div class="paper blog" id="root"></div>
-        <div class="paper stickers" id="stickers"></div>
         <div class="paper status" id="status"></div>
         <div class="paper binkies">
             <a href="https://sad.ovh">
@@ -118,7 +105,9 @@ __TEMPLATE_HEAD__
             </webring-container>
 
             <iframe id="bucket-webring" style="width: 100%; height: 3rem; border: none;margin-top:5px;" src="https://webring.bucketfish.me/embed.html?name=☹️☹️☹️.ovh&lightmode=true"></iframe>
+        </div>
 
+        <div class="paper lastfm" id="lastfm">
 
         </div>
     </div>

website/scripts/lastfm.ts

@@ -0,0 +1,104 @@
+import { timeAgo } from "./util";
+
+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;
+      };
+    }>;
+    "@attr": {
+      user: string;
+      totalPages: string;
+      page: string;
+      perPage: string;
+      total: string;
+    };
+  };
+}
+//https://ws.audioscrobbler.com/2.0/
+//?api_key=816cfe50ddeeb73c9987b85de5c19e71
+//&method=User.getrecenttracks
+//&user=yourfriendoss
+//&format=json
+//&limit=1
+
+const lastFM = {
+  apiKey: "816cfe50ddeeb73c9987b85de5c19e71",
+  constructUrl: (method: string, parameters: Record<string, any>) => {
+    const defaultParams = {
+        format: "json",
+        api_key: lastFM.apiKey,
+        method
+    } 
+    
+    Object.assign(parameters, defaultParams);
+    
+    return "https://ws.audioscrobbler.com/2.0/?" + new URLSearchParams(parameters).toString()
+  },
+  getRecentTracks: async (user: string): Promise<GetRecentTracksType> => {
+    const request = await fetch(lastFM.constructUrl("User.getrecenttracks", {user, limit: 1}));
+    return await request.json();
+  },
+};
+
+(async () => {
+    const recentTracks = await lastFM.getRecentTracks("yourfriendoss");
+    const track = recentTracks.recenttracks.track[0];
+    if(!track) return;
+    const lastFMElement = document.getElementById("lastfm")!
+    lastFMElement.innerHTML = "";
+    const img = document.createElement("img");
+    img.width = 150
+    img.height = 150
+    img.src = track.image.at(-1)?.["#text"]!;
+    lastFMElement?.appendChild(img);
+
+    const div = document.createElement("div");
+    const h1 = document.createElement("h1");
+    const spanArtist = document.createElement("span");
+    const spanTitle = document.createElement("span");
+
+    h1.innerText = track["@attr"]?.nowplaying ? "listening to Now" : "listened to " + timeAgo((+track.date?.uts!)*1000)
+    h1.style.margin = "0";
+
+    spanArtist.style.fontSize = "xx-large";
+    spanTitle.style.fontSize = "x-large";
+
+    spanArtist.innerText = track.artist["#text"];
+    spanTitle.innerText = track.name;
+    
+    div.appendChild(h1)
+    div.appendChild(spanArtist)
+    div.appendChild(spanTitle)
+    lastFMElement?.appendChild(div);
+
+
+    /*            <img src="https://lastfm.freetls.fastly.net/i/u/300x300/400560416eb0c37bbc407cd4279c7899.jpg" width="150" height="150">
+            <div>
+                <h1>listening to now</h1>
+                <span style="font-size:x-large">Bladee</span>
+                <span style="font-size:x-large">Open your Eyes (hymn)</span>
+            </div>*/
+
+})();

website/scripts/status_cafe.ts

@@ -1,3 +1,5 @@
+import { timeAgo } from "./util";
+
 interface LatestStatus {
   username: string;
   status: string;
@@ -7,28 +9,6 @@ interface LatestStatus {
 }
 
 (async () => {
-  function timeAgo(input: number | Date) {
-    const date = input instanceof Date ? input : new Date(input);
-    const formatter = new Intl.RelativeTimeFormat("en");
-    const ranges = [
-      ["years", 3600 * 24 * 365],
-      ["months", 3600 * 24 * 30],
-      ["weeks", 3600 * 24 * 7],
-      ["days", 3600 * 24],
-      ["hours", 3600],
-      ["minutes", 60],
-      ["seconds", 1],
-    ] as const;
-    const secondsElapsed = (date.getTime() - Date.now()) / 1000;
-
-    for (const [rangeType, rangeVal] of ranges) {
-      if (rangeVal < Math.abs(secondsElapsed)) {
-        const delta = secondsElapsed / rangeVal;
-        return formatter.format(Math.round(delta), rangeType);
-      }
-    }
-  }
-
   const req = await fetch("https://status.cafe/users/sophie.atom");
   const parser = new DOMParser();
   const doc = parser.parseFromString(await req.text(), "text/xml");

website/scripts/util.ts

@@ -0,0 +1,21 @@
+export function timeAgo(input: number | Date) {
+  const date = input instanceof Date ? input : new Date(input);
+  const formatter = new Intl.RelativeTimeFormat("en");
+  const ranges = [
+    ["years", 3600 * 24 * 365],
+    ["months", 3600 * 24 * 30],
+    ["weeks", 3600 * 24 * 7],
+    ["days", 3600 * 24],
+    ["hours", 3600],
+    ["minutes", 60],
+    ["seconds", 1],
+  ] as const;
+  const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+
+  for (const [rangeType, rangeVal] of ranges) {
+    if (rangeVal < Math.abs(secondsElapsed)) {
+      const delta = secondsElapsed / rangeVal;
+      return formatter.format(Math.round(delta), rangeType);
+    }
+  }
+}