From 8995c63f4c246ee75cf1c9c7f387a955c4ed4a6c Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Thu, 27 Feb 2025 23:36:36 -0800
Subject: [PATCH] stuff

---
 src/app/essays/page.tsx       | 60 -----------------------------------
 src/app/essays/route.ts       | 30 ++++++++++++++++++
 src/app/page.tsx              | 23 +++++---------
 src/components/layout/nav.tsx | 52 +++++++++++++++++-------------
 4 files changed, 68 insertions(+), 97 deletions(-)
 delete mode 100644 src/app/essays/page.tsx
 create mode 100644 src/app/essays/route.ts

diff --git a/src/app/essays/page.tsx b/src/app/essays/page.tsx
deleted file mode 100644
index c257bad..0000000
--- a/src/app/essays/page.tsx
+++ /dev/null
@@ -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>
-  );
-} 
\ No newline at end of file
diff --git a/src/app/essays/route.ts b/src/app/essays/route.ts
new file mode 100644
index 0000000..7bb5be8
--- /dev/null
+++ b/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);
+} 
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c5e1da8..30504c9 100644
--- a/src/app/page.tsx
+++ b/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
-    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .slice(0, 4); // Get only the 4 most recent posts
+  return posts.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 }
 
 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">Recent Essays</h2>
-            <Link href="/essays" className="text-sm text-gray-500 hover:text-gray-700">
-              View all →
-            </Link>
-          </div>
+          <h2 className="text-xl font-semibold mb-4">Essays</h2>
           <ul className="space-y-4">
-            {recentPosts.map((post) => (
+            {posts.map((post) => (
               <li key={post.slug}>
                 <Link
                   href={`/essays/${post.slug}`}
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
index 7b6d8c1..11e741b 100644
--- a/src/components/layout/nav.tsx
+++ b/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">
-            <CommandItem
-              onSelect={action(() => {
-                setTheme(theme === "light" ? "dark" : "light");
-              })}
-            >
-              <SunMoon className="mr-2 w-4 h-4" />
-              <span>
-                Switch to {theme === "light" ? "Dark" : "Light"} Theme
-              </span>
-              <CommandShortcut>⌘L</CommandShortcut>
-            </CommandItem>
-          </CommandGroup> */}
+          <CommandGroup heading="Essays">
+            {essays.map((essay) => (
+              <CommandItem
+                key={essay.slug}
+                onSelect={action(() => {
+                  router.push(`/essays/${essay.slug}`);
+                })}
+              >
+                <GalleryHorizontalEnd className="mr-2 w-4 h-4" />
+                <span>{essay.title}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="External links">
             {NavLinks.map((link) => (