fixing project

Author: ilramdhan

app/blog-detail.tsx

@@ -66,8 +66,8 @@ export default function BlogDetailPage() {
       <Navbar />
 
       <div className="w-full h-96 relative bg-slate-200 dark:bg-slate-900">
-         {blog.image_url ? (
-             <ImageCarousel images={[blog.image_url]} alt={blog.title || 'Blog Post'} aspectRatio="h-full" />
+         {blog.images && blog.images.length > 0 ? (
+             <ImageCarousel images={[blog.images[0]]} alt={blog.title || 'Blog Post'} aspectRatio="h-full" />
          ) : (
              <div className="w-full h-full bg-slate-200 dark:bg-slate-900" />
          )}
@@ -90,7 +90,7 @@ export default function BlogDetailPage() {
       <div className="max-w-3xl mx-auto px-4 py-12">
         <div className="prose prose-slate dark:prose-invert prose-lg max-w-none mb-16">
              <p className="lead text-xl text-slate-600 dark:text-slate-300 mb-8 font-light">{blog.excerpt}</p>
-             <ReactMarkdown className="text-slate-800 dark:text-slate-300 leading-relaxed whitespace-pre-wrap">
+             <ReactMarkdown>
                  {blog.content || ''}
              </ReactMarkdown>
         </div>

app/blog.tsx

@@ -24,7 +24,7 @@ export default function BlogPage() {
   const { data: blogData, isLoading: isLoadingBlogs, isError: isErrorBlogs } = useQuery({
     queryKey: ['blogs', currentPage, selectedTag, debouncedSearchQuery],
     queryFn: () => getBlogs({ page: currentPage, limit: ITEMS_PER_PAGE, query: debouncedSearchQuery }),
-    keepPreviousData: true,
+    placeholderData: (previousData) => previousData,
   });
 
   const currentBlogs = blogData?.data ?? [];
@@ -85,12 +85,12 @@ export default function BlogPage() {
             {currentBlogs.map(blog => (
                 <article 
                     key={blog.id} 
-                    onClick={() => navigate(`/blog/${blog.id}`)}
+                    onClick={() => blog.slug && navigate(`/blog/${blog.slug}`)}
                     className="group bg-white dark:bg-slate-900/60 border border-slate-200 dark:border-white/5 rounded-2xl p-6 md:p-8 hover:shadow-lg dark:hover:bg-slate-900/80 hover:border-indigo-500/30 transition-all cursor-pointer backdrop-blur-md"
                 >
                     <div className="flex flex-col md:flex-row gap-6">
                         <div className="w-full md:w-48 aspect-video md:aspect-square shrink-0 rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-800">
-                             <img src={blog.image_url || ''} alt={blog.title} className="w-full h-full object-cover" />
+                             <img src={blog.images && blog.images.length > 0 ? blog.images[0] : ''} alt={blog.title} className="w-full h-full object-cover" />
                         </div>
                         <div className="flex-1">
                             <div className="flex flex-wrap items-center gap-3 text-sm text-slate-500 mb-3">

app/page.tsx

@@ -121,7 +121,7 @@ export default function Page() {
                             className="bg-white border border-slate-200 dark:bg-slate-950/80 dark:border-white/10 rounded-xl overflow-hidden hover:border-indigo-500/50 dark:hover:border-indigo-500/50 transition-all cursor-pointer group shadow-sm"
                         >
                             <div className="aspect-[2/1] overflow-hidden bg-slate-100 dark:bg-slate-900">
-                                <img src={post.image_url || ''} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                <img src={post.images && post.images.length > 0 ? post.images[0] : ''} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                             </div>
                             <div className="p-6">
                                 <div className="flex items-center gap-2 text-xs text-slate-500 mb-3">

app/projects.tsx

@@ -21,7 +21,7 @@ export default function ProjectsPage() {
   const { data: projectData, isLoading: isLoadingProjects, isError: isErrorProjects } = useQuery({
     queryKey: ['projects', currentPage, selectedTag],
     queryFn: () => getProjects({ page: currentPage, limit: ITEMS_PER_PAGE, tag: selectedTag }),
-    keepPreviousData: true,
+    placeholderData: (previousData) => previousData,
   });
 
   const currentProjects = projectData?.data ?? [];

components/Navbar.tsx

@@ -66,7 +66,7 @@ export function Navbar() {
                   <img src={profile.avatar_url} alt="Logo" className="h-8 w-auto object-contain" />
               ) : (
                   <div className="flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-bold text-xl">
-                      <span>{profile?.full_name || 'DevFolio'}</span>
+                      <span>{profile?.display_name || 'DevFolio'}</span>
                   </div>
               )
             )}

package-lock.json

@@ -22,7 +22,8 @@
     "react-router-dom": "^6.22.3",
     "sonner": "^1.2.4",
     "tailwind-merge": "^2.0.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "@supabase/ssr": "^0.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",