slice up the header

render playlists pages
make nav clickable
2026-08-16 15:16:28 +02:00 · 2026-08-16 15:15:57 +02:00 · 2026-08-16 15:15:41 +02:00 · 2026-08-16 14:49:45 +02:00 · 2026-08-16 14:47:51 +02:00
10 changed files with 722 additions and 45 deletions
--- a/.gitignore
+++ b/.gitignore
@ -5,3 +5,4 @@ data
 fetch-and-convert.sh
 deploy.sh
 hugo.toml
+content/playlists
--- a/generate-playlist-pages.sh
+++ b/generate-playlist-pages.sh
@ -0,0 +1,67 @@
+#!/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
+
+# 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)
+find "$CONTENT_DIR" -maxdepth 1 -type f -name "*.md" ! -name "_index.md" -delete
+
+# Process each playlist
+cat "$DATA_FILE" | jq -c '.playlists[]' | while read -r playlist; do
+    NAME=$(echo "$playlist" | jq -r '.name // "Untitled Playlist"')
+    SLUG=$(echo "$NAME" | tr ' ' '-' | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]//g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
+    
+    # If slug is empty, use the ID
+    if [ -z "$SLUG" ] || [ "$SLUG" = "untitled-playlist" ]; then
+        SLUG=$(echo "$playlist" | jq -r '.id' | head -c 12)
+    fi
+    
+    DESCRIPTION=$(echo "$playlist" | jq -r '.description // ""')
+    IMAGE=$(echo "$playlist" | jq -r '.image // ""')
+    TRACKS=$(echo "$playlist" | jq -c '.tracks')
+    PLAYLIST_ID=$(echo "$playlist" | jq -r '.id')
+    CREATED_AT=$(echo "$playlist" | jq -r '.created_at')
+    
+    # Convert created_at to date
+    CREATED_DATE=$(date -d "@$CREATED_AT" "+%Y-%m-%d" 2>/dev/null || echo $(date "+%Y-%m-%d"))
+    
+    cat > "$CONTENT_DIR/$SLUG.md" <<EOF
+---
+title: "$NAME"
+date: $CREATED_DATE
+draft: false
+playlist_id: "$PLAYLIST_ID"
+playlist_description: "$DESCRIPTION"
+playlist_image: "$IMAGE"
+playlist_tracks: $TRACKS
+playlist_created_at: $CREATED_AT
+---
+EOF
+    
+    echo "✅ Generated: $CONTENT_DIR/$SLUG.md"
+done
+
+echo ""
+echo "📊 Generated $(find "$CONTENT_DIR" -maxdepth 1 -type f -name "*.md" ! -name "_index.md" | wc -l) playlist pages"
--- a/themes/one-pager/assets/css/style.css
+++ b/themes/one-pager/assets/css/style.css
@ -2277,3 +2277,423 @@ button {
  }
 }
 /* ////////  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-yellow);
+}
+
+.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-yellow);
+  color: var(--accent-black);
+  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(4px);
+}
+
+.playlist-card:hover .playlist-hover-overlay {
+  opacity: 1;
+}
+
+.playlist-view-btn {
+  padding: 0.8rem 2rem;
+  background: var(--accent-yellow);
+  color: var(--accent-black);
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  border: 2px solid var(--accent-grey);
+  transform: skewX(-33deg);
+  transition: all 0.3s ease;
+}
+
+.playlist-view-btn:hover {
+  transform: skewX(-33deg) scale(1.1);
+  background: var(--accent-black);
+  color: var(--accent-yellow);
+  border-color: 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(--accent-grey);
+  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-yellow);
+}
+
+.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: 150px;
+  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(--accent-yellow);
+  color: var(--accent-black);
+  border: 2px solid var(--accent-grey);
+  padding: 1rem 3rem;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  transform: skewX(-33deg);
+  box-shadow: 6px 6px 0 var(--accent-grey);
+}
+
+.playlist-play-all:hover {
+  transform: skewX(-33deg) scale(1.05);
+  background: var(--accent-black);
+  color: var(--accent-yellow);
+  border-color: var(--accent-yellow);
+  box-shadow: 8px 8px 0 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;
+  }
+}
--- a/themes/one-pager/assets/js/scripts.js
+++ b/themes/one-pager/assets/js/scripts.js
@ -933,20 +933,25 @@ document.addEventListener('DOMContentLoaded', function() {
    });
  });

-  // Smooth scrolling for navigation links (both main nav and sticky nav)
+  // Smooth scrolling for navigation links (only for # anchors)
  document.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', function(e) {
-      e.preventDefault();
-      const targetId = this.getAttribute('href');
-      const targetElement = document.querySelector(targetId);
-      if (targetElement) {
-        const navHeight = stickyNav.offsetHeight;
-        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
-        window.scrollTo({
-          top: targetPosition,
-          behavior: 'smooth'
-        });
+      const href = this.getAttribute('href');
+      // Only intercept if it's a # anchor link
+      if (href && href.startsWith('#')) {
+        e.preventDefault();
+        const targetId = href;
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+          const navHeight = stickyNav.offsetHeight;
+          const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+        }
      }
+      // If it's a regular link (like /playlists/), let it navigate normally
    });
  });

--- a/themes/one-pager/layouts/_default/baseof.html
+++ b/themes/one-pager/layouts/_default/baseof.html
@ -0,0 +1,36 @@
+<!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" . }}
+
+
+
+
+    {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
+    <script src="{{ $js.RelPermalink }}"></script>
+
+
+</body>
+</html>
--- a/themes/one-pager/layouts/_default/index.html
+++ b/themes/one-pager/layouts/_default/index.html
@ -1,28 +1,8 @@
-<!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" . }}
+{{ define "header" }}
+{{ partial "header.html" . }}
+{{ end }}

-
-    <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>
+{{ define "main" }}

        {{ partial "blog.html" . }}

@ -32,11 +12,7 @@

        {{ partial "videos.html" . }}

-    </main>
-
-    {{ partial "footer.html" . }}
-
-    <!-- Custom Lightbox -->
+        <!-- Custom Lightbox -->
    <div class="custom-lightbox" id="customLightbox">
        <span class="custom-lightbox-close" id="lightboxClose">✕</span>
        <button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
@ -96,8 +72,4 @@
        </div>
    </div>

-
-    {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
-    <script src="{{ $js.RelPermalink }}"></script>
-</body>
-</html>
+{{ end }}
--- a/themes/one-pager/layouts/partials/header.html
+++ b/themes/one-pager/layouts/partials/header.html
@ -45,6 +45,7 @@
        <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>
--- a/themes/one-pager/layouts/partials/seo.html
+++ b/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 }}" />
--- a/themes/one-pager/layouts/playlists/list.html
+++ b/themes/one-pager/layouts/playlists/list.html
@ -0,0 +1,37 @@
+{{ define "main" }}
+<section class="section playlists-list">
+    <h1>Playlists</h1>
+    <p class="section-description">Explore all my curated playlists from the Nostr network</p>
+    
+    <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>
+</section>
+{{ end }}
--- a/themes/one-pager/layouts/playlists/single.html
+++ b/themes/one-pager/layouts/playlists/single.html
@ -0,0 +1,137 @@
+{{ 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 }}
+
+<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-created">📅 {{ dateFormat "January 2, 2006" (time $created_at) }}</span>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="playlist-tracks-list">
+        {{ if $tracks }}
+            {{ range $index, $track := $tracks }}
+            <div class="playlist-track-item">
+                <div class="track-number">{{ add $index 1 }}</div>
+                {{ if $track.image }}
+                <img src="{{ $track.image }}" alt="{{ $track.title }}" class="track-thumbnail" loading="lazy">
+                {{ end }}
+                <div class="track-info">
+                    <span class="track-title">{{ $track.title | default "Untitled" }}</span>
+                    <span class="track-artist">{{ $track.artist | default "Unknown Artist" }}</span>
+                    {{ if $track.album }}
+                    <span class="track-album">{{ $track.album }}</span>
+                    {{ end }}
+                    {{ if $track.duration }}
+                    <span class="track-duration">{{ $track.duration }}s</span>
+                    {{ end }}
+                    {{ if $track.tags }}
+                    <div class="track-tags">
+                        {{ range $track.tags }}
+                        <span class="tag"><span>{{ . }}</span></span>
+                        {{ end }}
+                    </div>
+                    {{ end }}
+                </div>
+                <div class="track-player-wrapper">
+                    {{ if $track.url }}
+                    <audio controls preload="none" class="track-player">
+                        <source src="{{ $track.url }}" type="audio/mpeg">
+                    </audio>
+                    {{ end }}
+                    {{ if $track.id }}
+                    <button class="track-share-btn" onclick="copyTrackLink('{{ $track.id }}')" title="Share this track">
+                        <span>🔗</span>
+                    </button>
+                    {{ end }}
+                </div>
+            </div>
+            {{ end }}
+        {{ else }}
+            <p class="no-tracks">No tracks found for this playlist.</p>
+        {{ end }}
+    </div>
+    
+    {{ if $tracks }}
+    <div class="playlist-actions">
+        <button class="playlist-play-all" onclick="playAllTracks()">
+            <span>▶</span> Play All Tracks
+        </button>
+    </div>
+    {{ end }}
+    
+    <div class="playlist-back">
+        <a href="/playlists/" class="back-link">← Back to All Playlists</a>
+    </div>
+</section>
+
+<script>
+function copyTrackLink(trackId) {
+    const url = `https://nostr.basspistol.org/notes/${trackId}`;
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(url).then(() => {
+            const btn = event.target.closest('.track-share-btn');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = '✓';
+            setTimeout(() => {
+                btn.innerHTML = originalText;
+            }, 2000);
+        }).catch(() => {
+            fallbackCopy(url);
+        });
+    } else {
+        fallbackCopy(url);
+    }
+}
+
+function fallbackCopy(url) {
+    const textArea = document.createElement('textarea');
+    textArea.value = url;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    const btn = event.target.closest('.track-share-btn');
+    const originalText = btn.innerHTML;
+    btn.innerHTML = '✓';
+    setTimeout(() => {
+        btn.innerHTML = originalText;
+    }, 2000);
+}
+
+function playAllTracks() {
+    const players = document.querySelectorAll('.track-player');
+    if (players.length === 0) return;
+    
+    let current = 0;
+    function playNext() {
+        if (current >= players.length) return;
+        const player = players[current];
+        player.play();
+        player.onended = function() {
+            current++;
+            playNext();
+        };
+    }
+    playNext();
+}
+</script>
+{{ end }}
Author	SHA1	Message	Date
sakrecoer	4df2e1fa37	slice up the header	2026-08-16 15:16:28 +02:00
sakrecoer	f0e8bafc4c	render playlists pages	2026-08-16 15:15:57 +02:00
sakrecoer	1c35e99ed2	make nav clickable	2026-08-16 15:15:41 +02:00
sakrecoer	3daecd6eea	split up index to fit baseof.html	2026-08-16 14:49:45 +02:00
sakrecoer	9cb2b8337e	add the playlist styles	2026-08-16 14:47:51 +02:00