feat: add reading progress display

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']}`

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": {

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')

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' },
       {

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

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