feat: lightweight media pages

src/_data/movies.js

@@ -22,7 +22,8 @@ const fetchAllMovies = async () => {
         collected,
         plays,
         favorite,
-        rating
+        rating,
+        description
       `)
       .order('last_watched', { ascending: false })
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -49,7 +50,7 @@ export default async function () {
       lastWatched: item['last_watched'],
       dateAdded: item['last_watched'],
       year: item['year'],
-      url: `https://www.themoviedb.org/movie/${item['tmdb_id']}`,
+      url: `https://coryd.dev/movies/${item['tmdb_id']}`,
       description: `${item['title']} (${item['year']})<br/>Watched at: ${DateTime.fromISO(item['last_watched'], { zone: 'utc' }).setZone('America/Los_Angeles').toFormat('MMMM d, yyyy, h:mma')}`,
       image: `https://coryd.dev/media/movies/poster-${item['tmdb_id']}.jpg`,
       backdrop: `https://coryd.dev/media/movies/backdrops/backdrop-${item['tmdb_id']}.jpg`,
@@ -57,6 +58,8 @@ export default async function () {
       collected: item['collected'],
       favorite: item['favorite'],
       rating: item['rating'],
+      description: item['description'],
+      id: item['tmdb_id'],
       type: 'movie'
     }
     return movie

src/_data/tv.js

@@ -18,6 +18,7 @@ const fetchAllShows = async () => {
         collected,
         favorite,
         year,
+        description,
         episodes (
           episode_number,
           season_number,
@@ -88,7 +89,7 @@ export default async function () {
 
       showEpisodesMap[showTmdbId].episodes.push({
         name: showTitle,
-        url: `https://www.themoviedb.org/tv/${showTmdbId}/season/${seasonNumber}/episode/${episodeNumber}`,
+        url: `https://coryd.dev/shows/${showTmdbId}`,
         subtext: `${showTitle} • S${seasonNumber}E${episodeNumber}`,
         episode: episodeNumber,
         season: seasonNumber,
@@ -112,7 +113,7 @@ export default async function () {
       if (show.episodes.length > 1) {
         episodeData.push({
           name: show.title,
-          url: `https://www.themoviedb.org/tv/${show['tmdbId']}`,
+          url: `https://coryd.dev/shows/${show['tmdbId']}`,
           subtext: `S${startingSeason}E${startingEpisode} - S${endingSeason}E${endingEpisode}`,
           startingEpisode,
           startingSeason,
@@ -138,7 +139,7 @@ export default async function () {
 
   const favoriteShows = shows.filter(show => show['favorite'])
   const collectedShows = shows.filter(show => show['collected'])
-  const toWatch = shows.map(show => ({...show, url: `https://www.themoviedb.org/tv/${show['tmdb_id']}`})).filter(show => !show.episodes.some(episode => episode.last_watched_at)).sort((a, b) => a['title'].localeCompare(b['title']))
+  const toWatch = shows.map(show => ({...show, url: `https://coryd.dev/shows/${show['tmdb_id']}`})).filter(show => !show.episodes.some(episode => episode.last_watched_at)).sort((a, b) => a['title'].localeCompare(b['title']))
 
   return {
     shows,

src/_includes/base.liquid

@@ -6,6 +6,10 @@
     {{ title }} • {{ meta.siteName }}
   {% elsif book.title %}
     Books • {{ book.title }} • {{ meta.siteName }}
+  {% elsif movie.title %}
+    Movies • {{ movie.title }} • {{ meta.siteName }}
+  {% elsif movie.title %}
+    Shows • {{ show.title }} • {{ meta.siteName }}
   {% else %}
     {{ meta.siteName }}
   {%- endif -%}
@@ -15,6 +19,10 @@
     {{ post_excerpt | markdown | strip_html }}
   {% elsif book.description %}
     {{ book.description }}
+  {% elsif movie.description %}
+    {{ movie.description }}
+  {% elsif show.description %}
+    {{ show.description }}
   {% elsif description %}
     {{ description }}
   {% else %}
@@ -34,6 +42,10 @@
     {{ featuredBook.image }}
   {%- elsif schema == 'book' -%}
     {{ book.image }}
+  {%- elsif schema == 'movie' -%}
+    {{ movie.backdrop }}
+  {%- elsif schema == 'show' -%}
+    {{ meta.url }}/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg
   {%- else -%}
     {{ meta.meta_data.opengraph_default }}
   {%- endif -%}

src/assets/styles/pages/watching.css

@@ -118,6 +118,34 @@
   }
 }
 
+.watching-focus {
+  border-bottom: 0;
+
+  & .watching-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+    margin-top: var(--sizing-base);
+
+    & p {
+      &.title {
+        font-size: var(--font-size-xl);
+      }
+
+      &.sub-meta {
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+      }
+
+      &.title,
+      &.rating,
+      &.sub-meta {
+        margin: 0;
+      }
+    }
+  }
+}
+
 @media screen and (min-width: 768px) {
   .watching.grid {
     grid-template-columns: repeat(3,minmax(0,1fr))

src/pages/main/books/book.html

@@ -8,6 +8,9 @@ permalink: /books/{{ book.isbn }}/
 isbn: {{ book.isbn }}
 schema: book
 ---
+{%- capture alt -%}
+  {{ book.title }}{% if book.authors %}By {{ book.authors }}{% endif %}
+{%- endcapture -%}
 <a class="back-link-header link-icon flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <article class="book-focus">
   <div class="book-display">

src/pages/main/watching/movie.html

@@ -0,0 +1,23 @@
+---
+layout: default
+pagination:
+  data: movies.movies
+  size: 1
+  alias: movie
+permalink: /movies/{{ movie.id }}/
+schema: movie
+---
+{%- capture alt -%}
+  {{ movie.title }} • {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
+{%- endcapture -%}
+<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+<article class="watching-focus">
+  <img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
+  <div class="watching-meta">
+    <p class="title"><strong>{{ movie.title }}</strong></p>
+    {% if movie.rating %}<p class="rating">{{ movie.rating }}</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 }}">View on TMDB</a></p>
+  </div>
+  {% if movie.description %}<p><em>{{ movie.description }}</em></p>{% endif %}
+</article>

src/pages/main/watching/show.html

@@ -0,0 +1,23 @@
+---
+layout: default
+pagination:
+  data: tv.shows
+  size: 1
+  alias: show
+permalink: /shows/{{ show.tmdb_id }}/
+schema: show
+---
+{%- capture alt -%}
+  {{ show.title }} • {{ show.year }}
+{%- endcapture -%}
+{% assign lastWatched = show | getLastWatched %}
+<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+<article class="watching-focus">
+  <img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
+  <div class="watching-meta">
+    <p class="title"><strong>{{ show.title }}</strong></p>
+    {% if lastWatched %}<p class="sub-meta">Last watched on: {{ lastWatched | date: "%B %e, %Y" }}</p>{% endif %}
+    <p class="sub-meta"><a href="https://themoviedb.org/tv/{{ show.tmdb_id }}">View on TMDB</a></p>
+  </div>
+  {% if show.description %}<p><em>{{ show.description }}</em></p>{% endif %}
+</article>