Posts working

src/pages/blog/[...slug].astro

@@ -0,0 +1,75 @@
+---
+import { getCollection, type CollectionEntry } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post: CollectionEntry<'blog'>) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post }: { post: CollectionEntry<'blog'> } = Astro.props;
+const { Content } = await post.render();
+---
+
+<Layout>
+  <div class="min-h-screen p-4 md:p-8">
+    <div class="max-w-3xl mx-auto">
+      <div class="p-4 md:p-8">
+        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
+          {post.data.title}
+        </h1>
+
+        <div class="flex flex-wrap items-center gap-4 mb-6">
+          <div class="flex items-center flex-row gap-2 text-base-content opacity-75">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <time datetime={post.data.pubDate.toISOString()}>
+              {new Date(post.data.pubDate).toLocaleDateString('en-us', {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </time>
+          </div>
+
+          {/* Back button */}
+          <a href="/posts" class="btn btn-outline btn-primary btn-sm">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 mr-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width={2}
+                d="M11 17l-5-5m0 0l5-5m-5 5h12"
+              />
+            </svg>
+            Back
+          </a>
+        </div>
+        
+        {post.data.tags && post.data.tags.length > 0 && (
+          <div class="flex gap-2 flex-wrap mb-6">
+            {post.data.tags.map((tag: string) => (
+              <span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <article class="prose prose-lg dark:prose-invert max-w-none mt-6">
+          <Content />
+        </article>
+      </div>
+    </div>
+  </div>
+</Layout> 

src/pages/index.astro

@@ -2,7 +2,6 @@
 import SocialLinks from '../components/SocialLinks.astro';
 import TechLinks from '../components/TechLinks.astro';
 import Layout from '../layouts/Layout.astro';
-import '../styles/global.css';
 ---
 
 <Layout>

src/pages/posts.astro

@@ -0,0 +1,30 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+import PostCard from "../components/PostCard.astro";
+
+// Get all blog posts from the content collection
+const posts = await getCollection("blog");
+
+// Sort posts by date, newest first
+const sortedPosts = posts.sort(
+  (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
+);
+---
+
+<Layout>
+  <div class="min-h-screen p-4 sm:p-8">
+    <h1 class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center">
+      Posts
+    </h1>
+    <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
+      {sortedPosts.map((post: CollectionEntry<"blog">) => (
+        <PostCard post={post} />
+      ))}
+    </div>
+    
+    {sortedPosts.length === 0 && (
+      <p class="text-center text-gray-500 mt-12">No posts available yet. Check back soon!</p>
+    )}
+  </div>
+</Layout>