stuff

src/app/essays/page.tsx

@@ -1,60 +0,0 @@
-import fs from 'fs/promises';
-import path from 'path';
-import matter from 'gray-matter';
-import Link from 'next/link';
-
-type PostMeta = {
-  title: string;
-  createdAt: string;
-  slug: string;
-};
-
-async function getPosts(): Promise<PostMeta[]> {
-  const postsDirectory = path.join(process.cwd(), 'content/essays');
-  const files = await fs.readdir(postsDirectory);
-  
-  const posts = await Promise.all(
-    files
-      .filter(file => file.endsWith('.mdx'))
-      .map(async (file) => {
-        const fullPath = path.join(postsDirectory, file);
-        const fileContents = await fs.readFile(fullPath, 'utf8');
-        const { data } = matter(fileContents);
-        
-        return {
-          title: data.title,
-          createdAt: data.createdAt,
-          slug: file.replace(/\.mdx$/, ''),
-        };
-      })
-  );
-
-  return posts.sort((a, b) => 
-    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  );
-}
-
-export default async function PostsPage() {
-  const posts = await getPosts();
-
-  return (
-    <div className="max-w-prose mx-auto py-8">
-      <h1 className="text-3xl font-bold mb-8">Essays</h1>
-      <ul className="space-y-4">
-        {posts.map((post) => (
-          <li key={post.slug}>
-            <Link 
-              href={`/essays/${post.slug}`}
-              className="block hover:bg-gray-50 p-4 rounded-lg transition"
-            >
-              <h2 className="text-xl font-semibold">{post.title}</h2>
-              <time className="text-sm text-gray-500">
-                {new Date(post.createdAt).toLocaleDateString()}
-              </time>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-} 

src/app/essays/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs/promises';
+import path from 'path';
+import matter from 'gray-matter';
+
+export async function GET() {
+  const postsDirectory = path.join(process.cwd(), 'content/essays');
+  const files = await fs.readdir(postsDirectory);
+
+  const essays = await Promise.all(
+    files
+      .filter(file => file.endsWith('.mdx'))
+      .map(async (file) => {
+        const fullPath = path.join(postsDirectory, file);
+        const fileContents = await fs.readFile(fullPath, 'utf8');
+        const { data } = matter(fileContents);
+
+        return {
+          title: data.title,
+          createdAt: data.createdAt,
+          slug: file.replace(/\.mdx$/, ''),
+        };
+      })
+  );
+
+  // Sort essays by creation date, newest first
+  essays.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  return NextResponse.json(essays);
+} 

src/app/page.tsx

@@ -12,7 +12,7 @@ type PostMeta = {
   slug: string;
 };
 
-async function getRecentPosts(): Promise<PostMeta[]> {
+async function getAllPosts(): Promise<PostMeta[]> {
   const postsDirectory = path.join(process.cwd(), 'content/essays');
   const files = await fs.readdir(postsDirectory);
 
@@ -32,17 +32,15 @@ async function getRecentPosts(): Promise<PostMeta[]> {
       })
   );
 
-  return posts
+  return posts.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .slice(0, 4); // Get only the 4 most recent posts
 }
 
 export default async function Home() {
-  const recentPosts = await getRecentPosts();
+  const posts = await getAllPosts();
 
   return (
     <main className="w-full flex justify-center px-4 mt-14">
-      <div className="w-full max-w-screen-lg md:px-4 py-8 space-y-8">
+      <div className="w-full max-w-screen-lg lg:px-4 py-8 space-y-8">
         {/* Intro */}
         <section>
           <div className="flex space-x-8 items-center mb-4">
@@ -59,7 +57,7 @@ export default async function Home() {
               . Building energy-efficient chips for AI training & inference.
             </p>
             <p>
-              I'm a dropout, autodidactic polymath, and this is my digital notebook. Everything here is written by me, and everything here is my own opinion or philosophical beliefs. They are not intended to be taken at face value, but rather as a medium for me to personally reflect on my own thoughts as a therapeutic exercise, or just for fun.
+              I'm a dropout, autodidactic polymath, and this is my digital notebook. Everything here is written by me, and everything here is my own opinion, philosophical beliefs, or just random thoughts that have no real-world application. <span className="italic font-semibold">They are not intended to be taken at face value, but rather as a medium for me to personally reflect on my own thoughts as a therapeutic exercise, or just for fun.</span>
             </p>
             <p>
               Based in the <ILink href="https://en.wikipedia.org/wiki/Silicon_Valley" target="_blank" className="font-bold text-md">Silicon Valley</ILink> (<ILink href="https://en.wikipedia.org/wiki/Bay_Area" target="_blank" className="font-bold text-md">San Francisco Bay Area</ILink>), <ILink href="https://en.wikipedia.org/wiki/United_States" target="_blank" className="font-bold text-md">United States</ILink>. Originally from <ILink href="https://en.wikipedia.org/wiki/M%C3%B6lndal" target="_blank" className="font-bold text-md">Mölndal</ILink>/<ILink href="https://en.wikipedia.org/wiki/Gothenburg" target="_blank" className="font-bold text-md">Gothenburg</ILink>, <ILink href="https://en.wikipedia.org/wiki/Sweden" target="_blank" className="font-bold text-md">Sweden</ILink>.
@@ -67,16 +65,11 @@ export default async function Home() {
           </div>
         </section>
 
-        {/* Recent Essays */}
+        {/* Essays */}
         <section>
-          <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold mb-4">Essays</h2>
-            <h2 className="text-xl font-semibold">Recent Essays</h2>
-            <Link href="/essays" className="text-sm text-gray-500 hover:text-gray-700">
-              View all →
-            </Link>
-          </div>
           <ul className="space-y-4">
-            {recentPosts.map((post) => (
+            {posts.map((post) => (
               <li key={post.slug}>
                 <Link
                   href={`/essays/${post.slug}`}

src/components/layout/nav.tsx

@@ -17,6 +17,13 @@ import { useRouter } from "next/navigation";
 import { useActionCommand } from "@/hooks/useActionCommand";
 import { useTheme } from "next-themes";
 import NavLinks from "../navlinks";
+import { useEffect, useState } from "react";
+
+type Essay = {
+  title: string;
+  slug: string;
+  createdAt: string;
+};
 
 type NavCommandProps = {
   className?: string;
@@ -26,6 +33,16 @@ const NavCommand: React.FC<NavCommandProps> = ({ className, ...props }) => {
   const router = useRouter();
   const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
   const { theme, setTheme } = useTheme();
+  const [essays, setEssays] = useState<Essay[]>([]);
+
+  useEffect(() => {
+    const fetchEssays = async () => {
+      const response = await fetch('/essays');
+      const data = await response.json();
+      setEssays(data);
+    };
+    fetchEssays();
+  }, []);
 
   const action = (
     callback: ((value: string) => Promise<void>) | ((value: string) => void),
@@ -67,30 +84,21 @@ const NavCommand: React.FC<NavCommandProps> = ({ className, ...props }) => {
               <span>Home</span>
               <CommandShortcut>⌘H</CommandShortcut>
             </CommandItem>
-            <CommandItem
-              onSelect={action(() => {
-                router.push("/essays");
-              })}
-            >
-              <GalleryHorizontalEnd className="mr-2 w-4 h-4" />
-              <span>Essays</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
           </CommandGroup>
           <CommandSeparator />
-          {/* <CommandGroup heading="Appearance">
+          <CommandGroup heading="Essays">
-            <CommandItem
+            {essays.map((essay) => (
-              onSelect={action(() => {
+              <CommandItem
-                setTheme(theme === "light" ? "dark" : "light");
+                key={essay.slug}
-              })}
+                onSelect={action(() => {
-            >
+                  router.push(`/essays/${essay.slug}`);
-              <SunMoon className="mr-2 w-4 h-4" />
+                })}
-              <span>
+              >
-                Switch to {theme === "light" ? "Dark" : "Light"} Theme
+                <GalleryHorizontalEnd className="mr-2 w-4 h-4" />
-              </span>
+                <span>{essay.title}</span>
-              <CommandShortcut>⌘L</CommandShortcut>
+              </CommandItem>
-            </CommandItem>
+            ))}
-          </CommandGroup> */}
+          </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="External links">
             {NavLinks.map((link) => (