Add cloudflare basic impl

1 files changed, 6 insertions, 65 deletions

diff --git a/src/pages/index.astro b/src/pages/index.astro
index a88712c..09a80cc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,78 +1,19 @@
 ---
-import Counter from "../components/Counter";
+import TaskManager from "../components/TaskManager";
 import StandardLayout from "../layouts/StandardLayout.astro";
-import { getCollection } from "astro:content";
-
-// Get the latest 3 blog posts
-const latestPosts = await getCollection("blog");
-latestPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
-const featuredPosts = latestPosts.slice(0, 3);
 ---
 
-<StandardLayout title="Astro - Home">
+<StandardLayout title="Full-Stack Astro + Cloudflare">
 	<section class="py-12">
 		<div class="text-center mb-12">
 			<h1 class="text-5xl font-bold text-gray-900 mb-4">
-				Welcome to Astro
+				Full-Stack Astro
 			</h1>
 			<p class="text-xl text-gray-600 max-w-3xl mx-auto">
-				A modern framework for building fast, content-focused websites.
+				Powered by Cloudflare Workers and D1 Database
 			</p>
-			<div class="mt-8">
-				<Counter client:load />
-			</div>
-		</div>
-	</section>
-
-	<section
-		class="py-12 bg-gray-50 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8"
-	>
-		<div class="max-w-7xl mx-auto">
-			<div class="flex justify-between items-center mb-8">
-				<h2 class="text-3xl font-bold text-gray-900">
-					Latest Blog Posts
-				</h2>
-				<a
-					href="/blog"
-					class="text-blue-600 hover:text-blue-800 font-medium"
-					>View all posts →</a
-				>
-			</div>
-
-			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-				{
-					featuredPosts.map((post) => (
-						<article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-							<a href={`/blog/${post.slug}`} class="block">
-								{post.data.image && (
-									<img
-										src={post.data.image}
-										alt={post.data.title}
-										class="w-full h-48 object-cover"
-									/>
-								)}
-								<div class="p-6">
-									<h3 class="text-xl font-semibold text-gray-900 mb-2">
-										{post.data.title}
-									</h3>
-									<p class="text-sm text-gray-500 mb-3">
-										{new Date(
-											post.data.pubDate,
-										).toLocaleDateString("en-US", {
-											year: "numeric",
-											month: "long",
-											day: "numeric",
-										})}
-									</p>
-									<p class="text-gray-700">
-										{post.data.description}
-									</p>
-								</div>
-							</a>
-						</article>
-					))
-				}
-			</div>
 		</div>
+		
+		<TaskManager client:load />
 	</section>
 </StandardLayout>