Move data-fetching operations for the library inside @/cms/

Author: sergioalvz

cms/models/Book.ts

@@ -0,0 +1,23 @@
+import z from "zod";
+
+const BookSchema = z.object({
+  title: z.string(),
+  author: z.string(),
+  readAt: z.iso.date(),
+  category: z.union([
+    z.literal("foundational"),
+    z.literal("craft"),
+    z.literal("mental-models"),
+    z.literal("worldview"),
+    z.literal("exploration"),
+  ]),
+  image: z.string(),
+  status: z.union([z.literal("read")]),
+  language: z.union([z.literal("en"), z.literal("es")]),
+});
+
+export type Book = z.infer<typeof BookSchema>;
+
+export const toBook = (data: unknown): Book => {
+  return BookSchema.parse(data);
+};

cms/repositories/BookRepository.ts

@@ -0,0 +1,8 @@
+import { library } from "@/cms/content/library.json";
+import { Book, toBook } from "@/cms/models/Book";
+
+export class BookRepository {
+  public all(): Book[] {
+    return library.map(toBook);
+  }
+}

cms/repositories/index.ts

@@ -2,6 +2,7 @@ import { MarkdownRepository } from "@/cms/lib/MarkdownRepository";
 import { getConfig } from "@/config";
 
 import { ArticleRepository } from "./ArticleRepository";
+import { BookRepository } from "./BookRepository";
 import { CollectionRepository } from "./CollectionRepository";
 
 export const getBlogpostRepository = (): ArticleRepository =>
@@ -10,3 +11,5 @@ export const getBlogpostRepository = (): ArticleRepository =>
 export const getNotesRepository = (): ArticleRepository => MarkdownRepository.fromDirectory(getConfig().writing.notes);
 
 export const getCollectionRepository = (): CollectionRepository => new CollectionRepository();
+
+export const getBookRepository = (): BookRepository => new BookRepository();

pages/library.tsx

@@ -1,40 +1,18 @@
 import { GetStaticProps } from "next";
 import Image from "next/image";
 import { useState } from "react";
-import z from "zod";
 
-import { library } from "@/cms/content/library.json";
+import { Book } from "@/cms/models/Book";
+import { getBookRepository } from "@/cms/repositories";
 import { Heading } from "@/components/Heading";
 import { Link } from "@/components/Link";
 import { Text } from "@/components/Text";
 import { Application } from "@/layouts/Application";
 
-const BookSchema = z.object({
-  title: z.string(),
-  author: z.string(),
-  readAt: z.iso.date(),
-  category: z.union([
-    z.literal("foundational"),
-    z.literal("craft"),
-    z.literal("mental-models"),
-    z.literal("worldview"),
-    z.literal("exploration"),
-  ]),
-  image: z.string(),
-  status: z.union([z.literal("read")]),
-  language: z.union([z.literal("en"), z.literal("es")]),
-});
-
-type Book = z.infer<typeof BookSchema>;
-
 type LibraryPageProps = {
   library: Record<Book["category"], Book[]>;
 };
 
-const toBook = (data: unknown): Book => {
-  return BookSchema.parse(data);
-};
-
 export function LibrarySection(props: Readonly<React.PropsWithChildren>) {
   return <div className="LibrarySection">{props.children}</div>;
 }
@@ -50,6 +28,13 @@ 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) => {
@@ -71,14 +56,7 @@ export function LibrarySectionBooks(props: Readonly<{ books: Book[] }>) {
               <dd className="LibrarySection__Book__Author">{book.author}</dd>
 
               <dt className="sr-only">Read At</dt>
-              <dd className="LibrarySection__Book__Date">
-                {/* Displays relative time - e.g, 1 year ago */}
-                last read{" "}
-                {new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(
-                  -Math.floor((now - new Date(book.readAt).getTime()) / (1000 * 60 * 60 * 24 * 30 * 12)),
-                  "year",
-                )}
-              </dd>
+              <dd className="LibrarySection__Book__Date">last read {yearsAgo(new Date(book.readAt))}</dd>
             </dl>
           </li>
         );
@@ -167,7 +145,7 @@ export default function LibraryPage(props: Readonly<LibraryPageProps>) {
 }
 
 export const getStaticProps: GetStaticProps<LibraryPageProps> = async () => {
-  const books = library.map(toBook);
+  const books = getBookRepository().all();
 
   return {
     props: {