From 789583142c61cc82291104b6ea14e4dd097d4ecf Mon Sep 17 00:00:00 2001
From: greg <gregman@livingonlinenow.com>
Date: Wed, 21 May 2025 00:45:20 +0200
Subject: [PATCH] feat: add books page with filtering and create sample book
 content

---
 content/books/my-first-book copy.md |  2 +-
 src/pages/books.astro               | 51 ++++++++++++++++++-----------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/content/books/my-first-book copy.md b/content/books/my-first-book copy.md
index 8b4ed59..06a1ac0 100644
--- a/content/books/my-first-book copy.md	
+++ b/content/books/my-first-book copy.md	
@@ -3,7 +3,7 @@ title: "Dune 2"
 year: 1966
 media_type: "book"
 genre: "Brol"
-rating: 5
+rating: 1
 cover: "/covers/dune-placeholder.jpg"
 status: "Read"
 date_added: "2025-05-20"
diff --git a/src/pages/books.astro b/src/pages/books.astro
index 6d24976..7dfb487 100644
--- a/src/pages/books.astro
+++ b/src/pages/books.astro
@@ -82,18 +82,32 @@ const alpineData = {
     <!-- Book Grid -->
     {booksFoundCount > 0 ? (
       <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-8 md:gap-10 justify-items-center">
-        {allBooksAstro.map(book => (
-          <div x-show={`$store && $store.matchesFilters ? $store.matchesFilters(${JSON.stringify(book)}) : true`}> {/* fallback to show all if Alpine not ready */}
-            <MediaCard
-              title={book.title || (book.frontmatter && book.frontmatter.title)}
-              cover={book.cover || (book.frontmatter && book.frontmatter.cover)}
-              rating={book.rating || (book.frontmatter && book.frontmatter.rating)}
-              url={book.url}
-              description={book.description || (book.frontmatter && book.frontmatter.description)}
-              author={book.author || (book.frontmatter && book.frontmatter.author)}
-            />
+        <template x-for="book in filteredBooks" :key="book.url">
+          <div class="bg-slate-50 border-2 border-sky-500 rounded-xl shadow-lg w-56 mx-auto p-4 my-4 transition-all duration-200 hover:shadow-2xl">
+            <a :href="book.url" class="block">
+              <img
+                :src="book.cover || '/placeholder-cover.png'"
+                :alt="book.title ? `Cover for ${book.title}` : 'Book cover'"
+                class="w-full h-24 object-contain bg-gray-100 rounded-t-lg"
+                @error="event.target.src='/placeholder-cover.png'"
+              />
+            </a>
+            <div class="p-2">
+              <h3 class="text-sm font-semibold text-slate-800 mb-1 truncate">
+                <a :href="book.url" class="hover:text-sky-600" x-text="book.title"></a>
+              </h3>
+              <template x-if="book.author">
+                <p class="text-xs text-slate-500 mb-1" x-text="`by ${book.author}`"></p>
+              </template>
+              <template x-if="book.rating">
+                <p class="text-xs text-slate-600 mb-1" x-text="`Rating: ${book.rating}/5`"></p>
+              </template>
+              <template x-if="book.description">
+                <p class="text-xs text-slate-700 mt-1 overflow-hidden" x-text="book.description"></p>
+              </template>
+            </div>
           </div>
-        ))}
+        </template>
       </div>
     ) : (
       <div class="text-center py-10">
@@ -136,15 +150,12 @@ const alpineData = {
           
           let ratingMatch = this.selectedRating === '' || (ratingValue !== undefined && ratingValue !== null && ratingValue >= selectedRatingValue);
 
-          // Temporary debug log for rating filter
-          if (this.selectedRating !== '') {
-            console.log(
-              `Book: "${book.title}", Book Rating: ${ratingValue} (type: ${typeof ratingValue}), ` +
-              `Selected Dropdown Rating: "${this.selectedRating}" (type: ${typeof this.selectedRating}), ` +
-              `Parsed Selected: ${selectedRatingValue} (type: ${typeof selectedRatingValue}), Match: ${ratingMatch}`
-            );
-          }
-          return genreMatch && ratingMatch;
+          // Debug log for genre and rating filter
+           console.log(
+             `Book: "${book.title}", Book Genre: "${book.genre}", Selected Genre: "${this.selectedGenre}", Genre Match: ${genreMatch}, ` +
+             `Book Rating: ${ratingValue} (type: ${typeof ratingValue}), Selected Dropdown Rating: "${this.selectedRating}" (type: ${typeof this.selectedRating}), Parsed Selected: ${selectedRatingValue} (type: ${typeof selectedRatingValue}), Rating Match: ${ratingMatch}`
+           );
+           return genreMatch && ratingMatch;
         });
       },