feat: want to read page

src/_data/books.js

@@ -17,6 +17,7 @@ export default async function () {
       dateAdded: book?.['dateStarted'] || book?.['dateFinished'],
       status: book['status'],
       tags: book['tags'],
+      categories: book['categories']?.length > 1 ? book['categories'].join(', ') : book['categories']?.[0],
       type: 'book',
     }
   })

src/assets/styles/base/index.css

@@ -143,10 +143,10 @@ hr {
   height: 1px;
   background-color: var(--gray-light);
   border: 0;
-}
 
-hr.large-spacing {
-  margin: var(--sizing-base) 0;
+  &.large-spacing {
+    margin: var(--sizing-base) 0;
+  }
 }
 
 /* tables */

src/pages/404.html

@@ -12,5 +12,5 @@ image: /assets/img/404.jpg
   </div>
   <hr class="large-spacing" />
   {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
-  {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}
+  {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:collections.links %}
 </div>

src/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/{{ pagination.pageNumber }}/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 }}" title="{{ book.title | escape }}">
+        <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/paginator.liquid", pagination:pagination %}