Fix blog post foreign key

src/pages/BlogPost.tsx

@@ -18,21 +18,14 @@ export default function BlogPost() {
   const { data: post, isLoading } = useQuery({
     queryKey: ['blog-post', slug],
     queryFn: async () => {
-      const { data, error } = await supabase
+      const query = supabase
         .from('blog_posts')
-        .select(`
-          *,
-          author:profiles(
-            username,
-            display_name,
-            avatar_url,
-            avatar_image_id
-          )
-        `)
+        .select('*, profiles!inner(username, display_name, avatar_url, avatar_image_id)')
         .eq('slug', slug)
         .eq('status', 'published')
         .single();
 
+      const { data, error } = await query;
       if (error) throw error;
       return data;
     },
@@ -98,14 +91,14 @@ export default function BlogPost() {
         <div className="flex items-center justify-between mb-8 pb-6 border-b">
           <div className="flex items-center gap-3">
             <Avatar className="w-12 h-12">
-              <AvatarImage src={post.author.avatar_url} />
+              <AvatarImage src={post.profiles.avatar_url} />
               <AvatarFallback>
-                {post.author.display_name?.[0] || post.author.username[0]}
+                {post.profiles.display_name?.[0] || post.profiles.username[0]}
               </AvatarFallback>
             </Avatar>
             <div>
               <p className="font-medium">
-                {post.author.display_name || post.author.username}
+                {post.profiles.display_name || post.profiles.username}
               </p>
               <div className="flex items-center gap-3 text-sm text-muted-foreground">
                 <div className="flex items-center gap-1">