refactor

frontend/src/pages/index.astro

@@ -1,11 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import PostCard from '../components/PostCard.astro';
 
-const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
-console.log('Connecting to backend at:', API_URL);
+const API_URL = process.env.PUBLIC_API_URL || 'http://localhost:3000';
 
 interface Post {
   slug: string;
+  excerpt?: string;
 }
 
 let posts: Post[] = [];
@@ -62,7 +63,7 @@ function formatSlug(slug: string) {
 					{error}
 				</div>
 			)}
-
+			
 			{posts.length === 0 && !error && (
 				<div class="glass p-8 md:p-12 text-center text-subtext1 text-sm md:text-base">
 					<p>No posts found yet. Add some .md files to the data/posts directory!</p>
@@ -70,21 +71,11 @@ function formatSlug(slug: string) {
 			)}
 
 			{posts.map((post) => (
-				<a href={`/posts/${post.slug}`} class="group block">
-					<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] flex flex-col md:flex-row justify-between md:items-center gap-4 md:gap-6">
-						<div class="flex-1">
-							<h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
-								{formatSlug(post.slug)}
-							</h2>
-							<p class="text-text text-sm md:text-base leading-relaxed line-clamp-3">
-								{post.excerpt || `Read more about ${formatSlug(post.slug)}...`}
-							</p>
-						</div>
-						<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-8 md:h-8"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-						</div>
-					</article>
-				</a>
+				<PostCard 
+                    slug={post.slug} 
+                    excerpt={post.excerpt} 
+                    formatSlug={formatSlug} 
+                />
 			))}
 		</div>
 	</div>