From f32aa30f2f0722fb659a22ddc57cdf3bd79a4ab5 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Fri, 23 May 2025 15:07:50 +0200
Subject: Add blog pages, content and standardlayout

---
 src/pages/blog/index.astro | 48 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/pages/blog/index.astro

(limited to 'src/pages/blog/index.astro')

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..76b9f57
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,48 @@
+---
+import StandardLayout from '../../layouts/StandardLayout.astro';
+import { getCollection } from 'astro:content';
+
+// Get all blog posts sorted by publication date
+const posts = await getCollection('blog');
+posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+---
+
+<StandardLayout title="Blog | Astro Site" description="Read our latest blog posts">
+  <div class="space-y-8">
+    <h1 class="text-3xl font-bold text-gray-900">Blog</h1>
+    
+    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+      {posts.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">
+              <h2 class="text-xl font-semibold text-gray-900 mb-2">{post.data.title}</h2>
+              <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>
+              <p class="mt-4 text-blue-600 font-medium">Read more →</p>
+            </div>
+          </a>
+        </article>
+      ))}
+    </div>
+    
+    {posts.length === 0 && (
+      <div class="bg-white rounded-lg shadow p-6 text-center">
+        <p class="text-gray-700">No blog posts found. Check back soon!</p>
+      </div>
+    )}
+  </div>
+</StandardLayout>
-- 
cgit v1.3.1