Fix blog posts

src/components/BlogList.astro

@@ -0,0 +1,86 @@
+---
+import { getCollection } from "astro:content";
+
+const posts = await getCollection("blog");
+const sortedPosts = posts.sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime()
+);
+---
+
+<section class="blog-list">
+  <div class="content">
+    <ul class="posts">
+      {sortedPosts.map((post) => (
+        <li class="post-item">
+          <a href={`/blog/${post.slug}`} class="post-link">
+            <span class="post-title">{post.data.title}</span>
+            {post.data.description && (
+              <span class="post-description">{post.data.description}</span>
+            )}
+            <span class="post-date">{post.data.date.toDateString()}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .blog-list {
+    padding: 3rem 2rem;
+    display: flex;
+    justify-content: center;
+  }
+  .content {
+    max-width: 800px;
+    width: 100%;
+  }
+  .posts {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  .post-item {
+    padding: 1.5rem;
+    background-color: var(--ctp-surface0);
+    border: 2px solid var(--ctp-lavender);
+    border-radius: 12px;
+    transition: transform 0.2s ease, border-color 0.2s ease;
+  }
+  .post-item:hover {
+    transform: translateY(-2px);
+    border-color: var(--ctp-pink);
+  }
+  .post-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    text-decoration: none;
+  }
+  .post-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+  }
+  .post-description {
+    color: var(--ctp-subtext0);
+    font-size: 0.95rem;
+  }
+  .post-date {
+    color: var(--ctp-subtext0);
+    font-size: 0.85rem;
+    opacity: 0.7;
+  }
+
+  @media (max-width: 600px) {
+    .blog-list {
+      padding: 2rem 1rem;
+    }
+    .post-item {
+      padding: 1rem;
+    }
+  }
+</style>

src/content/blog/second-post.md

@@ -1,9 +1,10 @@
 ---
-title: "My Second Blog Post"
+slug: "second-post"
-date: 2025-10-16
+title: "My Second Post"
-description: "This is my second blog post"
+description: "This is the description of my second post."
+date: "2025-04-05"
 ---
 
-# This is an example blog post.
+# My Second Post
 
-This is the content of my second example blog post.
+This is the content of my second post.

src/pages/blog.astro

@@ -7,6 +7,8 @@ import WaveDivider from "../components/WaveDivider.astro";
 //import Webring from "../components/Webring.astro";
 //import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
 import Socials from "../components/Socials.astro";
+import BlogList from "../components/BlogList.astro"; // Import the new component
+
 
 // TODO: Fill in your preferences.
 const variables = {
@@ -21,8 +23,13 @@ const variables = {
     <Intro name={variables.name} subtitle={variables.subtitles} />
     <WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />
 
+    <!-- 
     <Posts />
     <WaveDivider color="teal" speed={100} size={0.8} direction="left" />
+    -->
+    
+    <BlogList /> <!-- Use the new component -->
+
 
     <Socials />
   </main>

src/pages/blog/[slug].astro

@@ -0,0 +1,123 @@
+---
+import { getCollection, type CollectionEntry } from "astro:content";
+import Layout from "../../layouts/Layout.astro";
+import Intro from "../../components/Intro.astro";
+import WaveDivider from "../../components/WaveDivider.astro";
+import Socials from "../../components/Socials.astro";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+interface Props {
+  post: CollectionEntry<"blog">;
+}
+
+const { post } = Astro.props;
+const { title, description, date } = post.data;
+const { Content } = await post.render();
+---
+
+<Layout title={title}>
+  <Intro name={title} subtitle={description ?? ""} />
+  <WaveDivider color="lavender" />
+
+  <section class="post">
+    <div class="content">
+      <p class="post-date">{date.toDateString()}</p>
+      <article class="post-body">
+        <Content />
+      </article>
+    </div>
+  </section>
+
+  <WaveDivider color="lavender" direction="right" />
+  <Socials />
+</Layout>
+
+<style>
+  .post {
+    padding: 2rem 2rem 4rem;
+    display: flex;
+    justify-content: center;
+  }
+  .content {
+    max-width: 800px;
+    width: 100%;
+  }
+  .post-date {
+    color: var(--ctp-subtext0);
+    font-size: 0.9rem;
+    opacity: 0.7;
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+  .post-body {
+    color: var(--ctp-text);
+    line-height: 1.7;
+    font-size: 1.05rem;
+  }
+
+  /* Style markdown content, matching Posts.astro */
+  .post-body :global(p) {
+    margin-bottom: 1.2rem;
+  }
+  .post-body :global(h1),
+  .post-body :global(h2),
+  .post-body :global(h3) {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: var(--ctp-lavender);
+  }
+  .post-body :global(a) {
+    color: var(--ctp-pink);
+  }
+  .post-body :global(ul),
+  .post-body :global(ol) {
+    margin-bottom: 1.2rem;
+    padding-left: 1.5rem;
+  }
+  .post-body :global(blockquote) {
+    border-left: 3px solid var(--ctp-lavender);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+    color: var(--ctp-subtext0);
+    font-style: italic;
+  }
+  .post-body :global(code) {
+    background-color: var(--ctp-mantle);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.9em;
+  }
+  .post-body :global(pre) {
+    background-color: var(--ctp-mantle);
+    padding: 1rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-bottom: 1.2rem;
+  }
+  .post-body :global(pre code) {
+    background: none;
+    padding: 0;
+  }
+  .post-body :global(img) {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+  }
+
+  @media (max-width: 600px) {
+    .post {
+      padding: 1.5rem 1rem 3rem;
+    }
+    .post-body {
+      font-size: 1rem;
+    }
+  }
+</style>