feat: add library page

content/books/alice-in-wonderland.md

@@ -0,0 +1,9 @@
+---
+title: Alice's Adventures in Wonderland 
+author: Lewis Carroll
+stars: 3
+readDate: 2024
+url: https://app.thestorygraph.com/books/83b0e44a-06fe-4042-9d2d-e4f41244fb9c
+thumbnailUrl: https://cdn.thestorygraph.com/l83t3e6wh6tq7dqxbvrba34ee2nb
+tags: fiction, classics, fantasy
+---

content/books/cities-that-shaped-the-ancient-world.md

@@ -0,0 +1,9 @@
+---
+title: Cities That Shaped The Ancient World
+author: John Julius Norwich
+stars: 3.5
+readDate: 2024
+url: https://app.thestorygraph.com/books/20bc1ff4-56bb-4e88-a403-bc150d45f9d2
+thumbnailUrl: https://cdn.thestorygraph.com/i8znw2yrd6p4m76dx6rvyuyd48h2
+tags: non-fiction, history
+---

content/books/song-of-achilles.md

@@ -0,0 +1,10 @@
+---
+title: "The Song of Achilles"
+author: Madline Miller
+stars: 2.5
+readDate: 2025/03/22
+url: https://app.thestorygraph.com/books/9202845d-26cd-4a85-b15f-408116117028
+thumbnailUrl: https://cdn.thestorygraph.com/m8cw3kb3qx4h2jl8kg0u4m3txhie
+tags: fiction, fantasy, romance
+---
+This one really tailed off half-way through. I found the characters very one-dimensional (Patrcolus pines after Achilles, Achilles has muscles and can swing a sword fast), but the story took me at least up until the half-way mark. Weirdly I wasn't interested too much when the actual Iliad story line started to get going - maybe because I've heard it a million times before - and their essentially non-existent romance (more accurately an inch-deep obsession, I'd argue) didn't exactly inspire me to carry on reading.

content/books/stasiland.md

@@ -0,0 +1,9 @@
+---
+title: "Stasiland: Stories from Behind the Berlin Wall"
+author: Anna Funder
+stars: 4
+readDate: 2025/03/22
+url: https://app.thestorygraph.com/books/9202845d-26cd-4a85-b15f-408116117028
+thumbnailUrl: https://cdn.thestorygraph.com/gphzjvwbhr8d5agrieobx0yy2xhb
+tags: non-fiction, history, politics
+---

content/books/stray-reflections.md

@@ -0,0 +1,9 @@
+---
+title: Stray Reflections
+author: Muhammad Iqbal
+stars: 5
+readDate: 2025/03/22
+url:
+thumbnailUrl: 
+tags: non-fiction, politics, philosophy
+---

content/books/to-be-taught-if-fortunate.md

@@ -0,0 +1,10 @@
+---
+title: To Be Taught, If Fortunate
+author: Becky Chambers
+stars: 4.5
+readDate: 2025/03/22
+url: https://app.thestorygraph.com/books/fca2631f-b3e2-4b9d-a2fd-4c1ec5e4d3f7
+thumbnailUrl: https://cdn.thestorygraph.com/8ep9zjc581zefkzfyhtizqjnz8u5
+tags: fiction, science fiction
+---
+Really enjoyed this! It was reflective yet lighthearted. I also love this specific flavour of sci-fi, where vastly different species of aliens and worlds are thought up and articulated beautifully by the author.

next-sitemap.config.cjs

@@ -32,8 +32,7 @@ module.exports = {
         console.log(attributes)
         if (!attributes) { return null }
 
-        metadata.pubdate = attributes.pubdate ?? null
-        metadata.lastmod = attributes.moddate ?? null
+        metadata.lastmod = attributes.moddate ?? attributes.pubdate ?? null
 
         console.log('Calculated sitemap dates for article', path)
       }

next.config.mjs

@@ -2,7 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   output: 'export',
-  trailingSlash: true // ensure pages get their own directory in output
+  trailingSlash: true, // ensure pages get their own directory in output
+  images: {
+    unoptimized: true
+  }
 }
 
 export default nextConfig

package.json

@@ -1,6 +1,6 @@
 {
   "name": "www-aaronjy-2024",
-  "version": "1.6.2.0",
+  "version": "1.6.3.0",
   "private": true,
   "type": "module",
   "scripts": {

public/sitemap.xml

@@ -5,10 +5,10 @@
 <url><loc>https://www.aaronjy.me/cv/</loc><priority>0.8</priority></url>
 <url><loc>https://www.aaronjy.me/tags/</loc><priority>0.8</priority></url>
 <url><loc>https://www.aaronjy.me/writing/</loc><priority>0.8</priority></url>
-<url><loc>https://www.aaronjy.me/writing/attitudes-to-reading/</loc><priority>0.6</priority><pubdate>Tue, 18 Mar 2025 00:00:00 GMT</pubdate></url>
-<url><loc>https://www.aaronjy.me/writing/moving-from-github-to-forgejo/</loc><priority>0.6</priority><pubdate>Sun, 16 Mar 2025 00:00:00 GMT</pubdate></url>
-<url><loc>https://www.aaronjy.me/writing/performance-considerations-tcp-game-server/</loc><lastmod>Fri, 21 Mar 2025 21:12:47 GMT</lastmod><priority>0.6</priority><pubdate>Sun, 23 Feb 2025 21:12:37 GMT</pubdate></url>
-<url><loc>https://www.aaronjy.me/writing/quick-reflection-katherine-may/</loc><priority>0.6</priority><pubdate>Sun, 09 Mar 2025 00:00:00 GMT</pubdate></url>
-<url><loc>https://www.aaronjy.me/writing/static-site-on-google-cloud/</loc><priority>0.6</priority><pubdate>Wed, 01 May 2024 00:00:00 GMT</pubdate></url>
-<url><loc>https://www.aaronjy.me/writing/support-content-filte-structure-changes-on-a-static-site/</loc><priority>0.6</priority><pubdate>Mon, 18 Mar 2024 16:47:32 GMT</pubdate></url>
+<url><loc>https://www.aaronjy.me/writing/attitudes-to-reading/</loc><lastmod>Tue, 18 Mar 2025 00:00:00 GMT</lastmod><priority>0.6</priority></url>
+<url><loc>https://www.aaronjy.me/writing/moving-from-github-to-forgejo/</loc><lastmod>Sun, 16 Mar 2025 00:00:00 GMT</lastmod><priority>0.6</priority></url>
+<url><loc>https://www.aaronjy.me/writing/performance-considerations-tcp-game-server/</loc><lastmod>Fri, 21 Mar 2025 21:12:47 GMT</lastmod><priority>0.6</priority></url>
+<url><loc>https://www.aaronjy.me/writing/quick-reflection-katherine-may/</loc><lastmod>Sun, 09 Mar 2025 00:00:00 GMT</lastmod><priority>0.6</priority></url>
+<url><loc>https://www.aaronjy.me/writing/static-site-on-google-cloud/</loc><lastmod>Wed, 01 May 2024 00:00:00 GMT</lastmod><priority>0.6</priority></url>
+<url><loc>https://www.aaronjy.me/writing/support-content-filte-structure-changes-on-a-static-site/</loc><lastmod>Mon, 18 Mar 2024 16:47:32 GMT</lastmod><priority>0.6</priority></url>
 </urlset>

src/components/BookListItem/BookListItem.jsx

@@ -0,0 +1,24 @@
+import Image from 'next/image'
+
+import style from './BookListItem.module.css'
+import Link from 'next/link'
+
+export default function BookListItem ({ href, title, author, stars, readDate, url, thumbnailUrl, tags, review }) {
+  return (
+    <div className={style.item}>
+      <div className={style['image-container']}>
+        <Link href={href}>
+          <Image src={thumbnailUrl ?? '/img/book-placeholder.jpg'} alt={`Book cover for ${title}`} width={300} height={464} />
+        </Link>
+      </div>
+      <div>
+        <h2 className={style.heading}>
+          <Link href={href}>{title}</Link>
+        </h2>
+        <p className={style.author}>{author}</p>
+        <p>{tags}</p>
+        <p>{stars}/5</p>
+      </div>
+    </div>
+  )
+}

src/components/BookListItem/BookListItem.module.css

@@ -0,0 +1,18 @@
+.item {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.heading {
+  font-size: 1rem;
+  margin-bottom: 5px;
+}
+
+.author {
+  margin-top: 5px;
+  /* font-weight: bold; */
+}
+

src/components/Grid/Grid.jsx

@@ -0,0 +1,13 @@
+import style from './Grid.module.css'
+
+export default function Grid ({ columns, children }) {
+  return (
+    <div
+      className={style.grid} style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      }}
+    >
+      {children}
+    </div>
+  )
+}

src/components/Grid/Grid.module.css

@@ -0,0 +1,4 @@
+.grid {
+  display: grid;
+  gap: 25px;
+}

src/components/Header/Header.jsx

@@ -11,6 +11,7 @@ function Header () {
         <Link href='/writing'>Writing</Link>{', '}
         <Link href='/tags'>Tags</Link>{', '}
         <Link href='/cv'>CV</Link>{', '}
+        <Link href='/library'>Library</Link>{', '}
         <Link href='/about'>About</Link>
       </nav>
     </header>

src/pages/library/[slug].js

@@ -0,0 +1,15 @@
+import React from 'react'
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+import { getStaticEntryPaths, getStaticEntryProps } from '@/lib/content'
+import Article from '@/components/Article/Article'
+
+export const getStaticPaths = () => getStaticEntryPaths('./content/books')
+export const getStaticProps = (ctx) => getStaticEntryProps('./content/books', ctx)
+
+export default function LibrarySingle ({ attributes, html }) {
+  return (
+    <DefaultLayout>
+      <Article attributes={attributes} html={html} />
+    </DefaultLayout>
+  )
+}

src/pages/library/index.js

@@ -0,0 +1,72 @@
+import BookListItem from '@/components/BookListItem/BookListItem'
+import Grid from '@/components/Grid/Grid'
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+import { getStaticEntries } from '@/lib/content'
+import { NextSeo } from 'next-seo'
+
+export const Title = 'Library'
+
+export const getStaticProps = () => ({
+  props: {
+    bookEntries: getStaticEntries('./content/books')
+  }
+})
+
+const SORT_TITLE = 'title'
+const SORT_RATING = 'rating'
+
+export default function Library ({ bookEntries }) {
+  // const tags = getTags(bookEntries)
+
+  // const [sorter, setSorter] = useState(SORT_TITLE)
+
+  // console.log(bookEntries)
+
+  return (
+    <DefaultLayout>
+      <NextSeo
+        title={Title}
+        openGraph={
+          {
+            title: Title
+          }
+        }
+      />
+
+      <h1>{Title}</h1>
+
+      <section>
+        <div className='form-group'>
+          <label htmlFor='sortBy'>Sort by:&nbsp;</label>
+          <select id='sortBy' name='sort-by'>
+            <option value={SORT_TITLE}>Title (A-Z)</option>
+            <option value={SORT_RATING}>Rating (5-0)</option>
+            {/* <optgroup label="Genre">
+              {Object.keys(tags).sort().map(tag => (
+                <option>{tag}</option>
+              ))}
+            </optgroup> */}
+          </select>
+        </div>
+
+        <Grid columns={4}>
+          {bookEntries.map((entry, i) => (
+            <BookListItem key={entry.attributes.title} {...entry.attributes} href={`/library/${entry.slug}`} />
+          ))}
+        </Grid>
+      </section>
+    </DefaultLayout>
+  )
+}
+
+// function getTags (bookEntries) {
+//   const tags = {}
+//   for (const entry of bookEntries) {
+//     const entryTags = entry.attributes.tags.split(', ')
+//     for (const entryTag of entryTags) {
+//       tags[entryTag] = tags[entryTag] ? tags[entryTag] + 1 : 1
+//     }
+//   }
+
+//   return tags
+// }

src/styles/globals.css

@@ -13,4 +13,8 @@ tr {
 
 td:first-child {
     padding-right: 20px;
+}
+
+.form-group {
+    margin: 20px 0;
 }