1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-12-21 08:01:56 +00:00
now-playing/layouts/index.html
2023-02-21 22:04:00 +01:00

83 lines
3.3 KiB
HTML

{{ define "metaTitle" }}
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" "a") }}
<title>{{ if (not $paginator.HasPrev) }}{{ .Site.Title }} ∴ Handpicked Albums by Guérilla.Studio{{ 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 Guérilla.Studio</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">{{ .Title }}</h2>
<div class="catalog-item__artist">by {{ .Params.artist }}</div>
<img
class="catalog-item__visual"
width="320"
height="320"
style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
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 not $paginator.HasPrev }}
<section class="home-about">
<div class="container">
<h2 class="visually-hidden">About</h2>
<p>At Guérilla 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 }}