Add a dedicated blog section to share articles and engage with readers

Implements blog listing, detail, and creation pages with necessary components and types.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/10041482-d9af-42cb-9c5d-d331b0904c5e.jpg

client/src/App.tsx

@@ -29,6 +29,9 @@ function Router() {
       <Route path="/collections/create" component={CreateCollection} />
       <Route path="/profile" component={Profile} />
       <Route path="/submit" component={Submit} />
+      <Route path="/blog" component={BlogList} />
+      <Route path="/blog/create" component={BlogCreate} />
+      <Route path="/blog/:slug" component={BlogDetail} />
       <Route component={NotFound} />
     </Switch>
   );

client/src/lib/types.ts

@@ -110,6 +110,7 @@ export interface BlogPostWithDetails {
   tags?: Tag[];
   commentCount?: number;
   likeCount?: number;
+  comments?: CommentWithUser[];
 }
 
 export interface BlogPostListItem {

client/src/pages/blog/BlogCreate.tsx

@@ -17,8 +17,7 @@ import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
-import { insertBlogPostSchema } from "@shared/schema";
-import { Tag } from "@/lib/types";
+import { insertBlogPostSchema, Tag } from "@shared/schema";
 
 const blogPostSchema = insertBlogPostSchema.extend({
   tags: z.array(z.number()).optional(),
@@ -82,7 +81,7 @@ export default function BlogCreate() {
     defaultValues: {
       title: "",
       content: "",
-      excerpt: "",
+      excerpt: "", // Using empty string instead of null
       authorId: 1, // Mock user ID for demo
       tags: [],
     },
@@ -206,7 +205,11 @@ export default function BlogCreate() {
                       <Textarea
                         placeholder="Provide a short summary of your article (will appear in previews)"
                         className="resize-y h-20"
-                        {...field}
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                        name={field.name}
+                        ref={field.ref}
                       />
                     </FormControl>
                     <FormDescription>