now-playing/layouts/_default/single.html

{{ define "metaTitle" }}
  <title>{{ .Title }} ∴ {{ .Site.Title }}</title>
  <meta name="description" content="Listen to this album on Now Playing">
{{ end }}
{{ define "metaSocial" }}
  {{ $original := resources.Get .Params.cover }}
  {{ $cover := $original.Resize "x1000" }}
  <!-- opengraph -->
  <meta property="og:type" content="music.album">
  <meta property="og:title" content="{{ .Title }} by {{ .Params.artist }}">
  <meta property="og:description" content="Listen to this album on Now Playing">
  <meta property="og:url" content="{{ .Permalink }}">
  <meta property="og:image" content="{{ $cover.Permalink }}">
  <meta property="og:image:height" content="1000">
  <meta property="og:image:width" content="1000">
  <meta property="music:musician" content="{{ .Params.artist }}">
  <meta property="music:song:url" content="{{ .Permalink }}">

  <!-- twitter card -->
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="{{ .Title }} by {{ .Params.artist }}" />
  <meta name="twitter:description" content="Listen to this album on Now Playing" />
  <meta name="twitter:image" content="{{ $cover.Permalink }}" />
{{ end }}
{{ define "main" }}
<main>
  <div class="album">
    <div class="container">
      <div class="album-layout">
        <picture class="album-cover">
          {{ $original := resources.Get .Params.cover }}
          {{ $coverSmall := $original.Resize "x250 webp" }}
          {{ $coverMedium := $original.Resize "x500 webp" }}
          {{ $coverBig := $original.Resize "x1000 webp" }}
          {{ $placeholder := $original.Resize "x1" }}
          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)">
          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)">
          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)">
          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)">
          <img
            class="album-cover__visual"
            width="500"
            height="500"
            style="
              background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
              view-transition-name: album_cover_{{ .File.BaseFileName }};
            "
            src="{{ $coverMedium.Permalink }}"
            loading="lazy"
            alt="{{ .Title }} album's cover"
            title=":)"
          >
        </picture>
        <div class="album-infos">
          <h1 class="album-name" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h1>
          <strong class="album-artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</strong>
          <ul class="album-tags">
            {{ range .Params.styles }}
              <li class="album-tags__item">{{ . }}</li>
            {{ end }}
          </ul>

          <div class="album-links">
            Listen on&nbsp;:
            {{ if not (.Params.links.spotify | or .Params.links.youtube | or .Params.links.applemusic | or .Params.links.soundcloud | or .Params.links.bandcamp | or .Params.links.deezer) }}
            <div>
              There are no links (for now~)
            </div>
            {{ else }}
              <div class="album-links__list">
                {{ if .Params.links.bandcamp }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Bandcamp" data-tooltip="Bandcamp" href="{{ .Params.links.bandcamp }}" target="_blank" rel="noreferrer">
                  {{ partial "social/bandcamp" .}}
                </a>
                {{ end }}
                {{ if .Params.links.spotify }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Spotify" data-tooltip="Spotify" href="{{ .Params.links.spotify }}" target="_blank" rel="noreferrer">
                  {{ partial "social/spotify" .}}
                </a>
                {{ end }}
                {{ if .Params.links.youtube }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Youtube" data-tooltip="Youtube" href="{{ .Params.links.youtube }}" target="_blank" rel="noreferrer">
                  {{ partial "social/youtube" .}}
                </a>
                {{ end }}
                {{ if .Params.links.applemusic }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Apple Music" data-tooltip="Apple Music" href="{{ .Params.links.applemusic }}" target="_blank" rel="noreferrer">
                  {{ partial "social/applemusic" .}}
                </a>
                {{ end }}
                {{ if .Params.links.soundcloud }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Soundcloud" data-tooltip="Soundcloud" href="{{ .Params.links.soundcloud }}" target="_blank" rel="noreferrer">
                  {{ partial "social/soundcloud" .}}
                </a>
                {{ end }}
                {{ if .Params.links.deezer }}
                <a class="album-links__item tooltip tooltip--bottom" aria-label="Deezer" data-tooltip="Deezer" href="{{ .Params.links.deezer }}" target="_blank" rel="noreferrer">
                  {{ partial "social/deezer" .}}
                </a>
                {{ end }}
              </div>
            {{ end }}
          </div>
        </div>
    </div>
  </div>

</main>
{{ end }}