feat(reading/index.php.liquid): update reading progress on page load

src/pages/dynamic/media/reading/index.php.liquid

@@ -1,9 +1,22 @@
 ---
 title: Reading
 description: Here's what I'm reading at the moment.
-permalink: "/reading/index.html"
+permalink: "/reading/index.php"
 schema: books
+eleventyComputed:
+  page:
+    activeUrl: "/reading"
 ---
+<?php
+
+  require_once __DIR__ . '/../bootstrap.php';
+
+  use App\Classes\BookProgressHandler;
+
+  $progressHandler = new BookProgressHandler();
+  $progressData = $progressHandler->getAllProgress();
+
+?>
 {%- assign currentYear = 'now' | date: "%Y" -%}
 {%- assign bookData = books.all | filterBooksByStatus: 'started' | reverse -%}
 {%- assign currentBookCount = books.currentYear | size -%}
@@ -45,14 +58,17 @@ schema: books
       {% if book.author %}
         <span class="sub-meta">By {{ book.author }}</span>
       {% endif %}
-      {% if book.progress %}
-        {% render "static/media/progress-bar.liquid",
-          percentage:book.progress
-        %}
-      {% endif %}
+      <?php
+        $isbn = '{{ book.isbn | escape }}';
+        $progress = $progressData[$isbn] ?? null;
+        if (isset($progress)):
+      ?>
+        <progress value="<?= htmlspecialchars($progress) ?>" max="100"><?= htmlspecialchars($progress) ?>%</progress>
+      <?php endif; ?>
       {% if book.description %}
       <div class="description">{{ book.description | normalize_whitespace | markdown | htmlTruncate }}</div>
       {% endif %}
     </div>
   </article>
 {% endfor %}
+