feat: want to read page

.eleventy.js

@@ -12,7 +12,7 @@ import filters from './config/filters/index.js'
 import { slugifyString } from './config/utils/index.js'
 import { svgToJpeg } from './config/events/index.js'
 import { minifyJsComponents } from './config/events/index.js'
-import { searchIndex, tagList, postStats, tagsSortedByCount, links, tagMap } from './config/collections/index.js'
+import { searchIndex, tagList, postStats, tagsSortedByCount, links, tagMap, booksToRead } from './config/collections/index.js'
 import { img } from './config/shortcodes/index.js'
 
 // load .env
@@ -94,6 +94,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addCollection('tagsSortedByCount', tagsSortedByCount)
   eleventyConfig.addCollection('links', links)
   eleventyConfig.addCollection('tagMap', tagMap)
+  eleventyConfig.addCollection('booksToRead', booksToRead)
 
   const md = markdownIt({ html: true, linkify: true })
   md.use(markdownItAnchor, {

_redirects

@@ -82,6 +82,7 @@
 /mastodon https://social.lol/@cory 301!
 /coffee https://www.buymeacoffee.com/cory 301!
 /speedlify https://speedlify.coryd.dev 301!
+/books/want-to-read/ /books/want-to-read/0/ 200
 
 # netlify app domain
 https://cdme.netlify.app https://coryd.dev 301!

config/collections/index.js

@@ -110,6 +110,8 @@ export const tagsSortedByCount = (collection) => {
 
 export const links = (collection) => collection.getFilteredByGlob('src/links/**/*.*').reverse()
 
+export const booksToRead = (collection) => collection.getAll()[0].data.books.filter(book => book.status === 'want to read').sort((a, b) => a['title'].toLowerCase().localeCompare(b['title'].toLowerCase()))
+
 export const postStats = (collection) => {
   const oneDayMilliseconds = 1000 * 60 * 60 * 24
   const statsObject = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "12.5.0",
+  "version": "12.6.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

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,11 +143,11 @@ hr {
   height: 1px;
   background-color: var(--gray-light);
   border: 0;
-}
 
-hr.large-spacing {
+  &.large-spacing {
     margin: var(--sizing-base) 0;
   }
+}
 
 /* tables */
 table {

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