fix: clean up blog layout

Author: bra1nDump

app/blog/layout.tsx

@@ -1,14 +1,9 @@
-import { Layout } from 'nextra-theme-blog'
 import 'nextra-theme-blog/style.css'
 
 export default function BlogLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return (
-    <Layout>
-      {children}
-    </Layout>
-  )
+  return children
 }

app/blog/page.tsx

@@ -1,8 +1,6 @@
 import type { Metadata } from 'next'
 import Link from 'next/link'
-import { PostCard } from 'nextra-theme-blog'
-import { getPosts, getTags } from './get-posts'
-import type { TagCount, PostCardData } from '../../types/blog'
+import { getPosts } from './get-posts'
 
 const BLOG_TITLE = 'Blog'
 
@@ -18,51 +16,65 @@ export const metadata: Metadata = {
 }
 
 export default async function BlogIndexPage() {
-  const tags = await getTags()
   const posts = await getPosts()
-  const allTags: TagCount = {}
-
-  for (const tag of tags) {
-    allTags[tag] = (allTags[tag] ?? 0) + 1
-  }
 
   return (
-    <div data-pagefind-ignore="all">
-      <h1>{BLOG_TITLE}</h1>
-      {Object.keys(allTags).length > 0 && (
-        <div
-          className="not-prose"
-          style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem', marginBottom: '2rem' }}
-        >
-          {Object.entries(allTags).map(([tag, count]) => (
-            <Link
-              key={tag}
-              href={`/blog/tags/${tag}`}
-              className="nextra-tag"
-            >
-              {tag} ({count})
-            </Link>
-          ))}
-        </div>
-      )}
-      {posts.map(post => {
-        // Transform blog post data to match PostCard component expectations
-        // PostCard from nextra-theme-blog expects frontMatter to be BlogMetadata
-        // (only title and description), not our extended frontMatter with date, tags, etc.
-        const postCardData: PostCardData = {
-          ...post,
-          frontMatter: {
-            title: post.frontMatter.title || post.name,
-            description: post.frontMatter.description
-          }
-        }
-        return (
-          <PostCard 
-            key={post.route} 
-            post={postCardData} 
-          />
-        )
-      })}
-    </div>
+    <main className="mx-auto max-w-3xl px-6 py-10 md:px-10">
+      <header className="mb-10">
+        <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
+          {BLOG_TITLE}
+        </h1>
+        <p className="mt-3 text-lg leading-8 text-slate-600 dark:text-slate-300">
+          Articles about Happy, Claude Code workflows, distribution, and practical engineering.
+        </p>
+      </header>
+
+      <div className="space-y-6" data-pagefind-ignore="all">
+        {posts
+          .filter(post => post.route !== '/blog')
+          .map(post => {
+            const title = post.frontMatter.title || post.name
+            const description = post.frontMatter.description || ''
+            const date = post.frontMatter.date
+              ? new Intl.DateTimeFormat('en', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric',
+                }).format(new Date(post.frontMatter.date))
+              : null
+
+            return (
+              <article
+                key={post.route}
+                className="rounded-2xl border border-slate-200 p-6 transition-colors hover:border-slate-300 dark:border-slate-800 dark:hover:border-slate-700"
+              >
+                {date && (
+                  <p className="mb-3 text-sm font-medium uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
+                    {date}
+                  </p>
+                )}
+                <h2 className="text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">
+                  <Link href={`${post.route}/`} className="hover:text-slate-700 dark:hover:text-slate-300">
+                    {title}
+                  </Link>
+                </h2>
+                {description && (
+                  <p className="mt-3 text-base leading-7 text-slate-600 dark:text-slate-300">
+                    {description}
+                  </p>
+                )}
+                <div className="mt-5">
+                  <Link
+                    href={`${post.route}/`}
+                    className="text-sm font-semibold text-slate-900 hover:text-slate-700 dark:text-slate-100 dark:hover:text-slate-300"
+                  >
+                    Read article
+                  </Link>
+                </div>
+              </article>
+            )
+          })}
+      </div>
+    </main>
   )
 }