feat: programmatically generate year book pages

config/collections/index.js

@@ -30,7 +30,7 @@ export const searchIndex = (collection) => {
   const { data } = collectionData
   const { posts, links, movies, books } = data
   const movieData = movies['movies'].filter(movie => (movie['review']?.length && movie['review']?.length > 0 && movie['rating']))
-  const bookData = books.filter(book => (book['review']?.length && book['review']?.length > 0 && book['rating']))
+  const bookData = books.all.filter(book => (book['review']?.length && book['review']?.length > 0 && book['rating']))
   const addItemToIndex = (items, icon, getUrl, getTitle, getTags) => {
     if (items) {
       items.forEach((item) => {
@@ -104,7 +104,7 @@ export const allContent = (collection) => {
 
   addContent(posts, '📝', item => item['title'], item => item['date'])
   addContent(links, '🔗', item => item['title'], item => item['date'])
-  addContent(books.filter(book => book['status'] === 'finished'), '📖', item => `${item['title']}${item['rating'] ? ' (' + item['rating'] + ')' : ''}`, item => item['date'])
+  addContent(books.all.filter(book => book['status'] === 'finished'), '📖', item => `${item['title']}${item['rating'] ? ' (' + item['rating'] + ')' : ''}`, item => item['date'])
   addContent(movies, '🎥', item => `${item['title']}${item['rating'] ? ' (' + item['rating'] + ')' : ''}`, item => item['lastWatched'])
 
   return aggregateContent.sort((a, b) => {

config/filters/index.js

@@ -204,6 +204,7 @@ export default {
     return `${allButLast} and ${last}`
   },
   bookStatus: (books, status) => books.filter(book => book.status === status),
+  bookFavorites: (books) => books.filter(book => book.favorite === true),
   bookSortDescending: (books) => books.filter(book => !isNaN(DateTime.fromISO(book.date).toMillis())).sort((a, b) => {
     const dateA = DateTime.fromISO(a.date)
     const dateB = DateTime.fromISO(b.date)
@@ -225,6 +226,8 @@ export default {
   genreStrings: (genres, key) => genres.map(genre => genre[key]),
   mediaLinks: (data, type, count = 10) => {
     const dataSlice = data.slice(0, count)
+    let last;
+
     if (dataSlice.length === 0) return ''
     if (dataSlice.length === 1) return type === 'genre' ? dataSlice[0] : dataSlice[0]['artist_name']
 
@@ -233,12 +236,18 @@ export default {
         return `<a href="/music/genres/${sanitizeMediaString(item)}">${item}</a>`
       } else if (type === 'artist') {
         return `<a href="/music/artists/${sanitizeMediaString(item['name_string'])}-${sanitizeMediaString(item['country'].toLowerCase())}">${item['name_string']}</a>`
+      } else if (type === 'book') {
+        return `<a href="/books/${item['isbn']}">${item['title']}</a>`
       }
     }).join(', ')
 
-    const last = type === 'genre'
+    if (type === 'genre') {
-      ? `<a href="/music/genres/${sanitizeMediaString(dataSlice[dataSlice.length - 1])}">${dataSlice[dataSlice.length - 1]}</a>`
+      last = `<a href="/music/genres/${sanitizeMediaString(dataSlice[dataSlice.length - 1])}">${dataSlice[dataSlice.length - 1]}</a>`
-      : `<a href="/music/artists/${sanitizeMediaString(dataSlice[dataSlice.length - 1]['name_string'])}-${sanitizeMediaString(dataSlice[dataSlice.length - 1]['country'].toLowerCase())}">${dataSlice[dataSlice.length - 1]['name_string']}</a>`
+    } else if (type === 'artist') {
+      last = `<a href="/music/artists/${sanitizeMediaString(dataSlice[dataSlice.length - 1]['name_string'])}-${sanitizeMediaString(dataSlice[dataSlice.length - 1]['country'].toLowerCase())}">${dataSlice[dataSlice.length - 1]['name_string']}</a>`
+    } else if (type === 'book') {
+      last = `<a href="/books/${dataSlice[dataSlice.length - 1]['isbn']}">${dataSlice[dataSlice.length - 1]['title']}</a>`
+    }
 
     return `${allButLast} and ${last}`
   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "20.6.4",
+  "version": "20.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "20.6.4",
+      "version": "20.7.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -21,7 +21,7 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
         "@cdransf/eleventy-plugin-tabler-icons": "^1.9.0",
-        "@supabase/supabase-js": "^2.44.3",
+        "@supabase/supabase-js": "^2.44.4",
         "dotenv-flow": "^4.1.0",
         "html-minifier-terser": "^7.2.0",
         "liquidjs": "^10.15.0",
@@ -446,9 +446,9 @@
       }
     },
     "node_modules/@supabase/auth-js": {
-      "version": "2.64.2",
+      "version": "2.64.4",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.2.tgz",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.4.tgz",
-      "integrity": "sha512-s+lkHEdGiczDrzXJ1YWt2y3bxRi+qIUnXcgkpLSrId7yjBeaXBFygNjTaoZLG02KNcYwbuZ9qkEIqmj2hF7svw==",
+      "integrity": "sha512-9ITagy4WP4FLl+mke1rchapOH0RQpf++DI+WSG2sO1OFOZ0rW3cwAM0nCrMOxu+Zw4vJ4zObc08uvQrXx590Tg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -512,13 +512,13 @@
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.44.3",
+      "version": "2.44.4",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.44.3.tgz",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.44.4.tgz",
-      "integrity": "sha512-3tYf5ojKSL0RJIpnkwYSdLPdRcza8KMTdRx2SyF9YA6PWnuUfqzmqjZohAHJuGql2CaPMWd9BLPOHupPuGq0lQ==",
+      "integrity": "sha512-vqtUp8umqcgj+RPUc7LiEcQmgsEWFDPJdJizRJF/5tf2zSlVB+3YbUwyQE/hLagYA8TLvGXe7oAqtYyFde6llw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@supabase/auth-js": "2.64.2",
+        "@supabase/auth-js": "2.64.4",
         "@supabase/functions-js": "2.4.1",
         "@supabase/node-fetch": "2.6.15",
         "@supabase/postgrest-js": "1.15.8",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "20.6.4",
+  "version": "20.7.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
@@ -31,7 +31,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
     "@cdransf/eleventy-plugin-tabler-icons": "^1.9.0",
-    "@supabase/supabase-js": "^2.44.3",
+    "@supabase/supabase-js": "^2.44.4",
     "dotenv-flow": "^4.1.0",
     "html-minifier-terser": "^7.2.0",
     "liquidjs": "^10.15.0",

src/_data/books.js

@@ -1,7 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 
-const SUPABASE_URL = process.env.SUPABASE_URL
+const { SUPABASE_URL, SUPABASE_KEY } = process.env
-const SUPABASE_KEY = process.env.SUPABASE_KEY
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
 
 const PAGE_SIZE = 1000
@@ -17,19 +16,18 @@ const fetchTagsForBook = async (bookId) => {
     return []
   }
 
-  return data.map(bt => bt.tags.name)
+  return data.map(bt => bt['tags']['name'])
 }
 
 async function fetchAllBooks() {
   let books = []
   let from = 0
-  let to = PAGE_SIZE - 1
 
   while (true) {
     const { data, error } = await supabase
       .from('books')
       .select(`*, art(filename_disk)`)
-      .range(from, to)
+      .range(from, from + PAGE_SIZE - 1)
 
     if (error) {
       console.error('Error fetching data from Supabase:', error)
@@ -37,7 +35,7 @@ async function fetchAllBooks() {
     }
 
     for (const book of data) {
-      book.tags = await fetchTagsForBook(book['id'])
+      book['tags'] = await fetchTagsForBook(book['id'])
     }
 
     books = books.concat(data)
@@ -45,20 +43,17 @@ async function fetchAllBooks() {
     if (data.length < PAGE_SIZE) break
 
     from += PAGE_SIZE
-    to += PAGE_SIZE
   }
 
-  return books
+  return books.map(book => {
-}
+    const dateFinished = new Date(book['date_finished'])
-
+    const year = dateFinished.getUTCFullYear()
-export default async function () {
+    return {
-  const books = await fetchAllBooks()
-
-  return books.map(book => ({
       title: book['title'],
       author: book['author'] || '',
       review: book['review'],
       rating: book['star_rating'] !== 'unrated' ? book['star_rating'] : '',
+      favorite: book['favorite'],
       description: book['description'],
       image: `/${book?.['art']?.['filename_disk']}`,
       url: `/books/${book['isbn']}`,
@@ -68,5 +63,25 @@ export default async function () {
       tags: book['tags'],
       isbn: book['isbn'],
       type: 'book',
-    }))
+      year,
+    }
+  })
+}
+
+const sortBooksByYear = (books) => {
+  const years = {}
+  books.forEach(book => {
+    const year = book['year']
+    if (!years[year]) {
+      years[year] = { value: year, data: [book] }
+    } else {
+      years[year]['data'].push(book)
+    }
+  })
+  return Object.values(years).filter(year => year.value > 2020)
+}
+
+export default async function () {
+  const books = await fetchAllBooks()
+  return { all: books, years: sortBooksByYear(books) }
 }

src/_includes/base.liquid

@@ -15,6 +15,8 @@
   {%- assign pageTitle = 'Music / ' | append: genre.name | append: ' / ' | append: globals.site_name -%}
 {%- elsif book.title -%}
   {%- assign pageTitle = 'Books / ' | append: book.title | append: ' / ' | append: globals.site_name -%}
+{%- elsif year.value -%}
+  {%- assign pageTitle = ' / Books ' | prepend: year.value | append: ' / ' | append: globals.site_name -%}
 {%- elsif movie.title -%}
   {%- assign pageTitle = 'Movies / ' | append: movie.title -%}
   {%- if movie.rating -%}
@@ -57,7 +59,10 @@
     {%- assign featuredMovie = movies.recentlyWatched | first -%}
     {%- assign ogImage = 'https://cdn.coryd.dev' | append: featuredMovie.backdrop -%}
   {%- when 'books' -%}
-    {%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%}
+    {%- assign featuredBook = books.all | bookStatus: 'started' | reverse | first -%}
+    {%- assign ogImage = 'https://cdn.coryd.dev' | append: featuredBook.image -%}
+  {%- when 'books-year' -%}
+    {%- assign featuredBook = books.all | bookStatus: 'finished' | bookFinishedYear: year.value | bookSortDescending | first -%}
     {%- assign ogImage = 'https://cdn.coryd.dev' | append: featuredBook.image -%}
   {%- when 'book' -%}
     {%- assign ogImage = 'https://cdn.coryd.dev' | append: book.image -%}

src/_includes/partials/media/books/year.liquid

@@ -1,17 +0,0 @@
----
-layout: default
----
-{%- assign bookData = books | bookStatus: 'finished' | bookFinishedYear: year | bookSortDescending -%}
-{%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
-{%- assign yearString = year | append: '' -%}
-{%- assign currentYearString = currentYear | append: '' -%}
-<a class="back-link-header link-icon" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
-<h2 class="page-header">{{ title }}</h2>
-{{ content }}
-{% if yearString == currentYearString %}
-<p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.</p>
-{% else %}
-<p>I finished <strong class="highlight-text">{{ bookData.size }} books</strong> in {{ year }}.</p>
-{% endif %}
-<hr />
-{% render "partials/media/grid.liquid", data:bookData, shape: "vertical", count: 200, loading: "eager" %}

src/feeds/books.liquid

@@ -3,7 +3,7 @@ layout: null
 eleventyExcludeFromCollections: true
 permalink: "/feeds/books"
 ---
-{%- assign bookData = books | bookStatus: 'finished' | bookSortDescending -%}
+{%- assign bookData = books.all | bookStatus: 'finished' | bookSortDescending -%}
 {% render "partials/feeds/rss.liquid"
   permalink:"/feeds/books"
   title:"Cory Dransfeldt: books"

src/index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
 ---
-{% render "partials/home/status.liquid" status:status, artists:music.week.artists, books:books, tv:tv %}
+{% render "partials/home/status.liquid" status:status, artists:music.week.artists, books:books.all, tv:tv %}
 {% render "partials/home/posts.liquid" icon: "star", title: "Featured", postData:posts, postType: "featured" %}
 {% render "partials/home/posts.liquid" icon: "clock-hour-7", title: "Recent posts", postData:posts %}

src/pages/main/about.md

@@ -4,7 +4,7 @@ layout: page
 permalink: /about.html
 ---
 {%- assign artist = music.week.artists | first -%}
-{%- assign book = books | bookStatus: 'started' | reverse | first -%}
+{%- assign book = books.all | bookStatus: 'started' | reverse | first -%}
 {%- assign show = tv.recentlyWatched | first -%}
 <div class="avatar-wrapper flex-centered">
   <div class="interior">

src/pages/main/books/book.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 pagination:
-  data: books
+  data: books.all
   size: 1
   alias: book
 permalink: "/books/{{ book.isbn }}/index.html"

src/pages/main/books/index.html

@@ -6,8 +6,8 @@ permalink: "/books/index.html"
 updated: "now"
 schema: books
 ---
-{%- assign bookData = books | bookStatus: 'started' | reverse -%}
+{%- assign bookData = books.all | bookStatus: 'started' | reverse -%}
-{%- assign currentBookCount = books | currentBookCount -%}
+{%- assign currentBookCount = books.all | currentBookCount -%}
 <h2 class="page-header">Currently reading</h2>
 <p>Here's what I'm reading at the moment. 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>

src/pages/main/books/year.html

@@ -0,0 +1,24 @@
+---
+layout: default
+pagination:
+  data: books.years
+  size: 1
+  alias: year
+permalink: "/books/years/{{ year.value }}.html"
+schema: books-year
+---
+{%- assign bookData = year.data | bookStatus: 'finished' | bookSortDescending -%}
+{%- assign bookDataFavorites = bookData | bookFavorites -%}
+{%- capture favoriteBooks -%}{{ bookDataFavorites | shuffleArray | mediaLinks: "book", 5 }}{%- endcapture -%}
+{%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
+{%- assign yearString = year.value | append: '' -%}
+{%- assign currentYearString = currentYear | append: '' -%}
+<a class="back-link-header link-icon" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
+<h2 class="page-header">{{ year.value }} / Books</h2>
+{% if yearString == currentYearString %}
+<p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year. Among my favorites are {{ favoriteBooks }}.</p>
+{% else %}
+<p>I finished <strong class="highlight-text">{{ bookData.size }} books</strong> in <strong class="highlight-text">{{ year.value }}</strong>. Among my favorites were {{ favoriteBooks }}.</p>
+{% endif %}
+<hr />
+{% render "partials/media/grid.liquid", data:bookData, shape: "vertical", count: 200, loading: "eager" %}

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

@@ -1,9 +0,0 @@
----
-title: 2020 / Books
-description: "This is everything I read in 2020. My favorites were: every book in The Expanse series and I'll Be Gone in the Dark. I finished 34 books in 2020."
-year: 2020
-layout: partials/media/books/year
-permalink: "/books/years/2020.html"
-schema: books
----
-<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

@@ -1,9 +0,0 @@
----
-title: 2021 / Books
-description: "This is everything I read in 2021. My favorites were: This Is How They Tell Me The World Ends, Sandworm, Empire of Pain, Say Nothing, Sigh, Gone and Leviathan Falls. I finished 53 books in 2021."
-year: 2021
-layout: partials/media/books/year
-permalink: "/books/years/2021.html"
-schema: books
----
-<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

@@ -1,9 +0,0 @@
----
-title: 2022 / Books
-description: "This is everything I read in 2022. My favorites were: Sellout, The Sins of Our Fathers, Drive, Adnan's Story and The Lazarus Heist. I finished 67 books in 2022."
-year: 2022
-layout: partials/media/books/year
-permalink: "/books/years/2022.html"
-schema: books
----
-<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

@@ -1,9 +0,0 @@
----
-title: 2023 / Books
-description: "This is everything I read in 2023. My favorites were: Stay True, Where Are Your Boys Tonight?, Trouble Boys, Tracers in the Dark and Girl in a Band. I finished 69 books in 2023."
-year: 2023
-layout: partials/media/books/year
-permalink: "/books/years/2023.html"
-schema: books
----
-<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

@@ -1,9 +0,0 @@
----
-title: 2024 / Books
-description: "Here's what I'm reading at the moment."
-year: 2024
-layout: partials/media/books/year
-permalink: "/books/years/2024.html"
-schema: books
----
-<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>