Show Goodreads books on about page
This commit is contained in:
SirBlob committed
1 parent
a2ffd45442
commit
0cfebc385f
12 files changed
+673
-213
No files matched your search
@@ -0,0 +1,180 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { Book } from '#lib/content';
|
||||
import Panel from '#lib/components/ui/Panel.svelte';
|
||||
import BookShelfGrid from './BookShelfGrid.svelte';
|
||||
|
||||
let { books }: { books: Book[] } = $props();
|
||||
|
||||
const shelfColors = { read: 'green', reading: 'blue', 'want-to-read': 'magenta' };
|
||||
|
||||
const byRating = (first: Book, second: Book) => (second.rating ?? -1) - (first.rating ?? -1);
|
||||
|
||||
const read = $derived(books.filter((book) => book.shelf === 'read').sort(byRating));
|
||||
const reading = $derived(books.filter((book) => book.shelf === 'reading'));
|
||||
const wantToRead = $derived(books.filter((book) => book.shelf === 'want-to-read'));
|
||||
|
||||
const shelfCounts = $derived([
|
||||
{ label: 'Read', count: read.length, color: shelfColors.read },
|
||||
{ label: 'Reading', count: reading.length, color: shelfColors.reading },
|
||||
{ label: 'Want to read', count: wantToRead.length, color: shelfColors['want-to-read'] }
|
||||
]);
|
||||
const shownCounts = $derived(shelfCounts.filter((shelf) => shelf.count > 0));
|
||||
const pagesRead = $derived(read.reduce((total, book) => total + (book.pages ?? 0), 0));
|
||||
const authorCount = $derived(new Set(read.flatMap((book) => book.authors)).size);
|
||||
const topGenres = $derived.by(() => {
|
||||
const counts = new Map<string, number>();
|
||||
read.flatMap((book) => book.genres).forEach((genre) => counts.set(genre, (counts.get(genre) ?? 0) + 1));
|
||||
return [...counts.entries()].sort((first, second) => second[1] - first[1]).slice(0, 3).map(([genre]) => genre);
|
||||
});
|
||||
const rows = $derived([
|
||||
['Pages read', pagesRead.toLocaleString('en-US')],
|
||||
['Authors', `${authorCount}`],
|
||||
...(topGenres.length ? [['Top genres', topGenres.join(', ')]] : [])
|
||||
]);
|
||||
</script>
|
||||
|
||||
<div class="overview" class:single={!reading.length}>
|
||||
<Panel title="bookshelf" icon="mdi:bookshelf">
|
||||
<div class="fetch">
|
||||
{#each shelfCounts as shelf (shelf.label)}
|
||||
<div><span class="label">{shelf.label}</span>: <span style:color="var(--{shelf.color})">{shelf.count}</span></div>
|
||||
{/each}
|
||||
{#each rows as [label, value] (label)}
|
||||
<div><span class="label">{label}</span>: {value}</div>
|
||||
{/each}
|
||||
|
||||
{#if shownCounts.length}
|
||||
<div class="breakdown" role="img" aria-label="Books by shelf">
|
||||
{#each shownCounts as shelf (shelf.label)}
|
||||
<span class="block" style:flex-grow={shelf.count} style:background="var(--{shelf.color})" title="{shelf.label}: {shelf.count}"></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
{#if reading.length}
|
||||
<Panel title="Currently reading" icon="mdi:book-open-variant">
|
||||
<div class="reading">
|
||||
{#each reading as book (book.goodreadsId)}
|
||||
<a class="reading-row" href={book.url} target="_blank" rel="noopener noreferrer">
|
||||
{#if book.cover}
|
||||
<img src={book.cover} alt={book.title} loading="lazy" />
|
||||
{:else}
|
||||
<span class="cover-fallback"><Icon icon="mdi:book-outline" width="22" /></span>
|
||||
{/if}
|
||||
<span class="reading-text">
|
||||
<span class="title">{book.title}</span>
|
||||
<span class="muted detail">{book.authors.join(', ')}</span>
|
||||
<span class="muted detail">
|
||||
{[book.pages ? `${book.pages} pages` : '', book.published?.slice(0, 4) ?? ''].filter(Boolean).join(' · ')}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</Panel>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if read.length}
|
||||
<BookShelfGrid title="Read" icon="mdi:check-circle-outline" books={read} />
|
||||
{/if}
|
||||
|
||||
{#if wantToRead.length}
|
||||
<BookShelfGrid title="Want to read" icon="mdi:bookmark-outline" books={wantToRead} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.overview.single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.fetch {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.breakdown {
|
||||
display: flex;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
flex-basis: 0;
|
||||
min-width: 0.5rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.reading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reading-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.reading-row:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.reading-row img,
|
||||
.cover-fallback {
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 78px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.reading-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title,
|
||||
.detail {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
@container (max-width: 800px) {
|
||||
.overview {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user