Link library from the homepage

Author: sergioalvz

components/Book/Book.module.css

@@ -0,0 +1,19 @@
+.Details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.Title {
+  font-weight: 500;
+}
+
+.Author {
+  color: var(--c-gray-11);
+}
+
+.Date {
+  font-size: var(--fs-s);
+
+  color: var(--c-gray-11);
+}

components/Book/index.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import React, { useState } from "react";
+
+import { Book as BookData } from "@/cms/models/Book";
+
+import styles from "./Book.module.css";
+
+export type BookProps = {
+  as?: keyof React.JSX.IntrinsicElements;
+  book: BookData;
+};
+
+export function Book({ as = "div", book }: Readonly<BookProps>) {
+  const Komponent = as;
+
+  const [now] = useState(() => Date.now());
+
+  const yearsAgo = (date: Date) => {
+    return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(
+      -Math.floor((now - date.getTime()) / (1000 * 60 * 60 * 24 * 30 * 12)),
+      "year",
+    );
+  };
+
+  return (
+    <Komponent>
+      <Image
+        src={book.image}
+        alt={`Cover of the book ${book.title}`}
+        width={230}
+        height={345}
+        style={{ objectFit: "contain" }}
+      />
+
+      <dl className={styles.Details}>
+        <dt className="sr-only">Title</dt>
+        <dd className={styles.Title}>{book.title}</dd>
+
+        <dt className="sr-only">Author</dt>
+        <dd className={styles.Author}>{book.author}</dd>
+
+        <dt className="sr-only">Read At</dt>
+        <dd className={styles.Date}>last read {yearsAgo(new Date(book.readAt))}</dd>
+      </dl>
+    </Komponent>
+  );
+}

pages/index.tsx

@@ -3,7 +3,9 @@ import { GetStaticProps } from "next";
 import Image from "next/image";
 
 import { ApiArticle } from "@/cms/api/ApiArticle";
-import { getBlogpostRepository, getNotesRepository } from "@/cms/repositories";
+import { Book } from "@/cms/models/Book";
+import { getBlogpostRepository, getBookRepository, getNotesRepository } from "@/cms/repositories";
+import { Book as BookThumbnail } from "@/components/Book";
 import { Heading } from "@/components/Heading";
 import { Link } from "@/components/Link";
 import { PostThumbnail } from "@/components/PostThumbnail";
@@ -13,9 +15,10 @@ import { isDevelopment } from "@/lib/env";
 
 type HomepageProps = {
   publications: ApiArticle[];
+  books: Book[];
 };
 
-export default function Homepage({ publications }: HomepageProps) {
+export default function Homepage({ publications, books }: Readonly<HomepageProps>) {
   return (
     <Application hideBackLink>
       <section className="Homepage">
@@ -39,7 +42,7 @@ export default function Homepage({ publications }: HomepageProps) {
           </Text>
 
           <Heading el="h2" size="xl" className="Homepage__Heading">
-            Latest publications
+            Recent writing
           </Heading>
 
           {publications.map((pub) => (
@@ -50,6 +53,30 @@ export default function Homepage({ publications }: HomepageProps) {
             Fancy reading more? Don’t miss either the <Link href="/blog">blog</Link> or the{" "}
             <Link href="/notes">notes</Link>!
           </Text>
+
+          <Heading el="h2" size="xl" className="Homepage__Heading">
+            My library
+          </Heading>
+
+          <Text size="m">
+            I love reading, and over time I’ve built a collection of books that have shaped my thinking on software
+            development in meaningful ways.
+          </Text>
+
+          <Text size="m">
+            <Link href="/library">My library</Link> spans technical foundations, craft practices, and broader
+            perspectives, and it’s always growing!
+          </Text>
+
+          <div className="Homepage__Books">
+            {books.map((book) => (
+              <BookThumbnail book={book} key={book.title} />
+            ))}
+          </div>
+
+          <Text className="Homepage__ReadMore">
+            Don’t forget to check out <Link href="/library">the full library!</Link>
+          </Text>
         </div>
       </section>
     </Application>
@@ -59,12 +86,18 @@ export default function Homepage({ publications }: HomepageProps) {
 export const getStaticProps: GetStaticProps<HomepageProps> = async () => {
   const blogposts = await getBlogpostRepository().all({ drafts: isDevelopment() });
   const notes = await getNotesRepository().all({ drafts: isDevelopment() });
+  const books = getBookRepository().all();
 
   const publications = orderBy([...blogposts, ...notes], (article) => article.getDate(), "desc").slice(0, 5);
+  const foundationalBooks = books.filter((book) => book.category === "foundational");
+  const craftBooks = books.filter((book) => book.category === "craft");
 
   return {
     props: {
       publications: publications.map((pub) => pub.toApiArticle()),
+
+      // Prioritize foundational books, then craft books
+      books: [...foundationalBooks, ...craftBooks].slice(0, 6),
     },
   };
 };

pages/library.tsx

@@ -1,9 +1,8 @@
 import { GetStaticProps } from "next";
-import Image from "next/image";
-import { useState } from "react";
 
 import { Book } from "@/cms/models/Book";
 import { getBookRepository } from "@/cms/repositories";
+import { Book as BookThumbnail } from "@/components/Book";
 import { Heading } from "@/components/Heading";
 import { Link } from "@/components/Link";
 import { Text } from "@/components/Text";
@@ -26,41 +25,11 @@ export function LibrarySectionDescription(props: Readonly<React.PropsWithChildre
 }
 
 export function LibrarySectionBooks(props: Readonly<{ books: Book[] }>) {
-  const [now] = useState(() => Date.now());
-
-  const yearsAgo = (date: Date) => {
-    return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(
-      -Math.floor((now - date.getTime()) / (1000 * 60 * 60 * 24 * 30 * 12)),
-      "year",
-    );
-  };
-
   return (
     <ul className="LibrarySection__Books">
-      {props.books.map((book) => {
-        return (
-          <li key={book.title}>
-            <Image
-              src={book.image}
-              alt={`Cover of the book ${book.title}`}
-              width={230}
-              height={345}
-              style={{ objectFit: "contain" }}
-            />
-
-            <dl className="LibrarySection__Books__Details">
-              <dt className="sr-only">Title</dt>
-              <dd className="LibrarySection__Book__Title">{book.title}</dd>
-
-              <dt className="sr-only">Author</dt>
-              <dd className="LibrarySection__Book__Author">{book.author}</dd>
-
-              <dt className="sr-only">Read At</dt>
-              <dd className="LibrarySection__Book__Date">last read {yearsAgo(new Date(book.readAt))}</dd>
-            </dl>
-          </li>
-        );
-      })}
+      {props.books.map((book) => (
+        <BookThumbnail as="li" book={book} key={book.title} />
+      ))}
     </ul>
   );
 }

styles/pages/index.css

@@ -12,14 +12,21 @@
 }
 
 .Homepage__Heading {
-  margin-bottom: 1em;
-  margin-top: 1.5em;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
 }
 
 .Homepage__Publication:not(:first-of-type) {
   margin-top: 1rem;
 }
 
+.Homepage__Books {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
 .Homepage__ReadMore {
   margin-top: 2em;
 }

styles/pages/library.css

@@ -10,26 +10,6 @@
   list-style-type: none;
 }
 
-.LibrarySection__Books__Details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.LibrarySection__Book__Title {
-  font-weight: 500;
-}
-
-.LibrarySection__Book__Author {
-  color: var(--c-gray-11);
-}
-
-.LibrarySection__Book__Date {
-  font-size: var(--fs-s);
-
-  color: var(--c-gray-11);
-}
-
 .Library__Footer::before {
   content: "--";