feat: associate books and movies

package-lock.json

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

package.json

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

src/assets/styles/pages/books.css

@@ -113,12 +113,23 @@
   p {
     margin: var(--sizing-base) 0;
 
+    & svg {
+      margin-bottom: var(--inline-margin-bottom);
+    }
+
     &.music {
       color: var(--music);
 
       & svg {
         stroke: var(--music);
-        margin-bottom: var(--inline-margin-bottom);
+      }
+    }
+
+    &.movies {
+      color: var(--tv);
+
+      & svg {
+        stroke: var(--tv);
       }
     }
   }

src/assets/styles/pages/watching.css

@@ -139,12 +139,23 @@
     aspect-ratio: var(--aspect-ratio-banner);
   }
 
+  & p > svg {
+    margin-bottom: var(--inline-margin-bottom);
+  }
+
   & p.music {
     color: var(--music);
 
     & svg {
       stroke: var(--music);
-      margin-bottom: var(--inline-margin-bottom);
+    }
+  }
+
+  & p.books {
+    color: var(--books);
+
+    & svg {
+      stroke: var(--books);
     }
   }
 

src/data/books.js

@@ -27,7 +27,8 @@ const fetchAllBooks = async () => {
         art,
         favorite,
         tags,
-        artists
+        artists,
+        movies
       `)
       .order('date_finished', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -69,6 +70,10 @@ const processBooks = (books) => {
         artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
         return artist
       }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+      movies: book['movies']?.[0]?.['id'] ? book['movies'].map(movie => {
+        movie['url'] =`/watching/movies/${movie['tmdb_id']}`
+        return movie
+      }).sort((a, b) => b['year'] - a['year']) : null,
       year,
     }
   })

src/data/movies.js

@@ -29,7 +29,8 @@ const fetchAllMovies = async () => {
         art,
         backdrop,
         tags,
-        artists
+        artists,
+        books
       `)
       .order('last_watched', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -70,6 +71,10 @@ const processMovies = (movies) => {
       artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
       return artist
     }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+    books: item['books']?.[0]?.['id'] ? item['books'].map(book => {
+      book['url'] = `/books/${book['isbn']}`
+      return book
+    }).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
   }))
 }
 

src/pages/dynamic/books/book.html

@@ -73,6 +73,25 @@ schema: book
     </ul>
     <hr />
   {%- endif -%}
+  {%- if book.movies -%}
+    {%- capture sectionTitle -%}
+      {% if book.movies.size > 1 %}
+        I've watched movies related to this book!
+      {% else %}
+        I've watched a movie related to this book!
+      {%- endif -%}
+    {%- endcapture -%}
+    <hr />
+    <p id="movies" class="movies">
+      {% tablericon "device-tv-old" "Movies" %}
+      {{ sectionTitle }}
+    </p>
+    <ul>
+      {% for movie in book.movies %}
+        <li><a href="{{ movie.url }}">{{ movie.title }}</a> ({{ movie.year }})</li>
+      {% endfor %}
+    </ul>
+  {%- endif -%}
   {% if book.description %}
     <h3>Overview</h3>
     {{ book.description | markdown }}

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

@@ -105,7 +105,7 @@ schema: artist
   {%- if artist.movies -%}
     {%- capture sectionTitle -%}
       {% if artist.movies.size > 1 %}
-        I've watched a movie about this artist!
+        I've watched movies about this artist!
       {% else %}
         I've watched a movie about this artist!
       {%- endif -%}

src/pages/dynamic/watching/movie.html

@@ -55,7 +55,7 @@ schema: movie
       {% if movie.artists.size > 1 %}
         I listen to artists featured in this movie!
       {% else %}
-      I listen to the artist featured in this movie!
+        I listen to the artist featured in this movie!
       {%- endif -%}
     {%- endcapture -%}
     <p id="artists" class="music">
@@ -69,6 +69,18 @@ schema: movie
     </ul>
     <hr />
   {%- endif -%}
+  {%- if movie.books -%}
+    <p id="books" class="books">
+      {% tablericon "books" "Books" %}
+      I've read about this movie!
+    </p>
+    <ul>
+      {% for book in movie.books %}
+        <li><a href="{{ book.url }}">{{ book.title }}</a> by {{ book.author }}</li>
+      {% endfor %}
+    </ul>
+    <hr />
+  {%- endif -%}
   {% if movie.description %}
     <h3>Overview</h3>
     {{ movie.description | markdown }}