feat: populate book data internally

src/_data/books.js

@@ -1,30 +1,12 @@
-const EleventyFetch = require('@11ty/eleventy-fetch')
+const reading = require('./json/read.json')
 
 module.exports = async function () {
-  const OKU_URL = 'https://oku.club/api/collections/user/cory/reading'
-  const OPEN_LIBRARY_URL = 'https://openlibrary.org/search.json?title='
-  const res = EleventyFetch(OKU_URL, {
-    duration: '1h',
-    type: 'json',
-  }).catch()
-  const data = await res
-  const books = []
-  for (const book of data['books']) {
-    const res = await fetch(`${OPEN_LIBRARY_URL}${book.title.replace(/\s+/g, '+')}`)
-      .then((res) => res.json())
-      .catch()
-    const data = await res
-    const coverId = data['docs'].find((b) => {
-      return b['title'] === book['title']
-    })?.['cover_i']
-    books.push({
-      title: book.title,
-      author: book['authors'][0].name,
-      url: `https://oku.club/book/${book.slug}`,
-      cover: coverId
-        ? `https://books.coryd.dev/b/id/${coverId}-L.jpg`
-        : `https://cdn.coryd.dev/books/${book.title.toLowerCase().replace(/\s+/g, '-')}.jpg`,
-    })
-  }
-  return books
+  return reading.map(read => {
+    if (read.status === 'started') return {
+      title: read.title,
+      author: read.authors.length > 1 ? read.authors.join(', ') : read.authors.pop(),
+      cover: read.thumbnail.replace('https://books.google.com', 'https://books.coryd.dev'),
+      link: `https://duckduckgo.com/?q=!olib%20${read.isbn}`,
+    }
+  })
 }

src/_includes/footer.liquid

@@ -7,7 +7,6 @@
     {% include "icons/instapaper.liquid" %}
     {% include "icons/letterboxd.liquid" %}
     {% include "icons/trakt.liquid" %}
-    {% include "icons/oku.liquid" %}
     {% include "icons/coffee.liquid" %}
   </div>
   <p class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">

src/_includes/icons/oku.liquid

@@ -1,13 +0,0 @@
-{% if site.oku != "" %}
-  <a
-    href={{ site.oku }}
-    rel="me"
-    title="Oku">
-    <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
-      viewBox="0 0 500 500"
-      xmlns="http://www.w3.org/2000/svg">
-      <path d="M 500 183.794 L 500 248.024 C 442.688 248.024 387.352 270.751 346.838 310.277 C 314.229 342.885 292.49 383.399 285.573 427.866 L 500 427.866 L 500 493.083 L 0 493.083 L 0 427.866 L 215.415 427.866 C 208.498 383.399 186.759 341.897 154.15 309.289 C 113.636 269.763 58.3 247.036 0 247.036 L 0 181.818 C 51.383 181.818 102.767 195.652 146.245 222.332 C 190.711 248.024 226.285 285.573 250.988 331.028 C 274.704 286.561 310.277 249.012 354.743 223.32 C 398.221 196.64 448.617 183.794 500 183.794 Z M 169.96 85.968 C 169.96 42.49 205.534 6.917 250 6.917 C 294.466 6.917 330.04 42.49 330.04 85.968 C 330.04 129.447 294.466 164.032 250 164.032 C 205.534 164.032 169.96 129.447 169.96 85.968 Z M 169.96 85.968" />
-    </svg>
-  </a>
-{% endif %}

src/_includes/now.liquid

@@ -117,15 +117,11 @@ layout: main
     {% heroicon "outline" "book-open" "Books" "height=28" %}
     <div class="ml-1">Books</div>
   </h2>
-  <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
+  <div class="grid grid-cols-6 gap-2 md:grid-cols-8 not-prose">
     {% for book in books %}
-      <a href="{{book.url}}" title="{{book.title | escape}}">
-        <div class="relative block h-full">
-          <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 line-clamp-3">{{ book.title }}</div>
-            <div class="px-1 text-xs text-white line-clamp-2">{{ book.author }}</div>
-          </div>
+      <a href="{{book.link}}" title="{{book.title | escape}}">
+        <div class="relative block" style="max-width:85px">
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 dark:border-purple-400 dark:hover:border-purple-500"></div>
           {%- capture bookImg %}{{book.cover}}{% endcapture -%}
           {%- capture bookName %}{{book.title | escape}}{% endcapture -%}
           {% image bookImg, bookName, 'rounded-lg w-full h-full', '180px' %}

src/assets/scripts/isDarkMode.js

@@ -1,10 +0,0 @@
-;(function () {
-  const isDarkMode = () =>
-    localStorage.theme === 'dark' ||
-    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  if (isDarkMode()) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-  }
-})()