Mobile pass on media and script cleanup

assets/js/lastfm-utils.js

@@ -0,0 +1,68 @@
+// Shared Last.fm utilities - using global namespace pattern
+(function(window) {
+  'use strict';
+
+  // Create global LastFmUtils namespace
+  window.LastFmUtils = {
+    // Last.fm API configuration
+    LASTFM_API_URL: "https://ws.audioscrobbler.com/2.0/",
+    LASTFM_USER: "ritualplays",
+    LASTFM_API_KEY: "3a4fef48fecc593d25e0f9a40df1fefe",
+
+    // Format time difference
+    getTimeAgo: function(timestamp) {
+      const now = Date.now() / 1000;
+      const diff = now - timestamp;
+
+      if (diff < 60) return "Just now";
+      if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+      if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+      if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+      return `${Math.floor(diff / 604800)}w ago`;
+    },
+
+    // Fetch recent tracks from Last.fm
+    fetchRecentTracks: async function(limit = 10) {
+      const url = `${this.LASTFM_API_URL}?method=user.getrecenttracks&user=${this.LASTFM_USER}&api_key=${this.LASTFM_API_KEY}&format=json&limit=${limit}`;
+
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Failed to fetch tracks");
+
+        const data = await response.json();
+        return data.recenttracks.track;
+      } catch (error) {
+        console.error("Error fetching Last.fm data:", error);
+        return null;
+      }
+    },
+
+    // Filter tracks to remove duplicates of now playing track
+    // Returns a limited number of unique tracks
+    filterAndLimitTracks: function(tracks, maxTracks = 5) {
+      if (!tracks || tracks.length === 0) {
+        return [];
+      }
+
+      // Check if first track is now playing
+      const hasNowPlaying = tracks[0] && tracks[0]["@attr"] && tracks[0]["@attr"].nowplaying;
+
+      if (hasNowPlaying) {
+        // Show now playing + (maxTracks - 1) latest (excluding duplicates of now playing)
+        const nowPlayingTrack = tracks[0];
+        const nowPlayingId = `${nowPlayingTrack.name}-${nowPlayingTrack.artist["#text"]}`;
+
+        // Get remaining tracks, excluding duplicates of now playing
+        const remainingTracks = tracks.slice(1).filter(track => {
+          const trackId = `${track.name}-${track.artist["#text"]}`;
+          return trackId !== nowPlayingId;
+        });
+
+        return [nowPlayingTrack, ...remainingTracks.slice(0, maxTracks - 1)];
+      } else {
+        // No now playing, show maxTracks latest
+        return tracks.slice(0, maxTracks);
+      }
+    }
+  };
+})(window);

assets/js/pages/audio.js

@@ -83,27 +83,8 @@ if (document.getElementById("starfield")) {
   const container = document.getElementById("recent-tracks");
   if (!container) return;
 
-  const AUDIO_LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
-  const AUDIO_LASTFM_USER = "ritualplays";
-  const AUDIO_LASTFM_API_KEY = "3a4fef48fecc593d25e0f9a40df1fefe";
   const AUDIO_TRACK_LIMIT = 6; // Fetch 6 to have enough after filtering
 
-  // Fetch recent tracks from Last.fm for audio page
-  async function fetchAudioRecentTracks() {
-    const url = `${AUDIO_LASTFM_API_URL}?method=user.getrecenttracks&user=${AUDIO_LASTFM_USER}&api_key=${AUDIO_LASTFM_API_KEY}&format=json&limit=${AUDIO_TRACK_LIMIT}`;
-
-    try {
-      const response = await fetch(url);
-      if (!response.ok) throw new Error("Failed to fetch tracks");
-
-      const data = await response.json();
-      return data.recenttracks.track;
-    } catch (error) {
-      console.error("Error fetching Last.fm data:", error);
-      return null;
-    }
-  }
-
   // Render recent tracks for audio page (horizontal layout)
   function renderRecentTracks(tracks) {
     if (!tracks || tracks.length === 0) {
@@ -114,27 +95,8 @@ if (document.getElementById("starfield")) {
 
     container.innerHTML = "";
 
-    // Check if first track is now playing
+    // Filter and limit tracks to 5 (excluding duplicates)
-    const hasNowPlaying = tracks[0] && tracks[0]["@attr"] && tracks[0]["@attr"].nowplaying;
+    const tracksToShow = LastFmUtils.filterAndLimitTracks(tracks, 5);
-
-    // Filter and limit tracks
-    let tracksToShow;
-    if (hasNowPlaying) {
-      // Show now playing + 4 latest (excluding duplicates of now playing)
-      const nowPlayingTrack = tracks[0];
-      const nowPlayingId = `${nowPlayingTrack.name}-${nowPlayingTrack.artist["#text"]}`;
-
-      // Get remaining tracks, excluding duplicates of now playing
-      const remainingTracks = tracks.slice(1).filter(track => {
-        const trackId = `${track.name}-${track.artist["#text"]}`;
-        return trackId !== nowPlayingId;
-      });
-
-      tracksToShow = [nowPlayingTrack, ...remainingTracks.slice(0, 4)];
-    } else {
-      // No now playing, show 5 latest
-      tracksToShow = tracks.slice(0, 5);
-    }
 
     tracksToShow.forEach((track) => {
       const isNowPlaying = track["@attr"] && track["@attr"].nowplaying;
@@ -164,12 +126,12 @@ if (document.getElementById("starfield")) {
 
   // Initialize Last.fm feed for audio page
   async function initAudioRecentTracks() {
-    const tracks = await fetchAudioRecentTracks();
+    const tracks = await LastFmUtils.fetchRecentTracks(AUDIO_TRACK_LIMIT);
     renderRecentTracks(tracks);
 
     // Update every 30 seconds
     setInterval(async () => {
-      const updatedTracks = await fetchAudioRecentTracks();
+      const updatedTracks = await LastFmUtils.fetchRecentTracks(AUDIO_TRACK_LIMIT);
       renderRecentTracks(updatedTracks);
     }, 30000);
   }

assets/js/pages/media.js

@@ -82,39 +82,8 @@ function initMatrixRain() {
   });
 }
 
-// Last.fm API configuration
+// Media page configuration
-const LASTFM_API_URL = "https://ws.audioscrobbler.com/2.0/";
+const TRACK_LIMIT = 12; // Fetch 12 to have enough after filtering
-const LASTFM_USER = "ritualplays";
-const LASTFM_API_KEY = "3a4fef48fecc593d25e0f9a40df1fefe";
-const TRACK_LIMIT = 10;
-
-// Format time difference
-function getTimeAgo(timestamp) {
-  const now = Date.now() / 1000;
-  const diff = now - timestamp;
-
-  if (diff < 60) return "Just now";
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
-  return `${Math.floor(diff / 604800)}w ago`;
-}
-
-// Fetch recent tracks from Last.fm
-async function fetchRecentTracks() {
-  const url = `${LASTFM_API_URL}?method=user.getrecenttracks&user=${LASTFM_USER}&api_key=${LASTFM_API_KEY}&format=json&limit=${TRACK_LIMIT}`;
-
-  try {
-    const response = await fetch(url);
-    if (!response.ok) throw new Error("Failed to fetch tracks");
-
-    const data = await response.json();
-    return data.recenttracks.track;
-  } catch (error) {
-    console.error("Error fetching Last.fm data:", error);
-    return null;
-  }
-}
 
 // Render tracks to the DOM
 function renderTracks(tracks) {
@@ -129,7 +98,10 @@ function renderTracks(tracks) {
 
   container.innerHTML = "";
 
-  tracks.forEach((track) => {
+  // Filter and limit tracks to 10 (excluding duplicates of now playing)
+  const tracksToShow = LastFmUtils.filterAndLimitTracks(tracks, 10);
+
+  tracksToShow.forEach((track) => {
     const isNowPlaying = track["@attr"] && track["@attr"].nowplaying;
     const trackElement = document.createElement("a");
     trackElement.href = track.url;
@@ -143,7 +115,7 @@ function renderTracks(tracks) {
 
     // Get timestamp
     const timestamp = track.date ? track.date.uts : null;
-    const timeAgo = timestamp ? getTimeAgo(timestamp) : "";
+    const timeAgo = timestamp ? LastFmUtils.getTimeAgo(timestamp) : "";
 
     trackElement.innerHTML = `
       <div class="track-art ${!hasArt ? "no-art" : ""}">
@@ -162,12 +134,12 @@ function renderTracks(tracks) {
 
 // Initialize Last.fm feed
 async function initLastFmFeed() {
-  const tracks = await fetchRecentTracks();
+  const tracks = await LastFmUtils.fetchRecentTracks(TRACK_LIMIT);
   renderTracks(tracks);
 
   // Update every 30 seconds
   setInterval(async () => {
-    const updatedTracks = await fetchRecentTracks();
+    const updatedTracks = await LastFmUtils.fetchRecentTracks(TRACK_LIMIT);
     renderTracks(updatedTracks);
   }, 30000);
 }

assets/sass/pages/media.scss

@@ -54,11 +54,19 @@
     margin-bottom: 50px;
     padding-bottom: 20px;
     border-bottom: 2px solid transparent;
-    border-image: linear-gradient(90deg, transparent, #ff00ff 20%, #00ffff 50%, #ff00ff 80%, transparent) 1;
+    border-image: linear-gradient(
+        90deg,
+        transparent,
+        #ff00ff 20%,
+        #00ffff 50%,
+        #ff00ff 80%,
+        transparent
+      )
+      1;
     display: flex;
     justify-content: center;
 
-    pre {
+    > pre {
       background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
       -webkit-background-clip: text;
       background-clip: text;
@@ -70,7 +78,7 @@
       margin: 0;
 
       @include media-down(lg) {
-        font-size: 12px;
+        font-size: 0.5rem;
       }
     }
   }
@@ -98,6 +106,16 @@
       gap: 25px;
     }
 
+    > h3 {
+      display: none;
+      padding-bottom: 15px;
+      border-bottom: 2px solid transparent;
+      border-image: linear-gradient(90deg, #ff00ff, #00ffff) 1;
+      @include media-down(lg) {
+        display: block;
+      }
+    }
+
     // Subtle divider between items
     .media-item + .media-item {
       position: relative;
@@ -109,7 +127,13 @@
         left: 0;
         right: 0;
         height: 1px;
-        background: linear-gradient(90deg, transparent, #333 20%, #333 80%, transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          #333 20%,
+          #333 80%,
+          transparent
+        );
       }
     }
   }
@@ -127,6 +151,9 @@
     @include media-down(lg) {
       gap: 20px;
       flex-direction: column;
+
+      display: grid;
+      grid-template-columns: auto 1fr;
     }
 
     &:hover {
@@ -154,9 +181,9 @@
       transition: all 0.3s ease;
 
       @include media-down(lg) {
-        width: 100%;
+        max-width: 100px;
-        max-width: 300px;
+        max-height: 100px;
-        height: 450px;
+        height: auto;
         margin: 0 auto;
       }
 
@@ -394,6 +421,12 @@
       display: flex;
       flex-direction: column;
       gap: 15px;
+
+      @include media-down(lg) {
+        .lastfm-track:nth-child(n + 4) {
+          display: none;
+        }
+      }
     }
 
     .lastfm-loading {

assets/sass/partials/_neon-sign.scss

@@ -17,6 +17,7 @@
     width: 100%;
     height: 200px;
     position: absolute;
+    pointer-events: none;
 
     @include media-up(lg) {
       position: absolute;

content/media/fackham-hall/index.md

@@ -0,0 +1,13 @@
+---
+title: "Fackham Hall"
+date: 2025-12-24
+tags: ["film"] # album, film, show, book, game
+format: "stream" # stream, cd, vinyl, cassette, dvd, bluray, digital
+description: ""
+cover: "cover.jpg"
+rating: 8 # out of 10
+build:
+  render: never
+---
+
+Review here :)

content/media/taskmaster-champion-of-champions-4/index.md

@@ -0,0 +1,13 @@
+---
+title: "Taskmaster - Champion of Champions 4"
+date: 2025-12-26
+tags: ["show"] # album, film, show, book, game
+format: "stream" # stream, cd, vinyl, cassette, dvd, bluray, digital
+description: ""
+cover: "cover.jpg"
+rating: 9 # out of 10
+build:
+  render: never
+---
+
+Review here :)

layouts/media/list.html

@@ -14,17 +14,25 @@
  ▀██▀     ▀██▄▄▀█▄▄▄▄█▀███▄██▄▀█▄██   ████████▄▀███▀ ▀████
                                                         ██
                                                       ▀▀▀
-</pre>
+</pre
+          >
         </div>
 
         <div class="media-layout">
           <div class="media-list">
+            <h3>Recent Media</h3>
             {{ range .Paginator.Pages }}
             <div class="media-item" data-type="{{ index .Params.tags 0 }}">
               <div class="media-cover">
-                  {{ with .Resources.GetMatch "cover.*" }}
+                {{ with .Resources.GetMatch "cover.*" }} {{ $image := .Resize
-                    {{ $image := .Resize "320x webp q85" }}
+                "320x webp q85" }}
-                    <img src="{{ $image.RelPermalink }}" alt="{{ $.Title }}" loading="lazy" width="{{ $image.Width }}" height="{{ $image.Height }}">
+                <img
+                  src="{{ $image.RelPermalink }}"
+                  alt="{{ $.Title }}"
+                  loading="lazy"
+                  width="{{ $image.Width }}"
+                  height="{{ $image.Height }}"
+                />
                 {{ else }}
                 <div class="no-cover">
                   <span class="cover-placeholder">NO COVER</span>
@@ -33,7 +41,9 @@
               </div>
               <div class="media-info">
                 <div class="media-meta">
-                    <div class="media-type">{{ index .Params.tags 0 | upper }}</div>
+                  <div class="media-type">
+                    {{ index .Params.tags 0 | upper }}
+                  </div>
                   {{ if .Params.format }}
                   <div class="media-format">{{ .Params.format | upper }}</div>
                   {{ end }}
@@ -48,15 +58,19 @@
                 {{ end }}
               </div>
             </div>
-            {{ end }}
+            {{ end }} {{ partial "pagination.html" .Paginator }}
-
-            {{ partial "pagination.html" .Paginator }}
           </div>
 
           <div class="lastfm-sidebar">
             <div class="lastfm-header">
               <h3>Recently Listened</h3>
-              <a href="https://www.last.fm/user/ritualplays" target="_blank" rel="noopener noreferrer" class="lastfm-profile-link">last.fm →</a>
+              <a
+                href="https://www.last.fm/user/ritualplays"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="lastfm-profile-link"
+                >last.fm →</a
+              >
             </div>
             <div class="lastfm-tracks" id="lastfm-tracks">
               <div class="lastfm-loading">Loading tracks...</div>
@@ -67,6 +81,4 @@
     </div>
   </div>
 </div>
-
-<script src="/js/pages/media.js"></script>
 {{ end }}