feat: update user avatar handling to use fallback image from DiceBear API

Author: kingRayhan

src/app/[username]/[articleHandle]/page.tsx

@@ -114,11 +114,18 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
             </div>
           )}
 
+          {/* <pre>{JSON.stringify(article?.user, null, 2)}</pre> */}
+
           {/* User information */}
           <div className="mb-4 flex items-center my-4">
             <div className="relative rounded-full overflow-hidden border transition-transform duration-300 size-10">
-              <Image
-                src={getFileUrl(article?.user?.profile_photo) ?? ""}
+              <img
+                src={
+                  Boolean(article?.user?.profile_photo)
+                    ? getFileUrl(article?.user?.profile_photo)
+                    : "https://api.dicebear.com/9.x/personas/svg?seed=" +
+                      article?.user?.name
+                }
                 alt={article?.user?.username ?? ""}
                 width={40}
                 height={40}

src/components/ArticleCard.tsx

@@ -56,7 +56,12 @@ const ArticleCard = ({
                 width={32}
                 height={32}
                 unoptimized
-                src={author.avatar ?? ""}
+                src={
+                  Boolean(author.avatar)
+                    ? author.avatar
+                    : "https://api.dicebear.com/9.x/personas/svg?seed=" +
+                      author.name
+                }
                 alt={author.name ?? ""}
                 className="w-full h-full object-cover transition-opacity duration-300 ease-in-out opacity-100"
               />