fix: convert blog data into right shape for Nextra components

Author: GrocerPublishAgent

app/blog/get-posts.ts

@@ -1,22 +1,27 @@
 import { normalizePages } from 'nextra/normalize-pages'
 import { getPageMap } from 'nextra/page-map'
+import type { RawBlogPost, BlogPost } from '../../types/blog'
 
-export async function getPosts() {
+export async function getPosts(): Promise<BlogPost[]> {
   const { directories } = normalizePages({
     list: await getPageMap('/blog'),
     route: '/blog'
   })
 
   return directories
     .filter(post => post.name !== 'page')
+    .map(post => ({
+      ...post,
+      frontMatter: post.frontMatter || {}
+    }))
     .sort((a, b) => {
       const dateA = a.frontMatter?.date ? new Date(a.frontMatter.date).getTime() : 0
       const dateB = b.frontMatter?.date ? new Date(b.frontMatter.date).getTime() : 0
       return dateB - dateA
     })
 }
 
-export async function getTags() {
+export async function getTags(): Promise<string[]> {
   const posts = await getPosts()
   const tags = posts.flatMap(post => post.frontMatter?.tags || [])
   return tags

app/blog/page.tsx

@@ -1,19 +1,19 @@
 import Link from 'next/link'
 import { PostCard } from 'nextra-theme-blog'
 import { getPosts, getTags } from './get-posts'
+import type { BlogMetadata, TagCount, PostCardData } from '../../types/blog'
 
-export const metadata = {
+export const metadata: BlogMetadata = {
   title: 'Blog'
 }
 
 export default async function BlogIndexPage() {
   const tags = await getTags()
   const posts = await getPosts()
-  const allTags = Object.create(null)
+  const allTags: TagCount = {}
 
   for (const tag of tags) {
-    allTags[tag] ??= 0
-    allTags[tag] += 1
+    allTags[tag] = (allTags[tag] ?? 0) + 1
   }
 
   return (
@@ -35,9 +35,24 @@ export default async function BlogIndexPage() {
           ))}
         </div>
       )}
-      {posts.map(post => (
-        <PostCard key={post.route} post={post} />
-      ))}
+      {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>
   )
 }

types/blog.ts

@@ -0,0 +1,45 @@
+// Raw post data from nextra
+export interface RawBlogPost {
+  name: string
+  route: string
+  frontMatter?: {
+    title?: string
+    date?: string
+    tags?: string[]
+    description?: string
+    [key: string]: any
+  }
+  [key: string]: any
+}
+
+// Processed blog post for internal use
+export interface BlogPost {
+  name: string
+  route: string
+  frontMatter: {
+    title?: string
+    date?: string
+    tags?: string[]
+    description?: string
+    [key: string]: any
+  }
+  [key: string]: any
+}
+
+// Type that PostCard component expects (matches BlogMetadata)
+// Note: PostCard from nextra-theme-blog only needs title and description
+// in frontMatter, not our extended frontMatter with date, tags, etc.
+export interface PostCardData {
+  route: string
+  frontMatter: BlogMetadata
+  [key: string]: any
+}
+
+export interface TagCount {
+  [tag: string]: number
+}
+
+export interface BlogMetadata {
+  title: string
+  description?: string
+}