Implement blog functionality with posts and layout

src/components/Blog.astro

@@ -1,163 +0,0 @@
----
-// TODO: List some projects
-const projects = [
-  {
-    name: "My First Blog Post",
-    url: "/posts/post-1/",
-    color: "var(--ctp-lavender)",
-  },
-    {
-    name: "My Second Blog Post",
-    url: "/posts/post-2/",
-    color: "var(--ctp-lavender)",
-  },
-    {
-    name: "My Third Blog Post",
-    url: "/posts/post-3/",
-    color: "var(--ctp-lavender)",
-  },
-];
----
-
-<section class="project">
-  <div class="content">
-    <h2 class="section-title">Blog</h2>
-    <div class="projects">
-      {
-        projects.map((project) => (
-          <a
-            href={project.url}
-            class="project-link"
-            target="_blank"
-            rel="noopener noreferrer"
-            style={`--project-color: ${project.color}`}
-          >
-            <span class="project-icon">◈</span>
-            <span class="project-name">{project.name}</span>
-            <svg class="project-arrow" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M7 17L17 7M17 7H7M17 7V17"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </a>
-        ))
-      }
-    </div>
-  </div>
-</section>
-
-<style>
-  .project {
-    padding: 6rem 2rem;
-    display: flex;
-    justify-content: center;
-  }
-
-  .content {
-    max-width: 600px;
-    width: 100%;
-  }
-
-  .section-title {
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--ctp-text);
-    margin-bottom: 3rem;
-    text-align: center;
-  }
-
-  .projects {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .project-link {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1.5rem 2rem;
-    background-color: var(--ctp-surface0);
-    border: 2px solid var(--project-color);
-    border-radius: 12px;
-    text-decoration: none;
-    color: var(--ctp-text);
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .project-link::before {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    background-color: var(--project-color);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 0;
-  }
-
-  .project-link:hover::before {
-    transform: scaleX(1);
-  }
-
-  .project-icon {
-    font-size: 1.5rem;
-    color: var(--project-color);
-    transition: all 0.3s ease;
-    z-index: 1;
-  }
-
-  .project-name {
-    flex: 1;
-    font-size: 1.25rem;
-    font-weight: 500;
-    z-index: 1;
-    transition: color 0.3s ease;
-  }
-
-  .project-arrow {
-    width: 24px;
-    height: 24px;
-    color: var(--project-color);
-    transition: all 0.3s ease;
-    z-index: 1;
-  }
-
-  .project-link:hover {
-    transform: translateX(8px);
-  }
-
-  .project-link:hover .project-icon,
-  .project-link:hover .project-arrow {
-    color: var(--ctp-base);
-  }
-
-  .project-link:hover .project-name {
-    color: var(--ctp-base);
-  }
-
-  @media (max-width: 600px) {
-    .project {
-      padding: 4rem 2rem;
-    }
-
-    .section-title {
-      font-size: 1.5rem;
-      margin-bottom: 2rem;
-    }
-
-    .project-link {
-      padding: 1.25rem 1.5rem;
-    }
-
-    .project-name {
-      font-size: 1.1rem;
-    }
-  }
-</style>

src/components/Posts.astro

@@ -0,0 +1,111 @@
+---
+import { getCollection } from 'astro:content';
+
+// Get all blog posts from your content collection
+const posts = await getCollection('blog');
+// Sort by date if you have a date field in frontmatter
+const sortedPosts = posts.sort((a, b) => 
+  b.data.date.getTime() - a.data.date.getTime()
+);
+---
+
+<section class="project">
+  <div class="content">
+    <h2 class="section-title">Blog</h2>
+    <div class="posts">
+      {
+        await Promise.all(sortedPosts.map(async (post) => {
+          const { Content } = await post.render();
+          return (
+            <article class="post">
+              <h3 class="post-title">{post.data.title}</h3>
+              <div class="post-content">
+                <Content />
+              </div>
+            </article>
+          );
+        }))
+      }
+    </div>
+  </div>
+</section>
+
+<style>
+  .project {
+    padding: 6rem 2rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .content {
+    max-width: 800px;
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin-bottom: 3rem;
+    text-align: center;
+  }
+
+  .posts {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  .post {
+    padding: 2rem;
+    background-color: var(--ctp-surface0);
+    border: 2px solid var(--ctp-lavender);
+    border-radius: 12px;
+  }
+
+  .post-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin-bottom: 1.5rem;
+  }
+
+  .post-content {
+    color: var(--ctp-text);
+    line-height: 1.6;
+  }
+
+  /* Style markdown content */
+  .post-content :global(p) {
+    margin-bottom: 1rem;
+  }
+
+  .post-content :global(h1),
+  .post-content :global(h2),
+  .post-content :global(h3) {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--ctp-lavender);
+  }
+
+  .post-content :global(code) {
+    background-color: var(--ctp-mantle);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+  }
+
+  @media (max-width: 600px) {
+    .project {
+      padding: 4rem 1rem;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .post {
+      padding: 1.5rem;
+    }
+  }
+</style>

src/content/blog/first-post.md

@@ -0,0 +1,21 @@
+---
+title: "My First Blog Post"
+date: 2025-10-16
+description: "This is my first blog post"
+---
+
+# Welcome to my blog!
+
+This is the content of my first blog post.
+
+## Features
+
+- Markdown support
+- Code blocks
+- And more!
+
+# Hello World
+
+```javascript
+console.log("Hello, world!");
+```

src/content/blog/second-post.md

@@ -0,0 +1,21 @@
+---
+title: "My First Blog Post"
+date: 2025-10-16
+description: "This is my first blog post"
+---
+
+# Welcome to my blog!
+
+This is the content of my first blog post.
+
+## Features
+
+- Markdown support
+- Code blocks
+- And more!
+
+# Hello World
+
+```javascript
+console.log("Hello, world!");
+```

src/content/config.ts

@@ -0,0 +1,12 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    date: z.coerce.date(),
+    description: z.string().optional(),
+  }),
+});
+
+export const collections = { blog };

src/pages/blog.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Intro from "../components/Intro.astro";
+//import Projects from "../components/Projects.astro";
+import Posts from "../components/Posts.astro";
+import WaveDivider from "../components/WaveDivider.astro";
+//import Webring from "../components/Webring.astro";
+//import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
+import Socials from "../components/Socials.astro";
+
+// TODO: Fill in your preferences.
+const variables = {
+  name: "Kristian Emil Takvam",
+  subtitles:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis nisi ante, nec tincidunt ligula mattis nec. Maecenas metus mauris, fermentum et vulputate ut, dapibus vel massa.",
+};
+---
+
+<Layout title={variables.name}>
+  <main>
+    <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" />
+
+    <Socials />
+  </main>
+</Layout>

src/pages/index.astro

@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Intro from "../components/Intro.astro";
 import Projects from "../components/Projects.astro";
-import Blog from "../components/Blog.astro";
+import Posts from "../components/Posts.astro";
 import WaveDivider from "../components/WaveDivider.astro";
 import Webring from "../components/Webring.astro";
 import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
@@ -21,7 +21,7 @@ const variables = {
     <Intro name={variables.name} subtitle={variables.subtitles} />
     <WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />
 
-    <Blog />
+    <Posts />
     <WaveDivider color="teal" speed={100} size={0.8} direction="left" />
     
     <Projects />

src/pages/posts/post-1.md

@@ -1,13 +1,6 @@
 ---
-layout: ../../layouts/PostLayout.astro
+title: "My First Blog Post"
-title: 'My First Blog Post'
+date: 2025-01-01
-pubDate: 2022-07-01
-description: 'This is the first post of my new Astro blog.'
-author: 'Astro Learner'
-image:
-    url: 'https://docs.astro.build/assets/rose.webp'
-    alt: 'The Astro logo on a dark background with a pink glow.'
-tags: ["astro", "blogging", "learning in public"]
 ---
 # My First Blog Post
 

src/pages/posts/post-2.md

@@ -1,12 +1,5 @@
 ---
-layout: ../../layouts/PostLayout.astro
+title: "My First Blog Post"
-title: My Second Blog Post
+date: 2025-01-01
-author: Astro Learner
-description: "After learning some Astro, I couldn't stop!"
-image:
-    url: "https://docs.astro.build/assets/arc.webp"
-    alt: "The Astro logo on a dark background with a purple gradient arc."
-pubDate: 2022-07-08
-tags: ["astro", "blogging", "learning in public", "successes"]
 ---
 After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

src/pages/posts/post-3.md

@@ -1,12 +1,5 @@
 ---
-layout: ../../layouts/PostLayout.astro
+title: "My First Blog Post"
-title: My Third Blog Post
+date: 2025-01-01
-author: Astro Learner
-description: "I had some challenges, but asking in the community really helped!"
-image:
-    url: "https://docs.astro.build/assets/rays.webp"
-    alt: "The Astro logo on a dark background with rainbow rays."
-pubDate: 2022-07-15
-tags: ["astro", "learning in public", "setbacks", "community"]
 ---
 It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!