From 18c07b5c0f5688b0263e5a4baa04a25a16d63f4b Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 22 Apr 2024 12:50:44 -0700 Subject: [PATCH] feat: dedicated books page --- package.json | 2 +- src/_data/nav.js | 1 + src/assets/styles/base/index.css | 1 + src/assets/styles/defaults/vars.css | 1 + src/assets/styles/index.css | 1 + src/assets/styles/pages/books.css | 70 +++++++++++++++++++++++++ src/pages/books/index.html | 22 ++++++++ src/{ => pages/books}/want-to-read.html | 0 8 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 src/assets/styles/pages/books.css create mode 100644 src/pages/books/index.html rename src/{ => pages/books}/want-to-read.html (100%) diff --git a/package.json b/package.json index be3d6fa0..48d10b8c 100644 --- a/package.json +++ b/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": { diff --git a/src/_data/nav.js b/src/_data/nav.js index 32dfad57..eb8587c7 100644 --- a/src/_data/nav.js +++ b/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' }, ], } diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 60da6264..8596281c 100644 --- a/src/assets/styles/base/index.css +++ b/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; } diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css index 26160074..742ef218 100644 --- a/src/assets/styles/defaults/vars.css +++ b/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; diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index dcf06c36..4f12e7eb 100644 --- a/src/assets/styles/index.css +++ b/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); diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css new file mode 100644 index 00000000..593254b3 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/pages/books/index.html b/src/pages/books/index.html new file mode 100644 index 00000000..20151903 --- /dev/null +++ b/src/pages/books/index.html @@ -0,0 +1,22 @@ +--- +title: Currently reading • Books +layout: default +permalink: "/books/index.html" +--- +{%- assign bookData = books | bookStatus: 'started' -%} +

Currently reading

+

Here's what I'm reading at the moment. You can also take a look at what I'm planning to read (eventually).

+
+{% for book in bookData %} +{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %} +
+ {% image book.image, alt %} +
+

{{ book.title }}

+ {% if book.authors or book.categories %} +

{% if book.authors %}By {{ book.authors }}{% endif %}{% if book.categories %}{% if book.authors %}• {% endif %}{{ book.categories }}{% endif %}

+ {% endif %} + {% if book.description %}
{{ book.description }}
{% endif %} +
+
+{% endfor %} \ No newline at end of file diff --git a/src/want-to-read.html b/src/pages/books/want-to-read.html similarity index 100% rename from src/want-to-read.html rename to src/pages/books/want-to-read.html