From 60d0ed58d06c66d9ef3eda31af152fe0324b3603 Mon Sep 17 00:00:00 2001
From: Ben Chang <ben_chang@htc.com>
Date: Thu, 12 Dec 2024 10:07:13 +0800
Subject: [PATCH 1/4] Add "n commits" link to contributors in contributors
 graph page

---
 routers/web/repo/contributors.go           |  3 +++
 web_src/js/components/RepoContributors.vue | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/routers/web/repo/contributors.go b/routers/web/repo/contributors.go
index 762fbf93795f3..b05f4b2cb2f3c 100644
--- a/routers/web/repo/contributors.go
+++ b/routers/web/repo/contributors.go
@@ -21,6 +21,9 @@ func Contributors(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.activity.navbar.contributors")
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsContributors"] = true
+	ctx.PageData["repoContributorsData"] = map[string]any{
+		"repoDefaultBranch": ctx.Repo.RefName,
+	}
 	ctx.HTML(http.StatusOK, tplContributors)
 }
 
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 97678b9a13b0d..6915518e4be1b 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
+import dayjs from 'dayjs';
 import {
   Chart,
   Title,
@@ -27,6 +28,8 @@ import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import type {Entries} from 'type-fest';
 
+const {pageData} = window.config;
+
 const customEventListener: Plugin = {
   id: 'customEventListener',
   afterEvent: (chart, args, opts) => {
@@ -72,11 +75,13 @@ export default {
     totalStats: {} as Record<string, any>,
     sortedContributors: {} as Record<string, any>,
     type: 'commits',
+    repoBranch: pageData.repoContributorsData.repoDefaultBranch,
     contributorsStats: {} as Record<string, any>,
     xAxisStart: null,
     xAxisEnd: null,
     xAxisMin: null,
     xAxisMax: null,
+    searchQuery: '',
   }),
   mounted() {
     this.fetchGraphData();
@@ -93,6 +98,9 @@ export default {
   methods: {
     sortContributors() {
       const contributors = this.filterContributorWeeksByDateRange();
+      const min = dayjs(this.xAxisMin).format('YYYY-MM-DD');
+      const max = dayjs(this.xAxisMax).format('YYYY-MM-DD');
+      this.searchQuery = `${this.repoLink}/commits/branch/${this.repoBranch}/search?q=after:${min}, before:${max}, author:`;
       const criteria = `total_${this.type}`;
       this.sortedContributors = Object.values(contributors)
         .filter((contributor) => contributor[criteria] !== 0)
@@ -167,7 +175,7 @@ export default {
         // for details.
         user.max_contribution_type += 1;
 
-        filteredData[key] = {...user, weeks: filteredWeeks};
+        filteredData[key] = {...user, weeks: filteredWeeks, email: key};
       }
 
       return filteredData;
@@ -389,7 +397,11 @@ export default {
               {{ contributor.name }}
             </h4>
             <p class="tw-text-12 tw-flex tw-gap-1">
-              <strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong>
+              <strong v-if="contributor.total_commits">
+                <a class="silenced" :href="searchQuery + contributor.email">
+                  {{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}
+                </a>
+              </strong>
               <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
               <strong v-if="contributor.total_deletions" class="text red">
                 {{ contributor.total_deletions.toLocaleString() }}--</strong>

From 5d9bf83667c08509f12f42c17f74154d2b631f7c Mon Sep 17 00:00:00 2001
From: Ben Chang <ben_chang@htc.com>
Date: Thu, 12 Dec 2024 14:24:49 +0800
Subject: [PATCH 2/4] encode the search query

---
 web_src/js/components/RepoContributors.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 6915518e4be1b..1637eaab4ebe8 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -81,7 +81,6 @@ export default {
     xAxisEnd: null,
     xAxisMin: null,
     xAxisMax: null,
-    searchQuery: '',
   }),
   mounted() {
     this.fetchGraphData();
@@ -98,9 +97,6 @@ export default {
   methods: {
     sortContributors() {
       const contributors = this.filterContributorWeeksByDateRange();
-      const min = dayjs(this.xAxisMin).format('YYYY-MM-DD');
-      const max = dayjs(this.xAxisMax).format('YYYY-MM-DD');
-      this.searchQuery = `${this.repoLink}/commits/branch/${this.repoBranch}/search?q=after:${min}, before:${max}, author:`;
       const criteria = `total_${this.type}`;
       this.sortedContributors = Object.values(contributors)
         .filter((contributor) => contributor[criteria] !== 0)
@@ -108,6 +104,15 @@ export default {
         .slice(0, 100);
     },
 
+    getContributorSearchQuery(contributorEmail: string) {
+      const min = dayjs(this.xAxisMin).format('YYYY-MM-DD');
+      const max = dayjs(this.xAxisMax).format('YYYY-MM-DD');
+      const params = new URLSearchParams({
+        'q': `after:${min}, before:${max}, author:${contributorEmail}`,
+      });
+      return `${this.repoLink}/commits/branch/${this.repoBranch}/search?${params.toString()}`;
+    },
+
     async fetchGraphData() {
       this.isLoading = true;
       try {
@@ -398,7 +403,7 @@ export default {
             </h4>
             <p class="tw-text-12 tw-flex tw-gap-1">
               <strong v-if="contributor.total_commits">
-                <a class="silenced" :href="searchQuery + contributor.email">
+                <a class="silenced" :href="getContributorSearchQuery(contributor.email)">
                   {{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}
                 </a>
               </strong>

From 27ee1a2252b4c7c3606d4c84abb1b6b6d3bf88e0 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 12 Dec 2024 15:24:41 +0800
Subject: [PATCH 3/4] fix

---
 routers/web/repo/contributors.go           |  3 ---
 templates/repo/contributors.tmpl           |  1 +
 web_src/js/components/RepoContributors.vue | 14 ++++++++------
 web_src/js/features/contributors.ts        |  1 +
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/routers/web/repo/contributors.go b/routers/web/repo/contributors.go
index b05f4b2cb2f3c..762fbf93795f3 100644
--- a/routers/web/repo/contributors.go
+++ b/routers/web/repo/contributors.go
@@ -21,9 +21,6 @@ func Contributors(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.activity.navbar.contributors")
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsContributors"] = true
-	ctx.PageData["repoContributorsData"] = map[string]any{
-		"repoDefaultBranch": ctx.Repo.RefName,
-	}
 	ctx.HTML(http.StatusOK, tplContributors)
 }
 
diff --git a/templates/repo/contributors.tmpl b/templates/repo/contributors.tmpl
index 6b8a63fe9964d..882d8b205cf2e 100644
--- a/templates/repo/contributors.tmpl
+++ b/templates/repo/contributors.tmpl
@@ -1,6 +1,7 @@
 {{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
 	<div id="repo-contributors-chart"
 		data-repo-link="{{.RepoLink}}"
+		data-repo-default-branch-name="{{.Repository.DefaultBranch}}"
 		data-locale-filter-label="{{ctx.Locale.Tr "repo.contributors.contribution_type.filter_label"}}"
 		data-locale-contribution-type-commits="{{ctx.Locale.Tr "repo.contributors.contribution_type.commits"}}"
 		data-locale-contribution-type-additions="{{ctx.Locale.Tr "repo.contributors.contribution_type.additions"}}"
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 1637eaab4ebe8..a5d9cbaced245 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -27,8 +27,7 @@ import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import type {Entries} from 'type-fest';
-
-const {pageData} = window.config;
+import {pathEscapeSegments} from '../utils/url.ts';
 
 const customEventListener: Plugin = {
   id: 'customEventListener',
@@ -68,6 +67,10 @@ export default {
       type: String,
       required: true,
     },
+    repoDefaultBranchName: {
+      type: String,
+      required: true,
+    },
   },
   data: () => ({
     isLoading: false,
@@ -75,7 +78,6 @@ export default {
     totalStats: {} as Record<string, any>,
     sortedContributors: {} as Record<string, any>,
     type: 'commits',
-    repoBranch: pageData.repoContributorsData.repoDefaultBranch,
     contributorsStats: {} as Record<string, any>,
     xAxisStart: null,
     xAxisEnd: null,
@@ -110,7 +112,7 @@ export default {
       const params = new URLSearchParams({
         'q': `after:${min}, before:${max}, author:${contributorEmail}`,
       });
-      return `${this.repoLink}/commits/branch/${this.repoBranch}/search?${params.toString()}`;
+      return `${this.repoLink}/commits/branch/${pathEscapeSegments(this.repoDefaultBranchName)}/search?${params.toString()}`;
     },
 
     async fetchGraphData() {
@@ -228,7 +230,7 @@ export default {
       };
     },
 
-    updateOtherCharts({chart}: {chart: Chart}, reset?: boolean = false) {
+    updateOtherCharts({chart}: {chart: Chart}, reset: boolean = false) {
       const minVal = chart.options.scales.x.min;
       const maxVal = chart.options.scales.x.max;
       if (reset) {
@@ -394,7 +396,7 @@ export default {
         <div class="ui top attached header tw-flex tw-flex-1">
           <b class="ui right">#{{ index + 1 }}</b>
           <a :href="contributor.home_link">
-            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link">
+            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="{{ contributor.name }}">
           </a>
           <div class="tw-ml-2">
             <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>
diff --git a/web_src/js/features/contributors.ts b/web_src/js/features/contributors.ts
index 475c66e90060a..95fc81f5b368b 100644
--- a/web_src/js/features/contributors.ts
+++ b/web_src/js/features/contributors.ts
@@ -8,6 +8,7 @@ export async function initRepoContributors() {
   try {
     const View = createApp(RepoContributors, {
       repoLink: el.getAttribute('data-repo-link'),
+      repoDefaultBranchName: el.getAttribute('data-repo-default-branch-name'),
       locale: {
         filterLabel: el.getAttribute('data-locale-filter-label'),
         contributionType: {

From 335cd3593b89f28e790d536e2dcacccedc8bd334 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 12 Dec 2024 15:52:41 +0800
Subject: [PATCH 4/4] do not set alt to avoid break page layout

---
 web_src/js/components/RepoContributors.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index a5d9cbaced245..e79fc80d8e3f9 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -396,7 +396,7 @@ export default {
         <div class="ui top attached header tw-flex tw-flex-1">
           <b class="ui right">#{{ index + 1 }}</b>
           <a :href="contributor.home_link">
-            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="{{ contributor.name }}">
+            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="">
           </a>
           <div class="tw-ml-2">
             <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>