From a4472722f626a9e929c034fc754bdf2be16a5be9 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@fastmail.com>
Date: Sun, 29 Oct 2023 09:51:33 -0700
Subject: [PATCH] feat: add reading progress display

---
 config/mediaFilters.js                         |  6 +++++-
 package.json                                   |  2 +-
 src/_data/books.js                             |  7 ++++++-
 src/_data/nav.js                               |  1 +
 src/_includes/partials/now/media-grid.liquid   | 11 +++++++----
 src/_includes/partials/now/progress-bar.liquid |  5 +++++
 6 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/_includes/partials/now/progress-bar.liquid

diff --git a/config/mediaFilters.js b/config/mediaFilters.js
index da36f058..40f9f40c 100644
--- a/config/mediaFilters.js
+++ b/config/mediaFilters.js
@@ -16,7 +16,11 @@ module.exports = {
         normalized['subtext'] = `#${item['rank']}`
       }
       if (item.type === 'movie') normalized['alt'] = item['title']
-      if (item.type === 'book') normalized['alt'] = `${item['title']} by ${item['author']}`
+      if (item.type === 'book') {
+        normalized['alt'] = `${item['title']} by ${item['author']}`
+        normalized['subtext'] = `${item['percentage']} finished`
+        normalized['percentage'] = item['percentage']
+      }
       if (item.type === 'tv') {
         normalized['title'] = item['title']
         normalized['alt'] = `${item['title']} from ${item['name']}`
diff --git a/package.json b/package.json
index b308f17a..001818c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The source for my personal site, blog and portfolio. Build using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {
diff --git a/src/_data/books.js b/src/_data/books.js
index 89a5e69a..fee25e74 100644
--- a/src/_data/books.js
+++ b/src/_data/books.js
@@ -44,12 +44,17 @@ module.exports = async function () {
           if (!data[index]) data.push({ percentage: percentage.textContent })
           if (data[index]) data[index]['percentage'] = percentage.textContent
         })
+      doc.querySelectorAll('.md\\:block .action-menu a > p').forEach((dateStarted, index) => {
+        const date = new Date(dateStarted.textContent.replace('Started ', '').split('\n')[0])
+        if (!data[index]) data.push({ dateAdded: date })
+        if (data[index]) data[index]['dateAdded'] = date
+      })
     })
   const books = data
     .filter((book) => book.title)
     .map((book) => {
       book.type = 'book'
-      book.dateAdded = new Date()
+      if (!('dateAdded' in book)) book.dateAdded = new Date()
       return book
     })
   await asset.save(books, 'json')
diff --git a/src/_data/nav.js b/src/_data/nav.js
index 52aa3e89..6d8fdf90 100644
--- a/src/_data/nav.js
+++ b/src/_data/nav.js
@@ -11,6 +11,7 @@ module.exports = async function () {
     ],
     social: [
       { name: 'Email', url: 'mailto:coryd@fastmail.com', icon: 'at' },
+      { name: 'Calendar', url: 'https://savvycal.com/ced/', icon: 'calendar-plus' },
       { name: 'GitHub', url: 'https://github.com/cdransf', icon: 'brand-github' },
       { name: 'Mastodon', url: 'https://social.lol/@cory', icon: 'brand-mastodon' },
       {
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index a3d1eaa2..cab92ca5 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -9,13 +9,16 @@
       {% assign alt = item.alt | strip %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
         <div class="relative block h-full rounded-lg overflow-hidden"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
-          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-800 dark:border-blue-400 dark:hover:border-blue-200 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
-          <div class="absolute left-1 bottom-2 drop-shadow-md">
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-800 dark:border-blue-400 dark:hover:border-blue-200 ease-in-out duration-300{% if item.subtext %} bg-cover-gradient{% endif %}"></div>
+          <div class="absolute px-1.5 bottom-2 drop-shadow-md w-full">
             {% if item.title %}
-              <div class="px-1 text-xs font-bold text-white line-clamp-2">{{ item.title }}</div>
+              <div class="text-xs font-bold text-white line-clamp-2">{{ item.title }}</div>
+            {% endif %}
+            {% if item.percentage %}
+              {% render "partials/now/progress-bar.liquid", percentage:item.percentage %}
             {% endif %}
             {% if item.subtext %}
-              <div class="px-1 text-xs text-white line-clamp-2">
+              <div class="text-xs text-white line-clamp-2">
                 {{ item.subtext }}
               </div>
             {% endif %}
diff --git a/src/_includes/partials/now/progress-bar.liquid b/src/_includes/partials/now/progress-bar.liquid
new file mode 100644
index 00000000..ee546f96
--- /dev/null
+++ b/src/_includes/partials/now/progress-bar.liquid
@@ -0,0 +1,5 @@
+{% if percentage %}
+<div class="overflow-hidden h-4 my-1 w-full flex rounded-lg bg-gray-200/60">
+  <div style="width:{{ percentage }}" class="shadow-none flex flex-col whitespace-nowrap justify-center bg-blue-600 dark:bg-blue-400"></div>
+</div>
+{% endif %}
\ No newline at end of file