Finalized

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:lts-alpine AS builder
+WORKDIR /app
+
+RUN npm i -g pnpm
+
+COPY package.json pnpm-lock.yaml ./
+
+RUN pnpm install
+
+COPY . .
+RUN pnpm run build
+
+FROM node:lts-alpine AS runtime
+WORKDIR /app
+
+RUN npm i -g pnpm
+
+COPY --from=builder /app/dist ./dist
+COPY package.json pnpm-lock.yaml ./
+
+RUN pnpm install --prod
+
+ENV HOST=0.0.0.0
+ENV PORT=4321
+EXPOSE 4321
+
+CMD ["node", "./dist/server/entry.mjs"]

docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  app:
+    image: ${IMAGE}
+    ports:
+      - "${APP_PORT}:4321"
+    environment:
+      NODE_ENV: production
+    restart: unless-stopped

src/components/NavigationBar.tsx

@@ -1,6 +1,6 @@
 import { useComputed, useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { Home, NotebookPen, FileText, CodeXml, MessageCircle } from 'lucide-preact';
+import { Home, NotebookPen, FileText, CodeXml } from 'lucide-preact';
 
 interface NavigationBarProps {
   currentPath: string;

src/components/PostCard.astro

@@ -1,8 +1,8 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-
+import { Icon } from 'astro-icon/components';
 export interface Props {
-  post: CollectionEntry<'blog'>;
+  post: CollectionEntry<'posts'>;
 }
 
 const { post } = Astro.props;
@@ -11,19 +11,17 @@ const { slug } = post;
 ---
 
 <div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
-  <div class="card-body p-4 sm:p-6">
+  <div class="card-body p-3">
-    <h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
+    <h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
       {title}
     </h2>
 
-    <p class="text-center text-base-100 break-words h-20 min-h-20 max-h-20 overflow-hidden text-ellipsis">
+    <p class="text-center text-base-100 break-words mb-3 text-base">
       {blurb || 'No description available.'}
     </p>
 
-    <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
+    <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2">
-      <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 flex-shrink-0">
+      <Icon name="mdi:clock" class="text-xl" />
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
       <span>
         {new Date(pubDate).toLocaleDateString("en-us", {
           month: "long",
@@ -33,15 +31,24 @@ const { slug } = post;
       </span>
     </div>
 
-    <div class="card-actions justify-end mt-4">
+    {post.data.tags && post.data.tags.length > 0 && (
+      <div class="flex gap-2 flex-wrap mb-2 justify-center">
+        {post.data.tags.map((tag: string) => (
+          <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>
+        ))}
+      </div>
+    )}
+
+    <div class="card-actions justify-end mt-2">
       <a
-        href={`/blog/${slug}`}
+        href={`/post/${slug}`}
-        class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
+        class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
         aria-label={`Read more about ${title}`}
       >
-        <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 text-lg">
+        <Icon name="mdi:arrow-right" class="text-lg" />
-          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-        </svg>
       </a>
     </div>
   </div>

src/components/ProjectCard.astro

@@ -0,0 +1,40 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  link: string;
+}
+
+export interface Props {
+  project: Project;
+}
+
+const { project } = Astro.props;
+---
+
+<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
+  <div class="card-body p-6">
+    <h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
+      {project.name}
+    </h2>
+
+    <p class="text-center break-words my-4 text-base-100">
+      {project.description}
+    </p>
+
+    <div class="card-actions justify-end mt-4">
+      <a
+        href={project.link}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
+        aria-label={`Visit ${project.name}`}
+      >
+        <Icon name="mdi:link" class="text-lg" />
+      </a>
+    </div>
+  </div>
+</div> 

src/components/ScrollUpButton.tsx

@@ -0,0 +1,45 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { ArrowUp } from 'lucide-preact';
+
+export default function ScrollUpButton() {
+  const isVisible = useSignal(false);
+
+  useEffect(() => {
+    const checkScroll = () => {
+      isVisible.value = window.scrollY > 300;
+    };
+
+    checkScroll();
+
+    window.addEventListener("scroll", checkScroll);
+
+    return () => {
+      window.removeEventListener("scroll", checkScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={scrollToTop}
+      class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
+            p-3 rounded-full shadow-lg transition-all duration-300
+            ${
+        isVisible.value
+          ? "opacity-70 translate-y-0"
+          : "opacity-0 translate-y-10 pointer-events-none"
+      }`}
+      aria-label="Scroll to top"
+    >
+      <ArrowUp class="text-lg" />
+    </button>
+  );
+} 

src/content/config.ts

@@ -1,6 +1,6 @@
 import { defineCollection, z } from 'astro:content';
 
-const blogCollection = defineCollection({
+const postsCollection = defineCollection({
   type: 'content',
   schema: z.object({
     title: z.string(),
@@ -12,5 +12,5 @@ const blogCollection = defineCollection({
 });
 
 export const collections = {
-  'blog': blogCollection,
+  'posts': postsCollection,
 };

src/content/posts/favourite-tools.md

@@ -0,0 +1,29 @@
+---
+title: "Current List of Favourite Tools"
+description: "A running list of my favourite tools to use day-to-day."
+pubDate: "2025-01-28"
+tags: ["list"]
+---
+
+I change what I use _constantly_ in order to find something that feels just
+right. I wanted to share them here and update them here so when someone asks, I
+can just point them to this article.
+
+1. Sublime Text - Currently my favourite text editor. Fast, simple, and
+   extensible. Just a joy to use!
+2. Sublime Merge - Honestly one of the fastest and best looking git GUIs around!
+   Awesome for visualizing changes when you have larger code changes.
+3. Ghostty - A Zig based terminal emulator by one of the founders of Hashicorp.
+   Runs great on MacOS and Linux. No windows for those who are into that.
+4. OrbStack - A faster alternative to Docker Desktop that also runs VMs!
+5. Bitwarden - An open-source password manager. Easy to self host with
+   Vaultwarden and with the recent updates, it has SSH Agent support!
+6. iA Writer - A minimalist Markdown editor. For MacOS and Windows only, but
+   really the MacOS version is the most mature. Awesome for focus.
+7. Dataflare - A simple but powerful cross-platform database client. Supports
+   most common databases, including LibSQL which is rare!
+8. Bruno - A simple and powerful API client, similar to Postman. An critical
+   tool to debug API endpoints.
+
+I hope you found this helpful! This will be periodically updated to avoid
+outdated recommendations.

src/layouts/Layout.astro

@@ -1,5 +1,7 @@
 ---
+import { ClientRouter } from "astro:transitions";
 import NavigationBar from "../components/NavigationBar";
+import ScrollUpButton from "../components/ScrollUpButton";
 const currentPath = Astro.url.pathname;
 import '../styles/global.css';
 ---
@@ -12,12 +14,13 @@ import '../styles/global.css';
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>Atridad Lahiji</title>
+		<ClientRouter />
 	</head>
 	<body class="flex flex-col min-h-screen">
         <main class="flex-grow flex flex-col gap-4 items-center justify-center">
 			<slot />
         </main>
-        <NavigationBar currentPath={currentPath} />
+        <NavigationBar client:load currentPath={currentPath} />
-        <!-- <ScrollUpButton /> -->
+        <ScrollUpButton client:load />
   </body>
 </html>

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');
+  const posts = await getCollection('posts');
-  return posts.map((post: CollectionEntry<'blog'>) => ({
+  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">
+            <Icon name="mdi:clock" class="text-xl" />
-              <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',
@@ -38,20 +37,7 @@ const { Content } = await post.render();
 
           {/* Back button */}
           <a href="/posts" class="btn btn-outline btn-primary btn-sm">
-            <svg
+            <Icon name="mdi:arrow-left" class="text-lg" />
-              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>
@@ -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
+// Get all posts from the content collection
-const posts = await getCollection("blog");
+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>