From 199de934d2baa9beca5a80c13c7914e2c48276bd Mon Sep 17 00:00:00 2001
From: shaokeyibb <shaokeyibb@126.com>
Date: Mon, 9 Sep 2024 22:38:37 +0800
Subject: [PATCH] feat: jump to profile when click username

---
 cloudflare-workers/schema.sql   |  1 +
 cloudflare-workers/src/db.ts    |  7 ++++---
 cloudflare-workers/src/index.ts |  2 +-
 cloudflare-workers/src/types.ts |  1 +
 frontend/lib/main.ts            | 32 +++++++++++++++++++++++---------
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/cloudflare-workers/schema.sql b/cloudflare-workers/schema.sql
index 5a570e98..89280154 100644
--- a/cloudflare-workers/schema.sql
+++ b/cloudflare-workers/schema.sql
@@ -26,6 +26,7 @@ CREATE TABLE IF NOT EXISTS `commenters`(
     `oauth_user_id` TEXT NOT NULL,
     `name` TEXT NOT NULL,
     `avatar_url` TEXT NOT NULL,
+    `profile_url` TEXT,
     UNIQUE(`oauth_provider`, `oauth_user_id`) 
 );
 CREATE UNIQUE INDEX IF NOT EXISTS idx_oauth_provider_oauth_user_id ON `commenters`(`oauth_provider`, `oauth_user_id`);
diff --git a/cloudflare-workers/src/db.ts b/cloudflare-workers/src/db.ts
index 229eb33c..e87884b0 100644
--- a/cloudflare-workers/src/db.ts
+++ b/cloudflare-workers/src/db.ts
@@ -72,14 +72,14 @@ export async function getUserOfComment(env: Env, comment_id: number): Promise<Co
 		.first();
 }
 
-export async function registerUser(env: Env, name: string, oauth_provider: string, oauth_user_id: string, avatar_url: string) {
+export async function registerUser(env: Env, name: string, oauth_provider: string, oauth_user_id: string, avatar_url: string, profile_url?: string) {
 	const db = env.DB;
 
 	await db
 		.prepare(
-			'INSERT INTO commenters (name, oauth_provider, oauth_user_id, avatar_url) VALUES (?, ?, ?, ?) ON CONFLICT(oauth_provider, oauth_user_id) DO UPDATE SET name = excluded.name',
+			'INSERT INTO commenters (name, oauth_provider, oauth_user_id, avatar_url, profile_url) VALUES (?, ?, ?, ?, ?) ON CONFLICT(oauth_provider, oauth_user_id) DO UPDATE SET name = excluded.name',
 		)
-		.bind(name, oauth_provider, oauth_user_id, avatar_url)
+		.bind(name, oauth_provider, oauth_user_id, avatar_url, profile_url)
 		.run();
 }
 
@@ -107,6 +107,7 @@ export async function getComment(env: Env, req: GetComment): Promise<GetCommentR
 				oauth_provider: comment.oauth_provider as string,
 				oauth_user_id: comment.oauth_user_id as string,
 				avatar_url: comment.avatar_url as string,
+				profile_url: (comment.profile_url as string | null) ?? undefined,
 			},
 			comment: comment.comment as string,
 			created_time: comment.created_time as string,
diff --git a/cloudflare-workers/src/index.ts b/cloudflare-workers/src/index.ts
index 1ae8be5f..47ff4d59 100644
--- a/cloudflare-workers/src/index.ts
+++ b/cloudflare-workers/src/index.ts
@@ -364,7 +364,7 @@ router.get('/oauth/callback', async (req, env, ctx) => {
 		env.OAUTH_JWT_SECRET,
 	);
 
-	await registerUser(env, userInfo.name ?? userInfo.login, 'github', userInfo.id + '', userInfo.avatar_url);
+	await registerUser(env, userInfo.name ?? userInfo.login, 'github', userInfo.id + '', userInfo.avatar_url, `https://github.com/${userInfo.login}`);
 
 	const redirectUrl = new URL(state.redirect);
 	redirectUrl.searchParams.append('oauth_token', jwt);
diff --git a/cloudflare-workers/src/types.ts b/cloudflare-workers/src/types.ts
index cd567291..97ac1aa9 100644
--- a/cloudflare-workers/src/types.ts
+++ b/cloudflare-workers/src/types.ts
@@ -106,6 +106,7 @@ export type Commenter = {
 	oauth_user_id: string;
 	name: string;
 	avatar_url: string;
+	profile_url?: string;
 };
 
 export type GithubOrgMembershipResp = {
diff --git a/frontend/lib/main.ts b/frontend/lib/main.ts
index 6cb456be..a47402e9 100644
--- a/frontend/lib/main.ts
+++ b/frontend/lib/main.ts
@@ -27,6 +27,7 @@ type Comment = {
     oauth_user_id: string;
     name: string | null;
     avatar_url?: string;
+    profile_url?: string;
   };
   comment: string;
   created_time: string;
@@ -532,7 +533,7 @@ const _renderComments = (comments: Comment[]) => {
 
     const username = container.querySelector(
       ".comment_username",
-    ) as HTMLDivElement;
+    ) as HTMLSpanElement;
 
     const commentActionsLogin = container.querySelector(
       ".comment_actions_login",
@@ -607,7 +608,7 @@ const _renderComments = (comments: Comment[]) => {
           </div>
           <div class="comment_base">
             <div class="comment_header">
-              <span class="comment_commenter"></span>
+              <a class="comment_commenter"></a>
               <span class="comment_time comment_created_time">发布于 ${dateTimeFormatter.format(new Date(comment.created_time))}</span>
               <span class="comment_time comment_edited_time">最后编辑于 ${comment.last_edited_time ? dateTimeFormatter.format(new Date(comment.last_edited_time)) : ""}</span>
               <div class="comment_actions">
@@ -626,18 +627,31 @@ const _renderComments = (comments: Comment[]) => {
           <button class="comment_actions_item comment_expand" data-action="fold">折叠</button>
         </div>
       `.trim();
-      commentEl.querySelector(".comment_commenter")!.textContent =
-        comment.commenter.name;
-      commentEl.querySelector(".comment_main .comment_content")!.textContent =
-        comment.comment;
+      const commenter = commentEl.querySelector(
+        ".comment_commenter",
+      )! as HTMLAnchorElement;
+      commenter.textContent = comment.commenter.name;
+
+      const userAvatar = commentEl.querySelector(
+        ".comment_user_avatar",
+      ) as HTMLDivElement;
+
+      if (comment.commenter.profile_url) {
+        commenter.target = "_blank";
+        commenter.href = comment.commenter.profile_url;
+        userAvatar.style.cursor = "pointer";
+        userAvatar.addEventListener("click", () => {
+          window.open(comment.commenter.profile_url);
+        })
+      }
 
       if (!comment.commenter.avatar_url) {
-        const userAvatar = commentEl.querySelector(
-          ".comment_user_avatar",
-        ) as HTMLDivElement;
         userAvatar.innerHTML = iconDefaultAvatar;
       }
 
+      commentEl.querySelector(".comment_main .comment_content")!.textContent =
+        comment.comment;
+
       const commentActionsHeader = commentEl.querySelector(
         ".comment_header .comment_actions",
       ) as HTMLDivElement;