feat: initialize Astro project with books collection and TailwindCSS setup

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

astro.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});

content/books/my-first-book copy.md

@@ -0,0 +1,16 @@
+---
+title: "Dune 2"
+year: 1966
+media_type: "book"
+genre: "Brol"
+rating: 5
+cover: "/covers/dune-placeholder.jpg"
+status: "Read"
+date_added: "2025-05-20"
+tags: ["classic", "epic"]
+author: "Frank Herbert"
+pages: 412
+isbn: "978-0441172719"
+---
+
+A masterpiece of science fiction, exploring themes of politics, religion, ecology, and human evolution on the desert planet Arrakis.

content/books/my-first-book.md

@@ -0,0 +1,16 @@
+---
+title: "Dune"
+year: 1965
+media_type: "book"
+genre: "Science Fiction"
+rating: 5
+cover: "/covers/dune-placeholder.jpg"
+status: "Read"
+date_added: "2025-05-20"
+tags: ["classic", "epic"]
+author: "Frank Herbert"
+pages: 412
+isbn: "978-0441172719"
+---
+
+A masterpiece of science fiction, exploring themes of politics, religion, ecology, and human evolution on the desert planet Arrakis.

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "my-fav-stuff",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.7",
+    "astro": "^5.7.13",
+    "tailwindcss": "^4.1.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.7",
+    "autoprefixer": "^10.4.21"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

public/covers/.gitkeep

@@ -0,0 +1 @@
+

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

public/placeholder-covera.png

@@ -0,0 +1 @@
+

src/components/MediaCard.astro

@@ -0,0 +1,56 @@
+---
+// src/components/MediaCard.astro
+let { title, cover, rating, url, description, author } = Astro.props; // Default destructuring for individual props
+
+// If bookData is passed (e.g., from Alpine client-side rendering), parse it
+if (Astro.props.bookData) {
+  try {
+    const parsedData = JSON.parse(Astro.props.bookData);
+    // Try both top-level and frontmatter fields
+    title = parsedData.title || (parsedData.frontmatter && parsedData.frontmatter.title);
+    cover = parsedData.cover || (parsedData.frontmatter && parsedData.frontmatter.cover);
+    rating = parsedData.rating || (parsedData.frontmatter && parsedData.frontmatter.rating);
+    url = parsedData.url;
+    description = parsedData.description || (parsedData.frontmatter && parsedData.frontmatter.description);
+    author = parsedData.author || (parsedData.frontmatter && parsedData.frontmatter.author);
+  } catch (e) {
+    console.error("MediaCard: Failed to parse bookData JSON", e, Astro.props.bookData);
+    // Fallback to individual props or defaults will apply if parsing fails
+  }
+}
+
+const placeholderCover = "/placeholder-cover.png"; // A generic placeholder if a cover is missing
+---
+<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={url} class="block">
+        <img
+            src={cover || placeholderCover}
+            alt={title ? `Cover for ${title}` : 'Book cover'}
+            class="w-full h-24 object-contain bg-gray-100 rounded-t-lg"
+            onerror={`this.onerror=null;this.src='${placeholderCover}';`}
+        />
+    </a>
+    <div class="p-2">
+
+        <h3 class="text-sm font-semibold text-slate-800 mb-1 truncate">
+            <a href={url} class="hover:text-sky-600">{title}</a>
+        </h3>
+        {author && (
+          <p class="text-xs text-slate-500 mb-1">by {author}</p>
+        )}
+        {rating && (
+            <p class="text-xs text-slate-600 mb-1">Rating: {rating}/5</p>
+        )}
+        {description && (
+            <p class="text-xs text-slate-700 mt-1 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{description}</p>
+        )}
+    </div>
+</div>
+
+<style>
+    /* Basic placeholder styling, Tailwind will handle most of it */
+    img[src$="placeholder-cover.png"] {
+        object-fit: contain; /* Or 'scale-down' to ensure it fits without cropping */
+        background-color: #e9ecef; /* Light gray background for placeholder */
+    }
+</style>

src/components/SiteLayout.astro

@@ -0,0 +1,82 @@
+---
+// SiteLayout.astro: Shared layout for header and navigation
+import '../styles/global.css';
+const { title = "My fav stuff", activeTab = "books" } = Astro.props;
+const navTabs = [
+  { label: "Books", href: "/books", key: "books" },
+  { label: "Movies", href: "/movies", key: "movies" },
+  { label: "TVSeries", href: "/tv-series", key: "tv-series" },
+];
+---
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <slot name="head" />
+    <style>
+      .fab {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        z-index: 50;
+        width: 3.5rem;
+        height: 3.5rem;
+        border-radius: 50%;
+        background: #0ea5e9;
+        color: white;
+        font-size: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .fab:hover { background: #0369a1; }
+      .hamburger {
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        cursor: pointer;
+        margin-right: 1rem;
+      }
+      .hamburger span {
+        height: 0.25rem;
+        background: #334155;
+        margin: 0.2rem 0;
+        border-radius: 2px;
+        width: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body class="font-sans bg-slate-50 text-slate-900 min-h-screen">
+    <header class="mb-4 flex flex-col md:flex-row items-center p-4 bg-white shadow rounded-lg">
+      <div class="flex items-center w-full mb-2 md:mb-0">
+        <div class="hamburger" title="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <h1 class="text-2xl font-bold text-slate-700 flex-1">{title}</h1>
+      </div>
+      <nav class="w-full md:w-auto">
+        <ul class="flex space-x-4 justify-center md:justify-start">
+          {navTabs.map(tab => (
+            <li>
+              <a href={tab.href} class={`font-medium px-3 py-1 rounded ${activeTab === tab.key ? 'bg-sky-100 text-sky-700 underline' : 'text-slate-600 hover:text-sky-600'}`}>{tab.label}</a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+    <main class="px-2 md:px-8">
+      <slot />
+    </main>
+    <a class="fab" href="#" title="Add new item">+</a>
+  </body>
+</html>

src/pages/books.astro

@@ -0,0 +1,157 @@
+---
+// src/pages/books.astro
+import SiteLayout from '../components/SiteLayout.astro';
+import MediaCard from '../components/MediaCard.astro';
+import '../styles/global.css';
+
+const bookImports = import.meta.glob('../../content/books/*.md');
+let allBooksAstro = []; // Use let to reassign after sorting
+for (const path in bookImports) {
+  const bookModule = await bookImports[path]();
+  allBooksAstro.push({
+    frontmatter: bookModule.frontmatter,
+    url: bookModule.url || path.replace('../../content', '').replace('.md', ''),
+    description: bookModule.frontmatter.description || bookModule.rawContent()?.substring(0, 100) + '...' || 'No description available.',
+    // Ensure all necessary fields for filtering are directly accessible
+    genre: bookModule.frontmatter.genre,
+    rating: bookModule.frontmatter.rating,
+    title: bookModule.frontmatter.title, // for sorting
+    cover: bookModule.frontmatter.cover // for MediaCard
+  });
+}
+
+// Sort books by title alphabetically
+allBooksAstro.sort((a, b) => a.title.localeCompare(b.title));
+
+const uniqueGenres = [...new Set(allBooksAstro.map(book => book.genre).filter(Boolean))].sort();
+const ratings = [5, 4, 3, 2, 1];
+
+const pageTitle = "My Books Collection";
+const booksFoundCount = allBooksAstro.length;
+
+// Data to pass to Alpine.js
+const alpineData = {
+  alpineBooks: allBooksAstro,
+  uniqueGenres,
+  ratings
+};
+---
+
+<SiteLayout title={pageTitle} activeTab="books">
+  <div class="container mx-auto px-4 py-8" x-data="page" x-init="init()">
+    <header class="mb-8 text-center">
+      <h1 class="text-4xl font-bold text-slate-800">{pageTitle}</h1>
+      {booksFoundCount > 0 && (
+        <p class="text-lg text-slate-600 mt-2">
+          Displaying <span x-text="filteredBooks.length"></span> of {booksFoundCount} books.
+        </p>
+      )}
+    </header>
+
+    <!-- Filters -->
+    {booksFoundCount > 0 && (
+      <div class="mb-8 p-4 bg-slate-100 rounded-lg shadow">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
+          <div>
+            <label for="genre-filter" class="block text-sm font-medium text-slate-700 mb-1">Genre</label>
+            <select id="genre-filter" x-model="selectedGenre" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
+              <option value="">All Genres</option>
+              <template x-for="genre in genres" :key="genre">
+                <option :value="genre" x-text="genre"></option>
+              </template>
+            </select>
+          </div>
+          <div>
+            <label for="rating-filter" class="block text-sm font-medium text-slate-700 mb-1">Min. Rating</label>
+            <select id="rating-filter" x-model="selectedRating" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
+              <option value="">All Ratings</option>
+              <template x-for="rating in ratings" :key="rating">
+                <option :value="rating" x-text="`${rating} Stars`"></option>
+              </template>
+            </select>
+          </div>
+          <div class="md:mt-auto">
+            <button @click="resetFilters()" class="w-full bg-slate-500 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm sm:text-sm">
+              Reset Filters
+            </button>
+          </div>
+        </div>
+      </div>
+    )}
+
+    <!-- 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)}
+            />
+          </div>
+        ))}
+      </div>
+    ) : (
+      <div class="text-center py-10">
+        <p class="text-xl text-slate-500">No books found in your collection yet.</p>
+        <p class="text-slate-400 mt-2">Try adding some markdown files to the <code>content/books</code> directory.</p>
+      </div>
+    )}
+    
+    <!-- Empty state for filters -->
+    <template x-if="booksFoundCount > 0 && filteredBooks.length === 0">
+      <div class="text-center py-10">
+        <p class="text-xl text-slate-500">No books match your current filters.</p>
+        <p class="text-slate-400 mt-2">Try adjusting or resetting your filters.</p>
+      </div>
+    </template>
+
+  </div>
+</SiteLayout>
+
+<script define:vars={alpineData} is:inline>
+  document.addEventListener('alpine:init', () => {
+    Alpine.data('page', () => ({
+      allBooks: alpineBooks, // from define:vars
+      genres: uniqueGenres,   // from define:vars
+      ratings: ratings,       // from define:vars
+      selectedGenre: '',
+      selectedRating: '',
+      
+      init() {
+        // Could load filters from localStorage here if desired
+        console.log('Alpine component initialized with', this.allBooks.length, 'books.');
+      },
+
+      get filteredBooks() {
+        if (!this.allBooks) return [];
+        return this.allBooks.filter(book => {
+          const genreMatch = this.selectedGenre === '' || book.genre === this.selectedGenre;
+          const ratingValue = book.rating;
+          const selectedRatingValue = this.selectedRating === '' ? '' : parseInt(this.selectedRating);
+          
+          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;
+        });
+      },
+
+      resetFilters() {
+        this.selectedGenre = '';
+        this.selectedRating = '';
+      }
+    }));
+  });
+</script>

src/pages/index.astro

@@ -0,0 +1,16 @@
+---
+
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+	</body>
+</html>

src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{astro,js,jsx,ts,tsx}',
+    './src/components/**/*.{astro,js,jsx,ts,tsx}',
+    './src/pages/**/*.{astro,js,jsx,ts,tsx}',
+    './content/**/*.{md,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}