setto-nostr-web/themes/one-pager/layouts/playlists/list.html
2026-08-16 23:09:07 +02:00

107 lines
3.3 KiB
HTML

{{ define "header" }}
{{ $displayName := "" }}
{{ $name := "" }}
{{ $picture := "" }}
{{ $banner := "" }}
{{ $about := "" }}
{{ $website := "" }}
{{ $nip05 := "" }}
{{ $lud16 := "" }}
{{ range hugo.Data.profile }}
{{ range . }}
{{ range .tags }}
{{ if eq (index . 0) "display_name" }}
{{ $displayName = index . 1 }}
{{ else if eq (index . 0) "name" }}
{{ $name = index . 1 }}
{{ else if eq (index . 0) "picture" }}
{{ $picture = index . 1 }}
{{ else if eq (index . 0) "banner" }}
{{ $banner = index . 1 }}
{{ else if eq (index . 0) "about" }}
{{ $about = index . 1 }}
{{ else if eq (index . 0) "website" }}
{{ $website = index . 1 }}
{{ else if eq (index . 0) "nip05" }}
{{ $nip05 = index . 1 }}
{{ else if eq (index . 0) "lud16" }}
{{ $lud16 = index . 1 }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<!-- If display_name is empty, use name -->
{{ if not $displayName }}
{{ $displayName = $name }}
{{ end }}
<!-- Main Header -->
<header class="playlist-header" style="min-height: unset;max-height:25vh;">
<!-- Background image -->
{{ if $banner }}
<div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
<!-- Dark overlay for readability -->
<div id="texture"></div>
{{ end }}
<!-- Decorative '>' -->
<div></div>
<div class="header-content">
<div class="header-profile">
{{ if $picture }}
<a href="/" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
{{ end }}
</div>
</div>
</header>
{{ end }}
{{ define "main" }}
<section class="section playlists-list">
<h2>Playlists</h2>
<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">▶ Listen</span>
</div>
</a>
</div>
{{ end }}
</div>
</section>
{{ end }}