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/[slug].astro | 67 +++++++++++++++++++++++++++++++++++++++++++++
 src/pages/blog/index.astro  | 48 ++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 src/pages/blog/[slug].astro
 create mode 100644 src/pages/blog/index.astro

(limited to 'src/pages/blog')

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
new file mode 100644
index 0000000..f42f5c9
--- /dev/null
+++ b/src/pages/blog/[slug].astro
@@ -0,0 +1,67 @@
+---
+import { getCollection, getEntry } from 'astro:content';
+import StandardLayout from '../../layouts/StandardLayout.astro';
+
+// Define the props type
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+// Get the blog post data
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+// Format the publication date
+const formattedDate = new Date(entry.data.pubDate).toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+});
+---
+
+<StandardLayout title={entry.data.title} description={entry.data.description}>
+  <article class="max-w-3xl mx-auto">
+    <div class="mb-8">
+      <a href="/blog" class="text-blue-600 hover:text-blue-800 flex items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        Back to Blog
+      </a>
+    </div>
+
+    {entry.data.image && (
+      <img 
+        src={entry.data.image} 
+        alt={entry.data.title} 
+        class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
+      />
+    )}
+
+    <h1 class="text-4xl font-bold text-gray-900 mb-4">{entry.data.title}</h1>
+    
+    <div class="flex items-center text-gray-600 mb-8">
+      <span>By {entry.data.author}</span>
+      <span class="mx-2">•</span>
+      <time datetime={entry.data.pubDate.toISOString()}>{formattedDate}</time>
+    </div>
+
+    {entry.data.tags && entry.data.tags.length > 0 && (
+      <div class="flex flex-wrap gap-2 mb-8">
+        {entry.data.tags.map(tag => (
+          <span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">
+            {tag}
+          </span>
+        ))}
+      </div>
+    )}
+
+    <div class="prose prose-lg max-w-none">
+      <Content />
+    </div>
+  </article>
+</StandardLayout>
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