feat: related posts + show tags

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "23.0.1",
+  "version": "24.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "23.0.1",
+      "version": "24.0.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -792,9 +792,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001651",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
-      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+      "version": "1.0.30001653",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
+      "integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==",
       "dev": true,
       "funding": [
         {

package.json

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

src/assets/styles/base/index.css

@@ -141,6 +141,14 @@ p.music {
   }
 }
 
+p.posts {
+  color: var(--posts);
+
+  & svg {
+    stroke: var(--posts);
+  }
+}
+
 p.tattoo {
   color: var(--tattoo);
 

src/assets/styles/defaults/vars.css

@@ -74,6 +74,7 @@
 
   /* borders */
   --border-default: 1px solid var(--accent-color);
+  --border-gray: 1px solid var(--gray-light);
 
   /* fonts */
   --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

src/assets/styles/pages/post.css

@@ -1,3 +1,15 @@
+article.standalone .associated-media:last-of-type > hr {
+  display: none;
+}
+
+p + .associated-media,
+img + .associated-media,
+.banner + .associated-media,
+youtube-video + .associated-media {
+  margin-top: var(--sizing-base);
+  border-top: var(--border-gray)
+}
+
 .footnotes {
   & .footnotes-list {
     margin-bottom: 0;
@@ -11,6 +23,15 @@
       display: inline;
     }
   }
+
+  & ~ youtube-video {
+    margin-top: var(--sizing-base);
+  }
+
+  & + .associated-media {
+    margin-top: var(--sizing-base);
+    border-top: var(--border-gray);
+  }
 }
 
 sup.footnote-ref {

src/data/artists.js

@@ -29,7 +29,8 @@ const fetchAllArtists = async () => {
         albums,
         concerts,
         books,
-        movies
+        movies,
+        posts
       `)
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
@@ -82,6 +83,13 @@ const processArtists = (artists) => {
       tmdb_id: movie['tmdb_id'],
       url: `/watching/movies/${movie['tmdb_id']}`,
     })).sort((a, b) => b['year'] - a['year']) : null,
+    posts: artist['posts']?.[0]?.['id'] ? artist['posts'].map(post => ({
+      id: post['id'],
+      title: post['title'],
+      date: post['date'],
+      slug: post['slug'],
+      url: post['slug'],
+    })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
   }))
 }
 

src/data/books.js

@@ -32,7 +32,8 @@ const fetchAllBooks = async () => {
         artists,
         movies,
         genres,
-        shows
+        shows,
+        posts
       `)
       .order('date_finished', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -68,7 +69,7 @@ const processBooks = (books) => {
       date: book['date_finished'],
       status: book['read_status'],
       progress: book['progress'],
-      tags: Array.isArray(book['tags']) ? book['tags'] : book['tags']?.split(',') || [], // Ensure tags is an array
+      tags: Array.isArray(book['tags']) ? book['tags'] : book['tags']?.split(',') || [],
       isbn: book['isbn'],
       type: 'book',
       artists: book['artists']?.[0]?.['id'] ? book['artists'].map(artist => {
@@ -87,6 +88,13 @@ const processBooks = (books) => {
         show['url'] = `/watching/shows/${show['tmdb_id']}`
         return show
       }).sort((a, b) => b['year'] - a['year']) : null,
+      posts: book['posts']?.[0]?.['id'] ? book['posts'].map(post => ({
+        id: post['id'],
+        title: post['title'],
+        date: post['date'],
+        slug: post['slug'],
+        url: post['slug'],
+      })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
       year,
     }
   })

src/data/genres.js

@@ -23,7 +23,8 @@ const fetchGenresWithArtists = async () => {
         favorite
       ),
       books,
-      movies
+      movies,
+      posts
     `)
     .order('id', { ascending: true })
 
@@ -52,6 +53,13 @@ const fetchGenresWithArtists = async () => {
       tmdb_id: movie['tmdb_id'],
       url: `/watching/movies/${movie['tmdb_id']}`,
     })).sort((a, b) => b['year'] - a['year']) : null,
+    posts: genre['posts']?.[0]?.['id'] ? genre['posts'].map(post => ({
+      id: post['id'],
+      title: post['title'],
+      date: post['date'],
+      slug: post['slug'],
+      url: post['slug'],
+    })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
   }))
 }
 

src/data/movies.js

@@ -34,7 +34,8 @@ const fetchAllMovies = async () => {
         artists,
         books,
         genres,
-        shows
+        shows,
+        posts
       `)
       .order('last_watched', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -88,6 +89,13 @@ const processMovies = (movies) => {
       show['url'] = `/watching/shows/${show['tmdb_id']}`
       return show
     }).sort((a, b) => b['year'] - a['year']) : null,
+    posts: item['posts']?.[0]?.['id'] ? item['posts'].map(post => ({
+      id: post['id'],
+      title: post['title'],
+      date: post['date'],
+      slug: post['slug'],
+      url: post['slug'],
+    })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
   }))
 }
 

src/data/posts.js

@@ -1,4 +1,6 @@
 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']
 const SUPABASE_KEY = process.env['SUPABASE_KEY']
@@ -92,9 +94,11 @@ const fetchAllPosts = async () => {
 
 const processPosts = async (posts, tagsByPostId, blocksByPostId) => {
   return Promise.all(posts.map(async post => {
+    // tags
     post['tags'] = tagsByPostId[post['id']] || []
-    const blocks = blocksByPostId[post['id']] || []
 
+    // blocks
+    const blocks = blocksByPostId[post['id']] || []
     post['blocks'] = await Promise.all(blocks.map(async block => {
       const blockData = await fetchBlockData(block['collection'], block['item'])
       if (!blockData) return null
@@ -105,7 +109,42 @@ const processPosts = async (posts, tagsByPostId, blocksByPostId) => {
       }
     })).then(blocks => blocks.filter(block => block !== null))
 
+    // artists
+    post['artists'] = post['artists']?.[0]?.['id'] ? post['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
+
+    // books
+    post['books'] = post['books']?.[0]?.['id'] ? post['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
+    post['movies'] = post['movies']?.[0]?.['id'] ? post['movies'].map(movie => {
+      movie['url'] = `/watching/movies/${movie['tmdb_id']}`
+      return movie
+    }).sort((a, b) => b['year'] - a['year']) : null
+
+    // genres
+    post['genres'] = post['genres']?.[0]?.['id'] ? post['genres'].map(genre => {
+      genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
+      return genre
+    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null
+
+    // shows
+    post['shows'] = post['shows']?.[0]?.['id'] ? post['shows'].map(show => {
+      show['url'] = `/watching/shows/${show['tmdb_id']}`
+      return show
+    }).sort((a, b) => b['year'] - a['year']) : null
+
+    // image
     if (post['image']) post['image'] = post['image']['filename_disk']
+
     return post
   }))
 }

src/data/tv.js

@@ -25,9 +25,11 @@ const fetchAllShows = async () => {
         review,
         art,
         backdrop,
+        tags,
         episodes,
         movies,
-        books
+        books,
+        posts
       `)
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
@@ -51,6 +53,7 @@ const prepareShowData = (show) => ({
   url: `/watching/shows/${show['tmdb_id']}`,
   episodes: show['episodes'] || [],
   tattoo: show['tattoo'],
+  tags: Array.isArray(show['tags']) ? show['tags'] : show['tags']?.split(',') || [],
   movies: show['movies']?.[0]?.['id'] ? show['movies'].map(movie => {
     movie['url'] = `/watching/movies/${movie['tmdb_id']}`
     return movie
@@ -62,6 +65,13 @@ const prepareShowData = (show) => ({
     description: book['description'],
     url: `/books/${book['isbn']}`,
   })).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
+  posts: show['posts']?.[0]?.['id'] ? show['posts'].map(post => ({
+    id: post['id'],
+    title: post['title'],
+    date: post['date'],
+    slug: post['slug'],
+    url: post['slug'],
+  })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
 })
 
 const prepareEpisodeData = (show) => show['episodes'].map(episode => ({

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

@@ -1,3 +1,4 @@
+{% if artists or books or genres or movies or posts or shows %}<div class="associated-media">{% endif %}
   {% comment %} render related artists {% endcomment %}
   {%- if artists -%}
     <p id="artists" class="music">
@@ -50,6 +51,19 @@
     </ul>
     <hr />
   {%- endif -%}
+  {% comment %} render related posts {% endcomment %}
+  {%- if posts -%}
+    <p id="posts" class="posts">
+      {% tablericon "article" "Related post(s)" %}
+      Related post(s)
+    </p>
+    <ul>
+      {% for post in posts %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.date | date: "%B %e, %Y" }})</li>
+      {% endfor %}
+    </ul>
+    <hr />
+  {%- endif -%}
   {% comment %} render related shows {% endcomment %}
   {%- if shows -%}
     <p id="tv" class="tv">
@@ -63,3 +77,4 @@
     </ul>
     <hr />
   {%- endif -%}
+{% if artists or books or genres or movies or posts or shows %}</div>{% endif %}

src/includes/partials/blocks/youtube-player.liquid

@@ -1,3 +1,3 @@
 <script type="module" src="/assets/scripts/components/youtube-video-element.js?v={% appVersion %}"></script>
-<style>youtube-video{aspect-ratio:16/9;width:100%;margin-bottom:var(--sizing-base)}</style>
+<style>youtube-video{aspect-ratio:16/9;width:100%}</style>
 <youtube-video controls src="{{ url }}"></youtube-video>

src/pages/dynamic/books/book.html

@@ -60,6 +60,7 @@ schema: book
   {{ book.review | markdown }}
   <hr />
   {% endif %}
+  {% render "partials/blocks/associated-media.liquid", posts:book.posts %}
   {% render "partials/blocks/associated-media.liquid", artists:book.artists %}
   {% render "partials/blocks/associated-media.liquid", movies:book.movies %}
   {% render "partials/blocks/associated-media.liquid", shows:book.shows %}

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

@@ -58,6 +58,7 @@ schema: artist
       </p>
     </div>
   </div>
+  {% render "partials/blocks/associated-media.liquid", posts:artist.posts %}
   {% render "partials/blocks/associated-media.liquid", books:artist.books %}
   {% render "partials/blocks/associated-media.liquid", movies:artist.movies %}
   {%- if artist.description -%}

src/pages/dynamic/music/genre.html

@@ -29,6 +29,7 @@ schema: genre
     <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 -%}
+  {% render "partials/blocks/associated-media.liquid", posts:genre.posts %}
   {% render "partials/blocks/associated-media.liquid", books:genre.books %}
   {% render "partials/blocks/associated-media.liquid", movies:genre.movies %}
   {%- if genre.description -%}

src/pages/dynamic/posts/post.html

@@ -37,5 +37,10 @@ schema: blog
     {%- endif -%}
     {{ post.content | markdown }}
     {% render "partials/blocks/index.liquid", blocks:post.blocks %}
+    {% render "partials/blocks/associated-media.liquid", artists:post.artists %}
+    {% render "partials/blocks/associated-media.liquid", books:post.books %}
+    {% render "partials/blocks/associated-media.liquid", genres:post.genres %}
+    {% render "partials/blocks/associated-media.liquid", movie:post.movies %}
+    {% render "partials/blocks/associated-media.liquid", shows:post.shows %}
   </div>
 </article>

src/pages/dynamic/watching/movie.html

@@ -56,6 +56,7 @@ schema: movie
   {{ movie.review | markdown }}
   <hr />
   {% endif %}
+  {% render "partials/blocks/associated-media.liquid", posts:movie.posts %}
   {% render "partials/blocks/associated-media.liquid", shows:movie.shows %}
   {% render "partials/blocks/associated-media.liquid", artists:movie.artists %}
   {% render "partials/blocks/associated-media.liquid", books:movie.books %}

src/pages/dynamic/watching/show.html

@@ -58,6 +58,7 @@ schema: show
   {{ show.review | markdown }}
   <hr />
   {% endif %}
+  {% render "partials/blocks/associated-media.liquid", posts:show.posts %}
   {% render "partials/blocks/associated-media.liquid", movies:show.movies %}
   {% render "partials/blocks/associated-media.liquid", books:show.books %}
   {% if show.description %}