debug

src/content/config.ts

@@ -0,0 +1,20 @@
+import { defineCollection, z } from 'astro:content';
+
+const booksCollection = defineCollection({
+  type: 'content', // 'content' for Markdown, 'data' for JSON/YAML
+  schema: z.object({
+    title: z.string(),
+    author: z.string(),
+    year: z.number(),
+    genre: z.string(),
+    rating: z.number(),
+    cover: z.string(), // Assuming this is a path to an image
+    // The main body of the Markdown file (the description)
+    // doesn't need to be defined in the schema here;
+    // Astro handles it automatically.
+  }),
+});
+
+export const collections = {
+  'books': booksCollection,
+};

src/pages/index.astro

@@ -1,23 +1,27 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import fs from 'fs';
-import path from 'path';
+import { getCollection } from 'astro:content';
+
+// Fetch all entries from the 'books' collection
+const allBooks = await getCollection('books');
 
-// Dynamically import all markdown files from the books directory
-const booksDirectory = "../content/books";
-const books = Object.values(import.meta.glob("../content/books/*.md", { eager: true })).map((mod) => mod.frontmatter);
 ---
 
 <Layout>
-  <h1 class="text-3xl font-bold mb-6">Book List</h1>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    {books.map(book => (
-      <div class="bg-white rounded shadow p-4 flex flex-col items-center" style="min-height: 320px;">
-        <img src={book.cover} alt={book.title + ' cover'} class="w-32 h-48 object-cover mb-4 rounded border" />
-        <h2 class="text-xl font-semibold">{book.title}</h2>
-        <p class="text-gray-600">by {book.author} ({book.year})</p>
-        <p class="text-gray-500 text-sm mb-2">{book.genre} • Rating: {book.rating}</p>
-        <p class="text-gray-700 text-sm">{book.description || ''}</p>
+  <h1 class="text-3xl font-bold mb-6 text-center">My Book List</h1>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-4">
+    {allBooks.map(book => (
+      <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col items-center text-center">
+        <img 
+          src={book.data.cover} 
+          alt={`${book.data.title} cover`} 
+          class="w-40 h-56 object-cover mb-4 rounded-md border shadow-md" 
+        />
+        <h2 class="text-2xl font-bold text-gray-800 mb-1">{book.data.title}</h2>
+        <p class="text-md text-gray-700 mb-1">by {book.data.author} ({book.data.year})</p>
+        <p class="text-sm text-gray-500 mb-3">{book.data.genre} • Rating: {book.data.rating}/5</p>
+        {/* Accessing the Markdown body for the description */}
+        <p class="text-gray-600 text-sm">{book.body}</p> 
       </div>
     ))}
   </div>

vite.config.js

@@ -5,5 +5,15 @@ export default {
   // Example: If you had other Vite plugins or very specific Vite-only settings,
   // they would go here.
   // For now, it's minimal as Astro manages common settings.
+
+  // Explicitly adding allowedHosts for Vite preview to address Coolify "Blocked request"
+  preview: {
+    allowedHosts: [
+      'fwo4c4cgkos8k8kk8ow44kcc.reflectonai.com',
+      'localhost' // It's good practice to keep localhost if you test locally
+    ]
+    // Note: host and port are managed by Astro's `astro preview` command
+    // and astro.config.mjs, so we don't need to set them here again.
+  }
 };