now-playing/layouts/index.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" }}
            {{ $coverBackup := $original.Resize "x320 jpeg q69" }}
            {{ $cover2x := $original.Resize "x640 webp" }}
            {{ $cover2xBackup := $original.Resize "x640 jpeg q69" }}
            {{ $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>
                <picture class="catalog-item__visual">
                  <source srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x" type="image/webp">
                  <source srcset="{{ $coverBackup.Permalink }} 1x, {{ $cover2xBackup.Permalink }} 2x" type="image/jpeg">
                  <img

                  width="320"
                  height="320"
                  style="
                    background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
                    view-transition-name: album_cover_{{ .File.BaseFileName }};
                  "
                  src="{{ $coverBackup.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"
                  >
                </picture>
              </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 }}