blog stuff

1 month ago · a64e2a8a44
parent ff4a3ec032
commit a64e2a8a44
6 changed files with 619 additions and 94 deletions
--- a/content/essays/example.mdx
+++ b/content/essays/example.mdx
@ -0,0 +1,15 @@
+---
+title: "Example Essay with Math"
+createdAt: "2024-03-20"
+updatedAt: "2024-03-20"
+---
+
+# Example Essay with Math
+
+This is an example of an essay with both inline math $E = mc^2$ and block math:
+
+$$
+\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+
+You can write normal markdown and **MDX** content here. 
--- a/package.json
+++ b/package.json
@ -28,18 +28,24 @@
    "clsx": "^2.1.0",
    "cmdk": "^1.0.0",
    "geist": "^1.3.0",
+    "gray-matter": "^4.0.3",
+    "katex": "^0.16.21",
    "lucide-react": "^0.363.0",
    "next": "14.1.4",
+    "next-mdx-remote": "^5.0.0",
    "next-themes": "^0.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.163.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
+    "@types/katex": "^0.16.7",
    "@types/node": "^20.11.30",
    "@types/react": "^18.2.73",
    "@types/react-dom": "^18.2.23",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/[...dir]/page.tsx
+++ b/src/app/[...dir]/page.tsx
@ -1,20 +1,74 @@
 import { notFound } from "next/navigation";
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import fs from 'fs/promises';
+import path from 'path';
+import matter from 'gray-matter';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';

-type Log = {
+// Update the type to match our MDX frontmatter
+type Post = {
  title: string;
-  createdAt: Date;
-  updatedAt: Date;
-  content: React.ReactNode;
+  createdAt: string;
+  updatedAt: string;
+  content: string;
 };

-const Page = async () => {
-  const post = undefined;
+async function getPost(slug: string[]): Promise<Post | null> {
+  // Handle only essays/[name] route
+  if (slug[0] !== 'essays' || slug.length !== 2) {
+    return null;
+  }
+
+  const postName = slug[1];
+  const postsDirectory = path.join(process.cwd(), 'content/essays');
+  
+  try {
+    const fullPath = path.join(postsDirectory, `${postName}.mdx`);
+    const fileContents = await fs.readFile(fullPath, 'utf8');
+    
+    const { data, content } = matter(fileContents);
+    
+    return {
+      title: data.title,
+      createdAt: data.createdAt,
+      updatedAt: data.updatedAt,
+      content: content,
+    };
+  } catch (error) {
+    return null;
+  }
+}
+
+const Page = async ({ params }: { params: { dir: string[] } }) => {
+  const post = await getPost(params.dir);

  if (!post) {
    return notFound();
  }

-  return <h1>WIP</h1>;
+  return (
+    <article className="prose prose-lg max-w-prose mx-auto py-8">
+      <h1>{post.title}</h1>
+      <div className="text-sm text-gray-500">
+        <time>Created: {new Date(post.createdAt).toLocaleDateString()}</time>
+        {post.updatedAt && (
+          <time className="ml-4">
+            Updated: {new Date(post.updatedAt).toLocaleDateString()}
+          </time>
+        )}
+      </div>
+      <MDXRemote 
+        source={post.content}
+        options={{
+          mdxOptions: {
+            remarkPlugins: [remarkMath],
+            rehypePlugins: [rehypeKatex],
+          }
+        }}
+      />
+    </article>
+  );
 };

 export default Page;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -2,6 +2,8 @@ import type { Metadata } from "next";

 import "./globals.css";

+import 'katex/dist/katex.min.css';
+
 export const metadata: Metadata = {
  title: "\\wych.dev",
  description: "In the wych elm's shadow, veritas whispers brew.",
@ -54,6 +56,12 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
+      <head>
+        <link 
+          rel="stylesheet" 
+          href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" 
+        />
+      </head>
      <body
        className={cn(
          "min-h-screen bg-background text-foreground antialiased",
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@ -0,0 +1,60 @@
+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>
+  );
+}