From 9cb2b8337ef7f00b35a4174b4821dca866f4af79 Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 14:47:51 +0200 Subject: [PATCH 1/5] add the playlist styles --- themes/one-pager/assets/css/style.css | 420 ++++++++++++++++++++++++++ 1 file changed, 420 insertions(+) diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css index a4186f1..964c708 100644 --- 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; + } +} From 3daecd6eeaaae2268087f6ea5a8bec8708b4c5c9 Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 14:49:45 +0200 Subject: [PATCH 2/5] split up index to fit baseof.html --- themes/one-pager/layouts/_default/baseof.html | 35 +++++++++++++++++ .../layouts/{ => _default}/index.html | 38 ++----------------- themes/one-pager/layouts/partials/seo.html | 1 + 3 files changed, 39 insertions(+), 35 deletions(-) create mode 100644 themes/one-pager/layouts/_default/baseof.html rename themes/one-pager/layouts/{ => _default}/index.html (74%) diff --git a/themes/one-pager/layouts/_default/baseof.html b/themes/one-pager/layouts/_default/baseof.html new file mode 100644 index 0000000..50a2fa7 --- /dev/null +++ b/themes/one-pager/layouts/_default/baseof.html @@ -0,0 +1,35 @@ + + + + + + + {{ partial "seo.html" . }} + + {{ $style := resources.Get "css/style.css" | resources.Minify | fingerprint }} + + + + + + + + {{ partial "header.html" . }} + +
+ + {{ block "main" . }}{{ end }} + +
+ + {{ partial "footer.html" . }} + + + + + {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }} + + + + + diff --git a/themes/one-pager/layouts/index.html b/themes/one-pager/layouts/_default/index.html similarity index 74% rename from themes/one-pager/layouts/index.html rename to themes/one-pager/layouts/_default/index.html index e98fd97..cd72782 100644 --- a/themes/one-pager/layouts/index.html +++ b/themes/one-pager/layouts/_default/index.html @@ -1,28 +1,4 @@ - - - - - - - {{ partial "seo.html" . }} - - - - - - - - - - {{ $style := resources.Get "css/style.css" | resources.Minify | fingerprint }} - - - - - - {{ partial "header.html" . }} - -
+{{ define "main" }} {{ partial "blog.html" . }} @@ -32,11 +8,7 @@ {{ partial "videos.html" . }} -
- - {{ partial "footer.html" . }} - - +
✕ @@ -96,8 +68,4 @@
- - {{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }} - - - +{{ end }} diff --git a/themes/one-pager/layouts/partials/seo.html b/themes/one-pager/layouts/partials/seo.html index b20bcf0..37ba8ea 100644 --- a/themes/one-pager/layouts/partials/seo.html +++ b/themes/one-pager/layouts/partials/seo.html @@ -88,6 +88,7 @@ + {{ if $picture }} From 1c35e99ed2abc9fb7369a7d1fec1c6287a2cc29f Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 15:15:41 +0200 Subject: [PATCH 3/5] make nav clickable --- themes/one-pager/assets/js/scripts.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index 3e6ecd1..e6b6e5e 100644 --- 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 }); }); From f0e8bafc4c5d53b64e5ad4e7285a429c6f739731 Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 15:15:57 +0200 Subject: [PATCH 4/5] render playlists pages --- .gitignore | 1 + generate-playlist-pages.sh | 67 +++++++++ themes/one-pager/layouts/playlists/list.html | 37 +++++ .../one-pager/layouts/playlists/single.html | 137 ++++++++++++++++++ 4 files changed, 242 insertions(+) create mode 100755 generate-playlist-pages.sh create mode 100644 themes/one-pager/layouts/playlists/list.html create mode 100644 themes/one-pager/layouts/playlists/single.html diff --git a/.gitignore b/.gitignore index e7d733d..6f9b8e5 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ data fetch-and-convert.sh deploy.sh hugo.toml +content/playlists diff --git a/generate-playlist-pages.sh b/generate-playlist-pages.sh new file mode 100755 index 0000000..affb3f1 --- /dev/null +++ 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" < +

Playlists

+

Explore all my curated playlists from the Nostr network

+ +
+ {{ range .Pages }} + {{ $name := .Title }} + {{ $description := .Params.playlist_description | default "" }} + {{ $image := .Params.playlist_image | default "" }} + {{ $tracks := .Params.playlist_tracks | default slice }} + +
+ + {{ if $image }} + {{ $name }} + {{ end }} + +
+

{{ $name }}

+ {{ if $description }} +

{{ $description }}

+ {{ end }} + {{ if $tracks }} + {{ len $tracks }} tracks + {{ end }} +
+ +
+ ▶ View Playlist +
+ +
+ {{ end }} +
+ +{{ end }} \ No newline at end of file diff --git a/themes/one-pager/layouts/playlists/single.html b/themes/one-pager/layouts/playlists/single.html new file mode 100644 index 0000000..9c2a107 --- /dev/null +++ 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 }} + +
+
+
+ {{ if $image }} + {{ $name }} + {{ end }} +
+

{{ $name }}

+ {{ if $description }} +

{{ $description }}

+ {{ end }} +
+ 🎵 {{ len $tracks }} tracks + {{ if $created_at }} + 📅 {{ dateFormat "January 2, 2006" (time $created_at) }} + {{ end }} +
+
+
+
+ +
+ {{ if $tracks }} + {{ range $index, $track := $tracks }} +
+
{{ add $index 1 }}
+ {{ if $track.image }} + {{ $track.title }} + {{ end }} +
+ {{ $track.title | default "Untitled" }} + {{ $track.artist | default "Unknown Artist" }} + {{ if $track.album }} + {{ $track.album }} + {{ end }} + {{ if $track.duration }} + {{ $track.duration }}s + {{ end }} + {{ if $track.tags }} +
+ {{ range $track.tags }} + {{ . }} + {{ end }} +
+ {{ end }} +
+
+ {{ if $track.url }} + + {{ end }} + {{ if $track.id }} + + {{ end }} +
+
+ {{ end }} + {{ else }} +

No tracks found for this playlist.

+ {{ end }} +
+ + {{ if $tracks }} +
+ +
+ {{ end }} + +
+ ← Back to All Playlists +
+
+ + +{{ end }} \ No newline at end of file From 4df2e1fa37a213c51852b22d1f0c4cdd506c13bd Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Sun, 16 Aug 2026 15:16:28 +0200 Subject: [PATCH 5/5] slice up the header --- themes/one-pager/layouts/_default/baseof.html | 3 ++- themes/one-pager/layouts/_default/index.html | 4 ++++ themes/one-pager/layouts/partials/header.html | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/themes/one-pager/layouts/_default/baseof.html b/themes/one-pager/layouts/_default/baseof.html index 50a2fa7..a5bf90d 100644 --- a/themes/one-pager/layouts/_default/baseof.html +++ b/themes/one-pager/layouts/_default/baseof.html @@ -14,7 +14,8 @@ - {{ partial "header.html" . }} + {{ block "header" . }}{{ end }} +
diff --git a/themes/one-pager/layouts/_default/index.html b/themes/one-pager/layouts/_default/index.html index cd72782..5930d41 100644 --- a/themes/one-pager/layouts/_default/index.html +++ b/themes/one-pager/layouts/_default/index.html @@ -1,3 +1,7 @@ +{{ define "header" }} +{{ partial "header.html" . }} +{{ end }} + {{ define "main" }} {{ partial "blog.html" . }} diff --git a/themes/one-pager/layouts/partials/header.html b/themes/one-pager/layouts/partials/header.html index ef94269..c9c7db2 100644 --- a/themes/one-pager/layouts/partials/header.html +++ b/themes/one-pager/layouts/partials/header.html @@ -45,6 +45,7 @@
📝 Now 🎵 Music + 📀 Playlists 🖼️ Pix 🎬 Vidz