feat: add book images

config/mediaFilters.js

@@ -15,4 +15,7 @@ module.exports = {
   movie: (url, host, cdn) => {
     return url.replace(host, cdn).replace('600', '200').replace('900', '300')
   },
+  book: (url, host, cdn) => {
+    return url.replace(host, cdn)
+  },
 }

src/_data/books.js

@@ -6,7 +6,13 @@ module.exports = async function () {
   // noinspection JSCheckFunctionSignatures
   const asset = new AssetCache('books_data')
   if (asset.isCacheValid('1h')) return await asset.getCachedValue()
-  const res = await extract(url)
+  const res = await extract(url, {
+    getExtraEntryFields: (feedEntry) => {
+      return {
+        image: feedEntry['oku:cover'] || 'https://cdn.coryd.dev/books/missing-book.jpg',
+      }
+    },
+  })
     .catch((error) => {
       console.log(error.message)
     })

src/_data/site.json

@@ -13,8 +13,10 @@
   "instapaper": "https://www.instapaper.com/p/coryd",
   "letterboxd": "https://letterboxd.com/cdme",
   "letterboxd-host": "https://a.ltrbxd.com",
+  "oku-host": "https://oku.ams3.cdn.digitaloceanspaces.com",
   "trakt": "https://trakt.tv/users/cdransf",
   "oku": "https://oku.club/user/cory",
   "coffee": "https://www.buymeacoffee.com/cory",
-  "cdn-movies": "https://movies.coryd.dev"
+  "cdn-movies": "https://movies.coryd.dev",
+  "cdn-books": "https://books.coryd.dev"
 }

src/_includes/now.liquid

@@ -39,27 +39,10 @@ layout: main
       <a href="https://github.com/cdransf/awesome-adblock">Assembling lists of ad and tracker-blocking tools.</a>
     </p>
   </div>
-  {% if books.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
-      Reading: books
-    </h2>
-    <div>
-      <ul class="list-inside list-disc pl-5 md:pl-10">
-        {% for book in books %}
-          <li class="mt-1.5 mb-2">
-            <a href="{{book.link}}" title="{{book.title | escape}}">
-              {{ book.title }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endif %}
   {% if artists.size > 0 %}
     <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
       Listening: artists
     </h2>
-    <div>
     <div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
       {% for artist in artists %}
         <a href="{{artist.url}}" title="{{artist.name | escape}}">
@@ -78,13 +61,11 @@ layout: main
         </a>
       {% endfor %}
     </div>
-    </div>
   {% endif %}
   {% if albums.size > 0 %}
     <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
       Listening: albums
     </h2>
-    <div>
     <div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
       {% for album in albums %}
         <a href="{{album.url}}" title="{{album.name | escape}}">
@@ -103,13 +84,31 @@ layout: main
         </a>
       {% endfor %}
     </div>
+  {% endif %}
+  {% if books.size > 0 %}
+    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
+      Reading: books
+    </h2>
+    <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
+      {% for book in books %}
+        <a href="{{book.link}}" title="{{book.title | escape}}">
+          <div class="relative block" style="max-width:226px">
+            <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
+            <div class="absolute left-1 bottom-2 drop-shadow-md">
+              <div class="px-1 text-xs font-bold text-white">{{ book.title }}</div>
+            </div>
+            {%- capture bookImg %}{{book.image |  book: site.oku-host, site.cdn-books}}{% endcapture -%}
+            {%- capture bookName %}{{book.title | escape}}{% endcapture -%}
+            {% image bookImg, bookName, 'rounded-lg w-full', '180px' %}
+          </div>
+        </a>
+      {% endfor %}
     </div>
   {% endif %}
   {% if movies.size > 0 %}
     <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
       Watching: movies
     </h2>
-    <div>
     <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
       {% for movie in movies %}
         <a href="{{movie.link}}" title="{{movie.title | escape}}">
@@ -125,13 +124,11 @@ layout: main
         </a>
       {% endfor %}
     </div>
-    </div>
   {% endif %}
   {% if tv.size > 0 %}
     <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
       Watching: tv
     </h2>
-    <div>
     <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
       {% for episode in tv %}
         <a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}">
@@ -150,7 +147,6 @@ layout: main
         </a>
       {% endfor %}
     </div>
-    </div>
   {% endif %}
   <p class="text-xs text-center pt-4">This is a
     <a href="https://nownownow.com/about">now page</a>, and if you have your own site,