feat: book progress bars

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "18.2.4",
+  "version": "18.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "18.2.4",
+      "version": "18.3.4",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

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

src/_data/books.js

@@ -67,7 +67,8 @@ export default async function () {
       image: book['thumbnail'],
       url: `/books/${book['isbn']}`,
       date,
-      status: book['status'],
+      status: book['read_status'],
+      progress: book['progress'],
       tags: book['tags'],
       rating: book['rating'] !== 'unrated' ? book['rating'] : '',
       isbn: book['isbn'],

src/assets/styles/pages/books.css

@@ -37,6 +37,10 @@
       width: fit-content;
     }
 
+    & .progress-bar-wrapper {
+      max-width: 75%;
+    }
+
     & blockquote.description {
       -webkit-box-orient: vertical;
       display: -webkit-box;
@@ -102,6 +106,10 @@
 
     & .book-meta {
       align-items: start;
+
+      & .progress-bar-wrapper {
+        max-width: 40%;
+      }
     }
   }
 }

src/pages/main/books/book.html

@@ -38,7 +38,13 @@ schema: book
       {% if book.author %}
         <p class="sub-meta">By {{ book.author }}</p>
       {% endif %}
-      {% if book.status == 'finished' %}<p class="sub-meta">Finished on: {{ book.date | date: "%B %e, %Y" }}</p>{% endif %}
+      {% if book.status == 'finished' %}
+        <p class="sub-meta">Finished on: {{ book.date | date: "%B %e, %Y" }}</p>
+      {% endif %}
+      {% unless book.status == 'finished' %}
+        {%- assign percentage = book.progress | append: '%' -%}
+        {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+      {% endunless %}
       <p class="sub-meta"><a href="https://openlibrary.org/isbn/{{ book.isbn }}" title="View {{ book.title | escape }} on Open Library">View on Open Library</a></p>
     </div>
   </div>

src/pages/main/books/index.html

@@ -44,6 +44,10 @@ schema: books
     {% if book.author %}
       <p class="sub-meta">By {{ book.author }}</p>
     {% endif %}
+    {% if book.progress %}
+      {%- assign percentage = book.progress | append: '%' -%}
+      {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+    {% endif %}
     {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
   </div>
 </article>