Posts

components/PostCard.tsx

@@ -0,0 +1,37 @@
+import { LuArrowRight, LuClock } from "@preact-icons/lu";
+import { Post } from "../lib/posts.ts";
+
+export default function PostCard(props: { post: Post }) {
+  const { post } = props;
+  return (
+    <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">
+        <h2 class="card-title text-base-100 justify-center text-center break-words">
+          {post.title}
+        </h2>
+
+        <p class="text-center text-base-100 break-words">{post.blurb}</p>
+
+        <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
+          <LuClock className="flex-shrink-0" />
+          <span>
+            {post.publishedAt!.toLocaleDateString("en-us", {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </span>
+        </div>
+
+        <div class="card-actions justify-end mt-4">
+          <a
+            href={`/post/${post.slug}`}
+            class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
+          >
+            <LuArrowRight class="text-lg" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

components/TechLinks.tsx

@@ -1,13 +1,23 @@
-import { LuMail } from "@preact-icons/lu";
-import { SiBluesky, SiForgejo, SiRss } from "@preact-icons/si";
+import {
+  SiDeno,
+  SiDocker,
+  SiGo,
+  SiPostgresql,
+  SiReact,
+  SiRedis,
+  SiTypescript,
+} from "@preact-icons/si";
 
 export default function TechLinks() {
   return (
     <div class="flex flex-row gap-4 text-3xl">
-      <LuMail class="hover:text-primary" />
-      <SiRss class="hover:text-primary" />
-      <SiForgejo class="hover:text-primary" />
-      <SiBluesky class="hover:text-primary" />
+      <SiReact class="hover:text-primary" />
+      <SiTypescript class="hover:text-primary" />
+      <SiDeno class="hover:text-primary" />
+      <SiGo class="hover:text-primary" />
+      <SiPostgresql class="hover:text-primary" />
+      <SiRedis class="hover:text-primary" />
+      <SiDocker class="hover:text-primary" />
     </div>
   );
 }

deno.json

@@ -23,9 +23,13 @@
   ],
   "imports": {
     "$fresh/": "https://deno.land/x/fresh@1.7.3/",
+    "@deno/gfm": "jsr:@deno/gfm@^0.11.0",
     "@pakornv/fresh-plugin-tailwindcss": "jsr:@pakornv/fresh-plugin-tailwindcss@^1.0.2",
     "@preact-icons/lu": "jsr:@preact-icons/lu@^1.0.13",
     "@preact-icons/si": "jsr:@preact-icons/si@^1.0.13",
+    "@std/front-matter": "jsr:@std/front-matter@^1.0.9",
+    "@std/path": "jsr:@std/path@^1.0.9",
+    "@tailwindcss/typography": "npm:@tailwindcss/typography@^0.5.16",
     "daisyui": "npm:daisyui@^5.0.27",
     "preact": "npm:preact@10.22.1",
     "preact/jsx-runtime": "npm:preact@10.22.1/jsx-runtime",

fresh.gen.ts

@@ -7,6 +7,7 @@ import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $index from "./routes/index.tsx";
+import * as $post_slug_ from "./routes/post/[slug].tsx";
 import * as $posts from "./routes/posts.tsx";
 import * as $projects from "./routes/projects.tsx";
 
@@ -19,6 +20,7 @@ const manifest = {
     "./routes/_layout.tsx": $_layout,
     "./routes/api/joke.ts": $api_joke,
     "./routes/index.tsx": $index,
+    "./routes/post/[slug].tsx": $post_slug_,
     "./routes/posts.tsx": $posts,
     "./routes/projects.tsx": $projects,
   },

lib/posts.ts

@@ -0,0 +1,47 @@
+import { extractYaml } from "@std/front-matter";
+import { join } from "@std/path";
+
+const POSTS_DIR = "./posts";
+
+// This is what gets parsed from the post front matter
+interface FrontMatter {
+  title: string;
+  published_at: string;
+  blurb: string;
+}
+
+// This is what gets used for rendering
+export interface Post {
+  slug: string;
+  title: string;
+  publishedAt: Date | null;
+  blurb: string;
+  content: string;
+}
+
+export async function getPost(slug: string): Promise<Post> {
+  const text = await Deno.readTextFile(join(POSTS_DIR, `${slug}.md`));
+  const { attrs, body } = extractYaml<FrontMatter>(text);
+  const post = {
+    slug,
+    title: attrs.title,
+    publishedAt: attrs.published_at ? new Date(attrs.published_at) : null,
+    blurb: attrs.blurb,
+    content: body,
+  };
+  return post;
+}
+
+export async function getPosts(): Promise<Post[]> {
+  const files = Deno.readDir(POSTS_DIR);
+  const promises = [];
+  for await (const file of files) {
+    if (file.name.startsWith(".")) continue;
+    const slug = file.name.replace(".md", "");
+    promises.push(getPost(slug));
+  }
+  const posts = (await Promise.all(promises) as Post[])
+    .filter((post) => post.publishedAt instanceof Date);
+  posts.sort((a, b) => b.publishedAt!.getTime() - a.publishedAt!.getTime());
+  return posts;
+}

posts/favourite_tools_list.md

@@ -0,0 +1,27 @@
+---
+title: Current List of Favourite Tools
+published_at: 2025-01-28T15:00:00.000Z
+---
+
+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.

posts/welcome.md

@@ -0,0 +1,10 @@
+---
+title: Welcome!
+published_at: 2024-10-20T15:00:00.000Z
+---
+
+Welcome to my site! This is a place for me to share my thoughts and updates on
+my projects. I hope you find something interesting here.
+
+Feel free to reach out if you have any questions or comments. I'd love to hear
+from you! I can be reached by email at [me@atri.dad](mailto:me@atri.dad).

routes/_layout.tsx

@@ -1,6 +1,7 @@
 // routes/_layout.tsx
 import { PageProps } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
+import { LuBook, LuBriefcase, LuHouse } from "@preact-icons/lu";
 
 export default function Layout({ Component, url }: PageProps) {
   const currentPath = url.pathname;
@@ -11,32 +12,19 @@ export default function Layout({ Component, url }: PageProps) {
         <meta charset="utf-8" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="viewport" content="width=device-width" />
-        <title>Fresh App</title>
+        <title>Atridad Lahiji</title>
       </Head>
       <body class="flex flex-col min-h-screen">
-        <main class="flex-grow flex flex-col gap-2 items-center justify-center">
+        <main class="flex-grow flex flex-col gap-4 items-center justify-center">
           <Component />
         </main>
 
         <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20">
-          <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg">
+          <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg gap-2">
             <li>
               <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
                 <div class="tooltip" data-tip="Home">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                    />
-                  </svg>
+                  <LuHouse class="text-xl" />
                 </div>
               </a>
             </li>
@@ -46,20 +34,7 @@ export default function Layout({ Component, url }: PageProps) {
                 class={currentPath.startsWith("/posts") ? "menu-active" : ""}
               >
                 <div class="tooltip" data-tip="Posts">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 002 2zm0 0l1.406 1.406A2 2 0 0122 22a2 2 0 01-2-2v0zm-9.5-8h4m-2 2v-4"
-                    />
-                  </svg>
+                  <LuBook class="text-xl" />
                 </div>
               </a>
             </li>
@@ -69,20 +44,7 @@ export default function Layout({ Component, url }: PageProps) {
                 class={currentPath.startsWith("/projects") ? "menu-active" : ""}
               >
                 <div class="tooltip" data-tip="Projects">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.206.129.4.259.598.37"
-                    />
-                  </svg>
+                  <LuBriefcase class="text-xl" />
                 </div>
               </a>
             </li>

routes/index.tsx

@@ -1,4 +1,5 @@
 import SocialLinks from "../components/SocialLinks.tsx";
+import TechLinks from "../components/TechLinks.tsx";
 
 export default function Home() {
   return (
@@ -14,7 +15,13 @@ export default function Home() {
         Atridad Lahiji
       </h1>
 
+      <h2 class="text-2xl font-bold">Places I Exist:</h2>
+
       <SocialLinks />
+
+      <h2 class="text-2xl font-bold">Stuff I Use:</h2>
+
+      <TechLinks />
     </>
   );
 }

routes/post/[slug].tsx

@@ -0,0 +1,83 @@
+import { CSS, render } from "@deno/gfm";
+import { Head } from "$fresh/runtime.ts";
+import { Handlers, PageProps } from "$fresh/server.ts";
+
+import { getPost, Post } from "../../lib/posts.ts";
+import { LuClock } from "@preact-icons/lu";
+
+export const handler: Handlers<Post> = {
+  async GET(_req, ctx) {
+    try {
+      const post = await getPost(ctx.params.slug);
+      return post.publishedAt ? ctx.render(post) : ctx.renderNotFound();
+    } catch (err) {
+      console.error(err);
+      return ctx.renderNotFound();
+    }
+  },
+};
+
+export default function PostPage(props: PageProps<Post>) {
+  const post = props.data;
+  return (
+    <>
+      <Head>
+        <style dangerouslySetInnerHTML={{ __html: CSS }} />
+      </Head>
+      <div class="min-h-screen p-4 md:p-8">
+        <div class="max-w-3xl mx-auto">
+          <div class="p-4 md:p-8">
+            {/* Header section */}
+            <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
+              {post.title}
+            </h1>
+
+            <div class="flex flex-wrap items-center gap-4 mb-6">
+              {/* Date with clock icon */}
+              <div class="flex items-center flex-row gap-2 text-base-content opacity-75">
+                <LuClock />
+                <time>
+                  {post.publishedAt!.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
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M11 17l-5-5m0 0l5-5m-5 5h12"
+                  />
+                </svg>
+                Back
+              </a>
+            </div>
+
+            {/* Divider line */}
+            <div class="divider"></div>
+
+            {/* Content section */}
+            <div
+              class="max-w-none prose"
+              data-color-mode="dark"
+              data-dark-theme="dark"
+              dangerouslySetInnerHTML={{ __html: render(post.content) }}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

routes/posts.tsx

@@ -1,6 +1,24 @@
-// import { useSignal } from "@preact/signals";
-// import Counter from "../islands/Counter.tsx";
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { getPosts, Post } from "../lib/posts.ts";
+import PostCard from "../components/PostCard.tsx";
 
-export default function Home() {
-  return <h1>Posts Page</h1>;
+export const handler: Handlers<Post[]> = {
+  async GET(_req, ctx) {
+    const posts = await getPosts();
+    return ctx.render(posts);
+  },
+};
+
+export default function PostsPage(props: PageProps<Post[]>) {
+  const posts = props.data;
+  return (
+    <div class="min-h-screen p-4 sm:p-8">
+      <h1 class="text-3xl sm:text-4xl font-bold text-accent 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">
+        {posts.map((post) => <PostCard key={post.slug} post={post} />)}
+      </div>
+    </div>
+  );
 }

routes/projects.tsx

@@ -1,6 +1,3 @@
-// import { useSignal } from "@preact/signals";
-// import Counter from "../islands/Counter.tsx";
-
-export default function Home() {
+export default function Projects() {
   return <h1>Projects Page</h1>;
 }

static/styles.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @plugin "daisyui";
-
+@plugin "@tailwindcss/typography";
 @plugin "daisyui/theme" {
   name: "chaoticbisexual";
   default: true;