feat: dedicated books page

package.json

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

src/_data/nav.js

@@ -24,6 +24,7 @@ export default async function () {
       { name: 'ListenBrainz', url: 'https://listenbrainz.org/user/cdransf/', icon: 'brain' },
       { name: 'Trakt', url: 'https://trakt.tv/users/cdransf', icon: 'device-tv' },
       { name: 'Instapaper', url: 'https://www.instapaper.com/p/coryd', icon: 'news' },
+      { name: 'Books', url: '/books', icon: 'books' },
       { name: 'Webrings', url: '/webrings', icon: 'heart-handshake' },
     ],
   }

src/assets/styles/base/index.css

@@ -251,6 +251,7 @@ nav ul li .active svg:hover {
 .brain svg { stroke: var(--brand-listenbrainz) !important; }
 .device-tv svg { stroke: var(--brand-trakt) !important; }
 .news svg { stroke: var(--brand-instapaper) !important; }
+.books svg { stroke: var(--brand-books) !important; }
 .coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }

src/assets/styles/defaults/vars.css

@@ -49,6 +49,7 @@
   --brand-listenbrainz: #e97941;
   --brand-trakt: #ed1c24;
   --brand-instapaper: var(--text-color);
+  --brand-books: #12c28e;
   --brand-buy-me-a-coffee: #40dca5;
   --brand-rss: #f26522;
   --webrings: #ec8fd0;

src/assets/styles/index.css

@@ -17,6 +17,7 @@
 /* page styles */
 @import url('./pages/404.css') layer(page);
 @import url('./pages/about.css') layer(page);
+@import url('./pages/books.css') layer(page);
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/now.css') layer(page);

src/assets/styles/pages/books.css

@@ -0,0 +1,70 @@
+.book-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sizing-sm);
+  align-items: center;
+
+  &:last-of-type {
+    border-bottom: 0;
+  }
+
+  & img {
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded);
+  }
+
+  & img,
+  & picture {
+    max-width: calc(var(--sizing-3xl) * 4);
+    height: auto;
+  }
+
+  & .book-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+    align-items: center;
+
+    & p {
+      margin: 0;
+      overflow: hidden;
+      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 {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      overflow: hidden;
+      margin-bottom: var(--sizing-base);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .book-entry {
+    flex-direction: row;
+    gap: var(--sizing-base);
+    align-items: start;
+
+    & picture {
+      margin-bottom: var(--sizing-md);
+    }
+
+    & .book-meta {
+      align-items: start;
+    }
+  }
+}

src/pages/books/index.html

@@ -0,0 +1,22 @@
+---
+title: Currently reading • Books
+layout: default
+permalink: "/books/index.html"
+---
+{%- assign bookData = books | bookStatus: 'started' -%}
+<h2 class="page-header">Currently reading</h2>
+<p>Here's what I'm reading at the moment. <a href="/books/want-to-read/">You can also take a look at what I'm planning to read (eventually).</a></p>
+<hr class="large-spacing" />
+{% for book in bookData %}
+{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
+<article class="book-entry">
+  {% image book.image, alt %}
+  <div class="book-meta">
+    <p class="title"><strong>{{ book.title }}</strong></p>
+    {% 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>
+    {% endif %}
+    {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
+  </div>
+</article>
+{% endfor %}