feat: associate movies and artists

package.json

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

src/assets/styles/pages/music.css

@@ -32,7 +32,15 @@
       stroke: var(--books);
     }
   }
-  
+
+  & p.movies {
+    color: var(--tv);
+
+    & svg {
+      stroke: var(--tv);
+    }
+  }
+
   & p > svg {
     margin-bottom:  var(--inline-margin-bottom);
   }

src/assets/styles/pages/watching.css

@@ -139,6 +139,15 @@
     aspect-ratio: var(--aspect-ratio-banner);
   }
 
+  & p.music {
+    color: var(--music);
+
+    & svg {
+      stroke: var(--music);
+      margin-bottom: var(--inline-margin-bottom);
+    }
+  }
+
   & .watching-meta {
     display: flex;
     flex-direction: column;

src/data/artists.js

@@ -28,7 +28,8 @@ const fetchAllArtists = async () => {
         art,
         albums,
         concerts,
-        books
+        books,
+        movies
       `)
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
@@ -67,14 +68,20 @@ const processArtists = (artists) => {
       totalPlays: album['total_plays'],
       art: album.art ? `/${album['art']}` : ''
     })).sort((a, b) => a['release_year'] - b['release_year']),
-    concerts: artist['concerts']?.[0]?.id ? artist['concerts'].sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
+    concerts: artist['concerts']?.[0]?.['id'] ? artist['concerts'].sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-    books: artist['books']?.[0]?.id ? artist['books'].map(book => ({
+    books: artist['books']?.[0]?.['id'] ? artist['books'].map(book => ({
       title: book['title'],
       author: book['author'],
       isbn: book['isbn'],
       description: book['description'],
       url: `/books/${book['isbn']}`,
-    })).sort((a, b) => a['title'].localeCompare(b['title'])) : null
+    })).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
+    movies: artist['movies']?.[0]?.['id'] ? artist['movies'].map(movie => ({
+      title: movie['title'],
+      year: movie['year'],
+      tmdb_id: movie['tmdb_id'],
+      url: `/watching/movies/${movie['tmdb_id']}`,
+    })).sort((a, b) => b['year'] - a['year']) : null,
   }))
 }
 

src/data/books.js

@@ -49,10 +49,6 @@ const processBooks = (books) => {
   return books.map(book => {
     const dateFinished = new Date(book['date_finished'])
     const year = dateFinished.getUTCFullYear()
-    const artists = book?.['artists']?.map(artist => {
-      artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-      return artist
-    }).sort((a, b) => a['name'].localeCompare(b['name']))
 
     return {
       title: book['title'],
@@ -69,7 +65,10 @@ const processBooks = (books) => {
       tags: Array.isArray(book['tags']) ? book['tags'] : book['tags']?.split(',') || [], // Ensure tags is an array
       isbn: book['isbn'],
       type: 'book',
-      artists,
+      artists: book['artists']?.[0]?.['id'] ? book['artists'].map(artist => {
+        artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
+        return artist
+      }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
       year,
     }
   })

src/data/movies.js

@@ -1,5 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 import { DateTime } from 'luxon'
+import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -27,7 +28,8 @@ const fetchAllMovies = async () => {
         review,
         art,
         backdrop,
-        tags
+        tags,
+        artists
       `)
       .order('last_watched', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -47,29 +49,28 @@ const fetchAllMovies = async () => {
 }
 
 const processMovies = (movies) => {
-  return movies.map(item => {
+  return movies.map(item => ({
-    const lastWatched = DateTime.fromISO(item['last_watched'], { zone: 'utc' })
+    title: item['title'],
-    const year = DateTime.now().year
+    lastWatched: item['last_watched'],
-
+    dateAdded: item['last_watched'],
-    return {
+    year: item['year'],
-      title: item['title'],
+    url: `/watching/movies/${item['tmdb_id']}`,
-      lastWatched: item['last_watched'],
+    description: item['description'],
-      dateAdded: item['last_watched'],
+    image: item['art'] ? `/${item['art']}` : '',
-      year: item['year'],
+    backdrop: item['backdrop'] ? `/${item['backdrop']}` : '',
-      url: `/watching/movies/${item['tmdb_id']}`,
+    plays: item['plays'],
-      description: item['description'],
+    collected: item['collected'],
-      image: item['art'] ? `/${item['art']}` : '',
+    favorite: item['favorite'],
-      backdrop: item['backdrop'] ? `/${item['backdrop']}` : '',
+    rating: item['star_rating'],
-      plays: item['plays'],
+    review: item['review'],
-      collected: item['collected'],
+    id: item['tmdb_id'],
-      favorite: item['favorite'],
+    type: 'movie',
-      rating: item['star_rating'],
+    tags: item['tags'] ? item['tags'].split(',') : [],
-      review: item['review'],
+    artists: item['artists']?.[0]?.['name'] ? item['artists'].map(artist => {
-      id: item['tmdb_id'],
+      artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-      type: 'movie',
+      return artist
-      tags: item['tags'] ? item['tags'].split(',') : [],
+    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
-    }
+  }))
-  })
 }
 
 export default async function () {

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

@@ -93,7 +93,7 @@ schema: artist
   {%- if artist.books -%}
   <hr />
   <p id="books" class="books">
-    {% tablericon "books" "books" %}
+    {% tablericon "books" "Books" %}
     I've read about this artist!
   </p>
   <ul>
@@ -102,7 +102,26 @@ schema: artist
     {% endfor %}
   </ul>
   {%- endif -%}
-  {%- if artist.books or artist.concerts -%}<hr />{%- endif -%}
+  {%- if artist.movies -%}
+    {%- capture sectionTitle -%}
+      {% if artist.movies.size > 1 %}
+        I've watched a movie about this artist!
+      {% else %}
+        I've watched a movie about this artist!
+      {%- endif -%}
+    {%- endcapture -%}
+    <hr />
+    <p id="movies" class="movies">
+      {% tablericon "device-tv-old" "Movies" %}
+      {{ sectionTitle}}
+    </p>
+    <ul>
+      {% for movie in artist.movies %}
+        <li><a href="{{ movie.url }}">{{ movie.title }}</a> ({{ movie.year }})</li>
+      {% endfor %}
+    </ul>
+  {%- endif -%}
+  {%- if artist.books or artist.concerts or artist.movies -%}<hr />{%- endif -%}
   <table>
     <tr>
       <th>Album</th>

src/pages/dynamic/watching/movie.html

@@ -50,6 +50,25 @@ schema: movie
     {{ movie.review | markdown }}
     <hr />
   {% endif %}
+  {%- if movie.artists -%}
+    {%- capture sectionTitle -%}
+      {% if movie.artists.size > 1 %}
+        I listen to artists featured in this movie!
+      {% else %}
+      I listen to the artist featured in this movie!
+      {%- endif -%}
+    {%- endcapture -%}
+    <p id="artists" class="music">
+      {% tablericon "headphones" "Music" %}
+      {{ sectionTitle }}
+    </p>
+    <ul>
+      {% for artist in movie.artists %}
+        <li><a href="{{ artist.url }}">{{ artist.name }}</a>{%- if artist.total_plays > 0 -%}: <strong class="highlight-text">{{ artist.total_plays }} plays</strong>{%- endif -%}</li>
+      {% endfor %}
+    </ul>
+    <hr />
+  {%- endif -%}
   {% if movie.description %}
     <h3>Overview</h3>
     {{ movie.description | markdown }}