shivam + claude changes

app/blog/[slug]/loading.tsx

@@ -0,0 +1,16 @@
+export default function BlogPostLoading() {
+    return (
+        <div className="max-w-3xl mx-auto px-6 py-24 animate-pulse">
+            <div className="space-y-4 mb-12">
+                <div className="h-4 bg-zinc-200 dark:bg-zinc-800 rounded w-1/4" />
+                <div className="h-12 bg-zinc-200 dark:bg-zinc-800 rounded w-3/4" />
+                <div className="h-6 bg-zinc-200 dark:bg-zinc-800 rounded w-2/3" />
+            </div>
+            <div className="space-y-4">
+                {Array.from({ length: 8 }).map((_, i) => (
+                    <div key={i} className="h-5 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ width: `${70 + Math.random() * 30}%` }} />
+                ))}
+            </div>
+        </div>
+    );
+}

app/blog/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { getPostBySlug } from '@/lib/mdx';
+import { getPostBySlug, getPostSlugs } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
@@ -11,7 +11,7 @@ import { Citation, Bibliography } from '@/components/mdx/Citation';
 import { MobileTableOfContents } from '@/components/mdx/MobileTableOfContents';
 
 // Utility to ensure consistent IDs
-const slugify = (text: any): string => {
+const slugify = (text: React.ReactNode): string => {
     if (!text) return '';
     const str = typeof text === 'string' ? text : String(text);
     return str
@@ -21,16 +21,16 @@ const slugify = (text: any): string => {
 };
 
 const components = {
-    h1: (props: any) => <h1 {...props} id={slugify(props.children)} className="text-3xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
-    h2: (props: any) => <h2 {...props} id={slugify(props.children)} className="text-2xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
-    h3: (props: any) => <h3 {...props} id={slugify(props.children)} className="text-xl font-bold mt-6 mb-3 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
-    p: (props: any) => <p {...props} className="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300" />,
-    ul: (props: any) => <ul {...props} className="list-disc pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
-    ol: (props: any) => <ol {...props} className="list-decimal pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
-    blockquote: (props: any) => <blockquote {...props} className="border-l-4 border-zinc-200 dark:border-zinc-700 pl-4 italic my-6 text-zinc-600 dark:text-zinc-400" />,
-    code: (props: any) => <code {...props} className="bg-zinc-100 dark:bg-zinc-800 text-pink-600 dark:text-pink-400 px-1 py-0.5 rounded text-sm font-mono" />,
-    pre: (props: any) => <pre {...props} className="bg-zinc-900 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 text-sm font-mono" />,
-    a: (props: any) => <a {...props} className="text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all font-medium" />,
+    h1: (props: React.ComponentPropsWithoutRef<'h1'>) => <h1 {...props} id={slugify(props.children)} className="text-3xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
+    h2: (props: React.ComponentPropsWithoutRef<'h2'>) => <h2 {...props} id={slugify(props.children)} className="text-2xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
+    h3: (props: React.ComponentPropsWithoutRef<'h3'>) => <h3 {...props} id={slugify(props.children)} className="text-xl font-bold mt-6 mb-3 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
+    p: (props: React.ComponentPropsWithoutRef<'p'>) => <p {...props} className="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300" />,
+    ul: (props: React.ComponentPropsWithoutRef<'ul'>) => <ul {...props} className="list-disc pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
+    ol: (props: React.ComponentPropsWithoutRef<'ol'>) => <ol {...props} className="list-decimal pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
+    blockquote: (props: React.ComponentPropsWithoutRef<'blockquote'>) => <blockquote {...props} className="border-l-4 border-zinc-200 dark:border-zinc-700 pl-4 italic my-6 text-zinc-600 dark:text-zinc-400" />,
+    code: (props: React.ComponentPropsWithoutRef<'code'>) => <code {...props} className="bg-zinc-100 dark:bg-zinc-800 text-pink-600 dark:text-pink-400 px-1 py-0.5 rounded text-sm font-mono" />,
+    pre: (props: React.ComponentPropsWithoutRef<'pre'>) => <pre {...props} className="bg-zinc-900 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 text-sm font-mono" />,
+    a: (props: React.ComponentPropsWithoutRef<'a'>) => <a {...props} className="text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all font-medium" />,
     SideNote,
     Citation,
     Bibliography,
@@ -40,6 +40,12 @@ type Props = {
     params: Promise<{ slug: string }>;
 };
 
+export function generateStaticParams() {
+    return getPostSlugs()
+        .filter((slug) => slug.endsWith('.mdx'))
+        .map((slug) => ({ slug: slug.replace(/\.mdx$/, '') }));
+}
+
 export async function generateMetadata({ params }: Props) {
     const { slug } = await params;
     try {
@@ -47,6 +53,17 @@ export async function generateMetadata({ params }: Props) {
         return {
             title: metadata.title,
             description: metadata.description,
+            openGraph: {
+                title: metadata.title,
+                description: metadata.description,
+                type: 'article' as const,
+                publishedTime: metadata.date,
+            },
+            twitter: {
+                card: 'summary' as const,
+                title: metadata.title,
+                description: metadata.description,
+            },
         };
     } catch {
         return {