feat: dedicated music page

src/pages/main/books/index.html

@@ -0,0 +1,30 @@
+---
+title: Currently reading • Books
+layout: default
+permalink: "/books/index.html"
+---
+{%- assign bookData = books | bookStatus: 'started' | reverse -%}
+{%- assign currentBookCount = books | currentBookCount -%}
+<h2 class="page-header">Currently reading</h2>
+{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-books", text: "Subscribe to my books feed or follow along on this page" %}
+<p>Here's what I'm reading at the moment. <a href="/books/want-to-read/">You can also take a look at what I'm planning to read (eventually).</a></p>
+<p>I've finished <strong class="highlight-text">{{ currentBookCount }} books</strong> this year.</p>
+<p><a href="/books/years/2024">2024</a> • <a href="/books/years/2023">2023</a> • <a href="/books/years/2022">2022</a> • <a href="/books/years/2021">2021</a> • <a href="/books/years/2020">2020</a></p>
+<hr class="large-spacing" />
+{% for book in bookData %}
+{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
+<article class="book-entry">
+  <a href="{{ book.url }}">
+    <img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=80&w=137&h=209&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="137" height="209" />
+  </a>
+  <div class="book-meta">
+    <a href="{{ book.url }}">
+      <p class="title"><strong>{{ book.title }}</strong></p>
+    </a>
+    {% if book.authors or book.categories %}
+    <p class="author-categories">{% if book.authors %}By {{ book.authors }}{% endif %}{% if book.categories %}{% if book.authors %}• {% endif %}<em>{{ book.categories }}</em>{% endif %}</p>
+    {% endif %}
+    {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
+  </div>
+</article>
+{% endfor %}

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

@@ -0,0 +1,25 @@
+---
+title: Want to read • Books
+layout: default
+pagination:
+  data: collections.booksToRead
+  alias: books
+  size: 30
+permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+{% if pagination.pageNumber == 0 %}
+<h2 class="page-header">Want to read</h2>
+<p>These are books I want to read, 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 book in pagination.items %}
+    <li>
+      <a href="{{ book.url }}">
+        <strong>{{ book.title }}</strong>
+      </a>
+      {% if book.authors %}by {{ book.authors }}{% endif %}{% if book.categories %} • <em>{{ book.categories }}</em>{% endif %}
+    </li>
+  {% endfor %}
+</ul>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/books/years/2020.html

@@ -0,0 +1,7 @@
+---
+title: 2020 • Books
+year: 2020
+layout: book-year
+permalink: "/books/years/2020.html"
+---
+<p>This is everything I read in 2020. My favorites were: every book in <em>The Expanse</em> series and <em>I'll Be Gone in the Dark</em>.</p>

src/pages/main/books/years/2021.html

@@ -0,0 +1,7 @@
+---
+title: 2021 • Books
+year: 2021
+layout: book-year
+permalink: "/books/years/2021.html"
+---
+<p>This is everything I read in 2021. My favorites were: <em>This Is How They Tell Me The World Ends</em>, <em>Sandworm</em>, <em>Empire of Pain</em>, <em>Say Nothing</em>, <em>Sigh, Gone</em> and <em>Leviathan Falls</em>.</p>

src/pages/main/books/years/2022.html

@@ -0,0 +1,7 @@
+---
+title: 2022 • Books
+year: 2022
+layout: book-year
+permalink: "/books/years/2022.html"
+---
+<p>This is everything I read in 2022. My favorites were: <em>Sellout</em>, <em>The Sins of Our Fathers</em>, <em>Drive</em>, <em>Adnan's Story</em> and <em>The Lazarus Heist</em>.</p>

src/pages/main/books/years/2023.html

@@ -0,0 +1,7 @@
+---
+title: 2023 • Books
+year: 2023
+layout: book-year
+permalink: "/books/years/2023.html"
+---
+<p>This is everything I read in 2023. My favorites were: <em>Stay True</em>, <em>Where Are Your Boys Tonight?</em>, <em>Trouble Boys</em>, <em>Tracers in the Dark</em> and <em>Girl in a Band</em>.</p>

src/pages/main/books/years/2024.html

@@ -0,0 +1,7 @@
+---
+title: 2024 • Books
+year: 2024
+layout: book-year
+permalink: "/books/years/2024.html"
+---
+<p>This is everything I've read in 2024 — continuing my trend of concentrating on science fiction, tech coverage, pop sci, autobiographies and coverage of musicians I appreciate.</p>

src/pages/main/music/albums/3-months.html

@@ -0,0 +1,27 @@
+---
+title: Albums • 3 months
+layout: default
+pagination:
+  data: music.threeMonth.albums
+  size: 24
+permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/albums/all-time.html

@@ -0,0 +1,27 @@
+---
+title: Albums • all time
+layout: default
+pagination:
+  data: music.allTime.albums
+  size: 24
+permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.allTime.albums.size }} albums</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/albums/this-month.html

@@ -0,0 +1,27 @@
+---
+title: Albums • This month
+layout: default
+pagination:
+  data: music.month.albums
+  size: 24
+permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/albums/this-week.html

@@ -0,0 +1,27 @@
+---
+title: Albums • This week
+layout: default
+pagination:
+  data: music.week.albums
+  size: 24
+permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/artists/3-months.html

@@ -0,0 +1,27 @@
+---
+title: Artists • 3 months
+layout: default
+pagination:
+  data: music.threeMonth.artists
+  size: 24
+permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/artists/all-time.html

@@ -0,0 +1,27 @@
+---
+title: Artists • all time
+layout: default
+pagination:
+  data: music.allTime.artists
+  size: 24
+permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.allTime.artists.size }} artists</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/artists/this-month.html

@@ -0,0 +1,27 @@
+---
+title: Artists • This month
+layout: default
+pagination:
+  data: music.month.artists
+  size: 24
+permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/artists/this-week.html

@@ -0,0 +1,27 @@
+---
+title: Artists • This week
+layout: default
+pagination:
+  data: music.week.artists
+  size: 24
+permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/index.html

@@ -0,0 +1,88 @@
+---
+title: Music
+layout: default
+permalink: "/music/index.html"
+---
+{% capture js %}
+  {% render "../../../assets/scripts/media-toggles.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
+<h2 class="page-header">{{ title }}</h2>
+<p>This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. <a href="https://coryd.dev/posts/2024/improving-my-self-hosted-scrobbling-implementation/">You can read more about the technical details, if you'd like.</a></p>
+<p>I mostly listen to <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>. This week I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.tracks.size }} tracks</strong>.</p>
+<div class="section-header-wrapper">
+  <h2 id="artists" class="section-header reduced-margin flex-centered">
+    {% tablericon "microphone-2" "Artists" %}
+    Artists
+  </h2>
+  <div class="section-header-buttons reduced-margin client-side">
+    <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-all-time">All time</button>
+  </div>
+</div>
+<div id="artists-window">
+  {% render "partials/now/media-grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
+</div>
+<div class="hidden" id="artists-month">
+  {% render "partials/now/media-grid.liquid", data:music.month.artists, shape: "square", count: 8 %}
+</div>
+<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-all-time">
+  {% render "partials/now/media-grid.liquid", data:music.allTime.artists, shape: "square", count: 8 %}
+</div>
+<p><strong class="highlight-text">More:</strong> <a href="/music/artists/this-week/">This week</a> • <a href="/music/artists/this-month/">This month</a> • <a href="/music/artists/three-months/">3 months</a> • <a href="/music/artists/all-time/">All time</a></p>
+<div class="section-header-wrapper">
+  <h2 id="albums" class="section-header reduced-margin flex-centered">
+    {% tablericon "vinyl" "Albums" %}
+    Albums
+  </h2>
+  <div class="section-header-buttons reduced-margin client-side">
+    <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-all-time">All time</button>
+  </div>
+</div>
+<div id="albums-window">
+  {% render "partials/now/media-grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="albums-month">
+  {% render "partials/now/media-grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
+</div>
+<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-all-time">
+  {% render "partials/now/media-grid.liquid", data:music.allTime.albums, shape: "square", count: 8 %}
+</div>
+<p><strong class="highlight-text">More:</strong> <a href="/music/albums/this-week/">This week</a> • <a href="/music/albums/this-month/">This month</a> • <a href="/music/albums/three-months/">3 months</a> • <a href="/music/albums/all-time/">All time</a></p>
+<div class="section-header-wrapper">
+  <h2 id="tracks" class="section-header reduced-margin flex-centered">
+    {% tablericon "playlist" "Tracks" %}
+    Tracks
+  </h2>
+  <div class="section-header-buttons reduced-margin client-side">
+    <button class="small active" data-toggle="tracks-recent">Recent</button>
+    <button class="small secondary" data-toggle="tracks-window">This week</button>
+    <button class="small secondary" data-toggle="tracks-month">This month</button>
+    <button class="small secondary" data-toggle="tracks-three-months">3 months</button>
+  </div>
+</div>
+<div id="tracks-recent">
+  {% render "partials/now/tracks-recent.liquid", data:music.recent.tracksChronological %}
+</div>
+<div class="hidden" id="tracks-window">
+  {% render "partials/now/track-chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
+</div>
+<div class="hidden" id="tracks-month">
+  {% render "partials/now/track-chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
+</div>
+<div class="hidden" id="tracks-three-months">
+  {% render "partials/now/track-chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
+</div>
+{% render "partials/now/album-releases.liquid", albumReleases:albumReleases %}
+<p class="text-small text-centered"><em>This page was last updated on {{ "now"  | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>

src/pages/main/music/tracks/3-months.html

@@ -0,0 +1,30 @@
+---
+title: Tracks • 3 months
+layout: default
+pagination:
+  data: music.threeMonth.tracks
+  size: 50
+permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.tracks.size }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in pagination.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage: music.threeMonth.tracks[0].plays -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ forloop.index }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/now/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/tracks/all-time.html

@@ -0,0 +1,30 @@
+---
+title: Artists • all time
+layout: default
+pagination:
+  data: music.allTime.tracks
+  size: 50
+permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.allTime.tracks.size }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in pagination.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage: music.allTime.tracks[0].plays -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ forloop.index }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/now/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/tracks/this-month.html

@@ -0,0 +1,30 @@
+---
+title: Tracks • This month
+layout: default
+pagination:
+  data: music.month.tracks
+  size: 50
+permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.month.tracks.size }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in pagination.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage: music.month.tracks[0].plays -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ forloop.index }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/now/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/tracks/this-week.html

@@ -0,0 +1,30 @@
+---
+title: Tracks • This week
+layout: default
+pagination:
+  data: music.week.tracks
+  size: 50
+permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.week.tracks.size }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in pagination.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage: music.week.tracks[0].plays -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ forloop.index }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/now/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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 %}