feat: host tv + movies

_redirects

@@ -75,6 +75,8 @@
 /tags /search 301!
 /posts/0 /posts/ 200!
 /links/0 /links/ 200!
+/watching/movies-to-watch/0 /watching/movies-to-watch/ 200!
+/watching/shows-to-watch/0 /watching/shows-to-watch/ 200!
 /mastodon https://social.lol/@cory 301!
 /coffee https://www.buymeacoffee.com/cory 301!
 /speedlify https://speedlify.coryd.dev 301!

config/filters/index.js

@@ -72,6 +72,9 @@ export default {
     return text
   },
 
+  // watching
+  featuredWatching: (watching, count) => shuffleArray(watching.filter(watch => watch.favorite === true)).slice(0, count),
+
   // authors
   authorLookup: (url) => {
     if (!url) return null

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "14.6.1",
+  "version": "15.0.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
@@ -22,7 +22,7 @@
   "license": "MIT",
   "dependencies": {
     "@cdransf/api-text": "^1.2.2",
-    "@cdransf/select-pagination": "^1.0.5",
+    "@cdransf/select-pagination": "^1.1.0",
     "@cdransf/theme-toggle": "^1.2.3",
     "@daviddarnes/link-peek": "^1.1.0",
     "@daviddarnes/mastodon-post": "^1.3.0",
@@ -37,7 +37,7 @@
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
-    "@aws-sdk/client-s3": "^3.575.0",
+    "@aws-sdk/client-s3": "^3.576.0",
     "@cdransf/eleventy-plugin-tabler-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.43.1",
     "dotenv-flow": "^4.1.0",

src/_data/movies.js

@@ -5,8 +5,14 @@ const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
 
-export default async function () {
+const PAGE_SIZE = 1000
-  const { data: movies, error } = await supabase
+
+const fetchAllMovies = async () => {
+  let movies = []
+  let rangeStart = 0
+
+  while (true) {
+    const { data, error } = await supabase
       .from('movies')
       .select(`
         tmdb_id,
@@ -19,13 +25,29 @@ export default async function () {
         favorite
       `)
       .order('last_watched', { ascending: false })
+      .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
-  if (error) return []
+    if (error) {
+      console.error(error)
+      break
+    }
 
-  const formatMovieData = (movies) => movies.map((item) => {
+    movies = movies.concat(data)
+
+    if (data.length < PAGE_SIZE) break
+    rangeStart += PAGE_SIZE
+  }
+
+  return movies
+}
+
+export default async function () {
+  const movies = await fetchAllMovies()
+  const formatMovieData = (movies, watched = true) => movies.map((item) => {
     const movie = {
       title: item['title'],
-      dateAdded: item['last_watched'],
+      lastWatched: item['last_watched'],
+      year: item['year'],
       url: `https://www.themoviedb.org/movie/${item['tmdb_id']}`,
       description: `<p>${item['title']} (${item['year']})</p><p>Watched at: ${DateTime.fromISO(item['last_watched'], { zone: 'utc' }).setZone('America/Los_Angeles').toFormat('MMMM d, yyyy, h:mma')}</p>`,
       type: 'movie',
@@ -35,17 +57,18 @@ export default async function () {
       collected: item['collected'],
       favorite: item['favorite'],
     }
-    return movie;
+    return movie
-  })
+  }).filter(movie => watched ? movie['lastWatched'] : !movie['lastWatched'])
-
   const favoriteMovies = movies.filter(movie => movie['favorite'])
   const collectedMovies = movies.filter(movie => movie['collected'])
+  const recentlyWatchedMovies = movies.filter(movie => movie['last_watched']).sort((a, b) => new Date(b['last_watched']) - new Date(a['last_watched'])).slice(0, 6)
 
   return {
     movies,
     watchHistory: formatMovieData(movies),
-    recentlyWatched: formatMovieData(movies.slice(0, 6)),
+    recentlyWatched: formatMovieData(recentlyWatchedMovies),
-    favorites: formatMovieData(favoriteMovies),
+    favorites: formatMovieData(favoriteMovies).sort((a, b) => a['title'].localeCompare(b['title'])),
     collection: formatMovieData(collectedMovies),
+    toWatch: formatMovieData(movies, false).sort((a, b) => a['title'].localeCompare(b['title'])),
   }
 }

src/_data/music.js

@@ -32,6 +32,32 @@ const fetchDataForPeriod = async (startPeriod, fields, table) => {
   return rows
 }
 
+const fetchAllTimeData = async (fields, table) => {
+  const PAGE_SIZE = 1000
+  let rows = []
+  let rangeStart = 0
+
+  while (true) {
+    const { data, error } = await supabase
+      .from(table)
+      .select(fields)
+      .order('listened_at', { ascending: false })
+      .range(rangeStart, rangeStart + PAGE_SIZE - 1)
+
+    if (error) {
+      console.error(error)
+      break
+    }
+
+    rows = rows.concat(data)
+
+    if (data.length < PAGE_SIZE) break
+    rangeStart += PAGE_SIZE
+  }
+
+  return rows
+}
+
 const aggregateData = (data, groupByField, groupByType, sort = true) => {
   const aggregation = {}
   data.forEach(item => {
@@ -65,16 +91,14 @@ const aggregateData = (data, groupByField, groupByType, sort = true) => {
     aggregation[key].plays++
   })
   const aggregatedData = sort ? Object.values(aggregation).sort((a, b) => b.plays - a.plays) : Object.values(aggregation)
-  return aggregatedData
+  return aggregatedData.filter(item => item.plays > 0)
 }
 
-
 export default async function() {
   const periods = {
-    week: DateTime.now().minus({ days: 7 }).startOf('day'), // Last week
+    week: DateTime.now().minus({ days: 7 }).startOf('day'), // last week
-    month: DateTime.now().minus({ days: 30 }).startOf('day'), // Last 30 days
+    month: DateTime.now().minus({ days: 30 }).startOf('day'), // last 30 days
-    threeMonth: DateTime.now().minus({ months: 3 }).startOf('day'), // Last three months
+    threeMonth: DateTime.now().minus({ months: 3 }).startOf('day'), // last three months
-    year: DateTime.now().minus({ years: 1 }).startOf('day'), // Last 365 days
   }
 
   const results = {}
@@ -97,15 +121,23 @@ export default async function() {
     }
   }
 
+  // Fetch and aggregate all-time data
+  const allTimeData = await fetchAllTimeData(selectFields, 'listens')
+  results['allTime'] = {
+    artists: aggregateData(allTimeData, 'artist_name', 'artists'),
+    albums: aggregateData(allTimeData, 'album_name', 'albums'),
+    tracks: aggregateData(allTimeData, 'track_name', 'track')
+  }
+
   const recentData = await fetchDataForPeriod(DateTime.now().minus({ days: 7 }), selectFields, 'listens')
 
-  results.recent = {
+  results['recent'] = {
     artists: aggregateData(recentData, 'artist_name', 'artists'),
     albums: aggregateData(recentData, 'album_name', 'albums'),
     tracks: aggregateData(recentData, 'track_name', 'track'),
     tracksChronological: aggregateData(recentData, 'track_name', 'track', false),
   }
-  results.nowPlaying = results.recent.tracksChronological[0]
+  results['nowPlaying'] = results['recent']['tracksChronological'][0]
 
   return results
 }

src/_data/nav.js

@@ -21,7 +21,7 @@ export default async function () {
       { name: 'npm', url: 'https://www.npmjs.com/~cdransf', icon: 'brand-npm'},
       { name: 'Mastodon', url: 'https://social.lol/@cory', icon: 'brand-mastodon' },
       { name: 'ListenBrainz', url: 'https://listenbrainz.org/user/cdransf/', icon: 'brain' },
-      { name: 'Trakt', url: 'https://trakt.tv/users/cdransf', icon: 'device-tv' },
+      { name: 'Watching', url: '/watching', icon: 'device-tv' },
       { name: 'Instapaper', url: 'https://www.instapaper.com/p/coryd', icon: 'news' },
       { name: 'Books', url: '/books', icon: 'books' },
       { name: 'Webrings', url: '/webrings', icon: 'heart-handshake' },

src/_data/tv.js

@@ -4,22 +4,45 @@ const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
 
-export default async function () {
+const PAGE_SIZE = 1000
-  const { data: shows, error } = await supabase
+
+const fetchAllShows = async () => {
+  let shows = []
+  let rangeStart = 0
+
+  while (true) {
+    const { data, error } = await supabase
       .from('shows')
       .select(`
         title,
         tmdb_id,
         collected,
         favorite,
+        year,
         episodes (
           episode_number,
           season_number,
           last_watched_at
         )
       `)
+      .range(rangeStart, rangeStart + PAGE_SIZE - 1)
 
-  if (error) return []
+    if (error) {
+      console.error(error)
+      break
+    }
+
+    shows = shows.concat(data)
+
+    if (data.length < PAGE_SIZE) break
+    rangeStart += PAGE_SIZE
+  }
+
+  return shows
+}
+
+export default async function () {
+  const shows = await fetchAllShows()
 
   let episodes = []
   shows.forEach(show => {
@@ -29,14 +52,15 @@ export default async function () {
         show_title: show['title'],
         show_tmdb_id: show['tmdb_id'],
         collected: show['collected'],
-        favorite: show['favorite']
+        favorite: show['favorite'],
+        year: show['year']
       })
     })
   })
 
   episodes.sort((a, b) => new Date(b['last_watched_at']) - new Date(a['last_watched_at']))
   const allEpisodes = episodes
-  episodes = episodes.slice(0, 75)
+  const recentlyWatchedEpisodes = episodes.slice(0, 75)
 
   const formatEpisodeData = (episodes) => {
     const episodeData = []
@@ -55,8 +79,9 @@ export default async function () {
         showEpisodesMap[showTmdbId] = {
           title: showTitle,
           tmdbId: showTmdbId,
-          collected: collected,
+          collected,
-          favorite: favorite,
+          favorite,
+          lastWatchedAt,
           episodes: []
         }
       }
@@ -71,7 +96,7 @@ export default async function () {
         type: 'tv',
         image: `https://coryd.dev/media/shows/poster-${showTmdbId}.jpg`,
         backdrop: `https://coryd.dev/media/shows/backdrops/backdrop-${showTmdbId}.jpg`,
-        lastWatchedAt: lastWatchedAt
+        lastWatchedAt
       })
     })
 
@@ -101,8 +126,8 @@ export default async function () {
         })
       } else {
         const singleEpisode = show['episodes'][0]
-        singleEpisode.collected = show['collected']
+        singleEpisode['collected'] = show['collected']
-        singleEpisode.favorite = show['favorite']
+        singleEpisode['favorite'] = show['favorite']
         episodeData.push(singleEpisode)
       }
     })
@@ -112,24 +137,26 @@ export default async function () {
 
   const favoriteShows = shows.filter(show => show['favorite'])
   const collectedShows = shows.filter(show => show['collected'])
+  const toWatch = shows.filter(show => !show.episodes.some(episode => episode.last_watched_at)).sort((a, b) => a['title'].localeCompare(b['title']))
 
   return {
     shows,
     watchHistory: formatEpisodeData(allEpisodes),
-    recentlyWatched: formatEpisodeData(episodes),
+    recentlyWatched: formatEpisodeData(recentlyWatchedEpisodes),
     favorites: formatEpisodeData(favoriteShows.flatMap(show => show['episodes'].map(episode => ({
       ...episode,
       show_title: show['title'],
       show_tmdb_id: show['tmdb_id'],
       collected: show['collected'],
       favorite: show['favorite']
-    })))),
+    })))).sort((a, b) => a['name'].localeCompare(b['name'])),
     collection: formatEpisodeData(collectedShows.flatMap(show => show['episodes'].map(episode => ({
       ...episode,
       show_title: show['title'],
       show_tmdb_id: show['tmdb_id'],
       collected: show['collected'],
       favorite: show['favorite']
-    }))))
+    })))),
+    toWatch
   }
 }

src/_includes/book-year.liquid

@@ -5,7 +5,7 @@ layout: default
 {%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
 {%- assign yearString = year | append: '' -%}
 {%- assign currentYearString = currentYear | append: '' -%}
-<p><a class="link-arrow flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<p><a class="link-icon flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 {{ content }}
 {% if yearString == currentYearString %}

src/_includes/now.liquid

@@ -15,7 +15,7 @@ layout: default
     <button class="small active" data-toggle="artists-window">This week</button>
     <button class="small secondary" data-toggle="artists-month">This month</button>
     <button class="small secondary" data-toggle="artists-three-months">3 months</button>
-    <button class="small secondary" data-toggle="artists-year">This year</button>
+    <button class="small secondary" data-toggle="artists-all-time">All time</button>
   </div>
 </div>
 <div id="artists-window">
@@ -27,8 +27,8 @@ layout: default
 <div class="hidden" id="artists-three-months">
   {% render "partials/now/media-grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8 %}
 </div>
-<div class="hidden" id="artists-year">
+<div class="hidden" id="artists-all-time">
-  {% render "partials/now/media-grid.liquid", data:music.year.artists, shape: "square", count: 8 %}
+  {% render "partials/now/media-grid.liquid", data:music.allTime.artists, shape: "square", count: 8 %}
 </div>
 <div class="section-header-wrapper">
   <h2 id="albums" class="section-header flex-centered">
@@ -39,7 +39,7 @@ layout: default
     <button class="small active" data-toggle="albums-window">This week</button>
     <button class="small secondary" data-toggle="albums-month">This month</button>
     <button class="small secondary" data-toggle="albums-three-months">3 months</button>
-    <button class="small secondary" data-toggle="albums-year">This year</button>
+    <button class="small secondary" data-toggle="albums-all-time">All time</button>
   </div>
 </div>
 <div id="albums-window">
@@ -51,8 +51,8 @@ layout: default
 <div class="hidden" id="albums-three-months">
   {% render "partials/now/media-grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
 </div>
-<div class="hidden" id="albums-year">
+<div class="hidden" id="albums-all-time">
-  {% render "partials/now/media-grid.liquid", data:music.year.albums, shape: "square", count: 8 %}
+  {% render "partials/now/media-grid.liquid", data:music.allTime.albums, shape: "square", count: 8 %}
 </div>
 <div class="section-header-wrapper">
   <h2 id="tracks" class="section-header flex-centered">
@@ -83,22 +83,28 @@ layout: default
   {% render "partials/now/track-chart.liquid", data:music.year.tracks, mostPlayed:music.year.tracks[0].plays %}
 </div>
 {% render "partials/now/album-releases.liquid", albumReleases:albumReleases %}
-<h2 id="books" class="section-header flex-centered">
+<a class="link-icon flex-centered" href="/books">
+  <h2 id="books" class="section-header flex-centered">
     {% tablericon "books" "Books" %}
     Books
-</h2>
+  </h2>
+</a>
 {% assign bookData = books | bookStatus: 'started' | reverse %}
 {% render "partials/now/media-grid.liquid", data:bookData, shape: "vertical", count: 6 %}
 {% render "partials/widgets/recent-links.liquid", links:collections.links %}
-<h2 id="movies" class="section-header flex-centered">
+<a class="link-icon flex-centered" href="/watching#movies">
+  <h2 id="movies" class="section-header flex-centered">
     {% tablericon "movie" "Movies" %}
     Movies
-</h2>
+  </h2>
-{% render "partials/now/media-grid.liquid", data:movies.recentlyWatched, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
+</a>
-<h2 id="tv" class="section-header flex-centered">
+{% render "partials/now/media-grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
+<a class="link-icon flex-centered" href="/watching#tv">
+  <h2 id="tv" class="section-header flex-centered">
     {% tablericon "device-tv" "TV" %}
     TV
-</h2>
+  </h2>
-{% render "partials/now/media-grid.liquid", data:tv.recentlyWatched, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
+</a>
+{% render "partials/now/media-grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
 <p class="now-explainer text-small text-centered">This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
 <p class="text-small text-centered"><em>This page was last updated on {{ "now"  | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>

src/_includes/partials/home/posts.liquid

@@ -23,6 +23,6 @@
   </article>
   {% endfor %}
   {% if postType != 'featured' %}
-    <a class="link-arrow flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
+    <a class="link-icon flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
   {% endif %}
 </div>

src/_includes/partials/watching/favorites-grid.liquid

@@ -0,0 +1,23 @@
+{% if favorites.size > 0 %}
+  <div class="watching grid">
+    {% for favorite in favorites limit: count %}
+      {% capture alt %}{{ favorite.title | escape }} ({{ favorite.year }}){% endcapture %}
+      <a href="{{ favorite.url }}">
+        <div class="watching item shadow">
+          <div class="meta-text">
+            {% if favorite.type == 'movie' %}
+              <div class="header">{{ favorite.title }}</div>
+              <div class="subheader">{{ favorite.year }}</div>
+            {% else %}
+              <div class="header">{{ favorite.name }}</div>
+            {% endif %}
+          </div>
+          {%- capture loadingStrategy -%}
+            {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
+          {%- endcapture -%}
+          <img src="https://coryd.dev/.netlify/images/?url={{ favorite.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=75" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+{% endif %}

src/_includes/partials/watching/hero.liquid

@@ -0,0 +1,7 @@
+{% capture alt %}{{ movie.title | escape }} ({{ movie.year }}){% endcapture %}
+<a href="{{ movie.url }}">
+  <div class="watching hero shadow">
+    <span>{{ movie.title }} ({{ movie.year }})</span>
+    <img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=1200&h=675&fm=webp&q=75" alt="{{ alt }}" loading="eager" decoding="async" width="1200" height="765" />
+  </div>
+</a>

src/assets/styles/base/index.css

@@ -284,13 +284,13 @@ a svg:focus {
   stroke: var(--accent-color-hover);
 }
 
-a.link-arrow svg {
+a.link-icon svg {
   stroke: var(--accent-color);
 }
 
-a.link-arrow:hover svg,
+a.link-icon:hover svg,
-a.link-arrow:active svg,
+a.link-icon:active svg,
-a.link-arrow:focus svg {
+a.link-icon:focus svg {
   transform: rotate(0deg);
   stroke: var(--accent-color-hover);
 }

src/assets/styles/index.css

@@ -23,6 +23,7 @@
 @import url('./pages/links.css') layer(page);
 @import url('./pages/now.css') layer(page);
 @import url('./pages/post.css') layer(page);
+@import url('./pages/watching.css') layer(page);
 @import url('./pages/webrings.css') layer(page);
 
 /* component styles */

src/assets/styles/pages/watching.css

@@ -0,0 +1,106 @@
+.watching {
+  &.page-header {
+    margin-bottom: var(--sizing-base);
+  }
+
+  &.hero {
+    position: relative;
+    overflow: hidden;
+
+    span {
+      color: white;
+      font-weight: var(--font-weight-bold);
+      position: absolute;
+      left: var(--sizing-sm);
+      bottom: var(--sizing-md);
+      z-index: 2;
+    }
+
+    & img {
+      width: 100%;
+      height: auto;
+      border: 1px solid var(--accent-color);
+    }
+
+    &.shadow::after {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      bottom: 10px;
+      left: 1px;
+      box-shadow: inset 0 -70px 75px -40px #000;
+      width: calc(100% - 2px);
+      height: calc(100% - 11px);
+    }
+  }
+
+  &.grid {
+    display: grid;
+    gap: var(--sizing-sm);
+    grid-template-columns: repeat(2,minmax(0,1fr));
+
+    & a,
+    & div {
+      display: flex;
+    }
+
+    & div {
+      position: relative;
+    }
+
+    & .meta-text {
+      position: absolute;
+      z-index: 2;
+      padding: 0 var(--sizing-sm);
+      bottom: var(--sizing-sm);
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+
+      & .header,
+      & .subheader {
+        color: var(--color-lightest);
+        font-size: var(--font-size-xs);
+        line-height: 1.5;
+        text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
+      }
+
+      & .header {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    & img {
+      width: 100%;
+      height: auto;
+      border: 1px solid var(--accent-color);
+    }
+  }
+
+  &.item {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    overflow: hidden;
+
+    &.shadow::after {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      top: 0;
+      left: 1px;
+      box-shadow: inset 0 -70px 75px -40px #000;
+      width: calc(100% - 2px);
+      height: calc(100% - 1px);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .watching.grid {
+    grid-template-columns: repeat(3,minmax(0,1fr))
+  }
+}

src/feeds/movies.liquid

@@ -8,6 +8,6 @@ permalink: /feeds/movies
   title:"Movies • Cory Dransfeldt"
   description:"Movies I've watched recently."
   data:movies.recentlyWatched
-  updated:movies.recentlyWatched[0].dateAdded
+  updated:movies.recentlyWatched[0].lastWatched
   site:site
 %}

src/pages/books/want-to-read.html

@@ -15,7 +15,7 @@ permalink: "/books/want-to-read/{{ pagination.pageNumber }}/index.html"
 <ul class="link-list reduced-spacing">
   {% for book in pagination.items %}
     <li>
-      <a href="{{ book.url }}" title="{{ book.title | escape }}">
+      <a href="{{ book.url }}">
         <strong>{{ book.title }}</strong>
       </a>
       {% if book.authors %}by {{ book.authors }}{% endif %}{% if book.categories %} • <em>{{ book.categories }}</em>{% endif %}

src/pages/watching/favorite-movies.html

@@ -0,0 +1,9 @@
+---
+title: Favorite movies
+layout: default
+permalink: "/watching/favorite-movies/index.html"
+---
+<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="watching page-header">{{ title }}</h2>
+<p>These are my favorite movies. There are many like them, but these are mine.</p>
+{% render "partials/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}

src/pages/watching/favorite-shows.html

@@ -0,0 +1,9 @@
+---
+title: Favorite shows
+layout: default
+permalink: "/watching/favorite-shows/index.html"
+---
+<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="watching page-header">{{ title }}</h2>
+<p>These are my favorite shows. There are many like them, but these are mine.</p>
+{% render "partials/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}

src/pages/watching/index.html

@@ -0,0 +1,35 @@
+---
+title: Watching
+layout: default
+permalink: "/watching/index.html"
+---
+{% assign featuredMovie = movies.favorites | featuredWatching: 1 | first %}
+<h2 class="watching page-header">{{ title }}</h2>
+{% render "partials/watching/hero.liquid" movie:featuredMovie %}
+<p>Here's all of the TV and movies I've been watching recently presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch/0">movies</a> and <a href="/watching/shows-to-watch/0">shows</a> I'm planning to watch.</p>
+<h2 id="movies" class="section-header flex-centered">
+  {% tablericon "movie" "Recent movies" %}
+  Recent movies
+</h2>
+{% render "partials/now/media-grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
+<h2 id="tv" class="section-header flex-centered">
+  {% tablericon "device-tv" "Recent shows" %}
+  Recent shows
+</h2>
+{% render "partials/now/media-grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
+<a class="link-icon flex-centered" href="/watching/favorite-movies">
+  <h2 class="section-header flex-centered">
+    {% tablericon "star" "Favorite movies" %}
+    Favorite movies
+  </h2>
+</a>
+{% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
+{% render "partials/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
+<a class="link-icon flex-centered" href="/watching/favorite-shows">
+  <h2 class="section-header flex-centered">
+    {% tablericon "star" "Favorite shows" %}
+    Favorite shows
+  </h2>
+</a>
+{% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
+{% render "partials/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}

src/pages/watching/movies-to-watch.html

@@ -0,0 +1,26 @@
+---
+title: Movies to watch
+layout: default
+pagination:
+  data: movies.toWatch
+  alias: movies
+  size: 30
+permalink: "/watching/movies-to-watch/{{ pagination.pageNumber }}/index.html"
+---
+<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+{% if pagination.pageNumber == 0 %}
+<h2 class="page-header">{{ title }}</h2>
+<p>These are movies I want to watch, sorted in alphabetical order. As one would expect, it will change as I navigate through and add to it.</p>
+<hr class="large-spacing" />
+{% endif %}
+<ul class="link-list reduced-spacing">
+  {% for movie in pagination.items %}
+    <li>
+      <a href="{{ movie.url }}">
+        <strong>{{ movie.title }}</strong>
+      </a>
+      ({{ movie.year }})
+    </li>
+  {% endfor %}
+</ul>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/watching/shows-to-watch.html

@@ -0,0 +1,26 @@
+---
+title: Shows to watch
+layout: default
+pagination:
+  data: tv.toWatch
+  alias: shows
+  size: 30
+permalink: "/watching/shows-to-watch/{{ pagination.pageNumber }}/index.html"
+---
+<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+{% if pagination.pageNumber == 0 %}
+<h2 class="page-header">{{ title }}</h2>
+<p>These are shpws I want to watch, sorted in alphabetical order. As one would expect, it will change as I navigate through and add to it.</p>
+<hr class="large-spacing" />
+{% endif %}
+<ul class="link-list reduced-spacing">
+  {% for show in pagination.items %}
+    <li>
+      <a href="{{ show.url }}">
+        <strong>{{ show.title }}</strong>
+      </a>
+      {% if show.year %}({{ show.year }}){% endif %}
+    </li>
+  {% endfor %}
+</ul>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}