mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-12-02 15:01:39 +00:00
116 lines
6.3 KiB
HTML
116 lines
6.3 KiB
HTML
{{ define "metaTitle" }}
|
|
<title>{{ .Title }} ∴ {{ .Site.Title }}</title>
|
|
<meta name="description" content="Get links to 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="Get links to 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="Get links to 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" }}
|
|
{{ $coverSmallBackup := $original.Resize "x250 jpeg q69" }}
|
|
{{ $coverMedium := $original.Resize "x500 webp" }}
|
|
{{ $coverMediumBackup := $original.Resize "x500 jpeg q69" }}
|
|
{{ $coverBig := $original.Resize "x1000 webp" }}
|
|
{{ $coverBigBackup := $original.Resize "x1000 jpeg q69" }}
|
|
{{ $placeholder := $original.Resize "x15" }}
|
|
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)" type="image/webp">
|
|
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)" type="image/webp">
|
|
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)" type="image/webp">
|
|
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)" type="image/webp">
|
|
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 427px)" type="image/jpeg">
|
|
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(max-width: 480px)" type="image/jpeg">
|
|
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 647px)" type="image/jpeg">
|
|
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(min-width: 647px)" type="image/jpeg">
|
|
<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="{{ $coverMediumBackup.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 :
|
|
{{ 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 }}
|