feat: everything is related

config/filters/index.js

@@ -243,11 +243,23 @@ export default {
   sortByPlaysDescending: (data, key) => data.sort((a, b) => b[key] - a[key]),
   genreStrings: (genres, key) => genres.map(genre => genre[key]),
   mediaLinks: (data, type, count = 10) => {
+    if (!data || !type) return ''
+
     const dataSlice = data.slice(0, count)
-    let last;
 
     if (dataSlice.length === 0) return null
-    if (dataSlice.length === 1) return type === 'genre' ? dataSlice[0] : dataSlice[0]['artist_name']
+    if (dataSlice.length === 1) {
+      const item = dataSlice[0]
+      if (type === 'genre') {
+        return `<a href="/music/genres/${sanitizeMediaString(item)}">${item}</a>`
+      } else if (type === 'artist') {
+        return `<a href="/music/artists/${sanitizeMediaString(item['name_string'])}-${sanitizeMediaString(item['country'].toLowerCase())}">${item['name_string']}</a>`
+      } else if (type === 'book') {
+        return `<a href="/books/${item['isbn']}">${item['title']}</a>`
+      } else if (type === 'movie') {
+        return `<a href="${item['url']}">${item['title']}</a>`
+      }
+    }
 
     const allButLast = dataSlice.slice(0, -1).map(item => {
       if (type === 'genre') {
@@ -256,17 +268,23 @@ export default {
         return `<a href="/music/artists/${sanitizeMediaString(item['name_string'])}-${sanitizeMediaString(item['country'].toLowerCase())}">${item['name_string']}</a>`
       } else if (type === 'book') {
         return `<a href="/books/${item['isbn']}">${item['title']}</a>`
+      } else if (type === 'movie') {
+        return `<a href="${item['url']}">${item['title']}</a>`
       }
     }).join(', ')
 
-    if (type === 'genre') {
+    let last
-      last = `<a href="/music/genres/${sanitizeMediaString(dataSlice[dataSlice.length - 1])}">${dataSlice[dataSlice.length - 1]}</a>`
+    const lastItem = dataSlice[dataSlice.length - 1]
-    } else if (type === 'artist') {
-      last = `<a href="/music/artists/${sanitizeMediaString(dataSlice[dataSlice.length - 1]['name_string'])}-${sanitizeMediaString(dataSlice[dataSlice.length - 1]['country'].toLowerCase())}">${dataSlice[dataSlice.length - 1]['name_string']}</a>`
-    } else if (type === 'book') {
-      last = `<a href="/books/${dataSlice[dataSlice.length - 1]['isbn']}">${dataSlice[dataSlice.length - 1]['title']}</a>`
-    }
 
+    if (type === 'genre') {
+      last = `<a href="/music/genres/${sanitizeMediaString(lastItem)}">${lastItem}</a>`
+    } else if (type === 'artist') {
+      last = `<a href="/music/artists/${sanitizeMediaString(lastItem['name_string'])}-${sanitizeMediaString(lastItem['country'].toLowerCase())}">${lastItem['name_string']}</a>`
+    } else if (type === 'book') {
+      last = `<a href="/books/${lastItem['isbn']}">${lastItem['title']}</a>`
+    } else if (type === 'movie') {
+      last = `<a href="${lastItem['url']}">${lastItem['title']}</a>`
+    }
     return `${allButLast} and ${last}`
   },
   formatVenue: (venue) => venue.split(',')[0].trim(),

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "22.8.0",
+  "version": "23.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "22.8.0",
+      "version": "23.0.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -26,7 +26,7 @@
         "liquidjs": "^10.16.4",
         "luxon": "^3.5.0",
         "markdown-it": "^14.1.0",
-        "markdown-it-anchor": "^9.0.1",
+        "markdown-it-anchor": "^9.1.0",
         "markdown-it-footnote": "^4.0.0",
         "sanitize-html": "^2.13.0",
         "slugify": "^1.6.6"
@@ -2216,9 +2216,9 @@
       }
     },
     "node_modules/markdown-it-anchor": {
-      "version": "9.0.1",
+      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.1.0.tgz",
-      "integrity": "sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==",
+      "integrity": "sha512-a5WqArGkkLQZUEdC9cpkWvrdLJyS45r+28nE4jxiQynFLZ6VXdX4+hulCRzxmS+hi9+Dwfi5zTFIz3dY1YA6xQ==",
       "dev": true,
       "license": "Unlicense",
       "peerDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "22.8.0",
+  "version": "23.0.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -41,7 +41,7 @@
     "liquidjs": "^10.16.4",
     "luxon": "^3.5.0",
     "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.0.1",
+    "markdown-it-anchor": "^9.1.0",
     "markdown-it-footnote": "^4.0.0",
     "sanitize-html": "^2.13.0",
     "slugify": "^1.6.6"

src/assets/styles/base/index.css

@@ -100,6 +100,59 @@ code {
   &.search > svg { stroke: var(--search); }
 }
 
+p.books {
+  color: var(--books);
+
+  & svg {
+    stroke: var(--books);
+  }
+}
+
+p.concerts {
+  color: var(--concerts);
+
+  & svg {
+    stroke: var(--concerts);
+  }
+}
+
+p.favorite {
+  color: var(--favorite);
+
+  & svg {
+    stroke: var(--favorite);
+  }
+}
+
+p.movies,
+p.tv {
+  color: var(--tv);
+
+  & svg {
+    stroke: var(--tv);
+  }
+}
+
+p.music {
+  color: var(--music);
+
+  & svg {
+    stroke: var(--music);
+  }
+}
+
+p.tattoo {
+  color: var(--tattoo);
+
+  & svg {
+    stroke: var(--tattoo);
+  }
+}
+
+p:not(.flex-centered):not(.banner p) > svg {
+  margin-bottom: var(--inline-margin-bottom);
+}
+
 :is(h1, h2, h3, h4, h5, h6) svg {
   stroke-width: var(--stroke-width-bold);
 }

src/assets/styles/components/text-toggle.css

@@ -3,7 +3,7 @@
     position: relative;
     height: 500px;
     overflow: hidden;
-    margin-bottom: var(--sizing-base);
+    margin: var(--sizing-base) 0;
 
     & p:first-of-type {
       margin-top: 0;

src/assets/styles/pages/books.css

@@ -75,6 +75,11 @@
       &.sub-meta {
         font-size: var(--font-size-sm);
         line-height: var(--line-height-sm);
+
+        & svg {
+          width: var(--sizing-svg-sm);
+          height: var(--sizing-svg-sm);
+        }
       }
 
       &.title,
@@ -112,26 +117,6 @@
 
   p {
     margin: var(--sizing-base) 0;
-
-    & svg {
-      margin-bottom: var(--inline-margin-bottom);
-    }
-
-    &.music {
-      color: var(--music);
-
-      & svg {
-        stroke: var(--music);
-      }
-    }
-
-    &.movies {
-      color: var(--tv);
-
-      & svg {
-        stroke: var(--tv);
-      }
-    }
   }
 }
 

src/assets/styles/pages/music.css

@@ -17,34 +17,6 @@
     aspect-ratio: var(--aspect-ratio-square);
   }
 
-  & p.concerts {
-    color: var(--concerts);
-
-    & svg {
-      stroke: var(--concerts);
-    }
-  }
-
-  & p.books {
-    color: var(--books);
-
-    & svg {
-      stroke: var(--books);
-    }
-  }
-
-  & p.movies {
-    color: var(--tv);
-
-    & svg {
-      stroke: var(--tv);
-    }
-  }
-
-  & p > svg {
-    margin-bottom:  var(--inline-margin-bottom);
-  }
-
   & .artist-display {
     display: flex;
     flex-direction: column;
@@ -69,28 +41,12 @@
           font-size: var(--font-size-sm);
           line-height: var(--line-height-sm);
 
-          svg {
+          & svg {
             width: var(--sizing-svg-sm);
             height: var(--sizing-svg-sm);
           }
         }
 
-        &.favorite {
-          color: var(--favorite);
-
-          & svg {
-            stroke: var(--favorite);
-          }
-        }
-
-        &.tattoo {
-          color: var(--tattoo);
-
-          & svg {
-            stroke: var(--tattoo);
-          }
-        }
-
         & .brain {
           outline: 0;
 

src/assets/styles/pages/watching.css

@@ -139,26 +139,6 @@
     aspect-ratio: var(--aspect-ratio-banner);
   }
 
-  & p > svg {
-    margin-bottom: var(--inline-margin-bottom);
-  }
-
-  & p.music {
-    color: var(--music);
-
-    & svg {
-      stroke: var(--music);
-    }
-  }
-
-  & p.books {
-    color: var(--books);
-
-    & svg {
-      stroke: var(--books);
-    }
-  }
-
   & .watching-meta {
     display: flex;
     flex-direction: column;
@@ -176,6 +156,11 @@
       &.sub-meta {
         font-size: var(--font-size-sm);
         line-height: var(--line-height-sm);
+
+        & svg {
+          width: var(--sizing-svg-sm);
+          height: var(--sizing-svg-sm);
+        }
       }
     }
   }

src/data/books.js

@@ -1,4 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
+import slugify from 'slugify'
 import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
@@ -26,9 +27,12 @@ const fetchAllBooks = async () => {
         review,
         art,
         favorite,
+        tattoo,
         tags,
         artists,
-        movies
+        movies,
+        genres,
+        shows
       `)
       .order('date_finished', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -57,6 +61,7 @@ const processBooks = (books) => {
       review: book['review'],
       rating: book['star_rating'] !== 'unrated' ? book['star_rating'] : '',
       favorite: book['favorite'],
+      tattoo: book['tattoo'],
       description: book['description'],
       image: `/${book['art']}`,
       url: `/books/${book['isbn']}`,
@@ -74,6 +79,14 @@ const processBooks = (books) => {
         movie['url'] =`/watching/movies/${movie['tmdb_id']}`
         return movie
       }).sort((a, b) => b['year'] - a['year']) : null,
+      genres: book['genres']?.[0]?.['id'] ? book['genres'].map(genre => {
+        genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
+        return genre
+      }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+      shows: book['shows']?.[0]?.['id'] ? book['shows'].map(show => {
+        show['url'] = `/watching/shows/${show['tmdb_id']}`
+        return show
+      }).sort((a, b) => b['year'] - a['year']) : null,
       year,
     }
   })

src/data/genres.js

@@ -8,7 +8,7 @@ const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
 
 const fetchGenresWithArtists = async () => {
   const { data, error } = await supabase
-    .from('genres')
+    .from('optimized_genres')
     .select(`
       name,
       description,
@@ -21,7 +21,9 @@ const fetchGenresWithArtists = async () => {
         country,
         description,
         favorite
-      )
+      ),
+      books,
+      movies
     `)
     .order('id', { ascending: true })
 
@@ -36,7 +38,20 @@ const fetchGenresWithArtists = async () => {
       ...artist,
       country: parseCountryField(artist['country'])
     })),
-    url: `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
+    url: `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`,
+    books: genre['books']?.[0]?.['id'] ? genre['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,
+    movies: genre['movies']?.[0]?.['id'] ? genre['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/movies.js

@@ -1,5 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 import { DateTime } from 'luxon'
+import slugify from 'slugify'
 import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
@@ -23,6 +24,7 @@ const fetchAllMovies = async () => {
         collected,
         plays,
         favorite,
+        tattoo,
         star_rating,
         description,
         review,
@@ -30,7 +32,9 @@ const fetchAllMovies = async () => {
         backdrop,
         tags,
         artists,
-        books
+        books,
+        genres,
+        shows
       `)
       .order('last_watched', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -75,6 +79,14 @@ const processMovies = (movies) => {
       book['url'] = `/books/${book['isbn']}`
       return book
     }).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
+    genres: item['genres']?.[0]?.['id'] ? item['genres'].map(genre => {
+      genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
+      return genre
+    }).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
+    shows: item['shows']?.[0]?.['id'] ? item['shows'].map(show => {
+      show['url'] = `/watching/shows/${show['tmdb_id']}`
+      return show
+    }).sort((a, b) => b['year'] - a['year']) : null,
   }))
 }
 

src/data/tv.js

@@ -20,11 +20,14 @@ const fetchAllShows = async () => {
         year,
         collected,
         favorite,
+        tattoo,
         description,
         review,
         art,
         backdrop,
-        episodes
+        episodes,
+        movies,
+        books
       `)
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
@@ -46,7 +49,19 @@ const prepareShowData = (show) => ({
   image: show['art'] ? `/${show['art']}` : '',
   backdrop: show['backdrop'] ? `/${show['backdrop']}` : '',
   url: `/watching/shows/${show['tmdb_id']}`,
-  episodes: show['episodes'] || []
+  episodes: show['episodes'] || [],
+  tattoo: show['tattoo'],
+  movies: show['movies']?.[0]?.['id'] ? show['movies'].map(movie => {
+    movie['url'] = `/watching/movies/${movie['tmdb_id']}`
+    return movie
+  }).sort((a, b) => b['year'] - a['year']) : null,
+  books: show['books']?.[0]?.['id'] ? show['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,
 })
 
 const prepareEpisodeData = (show) => show['episodes'].map(episode => ({

src/includes/partials/blocks/associated-media.liquid

@@ -0,0 +1,65 @@
+{% comment %} render related artists {% endcomment %}
+{%- if artists -%}
+  <p id="artists" class="music">
+    {% tablericon "headphones" "Related artist(s)" %}
+    Related artist(s)
+  </p>
+  <ul>
+    {% for artist in 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 -%}
+{% comment %} render related books {% endcomment %}
+{%- if books -%}
+  <p id="books" class="books">
+    {% tablericon "books" "Related book(s)" %}
+    Related book(s)
+  </p>
+  <ul>
+    {% for book in books %}
+      <li><a href="{{ book.url }}">{{ book.title }}</a> by {{ book.author }}</li>
+    {% endfor %}
+  </ul>
+  <hr />
+{%- endif -%}
+{% comment %} render related genres {% endcomment %}
+{%- if genres -%}
+  <p id="genres" class="music">
+    {% tablericon "headphones" "Genre(s)" %}
+    Related genre(s)
+  </p>
+  <ul>
+    {% for genre in genres %}
+      <li><a href="{{ genre.url }}">{{ genre.name }}</a></li>
+    {% endfor %}
+  </ul>
+  <hr />
+{%- endif -%}
+{% comment %} render related movies {% endcomment %}
+{%- if movies -%}
+  <p id="movies" class="movies">
+    {% tablericon "movie" "Related movie(s)" %}
+    Related movie(s)
+  </p>
+  <ul>
+    {% for movie in movies %}
+      <li><a href="{{ movie.url }}">{{ movie.title }}</a> ({{ movie.year }})</li>
+    {% endfor %}
+  </ul>
+  <hr />
+{%- endif -%}
+{% comment %} render related shows {% endcomment %}
+{%- if shows -%}
+  <p id="tv" class="tv">
+    {% tablericon "device-tv-old" "Related show(s)" %}
+    Related show(s)
+  </p>
+  <ul>
+    {% for show in shows %}
+      <li><a href="{{ show.url }}">{{ show.title }}</a> ({{ show.year }})</li>
+    {% endfor %}
+  </ul>
+  <hr />
+{%- endif -%}

src/pages/dynamic/books/book.html

@@ -38,6 +38,12 @@ schema: book
       {% if book.author %}
         <p class="sub-meta">By {{ book.author }}</p>
       {% endif %}
+      {%- if book.favorite -%}
+        <p class="sub-meta favorite">{% tablericon "heart" "Favorite" %} This is one of my favorite books!</p>
+      {%- endif -%}
+      {%- if book.tattoo -%}
+        <p class="sub-meta tattoo">{% tablericon "needle" "Tattoo" %} I have a tattoo inspired by this book!</p>
+      {%- endif -%}
       {% if book.status == 'finished' %}
         <p class="sub-meta">Finished on: {{ book.date | date: "%B %e, %Y" }}</p>
       {% endif %}
@@ -54,44 +60,10 @@ schema: book
   {{ book.review | markdown }}
   <hr />
   {% endif %}
-  {%- if book.artists -%}
+  {% render "partials/blocks/associated-media.liquid", artists:book.artists %}
-    {%- capture sectionTitle -%}
+  {% render "partials/blocks/associated-media.liquid", movies:book.movies %}
-      {% if book.artists.size > 1 %}
+  {% render "partials/blocks/associated-media.liquid", shows:book.shows %}
-        I listen to artists featured in this book!
+  {% render "partials/blocks/associated-media.liquid", genres:book.genres %}
-      {% else %}
-      I listen to the artist featured in this book!
-      {%- endif -%}
-    {%- endcapture -%}
-    <p id="artists" class="music">
-      {% tablericon "headphones" "Music" %}
-      {{ sectionTitle }}
-    </p>
-    <ul>
-      {% for artist in book.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 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

@@ -58,7 +58,10 @@ schema: artist
       </p>
     </div>
   </div>
+  {% render "partials/blocks/associated-media.liquid", books:artist.books %}
+  {% render "partials/blocks/associated-media.liquid", movies:artist.movies %}
   {%- if artist.description -%}
+  <h3>Overview</h3>
   <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
   <button data-toggle-button>Show more</button>
   {%- endif -%}
@@ -90,37 +93,6 @@ schema: artist
       {% endfor %}
     </ul>
   {%- endif -%}
-  {%- if artist.books -%}
-  <hr />
-  <p id="books" class="books">
-    {% tablericon "books" "Books" %}
-    I've read about this artist!
-  </p>
-  <ul>
-    {% for book in artist.books %}
-      <li><a href="{{ book.url }}">{{ book.title }}</a> by {{ book.author }}</li>
-    {% endfor %}
-  </ul>
-  {%- endif -%}
-  {%- if artist.movies -%}
-    {%- capture sectionTitle -%}
-      {% if artist.movies.size > 1 %}
-        I've watched movies 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>

src/pages/dynamic/music/genre.html

@@ -28,8 +28,11 @@ schema: genre
   {%- if mediaLinks -%}
     <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ mediaLinks }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
     <hr />
-  {% endif %}
+  {%- endif -%}
+  {% render "partials/blocks/associated-media.liquid", books:genre.books %}
+  {% render "partials/blocks/associated-media.liquid", movies:genre.movies %}
   {%- if genre.description -%}
+    <h3>Overview</h3>
     <div data-toggle-content class="text-toggle-hidden">
       {{ genre.description | markdown }}
       <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>

src/pages/dynamic/watching/movie.html

@@ -41,6 +41,12 @@ schema: movie
         {%- endif -%}
       {% endif -%}
     </p>
+    {%- if movie.favorite -%}
+      <p class="sub-meta favorite">{% tablericon "heart" "Favorite" %} This is one of my favorite movies!</p>
+    {%- endif -%}
+    {%- if movie.tattoo -%}
+      <p class="sub-meta tattoo">{% tablericon "needle" "Tattoo" %} I have a tattoo inspired by this movie!</p>
+    {%- endif -%}
     {% if movie.lastWatched %}<p class="sub-meta">Last watched on {{ movie.lastWatched | date: "%B %e, %Y" }}.</p>{% endif %}
     <p class="sub-meta"><a href="https://themoviedb.org/movie/{{ movie.id }}" title="View {{ movie.title | escape }} on TMDB">View on TMDB</a></p>
   </div>
@@ -50,37 +56,10 @@ schema: movie
   {{ movie.review | markdown }}
   <hr />
   {% endif %}
-  {%- if movie.artists -%}
+  {% render "partials/blocks/associated-media.liquid", shows:movie.shows %}
-    {%- capture sectionTitle -%}
+  {% render "partials/blocks/associated-media.liquid", artists:movie.artists %}
-      {% if movie.artists.size > 1 %}
+  {% render "partials/blocks/associated-media.liquid", books:movie.books %}
-        I listen to artists featured in this movie!
+  {% render "partials/blocks/associated-media.liquid", genres:movie.genres %}
-      {% 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.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 }}

src/pages/dynamic/watching/show.html

@@ -34,6 +34,12 @@ schema: show
   />
   <div class="watching-meta">
     <p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
+    {%- if show.favorite -%}
+      <p class="sub-meta favorite">{% tablericon "heart" "Favorite" %} This is one of my favorite shows!</p>
+    {%- endif -%}
+    {%- if show.tattoo -%}
+      <p class="sub-meta tattoo">{% tablericon "needle" "Tattoo" %} I have a tattoo inspired by this show!</p>
+    {%- endif -%}
     {%- if lastWatched -%}
       {%- capture lastWatchedText -%}
         {%- if show.episodes -%}
@@ -52,6 +58,8 @@ schema: show
   {{ show.review | markdown }}
   <hr />
   {% endif %}
+  {% render "partials/blocks/associated-media.liquid", movies:show.movies %}
+  {% render "partials/blocks/associated-media.liquid", books:show.books %}
   {% if show.description %}
     <h3>Overview</h3>
     {{ show.description | markdown }}