feat: self-hosted book feeds

src/_data/books.js

@@ -17,12 +17,13 @@ export default async function () {
       authors,
       description: book['description'],
       image: book['thumbnail'],
-      url: `https://openlibrary.org/isbn/${book['isbn']}`,
+      url: `https://coryd.dev/books/${book['isbn']}`,
       date,
       status: book['status'],
       tags: book['tags'],
       categories: book['categories']?.length > 1 ? book['categories'].join(', ') : book['categories']?.[0],
       rating: book['rating'] !== 'unrated' ? book['rating'] : '',
+      isbn: book['isbn'],
       type: 'book',
     }
   })

src/assets/styles/pages/books.css

@@ -10,8 +10,6 @@
   }
 
   & img {
-    border: 1px solid var(--accent-color);
-    border-radius: var(--rounded);
     transition-property: border-color;
     transition-timing-function: var(--transition-ease-in-out);
     transition-duration: 300ms;
@@ -29,9 +27,6 @@
   }
 
   & .book-meta {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sizing-xs);
     align-items: center;
 
     & p {
@@ -40,16 +35,6 @@
       max-width: 100%;
       text-overflow: ellipsis;
       width: fit-content;
-      margin-bottom: 0;
-
-      &.title {
-        font-size: var(--font-size-xl);
-      }
-
-      &.author-categories {
-        font-size: var(--font-size-xs);
-        line-height: var(--line-height-xs);
-      }
     }
 
     & blockquote.description {
@@ -62,6 +47,53 @@
   }
 }
 
+.book-entry,
+.book-focus {
+  & img {
+    border: 1px solid var(--accent-color);
+  }
+
+  & .book-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+
+    & p {
+      &.title {
+        font-size: var(--font-size-xl);
+      }
+
+      &.sub-meta {
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+      }
+
+      &.title,
+      &.sub-meta {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.book-focus {
+  border-bottom: 0;
+
+  & .book-display {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sizing-base);
+  }
+
+  p {
+    margin: var(--sizing-base) 0;
+  }
+
+  & .book-meta p {
+    margin: 0;
+  }
+}
+
 @media screen and (min-width: 768px) {
   .book-entry {
     flex-direction: row;

src/pages/main/books/books.html

@@ -0,0 +1,24 @@
+---
+layout: default
+pagination:
+  data: books
+  size: 1
+  alias: book
+permalink: /books/{{ book.isbn }}/
+---
+<a class="back-link-header link-icon flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a>
+<article class="book-focus">
+  <div class="book-display">
+    <img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=85&w=137&h=209&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="137" height="209" />
+    <div class="book-meta">
+      <p class="title"><strong>{{ book.title }}</strong></p>
+      {% if book.rating %}<p>{{ book.rating }}</p>{% endif %}
+      {% if book.authors or book.categories %}
+      <p class="sub-meta">{% if book.authors %}By {{ book.authors }}{% endif %}{% if book.categories %}{% if book.authors %} • {% endif %}{{ book.categories }}{% endif %}</p>
+      {% endif %}
+      {% if book.status == 'finished' %}<p class="sub-meta">Finished on: {{ book.date | date: "%B %e, %Y" }}</p>{% endif %}
+      <p class="sub-meta"><a href="https://openlibrary.org/isbn/{{ book.isbn }}">View on Open Library</a></p>
+    </div>
+  </div>
+  {% if book.description %}<p><em>{{ book.description }}</em></p>{% endif %}
+</article>

src/pages/main/books/index.html

@@ -24,7 +24,7 @@ schema: books
       <p class="title"><strong>{{ book.title }}</strong></p>
     </a>
     {% if book.authors or book.categories %}
-    <p class="author-categories">{% if book.authors %}By {{ book.authors }}{% endif %}{% if book.categories %}{% if book.authors %}• {% endif %}<em>{{ book.categories }}</em>{% endif %}</p>
+    <p class="sub-meta">{% if book.authors %}By {{ book.authors }}{% endif %}{% if book.categories %}{% if book.authors %}• {% endif %}<em>{{ book.categories }}</em>{% endif %}</p>
     {% endif %}
     {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
   </div>