Convert spotify shortcode to page layout
This commit is contained in:
parent
4815ef7270
commit
1438ce758a
7 changed files with 62 additions and 56 deletions
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: Development Playlist
|
||||
tags: [music]
|
||||
layout: spotify
|
||||
playlist: 4SLjpGGoOoiCDhc9sgNx8w
|
||||
---
|
||||
|
||||
When I work, and need to focus and get something done, I like a specific kind of music. It helps me focus and work much faster than listening to other music, or nothing at all. The work isn't necessary software development, but seeing as that's what I do most of the time, it's usually what happens.
|
||||
|
||||
I've created this playlist over the last few years, removing and adding song when I find new ones.
|
||||
|
||||
{{% spotify "theorangeone97" "4SLjpGGoOoiCDhc9sgNx8w" %}}
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
---
|
||||
title: Soundtrack
|
||||
layout: spotify
|
||||
playlist: 4ZaS9NTwF1erqqpE1IxHlP
|
||||
---
|
||||
|
||||
At the arena, we had music playing in the background, through the competition stages, and the testing phase.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{% spotify "theorangeone97" "4ZaS9NTwF1erqqpE1IxHlP" %}}
|
||||
|
||||
At the arena, we had music playing in the background, through the competition stages, and the testing phase.
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
---
|
||||
title: Chill Soundtrack
|
||||
layout: spotify
|
||||
playlist: 2YDsE6BLEdjTSXhFRnVXq9
|
||||
---
|
||||
|
||||
This year, we tried something different. Rather than having the [dramatic playlist]({{< relref "dramatic-soundtrack" >}}), we created a chill playlist for outside of match time. This not only helped make the breaks feel more like breaks, and a bit more fun, but also acted as a contrast to make the match time feel more dramatic.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{% spotify "theorangeone97" "2YDsE6BLEdjTSXhFRnVXq9" %}}
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
---
|
||||
title: Dramatic Soundtrack
|
||||
layout: spotify
|
||||
playlist: 5VvONyDmSpdErqseA75Vad
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{% spotify "theorangeone97" "5VvONyDmSpdErqseA75Vad" %}}
|
||||
|
|
|
@ -90,6 +90,12 @@ accounts:
|
|||
link: https://news.ycombinator.com/user?id=theorangeone
|
||||
icon: fab fa-hacker-news-square
|
||||
|
||||
spotify:
|
||||
name: Spotify
|
||||
username: theorangeone97
|
||||
link: https://open.spotify.com/user/theorangeone97
|
||||
icon: fab fa-spotify
|
||||
|
||||
footer_accounts:
|
||||
- github
|
||||
- twitter
|
||||
|
|
47
layouts/_default/spotify.html
Normal file
47
layouts/_default/spotify.html
Normal file
|
@ -0,0 +1,47 @@
|
|||
{{ define "main" }}
|
||||
<div id="main">
|
||||
<div class="container">
|
||||
{{ partial "content.html" . }}
|
||||
|
||||
{{ $user := default .Site.Data.social.accounts.spotify.username .Params.user }}
|
||||
|
||||
{{ $playlist := getJSON "https://spotify-public-proxy.herokuapp.com/v1/users/" $user "/playlists/" .Params.playlist }}
|
||||
|
||||
<div class="playlist">
|
||||
<h3>
|
||||
<i class="fab fa-spotify"></i>
|
||||
<a href="{{ $playlist.external_urls.spotify }}">
|
||||
{{ $playlist.name }}
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<table class="table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="row"></th>
|
||||
<th scope="row">Track</th>
|
||||
<th scope="row">Artist</th>
|
||||
<th scope="row">Album</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range sort $playlist.tracks.items "track.name" }}
|
||||
{{ with .track }}
|
||||
<tr>
|
||||
{{ with index (last 1 .album.images) 0 }}
|
||||
<td><div class="image" data-image="{{ .url }}"></div></td>
|
||||
{{ end }}
|
||||
<td><a href="{{ .external_urls.spotify }}">{{ .name }}</a></td>
|
||||
<td>
|
||||
{{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
|
||||
</td>
|
||||
<td>{{ .album.name }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
|
@ -1,40 +0,0 @@
|
|||
{{ $user := .Get 0 }}
|
||||
{{ $playlist_id := .Get 1 }}
|
||||
|
||||
{{ $playlist := getJSON "https://spotify-public-proxy.herokuapp.com/v1/users/" $user "/playlists/" $playlist_id }}
|
||||
|
||||
<div class="playlist">
|
||||
<h3>
|
||||
<i class="fab fa-spotify"></i>
|
||||
<a href="{{ $playlist.external_urls.spotify }}">
|
||||
{{ $playlist.name }}
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<table class="table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="row"></th>
|
||||
<th scope="row">Track</th>
|
||||
<th scope="row">Artist</th>
|
||||
<th scope="row">Album</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range sort $playlist.tracks.items "track.name" }}
|
||||
{{ with .track }}
|
||||
<tr>
|
||||
{{ with index (last 1 .album.images) 0 }}
|
||||
<td><div class="image" data-image="{{ .url }}"></div></td>
|
||||
{{ end }}
|
||||
<td><a href="{{ .external_urls.spotify }}">{{ .name }}</a></td>
|
||||
<td>
|
||||
{{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
|
||||
</td>
|
||||
<td>{{ .album.name }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
Loading…
Reference in a new issue