mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-11-12 20:31:53 +00:00
86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
{{ define "metaTitle" }}
|
|
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" "a") }}
|
|
<title>{{ if (not $paginator.HasPrev) }}{{ .Site.Title }} ∴ {{ .Site.Params.author.name }}'s Handpicked Albums Collection{{ else }}{{ .Site.Title }} ∴ Albums (Page {{ $paginator.PageNumber }}) {{ end }}</title>
|
|
<meta name="description" content="{{ .Site.Params.description }}">
|
|
{{ if (not $paginator.HasPrev) }}
|
|
<link rel="preload" href="/images/illustration.svg" as="image" type="image/svg+xml" />
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ define "main" }}
|
|
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" "a") }}
|
|
<main>
|
|
{{ if and .IsHome (not $paginator.HasPrev) }}
|
|
<div class="home-head">
|
|
<div class="container">
|
|
<div class="home-head__container">
|
|
<h1 class="home-head__title">Handpicked Albums</h1>
|
|
<p class="home-head__subtitle">A collection by {{ .Site.Params.author.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="catalog-head">
|
|
<div class="container">
|
|
<h1 class="catalog-head__title">
|
|
<span class="catalog-head__title--primary">Albums</span>
|
|
<span class="catalog-head__title--secondary">Page {{ $paginator.PageNumber }}</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
|
|
<!-- Album list -->
|
|
<div class="content">
|
|
<div class="container">
|
|
<div class="grid grid-catalog">
|
|
{{ range $albumIndex, $album := sort $paginator.Pages "Date" "desc" }}
|
|
{{ $original := resources.Get .Params.cover }}
|
|
{{ $originalPermalink := $original.Permalink }}
|
|
{{ $cover := $original.Resize "x320 webp" }}
|
|
{{ $cover2x := $original.Resize "x640 webp" }}
|
|
{{ $placeholder := $cover.Resize "x1 png" }}
|
|
<div class="catalog-item">
|
|
<a class="catalog-item__content" href="{{ .Permalink }}">
|
|
<h2 class="catalog-item__album" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h2>
|
|
<div class="catalog-item__artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</div>
|
|
<img
|
|
class="catalog-item__visual"
|
|
width="320"
|
|
height="320"
|
|
style="
|
|
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
|
|
view-transition-name: album_cover_{{ .File.BaseFileName }};
|
|
"
|
|
src="{{ $cover.Permalink }}"
|
|
srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
|
|
{{ if ( gt $albumIndex 3) }}
|
|
loading="lazy"
|
|
decoding="async"
|
|
{{ end }}
|
|
alt="{{ .Title }} album's cover"
|
|
title="{{ .Title }} album's cover"
|
|
>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{ partial "pagination" . }}
|
|
</div>
|
|
</div>
|
|
<!-- About -->
|
|
{{ if and (not $paginator.HasPrev) (eq .Site.Params.author.name .Site.Params.creator.name) }}
|
|
<section class="home-about">
|
|
<div class="container">
|
|
<h2 class="visually-hidden">About</h2>
|
|
<p>At {{ .Site.Params.author.name }} we love music, I mean we <strong class="semibold">LOVE</strong> music! And we also LOVE great album covers. So we decided to make a place where we can showcase albums dear to us.</p>
|
|
<p>
|
|
This is <strong class="semibold">Now Playing</strong>, our little favorite albums collection.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
</main>
|
|
|
|
{{ end }}
|