Finalized

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

@@ -1,16 +1,17 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
+import { Icon } from 'astro-icon/components';
 import Layout from '../../layouts/Layout.astro';
 
 export async function getStaticPaths() {
-  const posts = await getCollection('blog');
-  return posts.map((post: CollectionEntry<'blog'>) => ({
+  const posts = await getCollection('posts');
+  return posts.map((post: CollectionEntry<'posts'>) => ({
     params: { slug: post.slug },
     props: { post },
   }));
 }
 
-const { post }: { post: CollectionEntry<'blog'> } = Astro.props;
+const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
 const { Content } = await post.render();
 ---
 
@@ -24,9 +25,7 @@ const { Content } = await post.render();
 
         <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>
+            <Icon name="mdi:clock" class="text-xl" />
             <time datetime={post.data.pubDate.toISOString()}>
               {new Date(post.data.pubDate).toLocaleDateString('en-us', {
                 month: 'long',
@@ -38,20 +37,7 @@ const { Content } = await post.render();
 
           {/* 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>
+            <Icon name="mdi:arrow-left" class="text-lg" />
             Back
           </a>
         </div>
@@ -59,7 +45,8 @@ const { Content } = await post.render();
         {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">
+              <span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
+                <Icon name="mdi:tag" class="text-lg" />
                 {tag}
               </span>
             ))}

src/pages/posts.astro

@@ -3,12 +3,12 @@ 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");
+// Get all posts from the content collection
+const posts = await getCollection("posts");
 
 // 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()
+  (a: CollectionEntry<"posts">, b: CollectionEntry<"posts">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
 );
 ---
 
@@ -18,7 +18,7 @@ const sortedPosts = posts.sort(
       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">) => (
+      {sortedPosts.map((post: CollectionEntry<"posts">) => (
         <PostCard post={post} />
       ))}
     </div>

src/pages/projects.astro

@@ -0,0 +1,58 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ProjectCard from "../components/ProjectCard.astro";
+
+const projects = [
+  {
+    id: "bluesky-pds-manager",
+    name: "BlueSky PDS Manager",
+    description:
+      "A web-based BlueSky PDS Manager. Manage your invite codes and users with a simple web UI.",
+    link: "https://pdsman.atri.dad",
+  },
+  {
+    id: "pollo",
+    name: "Pollo",
+    description: "A dead-simple real-time voting tool.",
+    link: "https://git.atri.dad/atridad/pollo",
+  },
+  {
+    id: "goth-stack",
+    name: "GOTH Stack",
+    description:
+      "🚀 A Web Application Template Powered by HTMX + Go + Tailwind 🚀",
+    link: "https://git.atri.dad/atridad/goth.stack",
+  },
+  {
+    id: "himbot",
+    name: "Himbot",
+    description:
+      "A discord bot written in Go. Loosly named after my username online (HimbothySwaggins).",
+    link: "https://git.atri.dad/atridad/himbot",
+  },
+  {
+    id: "loadr",
+    name: "loadr",
+    description:
+      "A lightweight REST load testing tool with robust support for different verbs, token auth, and performance reports.",
+    link: "https://git.atri.dad/atridad/loadr",
+  },
+];
+---
+
+<Layout>
+  <div class="min-h-screen p-4 sm:p-8">
+    <h1 class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center">
+      Projects
+    </h1>
+    <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
+      {projects.map((project) => (
+        <ProjectCard project={project} />
+      ))}
+    </div>
+    
+    {projects.length === 0 && (
+      <p class="text-center text-gray-500 mt-12">No projects available yet. Check back soon!</p>
+    )}
+  </div>
+</Layout>