mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-11-07 20:11:52 +00:00
105 lines
5.1 KiB
HTML
105 lines
5.1 KiB
HTML
{{ define "metaTitle" }}
|
|
<title>{{ .Title }} ∴ {{ .Site.Title }}</title>
|
|
{{ 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">
|
|
<div class="album-cover">
|
|
{{ $original := resources.Get .Params.cover }}
|
|
{{ $coverSmall := $original.Resize "x250" }}
|
|
{{ $coverMedium := $original.Resize "x500" }}
|
|
{{ $coverBig := $original.Resize "x1000" }}
|
|
{{ $placeholder := $original.Resize "x1" }}
|
|
<img
|
|
class="album-cover__visual"
|
|
width="500"
|
|
height="500"
|
|
style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
|
|
src="{{ $coverMedium.Permalink }}"
|
|
srcset="{{ $coverSmall.Permalink }} 250w, {{ $coverMedium.Permalink }} 500w, {{ $coverBig.Permalink }} 1000w"
|
|
alt="{{ .Title }} album's cover"
|
|
title=":)"
|
|
>
|
|
</div>
|
|
<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>
|
|
</main>
|
|
{{ end }}
|