init

frontend/src/pages/index.astro

@@ -0,0 +1,77 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+const API_URL = import.meta.env.PUBLIC_API_URL || 'http://localhost:3000';
+
+interface Post {
+  slug: string;
+}
+
+let posts: Post[] = [];
+let error = '';
+
+try {
+  const response = await fetch(`${API_URL}/api/posts`);
+  if (response.ok) {
+    posts = await response.json();
+  } else {
+    error = 'Failed to fetch posts';
+  }
+} catch (e) {
+  error = 'Could not connect to backend';
+}
+
+function formatSlug(slug: string) {
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+---
+
+<Layout title="Home">
+	<div class="space-y-8">
+		<section class="text-center py-12">
+			<h1 class="text-5xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
+				Welcome to my blog
+			</h1>
+			<p class="text-subtext1 text-lg max-w-2xl mx-auto">
+				Thoughts on software, design, and building things with Rust and Astro.
+			</p>
+		</section>
+
+		<div class="grid gap-6">
+			{error && (
+				<div class="glass p-6 text-red text-center border-red/20">
+					{error}
+				</div>
+			)}
+			
+			{posts.length === 0 && !error && (
+				<div class="glass p-12 text-center text-subtext0">
+					<p>No posts found yet. Add some .md files to the data/posts directory!</p>
+				</div>
+			)}
+
+			{posts.map((post) => (
+				<a href={`/posts/${post.slug}`} class="group">
+					<article class="glass p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99]">
+						<div class="flex justify-between items-start">
+							<div>
+								<h2 class="text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2">
+									{formatSlug(post.slug)}
+								</h2>
+								<p class="text-subtext0">
+									Read more about {formatSlug(post.slug)}...
+								</p>
+							</div>
+							<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity">
+								<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"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+							</div>
+						</div>
+					</article>
+				</a>
+			))}
+		</div>
+	</div>
+</Layout>