{{ 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" }} {{ $coverMedium := $original.Resize "x500" }} {{ $coverBig := $original.Resize "x1000" }} {{ $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 coverGlitch" width="500" height="500" style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});" src="{{ $coverMedium.Permalink }}" loading="lazy" alt="{{ .Title }} album's cover" title=":)" > </picture> <div class="album-infos"> <h1 class="album-name">{{ .Title }}</h1> <strong class="album-artist">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 : {{ if not (.Params.links.spotify | or .Params.links.youtube | or .Params.links.applemusic | or .Params.links.soundcloud | or .Params.links.bandcamp | or .Params.links.googleplay | or .Params.links.deezer) }} <div> There are no links (for now~) </div> {{ else }} <div class="album-links__list"> {{ 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.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.googleplay }} <a class="album-links__item tooltip tooltip--bottom" aria-label="Google Play" data-tooltip="Google Play" href="{{ .Params.links.googleplay }}" target="_blank" rel="noreferrer"> {{ partial "social/googleplay" .}} </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> {{ partial "cover-glitch-svg-filter" .}} </main> {{ end }}