this repo has no description
www.baileykane.co/
Create /books page on the website. To replace the storygraph link.
+109
+109
app/books/page.tsx
+109
app/books/page.tsx
···
1
+
import BaseLayout from "@/components/BaseLayout";
2
+
import BookCard from "@/components/pageContent/books/BookCard";
3
+
import { importCSVDataAsJson } from "@/lib/sheetsConnector";
4
+
import type Book from "@/types/Book";
5
+
import Link from "next/link";
6
+
7
+
export const revalidate = 60;
8
+
9
+
export default async function Page(): Promise<React.ReactElement> {
10
+
const books: Array<Book> = await getBooks().then((bookList) =>
11
+
bookList.data
12
+
.sort((a: Book, b: Book) => {
13
+
// Sorting by read date, newest --> oldest
14
+
return Date.parse(b.dateRead) - Date.parse(a.dateRead);
15
+
})
16
+
.slice(0, 15)
17
+
);
18
+
19
+
return (
20
+
<BaseLayout>
21
+
<div className="mx-auto flex flex-col gap-6">
22
+
<section className="mx-auto max-w-2xl mb-0 sm:mb-4">
23
+
<h1>Books</h1>
24
+
<div className="prose prose-stone dark:prose-invert">
25
+
<p>
26
+
I love reading. Lots of fantasy, some scifi, occasionally
27
+
non-fiction (I usually enjoy it, it's just not what I'm drawn to).
28
+
I was a heavy reader as a kid, fell off during high school when
29
+
reading was a requirement for class (common story), and then came
30
+
back to it when I moved to Singapore just before the pandemic.
31
+
</p>
32
+
<p>
33
+
I believe <em>owning things</em> also means{" "}
34
+
<em>taking on the responsibility of taking care of them</em>.
35
+
Between not wanting this responsibility and harboring deep
36
+
feelings of anti-consumerism, I choose to primarily read ebooks
37
+
instead of owning physical books.
38
+
</p>
39
+
<p>
40
+
I check out books from one of the many libraries I have a card for
41
+
(
42
+
<Link href={"/library-cards"}>
43
+
check out my library card collection!
44
+
</Link>
45
+
), using{" "}
46
+
<a href="https://libbyapp.com/" target="_blank">
47
+
the Libby app
48
+
</a>
49
+
, and read them on my Kindle. I've searched for solid non-Amazon
50
+
ereader alternatives, but none of them seem to have the right
51
+
compatibility with Libby to allow me to use multiple library
52
+
cards. If you don't suffer from this inane, self-inflicted
53
+
constraint, I highly recommend{" "}
54
+
<a
55
+
href="https://us.kobobooks.com/collections/ereaders"
56
+
target="_blank"
57
+
>
58
+
Kobo ereaders
59
+
</a>
60
+
.
61
+
</p>
62
+
</div>
63
+
<hr className="mt-4 border-stone-400 dark:border-stone-500 sm:hidden" />
64
+
</section>
65
+
<section>
66
+
<h2>What I've been reading</h2>
67
+
<p className="prose prose-stone dark:prose-invert">
68
+
These are my most recent reads. See more on{" "}
69
+
<a
70
+
href="https://app.thestorygraph.com/profile/bk610"
71
+
target="_blank"
72
+
className=""
73
+
>
74
+
The StoryGraph
75
+
</a>
76
+
.
77
+
</p>
78
+
<div className="py-5 grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
79
+
{books.map((book: Book) => {
80
+
return <BookCard book={book} />;
81
+
})}
82
+
</div>
83
+
</section>
84
+
<section className="prose prose-stone dark:prose-invert max-w-none">
85
+
<p className="text-sm">
86
+
Book cover image data comes from the{" "}
87
+
<a
88
+
href="https://openlibrary.org/dev/docs/api/covers?ref=baileykane.co"
89
+
target="_blank"
90
+
>
91
+
Open Library Covers API
92
+
</a>
93
+
.
94
+
</p>
95
+
</section>
96
+
</div>
97
+
</BaseLayout>
98
+
);
99
+
}
100
+
101
+
async function getBooks(): Promise<{
102
+
data: Array<Book>;
103
+
}> {
104
+
const booksList = await importCSVDataAsJson(
105
+
process.env.NEXT_PUBLIC_BOOKS_DATA_URL
106
+
);
107
+
108
+
return booksList;
109
+
}