Convert spotify shortcode to page layout

content/projects/development-playlist.md

@@ -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" %}}

content/robotics/smallpeice/2017/soundtrack.md

@@ -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. 
+At the arena, we had music playing in the background, through the competition stages, and the testing phase.
-
-<!--more-->
-
-{{% spotify "theorangeone97" "4ZaS9NTwF1erqqpE1IxHlP" %}}
-

content/robotics/smallpeice/2018/chill-soundtrack.md

@@ -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" %}}

content/robotics/smallpeice/2018/dramatic-soundtrack.md

@@ -1,7 +1,5 @@
 ---
 title: Dramatic Soundtrack
+layout: spotify
+playlist: 5VvONyDmSpdErqseA75Vad
 ---
-
-<!--more-->
-
-{{% spotify "theorangeone97" "5VvONyDmSpdErqseA75Vad" %}}

data/social.yml

@@ -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

layouts/_default/spotify.html

@@ -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 }}

layouts/shortcodes/spotify.html

@@ -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>