add missing artist name

.gitignore

@@ -5,3 +5,4 @@ data
 fetch-and-convert.sh
 deploy.sh
 hugo.toml
+content/playlists

fetch-playlist.sh

@@ -0,0 +1,129 @@
+#!/bin/bash
+
+# ============================================
+# Nostr Playlist Fetcher for Hugo
+# ============================================
+
+# Configuration
+PUBKEY="3f11abb2e235da2d4dda5d6deb2f123173476a745a3ca56895a1d0f632a42f40"
+RELAY="wss://drops.basspistol.org"
+DATA_DIR="data/playlists"
+RAW_DIR="data/playlists/raw"
+
+mkdir -p "$DATA_DIR" "$RAW_DIR"
+
+log() { echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1"; }
+
+# ============================================
+# Step 1: Fetch playlists and tracks
+# ============================================
+
+log "Fetching playlist events (kind 34139) from $RELAY..."
+nak req -k 34139 -a "$PUBKEY" "$RELAY" > "$RAW_DIR/playlists-raw.jsonl"
+
+log "Fetching ALL tracks (kind 36787) from $PUBKEY..."
+nak req -k 36787 -a "$PUBKEY" "$RELAY" > "$RAW_DIR/tracks-raw.jsonl"
+
+# ============================================
+# Step 2: Convert JSONL to JSON arrays
+# ============================================
+
+log "Converting raw data to JSON arrays..."
+
+# Convert jsonl to json arrays
+cat "$RAW_DIR/playlists-raw.jsonl" | jq -s '.' > "$RAW_DIR/playlists-raw.json"
+cat "$RAW_DIR/tracks-raw.jsonl" | jq -s '.' > "$RAW_DIR/tracks-raw.json"
+
+# ============================================
+# Step 3: Build playlist data with jq
+# ============================================
+
+log "Building playlist data structure..."
+
+# Build the playlists.json using the json files
+jq -n \
+    --slurpfile playlists "$RAW_DIR/playlists-raw.json" \
+    --slurpfile tracks "$RAW_DIR/tracks-raw.json" \
+    '{
+        playlists: [
+            $playlists[] | .[] | 
+            select(.kind == 34139) |
+            {
+                id: .id,
+                created_at: .created_at,
+                name: (.tags[] | select(.[0] == "title") | .[1] // ""),
+                description: (.tags[] | select(.[0] == "description") | .[1] // ""),
+                image: (.tags[] | select(.[0] == "image") | .[1] // ""),
+                tracks: [
+                    .tags[] | 
+                    select(.[0] == "a") | .[1] as $ref |
+                    $tracks[] | .[] | 
+                    select(
+                        ($ref | split(":")[2]) == (.tags[] | select(.[0] == "d") | .[1])
+                    ) |
+                    {
+                        id: .id,
+                        created_at: .created_at,
+                        title: (.tags[] | select(.[0] == "title") | .[1] // "Untitled"),
+                        artist: (.tags[] | select(.[0] == "artist") | .[1] // "Unknown Artist"),
+                        album: (.tags[] | select(.[0] == "album") | .[1] // ""),
+                        url: (.tags[] | select(.[0] == "url") | .[1] // ""),
+                        image: (.tags[] | select(.[0] == "image") | .[1] // ""),
+                        duration: (.tags[] | select(.[0] == "duration") | .[1] // ""),
+                        tags: [.tags[] | select(.[0] == "t") | .[1]]
+                    }
+                ]
+            }
+        ]
+    }' > "$DATA_DIR/playlists.json"
+
+# ============================================
+# Step 4: Generate flattened tracks file
+# ============================================
+
+log "Generating flattened tracks file..."
+
+cat "$RAW_DIR/tracks-raw.json" | jq '
+    .[] | {
+        id: .id,
+        created_at: .created_at,
+        title: (.tags[] | select(.[0] == "title") | .[1] // "Untitled"),
+        artist: (.tags[] | select(.[0] == "artist") | .[1] // "Unknown Artist"),
+        album: (.tags[] | select(.[0] == "album") | .[1] // ""),
+        url: (.tags[] | select(.[0] == "url") | .[1] // ""),
+        image: (.tags[] | select(.[0] == "image") | .[1] // ""),
+        duration: (.tags[] | select(.[0] == "duration") | .[1] // ""),
+        tags: [.tags[] | select(.[0] == "t") | .[1]],
+        d_tag: (.tags[] | select(.[0] == "d") | .[1] // "")
+    }
+' | jq -s '.' > "$DATA_DIR/tracks.json"
+
+# ============================================
+# Step 5: Cleanup raw jsonl files
+# ============================================
+
+rm -f "$RAW_DIR"/*.jsonl
+
+# ============================================
+# Step 6: Summary
+# ============================================
+
+PLAYLIST_COUNT=$(cat "$DATA_DIR/playlists.json" | jq '.playlists | length' 2>/dev/null || echo "0")
+TRACK_COUNT=$(cat "$DATA_DIR/tracks.json" | jq 'length' 2>/dev/null || echo "0")
+
+echo ""
+echo "========================================"
+echo "📊 Playlist Summary"
+echo "========================================"
+echo "  📀 Playlists: $PLAYLIST_COUNT"
+echo "  🎵 Total tracks found: $TRACK_COUNT"
+echo "  📁 Data saved to: $DATA_DIR/"
+echo "========================================"
+
+echo ""
+echo "📝 Playlist Names:"
+cat "$DATA_DIR/playlists.json" | jq -r '.playlists[].name' 2>/dev/null | while read -r name; do
+    if [ -n "$name" ]; then
+        echo "  🎵 $name"
+    fi
+done

generate-playlist-pages.sh

@@ -0,0 +1,101 @@
+#!/bin/bash
+
+# ============================================
+# Generate Hugo Playlist Pages from JSON
+# ============================================
+
+DATA_FILE="data/playlists/playlists.json"
+CONTENT_DIR="content/playlists"
+
+# Check if data file exists
+if [ ! -f "$DATA_FILE" ]; then
+    echo "❌ Error: $DATA_FILE not found. Run fetch-playlist.sh first."
+    exit 1
+fi
+
+# Check if data file has content
+if [ ! -s "$DATA_FILE" ]; then
+    echo "❌ Error: $DATA_FILE is empty. Run fetch-playlist.sh first."
+    exit 1
+fi
+
+# Create content directory
+mkdir -p "$CONTENT_DIR"
+
+# Create _index.md if it doesn't exist
+if [ ! -f "$CONTENT_DIR/_index.md" ]; then
+    cat > "$CONTENT_DIR/_index.md" << 'EOF'
+---
+title: "Playlists"
+---
+EOF
+fi
+
+# Clear old playlist pages (keep _index.md)
+echo "Clearing old playlist pages..."
+find "$CONTENT_DIR" -maxdepth 1 -type f -name "*.md" ! -name "_index.md" -delete
+
+echo "Generating playlist pages..."
+
+# Function to escape YAML strings
+escape_yaml() {
+    echo "$1" | sed 's/"/\\"/g' | sed 's/:/\\:/g' | tr -d '\n\r'
+}
+
+# Process each playlist
+cat "$DATA_FILE" | jq -c '.playlists[]' 2>/dev/null | while read -r playlist; do
+    # Skip if playlist is empty
+    if [ -z "$playlist" ] || [ "$playlist" == "null" ]; then
+        continue
+    fi
+    
+    # Extract fields
+    NAME=$(echo "$playlist" | jq -r '.name // "Untitled Playlist"')
+    PLAYLIST_ID=$(echo "$playlist" | jq -r '.id // ""')
+    DESCRIPTION=$(echo "$playlist" | jq -r '.description // ""')
+    IMAGE=$(echo "$playlist" | jq -r '.image // ""')
+    CREATED_AT=$(echo "$playlist" | jq -r '.created_at // 0')
+    TRACKS=$(echo "$playlist" | jq -c '.tracks // []')
+    
+    # Escape YAML strings
+    NAME_ESC=$(echo "$NAME" | sed 's/"/\\"/g')
+    DESCRIPTION_ESC=$(echo "$DESCRIPTION" | sed 's/"/\\"/g' | tr -d '\n\r')
+    IMAGE_ESC=$(echo "$IMAGE" | sed 's/"/\\"/g')
+    
+    # Skip if no name
+    if [ -z "$NAME" ] || [ "$NAME" == "null" ]; then
+        continue
+    fi
+    
+    # Create URL-friendly slug
+    SLUG=$(echo "$NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
+    if [ -z "$SLUG" ]; then
+        SLUG="${PLAYLIST_ID:0:12}"
+    fi
+    
+    # Convert created_at to date
+    if [ "$CREATED_AT" != "null" ] && [ "$CREATED_AT" -gt 0 ] 2>/dev/null; then
+        CREATED_DATE=$(date -d "@$CREATED_AT" "+%Y-%m-%d" 2>/dev/null || echo $(date "+%Y-%m-%d"))
+    else
+        CREATED_DATE=$(date "+%Y-%m-%d")
+    fi
+    
+    # Write the markdown file with escaped values
+    cat > "$CONTENT_DIR/$SLUG.md" <<EOF
+---
+title: "$NAME_ESC"
+date: $CREATED_DATE
+draft: false
+playlist_id: "$PLAYLIST_ID"
+playlist_description: "$DESCRIPTION_ESC"
+playlist_image: "$IMAGE_ESC"
+playlist_tracks: $TRACKS
+playlist_created_at: $CREATED_AT
+---
+EOF
+    
+    echo "✅ Generated: $CONTENT_DIR/$SLUG.md"
+done
+
+echo ""
+echo "📊 Generated playlist pages"

themes/one-pager/assets/css/style.css

@@ -121,25 +121,6 @@ body {
   opacity: 0.6;
 }
 
-[data-theme="dark"] .main-header::before {
-  background:
-  /* Darker overlay for dark mode */
-  linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.7) 0%,
-                  rgba(0, 0, 0, 0.4) 40%,
-                  rgba(0, 0, 0, 0.4) 60%,
-                  rgba(0, 0, 0, 0.7) 100%
-  ),
-  repeating-linear-gradient(
-    33deg,
-    transparent,
-    transparent 50px,
-    var(--accent-yellow) 50px,
-                            var(--accent-yellow) 51px
-  );
-  opacity: 0.7;
-}
 
 /* Decorative '>' character */
 .main-header::after {
@@ -156,6 +137,59 @@ body {
   pointer-events: none;
 }
 
+/* */
+/* */
+/* */
+
+.playlist-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+  /* Dark overlay for readability */
+  linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5) 0%,
+                  rgba(0, 0, 0, 0.25) 40%,
+                  rgba(0, 0, 0, 0.25) 60%,
+                  rgba(0, 0, 0, 0.5) 100%
+  ),
+  /* Cyberpunk pattern */
+  repeating-linear-gradient(
+    33deg,
+    transparent,
+    transparent 50px,
+    var(--accent-yellow) 50px,
+                            var(--accent-yellow) 51px
+  );
+  opacity: 0.6;
+}
+
+/* Decorative '>' character */
+.playlist-header::after {
+  content: '>';
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  z-index: 1;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 900;
+  font-size: 4rem;
+  color: var(--accent-y);
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+
+/* */
+
+
+
 #bannerino {
   filter: grayscale(50%);
   position:absolute;
@@ -217,13 +251,7 @@ body {
 }
 .profile-picture:hover {
     filter: grayscale(0%);
-}
-
-.profile-picture:hover {
-  transform: scale(1.02);
-  box-shadow: 16px 16px 0 var(--accent-yellow);
-  border: 4px solid var(--accent-yellow);
-
+    transform: scale(1.02);
 }
 
 /* Header text container */
@@ -2093,3 +2121,710 @@ button {
 }
 
 /* ============ END CYBERPUNK FOOTER ============ */
+
+/* ============================================
+ *  PLAYLISTS
+ *  ============================================ */
+
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2.5rem;
+}
+
+.playlist-card {
+  background: var(--card-bg);
+  border: 2px solid var(--accent-grey);
+  padding: 1.8rem;
+  transition: all 0.3s ease;
+  transform: skewX(-2deg);
+  box-shadow: 8px 8px 0 var(--accent-grey);
+}
+
+.playlist-card:hover {
+  transform: skewX(0deg) translate(-4px, -4px);
+  box-shadow: 12px 12px 0 var(--accent-grey);
+}
+
+.playlist-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border: 2px solid var(--accent-grey);
+  margin-bottom: 1rem;
+  filter: grayscale(30%);
+  transition: all 0.3s ease;
+}
+
+.playlist-card:hover .playlist-image {
+  filter: grayscale(0%);
+}
+
+.playlist-info h3 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1.3rem;
+  letter-spacing: -1px;
+  margin-bottom: 0.3rem;
+  color: var(--text-primary);
+}
+
+.playlist-description {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.playlist-track-count {
+  display: inline-block;
+  background: var(--accent-grey);
+  color: var(--accent-black);
+  padding: 0.2rem 0.8rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  border-radius: 4px;
+  margin-top: 0.5rem;
+}
+
+.playlist-tracks {
+  margin-top: 1.5rem;
+  border-top: 2px solid var(--accent-grey);
+  padding-top: 1rem;
+}
+
+.playlist-tracks h4 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--accent-yellow);
+  margin-bottom: 1rem;
+  letter-spacing: 1px;
+}
+
+.tracks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.track-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.8rem;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border-left: 3px solid var(--accent-yellow);
+  transition: all 0.3s ease;
+}
+
+.track-item:hover {
+  background: var(--bg-primary);
+  border-left-color: var(--accent-yellow);
+}
+
+.track-thumbnail {
+  width: 50px;
+  height: 50px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid var(--accent-grey);
+}
+
+.track-info {
+  flex: 1;
+  min-width: 150px;
+}
+
+.track-title {
+  display: block;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+.track-artist {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--accent-yellow);
+}
+
+.track-album {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--accent-grey);
+}
+
+.track-duration {
+  font-size: 0.65rem;
+  color: var(--accent-grey);
+  background: var(--tag-bg);
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+}
+
+.track-player {
+  width: 100%;
+  margin-top: 0.5rem;
+  border: 1px solid var(--accent-grey);
+  border-radius: 4px;
+}
+
+.track-item .track-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.3rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .playlists-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .playlist-card {
+    transform: skewX(0deg);
+  }
+
+  .playlist-card:hover {
+    transform: translate(-2px, -2px);
+  }
+
+  .track-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .track-thumbnail {
+    width: 100%;
+    height: 100px;
+  }
+}
+/* ////////  END PLAYLISTS ////////// */
+
+/* ============================================
+ *  PLAYLIST LIST PAGE
+ *  ============================================ */
+
+.playlists-list .section-description {
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+  margin-bottom: 3rem;
+  text-align: center;
+  opacity: 0.8;
+}
+
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2.5rem;
+}
+
+.playlist-card {
+  background: var(--card-bg);
+  border: 2px solid var(--accent-grey);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  transform: skewX(-2deg);
+  box-shadow: 8px 8px 0 var(--accent-grey);
+  position: relative;
+}
+
+.playlist-card:hover {
+  transform: skewX(0deg) translate(-4px, -4px);
+  box-shadow: 12px 12px 0 var(--accent-grey);
+}
+
+.playlist-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.playlist-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-bottom: 3px solid var(--accent-yellow);
+  filter: grayscale(30%);
+  transition: all 0.3s ease;
+}
+
+.playlist-card:hover .playlist-image {
+  filter: grayscale(0%);
+}
+
+.playlist-info {
+  padding: 1.5rem;
+}
+
+.playlist-info h2 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1.3rem;
+  letter-spacing: -1px;
+  color: var(--text-primary);
+  margin-bottom: 0.3rem;
+}
+
+.playlist-description {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.playlist-track-count {
+  display: inline-block;
+  background: var(--accent-grey);
+  color: var(--bg-primary);
+  padding: 0.2rem 0.8rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  border-radius: 4px;
+}
+
+.playlist-hover-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(20px);
+}
+
+.playlist-card:hover .playlist-hover-overlay {
+  opacity: 1;
+}
+
+.playlist-view-btn {
+  padding: 0.8rem 2rem;
+  background: var(--accent-yellow);
+  color: var(--bg-primary);
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  border-radius: 7px;
+  transition: all 0.3s ease;
+  filter: drop-shadow(0 0 20px var(--accent-yellow));
+}
+
+.playlist-view-btn:hover {
+  background: var(--accent-yellow);
+  color: var(--bg-primary);
+  transition: all .3s ease;
+  filter: drop-shadow(0 0 20px var(--accent-yellow));
+}
+
+/* ============================================
+ *  PLAYLIST SINGLE PAGE
+ *  ============================================ */
+
+.playlist-detail {
+  padding-top: 2rem;
+}
+
+.playlist-header {
+  margin-bottom: 3rem;
+  padding: 2rem;
+  background: var(--bg-secondary);
+  border: 2px solid var(--accent-grey);
+  box-shadow: 8px 8px 0 var(--accent-grey);
+  transform: skewX(-2deg);
+}
+
+.playlist-header-content {
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+  flex-wrap: wrap;
+  transform: skewX(2deg);
+}
+
+.playlist-header-image {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border: 3px solid var(--accent-yellow);
+  box-shadow: 4px 4px 0 var(--accent-grey);
+  flex-shrink: 0;
+}
+
+.playlist-header-info h1 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 900;
+  font-size: 2.8rem;
+  letter-spacing: -2px;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  text-shadow: 2px 2px 0 var(--accent-yellow);
+}
+
+.playlist-header-info .playlist-description {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  margin: 0.5rem 0 1rem 0;
+}
+
+.playlist-meta {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.playlist-meta span {
+  font-size: 0.85rem;
+  color: var(--bg-primary);
+  letter-spacing: 1px;
+}
+
+/* Track list */
+.playlist-tracks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.playlist-track-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--card-bg);
+  border: 2px solid var(--accent-grey);
+  transition: all 0.3s ease;
+  transform: skewX(-2deg);
+  box-shadow: 4px 4px 0 var(--accent-grey);
+}
+
+.playlist-track-item:hover {
+  transform: skewX(0deg) translate(-2px, -2px);
+  box-shadow: 6px 6px 0 var(--accent-grey);
+}
+
+.track-number {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: var(--accent-grey);
+  min-width: 30px;
+  text-align: center;
+}
+
+.track-thumbnail {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border: 2px solid var(--accent-grey);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.track-info {
+  flex: 1;
+  min-width: 200px;
+}
+
+.track-title {
+  display: block;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--text-primary);
+}
+
+.track-artist {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--accent-yellow);
+}
+
+.track-album {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--accent-grey);
+}
+
+.track-duration {
+  font-size: 0.7rem;
+  color: var(--accent-grey);
+  background: var(--tag-bg);
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+}
+
+.track-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.2rem;
+}
+
+.track-player-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.track-player {
+  width: 100%;
+  border: 1px solid var(--accent-grey);
+  border-radius: 4px;
+}
+
+.track-share-btn {
+  background: none;
+  border: 1px solid var(--accent-grey);
+  color: var(--text-primary);
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.8rem;
+}
+
+.track-share-btn:hover {
+  border-color: var(--accent-yellow);
+  color: var(--accent-yellow);
+  transform: scale(1.05);
+}
+
+/* Play all button */
+.playlist-actions {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+.playlist-play-all {
+  background: var(--bg-primary);
+  color: var(--accent-yellow) !important;
+  border: 2px solid var(--accent-yellow);
+  padding: .5rem 1.5rem;
+  font-family: poppins,sans-serif;
+  font-weight: 700;
+  font-size: .7rem;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all .3s ease;
+  filter: drop-shadow(0 0 20px var(--accent-yellow));
+  animation: glow 3s infinite alternate;
+}
+
+.playlist-play-all:hover {
+  transform: scale(1.05);
+  background: var(--accent-yellow);
+  color: var(--bg-primary) !important;
+  border-color: var(--accent-yellow);
+}
+
+/* Back link */
+.playlist-back {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.back-link {
+  color: var(--accent-grey);
+  text-decoration: none;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid transparent;
+}
+
+.back-link:hover {
+  color: var(--accent-yellow);
+  border-color: var(--accent-yellow);
+}
+
+.no-tracks {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .playlist-header-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .playlist-header-info h1 {
+    font-size: 2rem;
+  }
+
+  .playlist-header-image {
+    width: 150px;
+    height: 150px;
+  }
+
+  .playlist-meta {
+    justify-content: center;
+  }
+
+  .playlist-track-item {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .track-player-wrapper {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .track-player {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .playlist-play-all {
+    padding: 0.8rem 2rem;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .playlist-header-info h1 {
+    font-size: 1.5rem;
+  }
+
+  .playlist-header-image {
+    width: 120px;
+    height: 120px;
+  }
+
+  .track-thumbnail {
+    width: 40px;
+    height: 40px;
+  }
+
+  .track-title {
+    font-size: 0.85rem;
+  }
+}
+/* ============================================
+ *  NAV STRIP (sub-page header)
+ *  ============================================ */
+
+.nav-strip {
+  position: sticky;
+  top: 0;
+  z-index: 998;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 3px solid var(--accent-yellow);
+  padding: 0.6rem 2rem;
+}
+
+.nav-strip-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.nav-strip-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  text-decoration: none;
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+}
+
+.nav-strip-brand:hover {
+  color: var(--accent-yellow);
+}
+
+.nav-strip-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--accent-yellow);
+  filter: grayscale(100%);
+  transition: filter 0.3s ease;
+}
+
+.nav-strip-brand:hover .nav-strip-avatar {
+  filter: grayscale(0%);
+}
+
+.nav-strip-name {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 0.9rem;
+  letter-spacing: -0.5px;
+  text-transform: uppercase;
+}
+
+.nav-strip-links {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.nav-strip-links a {
+  color: var(--text-primary);
+  text-decoration: none;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 0.7rem;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 0.4rem 0.9rem;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.nav-strip-links a:hover {
+  color: var(--accent-yellow);
+  border-color: var(--accent-yellow);
+  transform: scale(1.05);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .nav-strip {
+    padding: 0.5rem 1rem;
+  }
+  .nav-strip-inner {
+    gap: 0.6rem;
+  }
+  .nav-strip-name {
+    display: none;
+  }
+  .nav-strip-links a {
+    font-size: 0.6rem;
+    padding: 0.3rem 0.6rem;
+    letter-spacing: 1px;
+  }
+}

themes/one-pager/layouts/_default/baseof.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- SEO -->
+    {{ partial "seo.html" . }}
+
+    {{ $style := resources.Get "css/style.css" | resources.Minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+
+</head>
+<body>
+  {{ block "header" . }}{{ end }}
+  <main>
+    {{ block "main" . }}{{ end }}
+  </main>
+
+  {{ partial "footer.html" . }}
+  {{ partial "photo-lightbox.html" . }}
+  {{ partial "music-lightbox.html" . }}
+
+  {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
+  <script src="{{ $js.RelPermalink }}"></script>
+</body>
+</html>

themes/one-pager/layouts/_default/index.html

@@ -0,0 +1,12 @@
+{{ define "header" }}
+{{ partial "header.html" . }}
+{{ end }}
+
+{{ define "main" }}
+
+        {{ partial "blog.html" . }}
+        {{ partial "music.html" . }}
+        {{ partial "pictures.html" . }}
+        {{ partial "videos.html" . }}
+
+{{ end }}

themes/one-pager/layouts/index.html

@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- SEO -->
-    {{ partial "seo.html" . }}
-
-
-    <meta name="robots" content="index" />
-    <meta name="geo.region" content="CH-GE" />
-    <meta name="geo.placename" content="Geneva" />
-    <meta name="geo.position" content="46.203918;6.133011" />
-    <meta name="ICBM" content="46.203918, 6.133011" />
-    <link rel="canonical" href="https://setto.basspistol.com" />
-    <link rel="alternate" hreflang="x-default" href="https://setto.basspistol.com" />
-    {{ $style := resources.Get "css/style.css" | resources.Minify | fingerprint }}
-    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
-
-
-</head>
-<body>
-    {{ partial "header.html" . }}
-    
-    <main>
-
-        {{ partial "blog.html" . }}
-
-        {{ partial "music.html" . }}
-
-        {{ partial "pictures.html" . }}
-
-        {{ partial "videos.html" . }}
-
-    </main>
-
-    {{ partial "footer.html" . }}
-
-    <!-- Custom Lightbox -->
-    <div class="custom-lightbox" id="customLightbox">
-        <span class="custom-lightbox-close" id="lightboxClose">✕</span>
-        <button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
-        <button class="custom-lightbox-next" id="lightboxNext">›</button>
-        <div class="custom-lightbox-content">
-            <img id="lightboxImage" src="" alt="">
-            <div class="custom-lightbox-caption">
-                <span id="lightboxCaption"></span>
-                <span class="lightbox-meta" id="lightboxMeta"></span>
-            </div>
-        </div>
-        <div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
-    </div>
-
-    <!-- Music Lightbox -->
-    <div class="music-lightbox" id="musicLightbox">
-        <div class="music-lightbox-background" id="musicLightboxBg"></div>
-        <button class="music-lightbox-close" id="musicLightboxClose">✕</button>
-
-        <div class="music-lightbox-content">
-            <div class="music-lightbox-album-art">
-                <img id="musicLightboxImage" src="" alt="Album art">
-            </div>
-
-            <div class="music-lightbox-info">
-                <h2 id="musicLightboxTitle">Title</h2>
-                <p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
-                <p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
-
-                <div class="music-lightbox-progress">
-                    <span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
-                    <div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
-                        <div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
-                    </div>
-                    <span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
-                </div>
-
-                <div class="music-lightbox-controls">
-                    <button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
-                    <button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
-                        <span id="musicPlayIcon2">▶</span>
-                    </button>
-                    <button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
-                </div>
-
-                <!-- SHARE BUTTON - -->
-                <div class="music-lightbox-share-row">
-                    <button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
-                        <span class="share-icon">🔗</span>
-                        <span class="share-label">Share</span>
-                    </button>
-                </div>
-
-                <!-- Lyrics -->
-                <div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
-            </div>
-        </div>
-    </div>
-
-
-    {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
-    <script src="{{ $js.RelPermalink }}"></script>
-</body>
-</html>

themes/one-pager/layouts/partials/header.html

@@ -39,12 +39,13 @@
 <!-- Sticky Navigation -->
 <nav class="sticky-nav" id="stickyNav" role="navigation">
     <div class="nav-container">
-        <a href="#" class="nav-brand">
+        <a href="#top" class="nav-brand">
             <span>✦</span> {{ if $displayName }}{{ $displayName | truncate 12 }}{{ else }}{{ .Site.Title }}{{ end }}
         </a>
         <div class="nav-links">
             <a href="#blog"><span>📝 Now</span></a>
             <a href="#music"><span>🎵 Music</span></a>
+            <a href="/playlists/"><span>📀 Playlists</span></a>
             <a href="#pictures"><span>🖼️ Pix</span></a>
             <a href="#videos"><span>🎬 Vidz</span></a>
         </div>
@@ -53,7 +54,7 @@
 
 
 <!-- Main Header -->
-<header class="main-header" style="position:relative;overflow:hidden;">
+<header id="top" class="main-header" style="position:relative;overflow:hidden;">
     <!-- Background image -->
     {{ if $banner }}
     <div id="bannerino" style="background-image:url('{{ $banner }}');"></div>

themes/one-pager/layouts/partials/music-lightbox.html

@@ -0,0 +1,42 @@
+<!-- Music Lightbox -->
+<div class="music-lightbox" id="musicLightbox">
+    <div class="music-lightbox-background" id="musicLightboxBg"></div>
+    <button class="music-lightbox-close" id="musicLightboxClose">✕</button>
+
+    <div class="music-lightbox-content">
+        <div class="music-lightbox-album-art">
+            <img id="musicLightboxImage" src="" alt="Album art">
+        </div>
+
+        <div class="music-lightbox-info">
+            <h2 id="musicLightboxTitle">Title</h2>
+            <p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
+            <p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
+
+            <div class="music-lightbox-progress">
+                <span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
+                <div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
+                    <div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
+                </div>
+                <span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
+            </div>
+
+            <div class="music-lightbox-controls">
+                <button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
+                <button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
+                    <span id="musicPlayIcon2">▶</span>
+                </button>
+                <button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
+            </div>
+
+            <div class="music-lightbox-share-row">
+                <button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
+                    <span class="share-icon">🔗</span>
+                    <span class="share-label">Share</span>
+                </button>
+            </div>
+
+            <div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
+        </div>
+    </div>
+</div>

themes/one-pager/layouts/partials/nav-strip.html

@@ -0,0 +1,30 @@
+{{/* Small persistent navigation strip for sub-pages (playlist list, playlist single, etc.) */}}
+{{ $displayName := "" }}
+{{ $picture := "" }}
+
+{{ range hugo.Data.profile }}
+  {{ range . }}
+    {{ range .tags }}
+      {{ if eq (index . 0) "display_name" }}{{ $displayName = index . 1 }}{{ end }}
+      {{ if eq (index . 0) "picture" }}{{ $picture = index . 1 }}{{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+{{ if not $displayName }}
+  {{ range hugo.Data.profile }}{{ range . }}{{ range .tags }}{{ if eq (index . 0) "name" }}{{ $displayName = index . 1 }}{{ end }}{{ end }}{{ end }}{{ end }}
+{{ end }}
+
+<nav class="nav-strip">
+  <div class="nav-strip-inner">
+    <a href="/" class="nav-strip-brand">
+      {{ if $picture }}
+      <img src="{{ $picture }}" alt="{{ $displayName }}" class="nav-strip-avatar">
+      {{ end }}
+      <span class="nav-strip-name">{{ $displayName | default "Home" }}</span>
+    </a>
+    <div class="nav-strip-links">
+      <a href="/">🏠 Home</a>
+      <a href="/playlists/">📀 Playlists</a>
+    </div>
+  </div>
+</nav>

themes/one-pager/layouts/partials/photo-lightbox.html

@@ -0,0 +1,14 @@
+<!-- Custom Lightbox -->
+<div class="custom-lightbox" id="customLightbox">
+    <span class="custom-lightbox-close" id="lightboxClose">✕</span>
+    <button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
+    <button class="custom-lightbox-next" id="lightboxNext">›</button>
+    <div class="custom-lightbox-content">
+        <img id="lightboxImage" src="" alt="">
+        <div class="custom-lightbox-caption">
+            <span id="lightboxCaption"></span>
+            <span class="lightbox-meta" id="lightboxMeta"></span>
+        </div>
+    </div>
+    <div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
+</div>

themes/one-pager/layouts/partials/playlists.html

@@ -0,0 +1,90 @@
+{{ $playlistsData := index hugo.Data "playlists" }}
+{{ $playlists := index $playlistsData "playlists" }}
+
+{{ if $playlists }}
+<section id="playlists" class="section">
+    <h2>Playlists</h2>
+    
+    <div class="playlists-grid">
+        {{ range $playlistIndex, $playlist := $playlists }}
+            {{/* Debug: show the type and data */}}
+            {{/*
+            <div style="color:var(--accent-yellow);font-size:0.6rem;background:rgba(255,215,0,0.1);padding:0.3rem;margin:0.3rem 0;">
+                Playlist {{ $playlistIndex }}: Type = {{ printf "%T" $playlist }}
+            </div>
+            */}}
+            
+            {{/* Get the actual playlist object - it's the first element of the array */}}
+            {{ $playlistObj := index $playlist 0 }}
+            
+            {{ if $playlistObj }}
+                {{ $name := index $playlistObj "name" | default "Untitled Playlist" }}
+                {{ $description := index $playlistObj "description" | default "" }}
+                {{ $image := index $playlistObj "image" | default "" }}
+                {{ $tracks := index $playlistObj "tracks" | default slice }}
+                
+                <div class="playlist-card">
+                    {{ if $image }}
+                    <img src="{{ $image }}" alt="{{ $name }}" class="playlist-image" loading="lazy">
+                    {{ end }}
+                    
+                    <div class="playlist-info">
+                        <h3>{{ $name }}</h3>
+                        {{ if $description }}
+                        <p class="playlist-description">{{ $description }}</p>
+                        {{ end }}
+                        {{ if $tracks }}
+                        <span class="playlist-track-count">{{ len $tracks }} tracks</span>
+                        {{ end }}
+                    </div>
+                    
+                    {{ if $tracks }}
+                    <div class="playlist-tracks">
+                        <h4>Tracks</h4>
+                        <div class="tracks-list">
+                            {{ range $track := $tracks }}
+                            {{ $trackTitle := index $track "title" | default "Untitled" }}
+                            {{ $trackArtist := index $track "artist" | default "Unknown Artist" }}
+                            {{ $trackAlbum := index $track "album" | default "" }}
+                            {{ $trackImage := index $track "image" | default "" }}
+                            {{ $trackUrl := index $track "url" | default "" }}
+                            {{ $trackDuration := index $track "duration" | default "" }}
+                            {{ $trackTags := index $track "tags" | default slice }}
+                            
+                            <div class="track-item">
+                                {{ if $trackImage }}
+                                <img src="{{ $trackImage }}" alt="{{ $trackTitle }}" class="track-thumbnail" loading="lazy">
+                                {{ end }}
+                                <div class="track-info">
+                                    <span class="track-title">{{ $trackTitle }}</span>
+                                    <span class="track-artist">{{ $trackArtist }}</span>
+                                    {{ if $trackAlbum }}
+                                    <span class="track-album">{{ $trackAlbum }}</span>
+                                    {{ end }}
+                                    {{ if $trackDuration }}
+                                    <span class="track-duration">{{ $trackDuration }}s</span>
+                                    {{ end }}
+                                </div>
+                                {{ if $trackUrl }}
+                                <audio controls preload="none" class="track-player">
+                                    <source src="{{ $trackUrl }}" type="audio/mpeg">
+                                </audio>
+                                {{ end }}
+                                {{ if $trackTags }}
+                                <div class="track-tags">
+                                    {{ range $trackTags }}
+                                    <span class="tag"><span>{{ . }}</span></span>
+                                    {{ end }}
+                                </div>
+                                {{ end }}
+                            </div>
+                            {{ end }}
+                        </div>
+                    </div>
+                    {{ end }}
+                </div>
+            {{ end }}
+        {{ end }}
+    </div>
+</section>
+{{ end }}

themes/one-pager/layouts/partials/seo.html

@@ -88,6 +88,7 @@
 <meta name="twitter:url" content="{{ $permalink }}" />
 <meta name="twitter:title" content="{{ $escapedTitle }}" />
 <meta name="twitter:description" content="{{ $escapedDescription }}" />
+<link rel="alternate" hreflang="x-default" href="https://setto.basspistol.com" />
 {{ if $picture }}
 <meta name="twitter:image" content="{{ $escapedPicture }}" />
 <meta name="twitter:image:alt" content="{{ $escapedTitle }}" />

themes/one-pager/layouts/playlists/list.html

@@ -0,0 +1,42 @@
+{{ define "header" }}
+  {{ partial "nav-strip.html" . }}
+{{ end }}
+
+{{ define "main" }}
+<section class="section playlists-list">
+    <h1>{{ .Title }}</h1>
+    {{ if .Content }}
+      <div class="section-description">{{ .Content }}</div>
+    {{ else }}
+      <p class="section-description">Explore all my curated playlists from the Nostr network</p>
+    {{ end }}
+
+    {{ if .Pages }}
+    <div class="playlists-grid">
+        {{ range .Pages }}
+        {{ $name := .Title }}
+        {{ $description := .Params.playlist_description | default "" }}
+        {{ $image := .Params.playlist_image | default "" }}
+        {{ $tracks := .Params.playlist_tracks | default slice }}
+        <div class="playlist-card">
+            <a href="{{ .RelPermalink }}" class="playlist-link">
+                {{ if $image }}
+                <img src="{{ $image }}" alt="{{ $name }}" class="playlist-image" loading="lazy">
+                {{ end }}
+                <div class="playlist-info">
+                    <h2>{{ $name }}</h2>
+                    {{ if $description }}<p class="playlist-description">{{ $description }}</p>{{ end }}
+                    {{ if $tracks }}<span class="playlist-track-count">{{ len $tracks }} tracks</span>{{ end }}
+                </div>
+                <div class="playlist-hover-overlay">
+                    <span class="playlist-view-btn">▶ View Playlist</span>
+                </div>
+            </a>
+        </div>
+        {{ end }}
+    </div>
+    {{ else }}
+    <p class="no-tracks">No playlists found. Run <code>./fetch-playlist.sh</code> and <code>./generate-playlist-pages.sh</code>.</p>
+    {{ end }}
+</section>
+{{ end }}

themes/one-pager/layouts/playlists/single.html

@@ -0,0 +1,174 @@
+{{ define "header" }}
+  {{ $name := .Title }}
+  {{ $image := .Params.playlist_image | default "" }}
+
+  {{/* Small nav strip with avatar + home + playlists links */}}
+  {{ partial "nav-strip.html" . }}
+
+  <header class="playlist-header" style="min-height: unset; max-height: 25vh;">
+      {{ if $image }}
+      <div id="bannerino"></div>
+      <div id="texture"></div>
+      {{ end }}
+      <div class="header-content">
+          <div class="header-profile"></div>
+      </div>
+  </header>
+{{ end }}
+{{ define "main" }}
+  {{ $name := .Title }}
+  {{ $description := .Params.playlist_description | default "" }}
+  {{ $image := .Params.playlist_image | default "" }}
+  {{ $tracks := .Params.playlist_tracks | default slice }}
+  {{ $created_at := .Params.playlist_created_at | default 0 }}
+
+  <style>
+    #bannerino { background-image: url('{{ $image }}'); }
+  </style>
+
+  <section class="section playlist-detail">
+      <div class="playlist-header">
+          <div class="playlist-header-content">
+              {{ if $image }}
+              <img src="{{ $image }}" alt="{{ $name }}" class="playlist-header-image" loading="lazy">
+              {{ end }}
+              <div class="playlist-header-info">
+                  <h1>{{ $name }}</h1>
+                  {{ if $description }}
+                  <p class="playlist-description">{{ $description }}</p>
+                  {{ end }}
+                  <div class="playlist-meta">
+                      <span class="playlist-track-count">🎵 {{ len $tracks }} tracks</span>
+                      {{ if $created_at }}
+                      <span class="playlist-track-count">📅 {{ dateFormat "January 2, 2006" (time $created_at) }}</span>
+                      {{ end }}
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      {{ if $tracks }}
+      <div class="playlist-actions">
+          <button class="playlist-play-all" id="playlistPlayAll">
+              <span>▶</span> Play All Tracks
+          </button>
+      </div>
+      {{ end }}
+
+      <div class="music-grid" id="playlistTrackGrid"></div>
+
+      <div class="playlist-back">
+          <a href="/playlists/" class="back-link">← Back to All Playlists</a>
+      </div>
+  </section>
+
+  {{/* FIX: safeJS prevents Hugo from HTML-escaping the JSON */}}
+  <script>
+    window.playlistOriginalTracks = {{ $tracks | jsonify | safeJS }};
+    console.log('[playlist] raw tracks injected:', window.playlistOriginalTracks.length);
+  </script>
+
+  <script>
+  document.addEventListener('DOMContentLoaded', function () {
+    console.log('[playlist] DOMContentLoaded fired');
+    console.log('[playlist] openMusicLightbox exists?', typeof openMusicLightbox);
+    console.log('[playlist] initMusicEventListeners exists?', typeof initMusicEventListeners);
+
+    const rawTracks = window.playlistOriginalTracks || [];
+
+    window.musicPlaylist = rawTracks
+      .filter(t => t && t.url)
+      .map(t => ({
+        id: t.id || '',
+        title: t.title || 'Untitled',
+        url: t.url,
+        image: t.image || '',
+        artist: t.artist || 'Unknown Artist',
+        album: t.album || '',
+        duration: parseFloat(t.duration) || 0,
+        created_at: t.created_at || 0,
+        content: t.content || ''
+      }));
+
+    console.log('[playlist] musicPlaylist built with', window.musicPlaylist.length, 'tracks');
+
+    renderPlaylistGrid('playlistTrackGrid');
+
+    const playAll = document.getElementById('playlistPlayAll');
+    if (playAll) {
+      playAll.addEventListener('click', function () {
+        console.log('[playlist] play-all clicked');
+        if (typeof openMusicLightbox === 'function') openMusicLightbox(0);
+      });
+    }
+  });
+
+function renderPlaylistGrid(containerId) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+
+  const tracks = window.musicPlaylist || [];
+  container.innerHTML = '';
+
+  tracks.forEach((track, index) => {
+    let genreTags = [];
+    let content = '';
+
+    const raw = (window.playlistOriginalTracks || []).find(t => t.url === track.url);
+    if (raw) {
+      // Frontmatter tags are already flat strings; homepage tags are arrays
+      if (raw.tags) {
+        raw.tags.forEach(tag => {
+          if (typeof tag === 'string') {
+            genreTags.push(tag);
+          } else if (Array.isArray(tag) && tag[0] === 't') {
+            genreTags.push(tag[1]);
+          }
+        });
+      }
+      content = raw.content || '';
+    }
+
+    const card = document.createElement('div');
+    card.className = 'music-card clickable';
+    card.dataset.playlistIndex = index;
+
+    card.addEventListener('click', function (e) {
+      if (e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) return;
+      const idx = parseInt(this.dataset.playlistIndex, 10);
+      if (!isNaN(idx) && typeof openMusicLightbox === 'function') {
+        openMusicLightbox(idx);
+      }
+    });
+
+    card.innerHTML = `
+      <div class="music-card-inner">
+        <div class="music-image-wrapper">
+          ${track.image ? `<img src="${track.image}" alt="${track.title}" class="music-image" loading="lazy">` : ''}
+          <div class="music-play-overlay"><span class="music-play-btn">▶</span></div>
+        </div>
+        <div class="music-info-header">
+          <h4>${track.title}</h4>
+          ${track.artist ? `<p class="music-artist">${track.artist}</p>` : ''}
+          ${track.album ? `<p class="music-album">${track.album}</p>` : ''}
+        </div>
+        ${genreTags.length > 0 ? `
+          <div class="music-tags">
+            ${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')}
+          </div>
+        ` : ''}
+        ${content ? `
+          <button class="lyrics-toggle"><span>Show Info</span></button>
+          <div class="lyrics" style="display: none;">${content.replace(/\n/g, '<br>')}</div>
+        ` : ''}
+      </div>
+    `;
+    container.appendChild(card);
+  });
+
+  if (typeof initMusicEventListeners === 'function') {
+    initMusicEventListeners();
+  }
+}
+  </script>
+{{ end }}