Add avatar url

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.3.4",
     "framer-motion": "^11.0.24",
     "i18next": "^23.5.1",
+    "md5": "^2.3.0",
     "monaco-editor": "^0.39.0",
     "msw": "^2.1.7",
     "react": "^18.2.0",
@@ -32,6 +33,7 @@
     "rehype-katex": "^6.0.3",
     "rehype-mathjax": "^6.0.0",
     "remark-math": "^5.1.1",
+    "ts-md5": "^1.3.1",
     "typescript": "^5.3.3",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"

src/components/judge/JudgeTable.tsx

@@ -4,11 +4,12 @@ import { joinClasses } from "../../utils/common";
 import { JudgeServiceModel } from "../../typings/judge";
 import BrandCPPIcon from "../icons/tabler/BrandCPPIcon";
 import BrandPythonIcon from "../icons/tabler/BrandPythonIcon";
+import { getGravatarUrl } from "@/utils/avatar_url";
 
 const columns = [
+  { name: "User", uid: "user" },
   { name: "Problem Title", uid: "problem" },
   { name: "Language", uid: "language" },
-  { name: "User", uid: "user" },
   { name: "Status", uid: "status" },
 ];
 
@@ -43,9 +44,19 @@ const JudgeTable: React.FC<JudgeTableProps> = (props) => {
               }}
               key={idx}
             >
-              <th>{judge.problem?.title}</th>
+              <td className="flex items-center gap-2 py-2">
+                <div className="avatar">
+                  <div className="w-8 rounded-full">
+                    <img
+                      src={getGravatarUrl(judge.user?.name)}
+                      alt={`avatar-${judge.user?.name}`}
+                    />
+                  </div>
+                </div>
+                {judge.user?.name}
+              </td>
+              <td>{judge.problem?.title}</td>
               <td>{RenderLanguage(judge.language)}</td>
-              <td>{judge.user?.name}</td>
               <td>
                 <div
                   className={joinClasses(

src/utils/avatar_url.ts

@@ -0,0 +1,7 @@
+import { Md5 } from "ts-md5";
+
+export function getGravatarUrl(email: string, size: number = 200) {
+  var md5 = new Md5();
+  var hash = md5.appendStr(email).end()?.toString();
+  return `https://www.gravatar.com/avatar/${hash}?d=identicon&s=${size}`;
+}