feat: dedicated music page

src/pages/main/watching/favorite-movies.html

@@ -0,0 +1,10 @@
+---
+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>
+<hr class="large-spacing" />
+{% render "partials/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}

src/pages/main/watching/favorite-shows.html

@@ -0,0 +1,10 @@
+---
+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>
+<hr class="large-spacing" />
+{% render "partials/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}

src/pages/main/watching/index.html

@@ -0,0 +1,36 @@
+---
+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 presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
+{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
+<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/main/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/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}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/main/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/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}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 %}