feat: display concerts

config/filters/index.js

@@ -254,5 +254,6 @@ export default {
     }
 
     return `${allButLast} and ${last}`
-  }
+  },
+  formatVenue: (venue) => venue.split(',')[0].trim()
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "21.1.5",
+  "version": "21.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "21.1.5",
+      "version": "21.2.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "21.1.5",
+  "version": "21.2.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/defaults/vars.css

@@ -52,6 +52,7 @@
 
   --about: #ff6347;
   --books: #32cd32;
+  --concerts: #e75480;
   --error: #d92525;
   --favorite: #ff69b4;
   --json: #4169E1;

src/assets/styles/pages/music.css

@@ -13,6 +13,15 @@
     aspect-ratio: var(--aspect-ratio-square);
   }
 
+  & p.concerts {
+    color: var(--concerts);
+
+    & svg {
+      stroke: var(--concerts);
+      margin-right: var(--sizing-xs);
+    }
+  }
+
   & .artist-display {
     display: flex;
     flex-direction: column;
@@ -73,6 +82,11 @@
   }
 }
 
+.concert-list {
+  margin-top: 0;
+  padding-left: 0;
+}
+
 @media screen and (min-width: 768px) {
   .artist-focus {
     & img {

src/data/artists.js

@@ -66,7 +66,7 @@ const processArtists = (artists) => {
       totalPlays: album['total_plays'],
       art: album.art ? `/${album['art']}` : ''
     })).sort((a, b) => a['release_year'] - b['release_year']),
-    concerts: artist['concerts'] || []
+    concerts: artist['concerts']?.[0]?.id ? artist['concerts'] : null
   }))
 }
 

src/data/concerts.js

@@ -63,7 +63,7 @@ const processConcerts = (concerts) => {
     } : null,
     url: `/concerts/${concert['id']}`,
     artistUrl: concert['artist'] ? `/music/artists/${sanitizeMediaString(concert['artist_name'])}-${sanitizeMediaString(parseCountryField(concert['artist_country']))}` : null
-  }))
+  })).sort((a, b) => new Date(b['date']) - new Date(a['date']))
 }
 
 export default async function () {

src/pages/dynamic/concerts.html

@@ -0,0 +1,29 @@
+---
+title: Concerts
+layout: default
+pagination:
+  data: concerts
+  size: 30
+permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
+---
+{% if pagination.pageNumber == 0 %}
+<h2 class="page-header">Concerts</h2>
+<p>These are concerts I've attended (not all of them — just the ones I could remember or glean from emails, photo metadata et al). I've been to at least <strong class="highlight-text">{{ concerts | size }}</strong> shows. <a href="/music">You can also take a look at the music I've been listening to lately</a>.</p>
+<hr />
+{% endif %}
+<ul class="concert-list">
+  {% for concert in pagination.items %}
+    {%- capture artistName -%}
+      {% if concert.artistNameString %}
+        {{ concert.artistNameString }}
+      {% else %}
+        <a href="{{ concert.artistUrl }}">{{ concert.artist.name }}</a>
+      {% endif %}
+    {%- endcapture -%}
+    <li>
+      {{ artistName }} on <strong class="highlight-text">{{ concert.date | date: "%B %e, %Y" }}</strong>
+      {% if concert.venue.name %} at <a href="https://www.openstreetmap.org/?mlat={{ concert.venue.latitude }}&mlon={{ concert.venue.longitude }}#map=18/{{ concert.venue.latitude }}/{{ concert.venue.longitude }}">{{ concert.venue.name | formatVenue }}</a>{% endif %}
+    </li>
+  {% endfor %}
+</ul>
+{% render "partials/nav/paginator.liquid", pagination:pagination %}

src/pages/dynamic/music/artists/artist.html

@@ -62,6 +62,19 @@ schema: artist
   <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
   <button data-toggle-button>Show more</button>
   {%- endif -%}
+  {%- if artist.concerts -%}
+    <hr />
+    <p class="concerts flex-centered">
+      {% tablericon "device-speaker" "concert" %}
+      I've seen this artist live!
+    </p>
+    <ul>
+      {% for concert in artist.concerts %}
+        <li>On <strong class="highlight-text">{{ concert.date | date: "%B %e, %Y" }}</strong> at <a href="https://www.openstreetmap.org/?mlat={{ concert.venue_latitude }}&mlon={{ concert.venue_longitude }}#map=18/{{ concert.venue_latitude }}/{{ concert.venue_longitude }}">{{ concert.venue | formatVenue }}</a></li>
+      {% endfor %}
+    </ul>
+    <hr />
+  {%- endif -%}
   <table>
     <tr>
       <th>Album</th>

src/pages/dynamic/music/index.html

@@ -12,7 +12,8 @@ schema: music-index
 <script>{{ js }}</script>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
-<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a></p>
+<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
+<p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 {% render "partials/blocks/now-playing.liquid" %}
 <hr />
 <h3 id="artists" class="section-header no-top-margin">

src/pages/dynamic/music/periods/3-months.html

@@ -10,6 +10,7 @@ schema: music-period
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/three-months/">artists</a>, <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
+<p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />
 <h3 id="artists" class="section-header no-top-margin">
   <a class="link-icon" href="/music/artists/three-months">

src/pages/dynamic/music/periods/this-month.html

@@ -10,6 +10,7 @@ schema: music-period
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
+<p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />
 <h3 id="artists" class="section-header no-top-margin">
   <a class="link-icon" href="/music/artists/this-month">