feat: dedicated music page

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

@@ -5,7 +5,7 @@ pagination:
   data: collections.booksToRead
   alias: books
   size: 30
-permalink: "/books/want-to-read/{{ pagination.pageNumber }}/index.html"
+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>

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/movies-to-watch.html

@@ -5,7 +5,7 @@ pagination:
   data: movies.toWatch
   alias: movies
   size: 30
-permalink: "/watching/movies-to-watch/{{ pagination.pageNumber }}/index.html"
+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 %}

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

@@ -5,7 +5,7 @@ pagination:
   data: tv.toWatch
   alias: shows
   size: 30
-permalink: "/watching/shows-to-watch/{{ pagination.pageNumber }}/index.html"
+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 %}