From 1e02efcd4a769e4e2825d0d55c570100e8f567d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Fri, 16 Feb 2024 15:51:56 +0300
Subject: [PATCH 01/10] Add initial recent commits page

---
 options/locale/locale_en-US.ini    |  3 +++
 routers/web/repo/recent_commits.go | 35 ++++++++++++++++++++++++++++++
 routers/web/web.go                 |  4 ++++
 templates/repo/activity.tmpl       |  1 +
 templates/repo/navbar.tmpl         |  3 +++
 templates/repo/recent_commits.tmpl |  3 +++
 6 files changed, 49 insertions(+)
 create mode 100644 routers/web/repo/recent_commits.go
 create mode 100644 templates/repo/recent_commits.tmpl

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 5f34bc4c1d745..d0ad090c3f8ed 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1914,6 +1914,7 @@ wiki.original_git_entry_tooltip = View original Git file instead of using friend
 activity = Activity
 activity.navbar.pulse = Pulse
 activity.navbar.contributors = Contributors
+activity.navbar.recent_commits = Recent Commits
 activity.period.filter_label = Period:
 activity.period.daily = 1 day
 activity.period.halfweekly = 3 days
@@ -1989,6 +1990,8 @@ contributors.loading_title_failed = Could not load contributions
 contributors.loading_info = This might take a bit…
 contributors.component_failed_to_load = An unexpected error happened.
 
+recent_commits = Recent Commits
+
 search = Search
 search.search_repo = Search repository
 search.type.tooltip = Search type
diff --git a/routers/web/repo/recent_commits.go b/routers/web/repo/recent_commits.go
new file mode 100644
index 0000000000000..b1960dfcdc5f3
--- /dev/null
+++ b/routers/web/repo/recent_commits.go
@@ -0,0 +1,35 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package repo
+
+import (
+	"net/http"
+
+	"code.gitea.io/gitea/modules/base"
+	"code.gitea.io/gitea/modules/context"
+	contributors_service "code.gitea.io/gitea/services/repository"
+)
+
+const (
+	tplRecentCommits base.TplName = "repo/activity"
+)
+
+// RecentCommits renders the page to show recent commit frequency on repository
+func RecentCommits(ctx *context.Context) {
+	ctx.Data["Title"] = ctx.Tr("repo.recent_commits")
+
+	ctx.Data["PageIsActivity"] = true
+	ctx.Data["PageIsRecentCommits"] = true
+
+	ctx.HTML(http.StatusOK, tplRecentCommits)
+}
+
+// RecentCommitsData returns JSON of recent commits data
+func RecentCommitsData(ctx *context.Context) {
+	if contributorStats, err := contributors_service.GetContributorStats(ctx, ctx.Cache, ctx.Repo.Repository, ctx.Repo.CommitID); err != nil {
+		ctx.ServerError("GetCodeFrequencyData", err)
+	} else {
+		ctx.JSON(http.StatusOK, contributorStats["total"].Weeks)
+	}
+}
diff --git a/routers/web/web.go b/routers/web/web.go
index 0528b20328eb8..5c7eaadef8ea7 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -1397,6 +1397,10 @@ func registerRoutes(m *web.Route) {
 				m.Get("", repo.Contributors)
 				m.Get("/data", repo.ContributorsData)
 			})
+			m.Group("/recent-commits", func() {
+				m.Get("", repo.RecentCommits)
+				m.Get("/data", repo.RecentCommitsData)
+			})
 		}, context.RepoRef(), repo.MustBeNotEmpty, context.RequireRepoReaderOr(unit.TypePullRequests, unit.TypeIssues, unit.TypeReleases))
 
 		m.Group("/activity_author_data", func() {
diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl
index 960083d2fbd7f..7b9f2964a5375 100644
--- a/templates/repo/activity.tmpl
+++ b/templates/repo/activity.tmpl
@@ -8,6 +8,7 @@
 		<div class="flex-container-main">
 			{{if .PageIsPulse}}{{template "repo/pulse" .}}{{end}}
 			{{if .PageIsContributors}}{{template "repo/contributors" .}}{{end}}
+			{{if .PageIsRecentCommits}}{{template "repo/recent_commits" .}}{{end}}
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/navbar.tmpl b/templates/repo/navbar.tmpl
index a9042ee30d0b6..80a561829da40 100644
--- a/templates/repo/navbar.tmpl
+++ b/templates/repo/navbar.tmpl
@@ -5,4 +5,7 @@
 	<a class="{{if .PageIsContributors}}active {{end}}item" href="{{.RepoLink}}/activity/contributors">
 		{{ctx.Locale.Tr "repo.activity.navbar.contributors"}}
 	</a>
+	<a class="{{if .PageIsRecentCommits}}active{{end}} item" href="{{.RepoLink}}/activity/recent-commits">
+		{{ctx.Locale.Tr "repo.activity.navbar.recent_commits"}}
+	</a>
 </div>
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
new file mode 100644
index 0000000000000..8674265a60e6a
--- /dev/null
+++ b/templates/repo/recent_commits.tmpl
@@ -0,0 +1,3 @@
+{{if .Permission.CanRead $.UnitTypeCode}}
+  <h1>Recent Commits</h1>
+{{end}}

From 55da039412e56d188728f2c225d074069ebf192b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 17 Feb 2024 13:37:26 +0300
Subject: [PATCH 02/10] Implement recent commits page

---
 options/locale/locale_en-US.ini             |   4 +
 routers/web/repo/recent_commits.go          |   8 +-
 templates/repo/recent_commits.tmpl          |   8 +-
 web_src/js/components/RepoRecentCommits.vue | 183 ++++++++++++++++++++
 web_src/js/features/recent-commits.js       |  21 +++
 web_src/js/index.js                         |   2 +
 6 files changed, 224 insertions(+), 2 deletions(-)
 create mode 100644 web_src/js/components/RepoRecentCommits.vue
 create mode 100644 web_src/js/features/recent-commits.js

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d0ad090c3f8ed..d6486d661da0d 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1991,6 +1991,10 @@ contributors.loading_info = This might take a bit…
 contributors.component_failed_to_load = An unexpected error happened.
 
 recent_commits = Recent Commits
+recent_commits.loading_title = Loading recent commits...
+recent_commits.loading_title_failed = Could not load recent commits
+recent_commits.loading_info = This might take a bit…
+recent_commits.component_failed_to_load = An unexpected error happened.
 
 search = Search
 search.search_repo = Search repository
diff --git a/routers/web/repo/recent_commits.go b/routers/web/repo/recent_commits.go
index b1960dfcdc5f3..f87191e763ab1 100644
--- a/routers/web/repo/recent_commits.go
+++ b/routers/web/repo/recent_commits.go
@@ -4,6 +4,7 @@
 package repo
 
 import (
+	"errors"
 	"net/http"
 
 	"code.gitea.io/gitea/modules/base"
@@ -21,6 +22,7 @@ func RecentCommits(ctx *context.Context) {
 
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsRecentCommits"] = true
+	ctx.PageData["repoLink"] = ctx.Repo.RepoLink
 
 	ctx.HTML(http.StatusOK, tplRecentCommits)
 }
@@ -28,7 +30,11 @@ func RecentCommits(ctx *context.Context) {
 // RecentCommitsData returns JSON of recent commits data
 func RecentCommitsData(ctx *context.Context) {
 	if contributorStats, err := contributors_service.GetContributorStats(ctx, ctx.Cache, ctx.Repo.Repository, ctx.Repo.CommitID); err != nil {
-		ctx.ServerError("GetCodeFrequencyData", err)
+		if errors.Is(err, contributors_service.ErrAwaitGeneration) {
+			ctx.Status(http.StatusAccepted)
+			return
+		}
+		ctx.ServerError("RecentCommitsData", err)
 	} else {
 		ctx.JSON(http.StatusOK, contributorStats["total"].Weeks)
 	}
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
index 8674265a60e6a..6e6e772a25d10 100644
--- a/templates/repo/recent_commits.tmpl
+++ b/templates/repo/recent_commits.tmpl
@@ -1,3 +1,9 @@
 {{if .Permission.CanRead $.UnitTypeCode}}
-  <h1>Recent Commits</h1>
+	<div id="repo-recent-commits-chart"
+		data-locale-loading-title="{{ctx.Locale.Tr "repo.recent_commits.loading_title"}}"
+		data-locale-loading-title-failed="{{ctx.Locale.Tr "repo.recent_commits.loading_title_failed"}}"
+		data-locale-loading-info="{{ctx.Locale.Tr "repo.recent_commits.loading_info"}}"
+		data-locale-component-failed-to-load="{{ctx.Locale.Tr "repo.recent_commits.component_failed_to_load"}}"
+	>
+	</div>
 {{end}}
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
new file mode 100644
index 0000000000000..8e4a8dbf026c4
--- /dev/null
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -0,0 +1,183 @@
+<script>
+import {SvgIcon} from '../svg.js';
+import {
+  Chart,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  Filler,
+} from 'chart.js';
+import {GET} from '../modules/fetch.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import {Bar} from 'vue-chartjs';
+import {
+  startDaysBetween,
+  firstStartDateAfterDate,
+  fillEmptyStartDaysWithZeroes,
+} from '../utils/time.js';
+import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
+import $ from 'jquery';
+
+const {pageData} = window.config;
+
+const colors = {
+  text: '--color-text',
+  border: '--color-secondary-alpha-60',
+  commits: '--color-primary-alpha-60',
+  additions: '--color-green',
+  deletions: '--color-red',
+};
+
+const styles = window.getComputedStyle(document.documentElement);
+const getColor = (name) => styles.getPropertyValue(name).trim();
+
+for (const [key, value] of Object.entries(colors)) {
+  colors[key] = getColor(value);
+}
+
+Chart.defaults.color = colors.text;
+Chart.defaults.borderColor = colors.border;
+
+Chart.register(
+  TimeScale,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LineElement,
+  Filler,
+  zoomPlugin
+);
+
+export default {
+  components: {Bar, SvgIcon},
+  props: {
+    locale: {
+      type: Object,
+      required: true
+    },
+  },
+  data: () => ({
+    isLoading: false,
+    errorText: '',
+    repoLink: pageData.repoLink || [],
+    data: [],
+  }),
+  mounted() {
+    this.fetchGraphData();
+  },
+  methods: {
+    async fetchGraphData() {
+      this.isLoading = true;
+      try {
+        let response;
+        do {
+          response = await GET(`${this.repoLink}/activity/recent-commits/data`);
+          if (response.status === 202) {
+            await new Promise((resolve) => setTimeout(resolve, 1000)); // wait for 1 second before retrying
+          }
+        } while (response.status === 202);
+        if (response.ok) {
+          const data = await response.json();
+          const start = Object.values(data)[0].week;
+          const end = firstStartDateAfterDate(new Date());
+          const startDays = startDaysBetween(new Date(start), new Date(end));
+          this.data = fillEmptyStartDaysWithZeroes(startDays, data).slice(-52);
+          this.errorText = '';
+        } else {
+          this.errorText = response.statusText;
+        }
+      } catch (err) {
+        this.errorText = err.message;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    toGraphData(data) {
+      return {
+        datasets: [
+          {
+            data: data.map((i) => ({x: i.week, y: i.commits})),
+            label: "Commits",
+            backgroundColor: colors["commits"],
+            borderWidth: 0,
+            tension: 0.3,
+          },
+        ],
+      };
+    },
+
+
+    getOptions() {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: true,
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            type: 'time',
+            grid: {
+              display: false,
+            },
+            time: {
+              minUnit: 'week',
+            },
+            ticks: {
+              maxRotation: 0,
+              maxTicksLimit: 52
+            },
+          },
+          y: {
+            ticks: {
+              maxTicksLimit: 6
+            },
+          },
+        },
+      };
+    },
+  },
+};
+  </script>
+<template>
+  <div>
+    <div class="ui header gt-df gt-ac gt-sb">
+      {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
+    </div>
+    <div class="gt-df ui segment main-graph">
+      <div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
+        <div v-if="isLoading">
+          <SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
+          {{ locale.loadingInfo }}
+        </div>
+        <div v-else class="text red">
+          <SvgIcon name="octicon-x-circle-fill"/>
+          {{ errorText }}
+        </div>
+      </div>
+      <Bar
+        v-memo="data" v-if="data.length !== 0"
+        :data="toGraphData(data)" :options="getOptions()"
+      />
+    </div>
+  </div>
+</template>
+<style scoped>
+.main-graph {
+  height: 440px;
+}
+</style>
diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js
new file mode 100644
index 0000000000000..ded10d39be49e
--- /dev/null
+++ b/web_src/js/features/recent-commits.js
@@ -0,0 +1,21 @@
+import {createApp} from 'vue';
+
+export async function initRepoRecentCommits() {
+  const el = document.getElementById('repo-recent-commits-chart');
+  if (!el) return;
+
+  const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
+  try {
+    const View = createApp(RepoRecentCommits, {
+      locale: {
+        loadingTitle: el.getAttribute('data-locale-loading-title'),
+        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
+        loadingInfo: el.getAttribute('data-locale-loading-info'),
+      }
+    });
+    View.mount(el);
+  } catch (err) {
+    console.error('RepoRecentCommits failed to load', err);
+    el.textContent = el.getAttribute('data-locale-component-failed-to-load');
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 078f9fc9df415..d7740d7590a4a 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -84,6 +84,7 @@ import {onDomReady} from './utils/dom.js';
 import {initRepoIssueList} from './features/repo-issue-list.js';
 import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
 import {initRepoContributors} from './features/contributors.js';
+import {initRepoRecentCommits} from './features/recent-commits.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
 
@@ -174,6 +175,7 @@ onDomReady(() => {
   initRepository();
   initRepositoryActionView();
   initRepoContributors();
+  initRepoRecentCommits();
 
   initCommitStatuses();
   initCaptcha();

From 16e5260eb037113ff5fbb9b04085c070de393c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 17 Feb 2024 14:01:26 +0300
Subject: [PATCH 03/10] Fix linting error

---
 web_src/js/components/RepoRecentCommits.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 8e4a8dbf026c4..002e46eb2813c 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -22,7 +22,6 @@ import {
   fillEmptyStartDaysWithZeroes,
 } from '../utils/time.js';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import $ from 'jquery';
 
 const {pageData} = window.config;
 
@@ -108,8 +107,8 @@ export default {
         datasets: [
           {
             data: data.map((i) => ({x: i.week, y: i.commits})),
-            label: "Commits",
-            backgroundColor: colors["commits"],
+            label: 'Commits',
+            backgroundColor: colors['commits'],
             borderWidth: 0,
             tension: 0.3,
           },
@@ -117,7 +116,6 @@ export default {
       };
     },
 
-
     getOptions() {
       return {
         responsive: true,
@@ -152,7 +150,7 @@ export default {
     },
   },
 };
-  </script>
+</script>
 <template>
   <div>
     <div class="ui header gt-df gt-ac gt-sb">

From 2ba7d90b39803365735cc4d2bfe93507004848e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 17 Feb 2024 17:25:59 +0300
Subject: [PATCH 04/10] Remove unnecessary imports

---
 web_src/js/components/RepoRecentCommits.vue | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 002e46eb2813c..4fd2cf87f4442 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -2,19 +2,12 @@
 import {SvgIcon} from '../svg.js';
 import {
   Chart,
-  Title,
   Tooltip,
-  Legend,
   BarElement,
-  CategoryScale,
   LinearScale,
   TimeScale,
-  PointElement,
-  LineElement,
-  Filler,
 } from 'chart.js';
 import {GET} from '../modules/fetch.js';
-import zoomPlugin from 'chartjs-plugin-zoom';
 import {Bar} from 'vue-chartjs';
 import {
   startDaysBetween,
@@ -45,16 +38,9 @@ Chart.defaults.borderColor = colors.border;
 
 Chart.register(
   TimeScale,
-  CategoryScale,
   LinearScale,
   BarElement,
-  Title,
   Tooltip,
-  Legend,
-  PointElement,
-  LineElement,
-  Filler,
-  zoomPlugin
 );
 
 export default {
@@ -121,11 +107,6 @@ export default {
         responsive: true,
         maintainAspectRatio: false,
         animation: true,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
         scales: {
           x: {
             type: 'time',

From 17dc1ebfda3702c9b8ccfe139de70dfda47df2f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Mon, 19 Feb 2024 06:18:38 +0300
Subject: [PATCH 05/10] Deduplicate translations

---
 options/locale/locale_en-US.ini    | 5 +----
 templates/repo/recent_commits.tmpl | 8 ++++----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d288cc19f595f..239e70f6f6d30 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1989,10 +1989,7 @@ contributors.contribution_type.deletions = Deletions
 contributors.what = contributions
 
 recent_commits = Recent Commits
-recent_commits.loading_title = Loading recent commits...
-recent_commits.loading_title_failed = Could not load recent commits
-recent_commits.loading_info = This might take a bit…
-recent_commits.component_failed_to_load = An unexpected error happened.
+recent_commits.what = recent commits
 
 search = Search
 search.search_repo = Search repository
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
index 6e6e772a25d10..40b5b81cd6d39 100644
--- a/templates/repo/recent_commits.tmpl
+++ b/templates/repo/recent_commits.tmpl
@@ -1,9 +1,9 @@
 {{if .Permission.CanRead $.UnitTypeCode}}
 	<div id="repo-recent-commits-chart"
-		data-locale-loading-title="{{ctx.Locale.Tr "repo.recent_commits.loading_title"}}"
-		data-locale-loading-title-failed="{{ctx.Locale.Tr "repo.recent_commits.loading_title_failed"}}"
-		data-locale-loading-info="{{ctx.Locale.Tr "repo.recent_commits.loading_info"}}"
-		data-locale-component-failed-to-load="{{ctx.Locale.Tr "repo.recent_commits.component_failed_to_load"}}"
+		data-locale-loading-title="{{ctx.Locale.Tr "graphs.component_loading" (ctx.Locale.Tr "repo.recent_commits.what")}}"
+		data-locale-loading-title-failed="{{ctx.Locale.Tr "graphs.component_loading_failed" (ctx.Locale.Tr "repo.recent_commits.what")}}"
+		data-locale-loading-info="{{ctx.Locale.Tr "graphs.component_loading_info"}}"
+		data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
 	>
 	</div>
 {{end}}

From de99ebaf948cdc469ca402b10e97169d0d0e01e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Mon, 19 Feb 2024 06:36:46 +0300
Subject: [PATCH 06/10] Deduplicate translations

---
 options/locale/locale_en-US.ini    | 4 +---
 routers/web/repo/recent_commits.go | 2 +-
 templates/repo/recent_commits.tmpl | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 239e70f6f6d30..b9c4758e09701 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1988,9 +1988,6 @@ contributors.contribution_type.additions = Additions
 contributors.contribution_type.deletions = Deletions
 contributors.what = contributions
 
-recent_commits = Recent Commits
-recent_commits.what = recent commits
-
 search = Search
 search.search_repo = Search repository
 search.type.tooltip = Search type
@@ -2599,6 +2596,7 @@ component_loading = Loading %s...
 component_loading_failed = Could not load %s
 component_loading_info = This might take a bit…
 component_failed_to_load = An unexpected error happened.
+recent_commits.what = recent commits
 
 [org]
 org_name_holder = Organization Name
diff --git a/routers/web/repo/recent_commits.go b/routers/web/repo/recent_commits.go
index f87191e763ab1..3507cb8752112 100644
--- a/routers/web/repo/recent_commits.go
+++ b/routers/web/repo/recent_commits.go
@@ -18,7 +18,7 @@ const (
 
 // RecentCommits renders the page to show recent commit frequency on repository
 func RecentCommits(ctx *context.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.recent_commits")
+	ctx.Data["Title"] = ctx.Tr("repo.activity.navbar.recent_commits")
 
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsRecentCommits"] = true
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
index 40b5b81cd6d39..5c241d635cd90 100644
--- a/templates/repo/recent_commits.tmpl
+++ b/templates/repo/recent_commits.tmpl
@@ -1,7 +1,7 @@
 {{if .Permission.CanRead $.UnitTypeCode}}
 	<div id="repo-recent-commits-chart"
-		data-locale-loading-title="{{ctx.Locale.Tr "graphs.component_loading" (ctx.Locale.Tr "repo.recent_commits.what")}}"
-		data-locale-loading-title-failed="{{ctx.Locale.Tr "graphs.component_loading_failed" (ctx.Locale.Tr "repo.recent_commits.what")}}"
+		data-locale-loading-title="{{ctx.Locale.Tr "graphs.component_loading" (ctx.Locale.Tr "graphs.recent_commits.what")}}"
+		data-locale-loading-title-failed="{{ctx.Locale.Tr "graphs.component_loading_failed" (ctx.Locale.Tr "graphs.recent_commits.what")}}"
 		data-locale-loading-info="{{ctx.Locale.Tr "graphs.component_loading_info"}}"
 		data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
 	>

From 67aa2e16ea9b26441931c7feff243c0da05cf057 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 24 Feb 2024 08:15:07 +0300
Subject: [PATCH 07/10] Use util functions and variables for common code

---
 web_src/js/components/RepoRecentCommits.vue | 25 +++++----------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 4fd2cf87f4442..dd5870d646bc7 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -14,27 +14,14 @@ import {
   firstStartDateAfterDate,
   fillEmptyStartDaysWithZeroes,
 } from '../utils/time.js';
+import {chartJsColors} from '../utils/color.js';
+import {sleep} from '../utils.js';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 
 const {pageData} = window.config;
 
-const colors = {
-  text: '--color-text',
-  border: '--color-secondary-alpha-60',
-  commits: '--color-primary-alpha-60',
-  additions: '--color-green',
-  deletions: '--color-red',
-};
-
-const styles = window.getComputedStyle(document.documentElement);
-const getColor = (name) => styles.getPropertyValue(name).trim();
-
-for (const [key, value] of Object.entries(colors)) {
-  colors[key] = getColor(value);
-}
-
-Chart.defaults.color = colors.text;
-Chart.defaults.borderColor = colors.border;
+Chart.defaults.color = chartJsColors.text;
+Chart.defaults.borderColor = chartJsColors.border;
 
 Chart.register(
   TimeScale,
@@ -68,7 +55,7 @@ export default {
         do {
           response = await GET(`${this.repoLink}/activity/recent-commits/data`);
           if (response.status === 202) {
-            await new Promise((resolve) => setTimeout(resolve, 1000)); // wait for 1 second before retrying
+            await sleep(1000); // wait for 1 second before retrying
           }
         } while (response.status === 202);
         if (response.ok) {
@@ -94,7 +81,7 @@ export default {
           {
             data: data.map((i) => ({x: i.week, y: i.commits})),
             label: 'Commits',
-            backgroundColor: colors['commits'],
+            backgroundColor: chartJsColors['commits'],
             borderWidth: 0,
             tension: 0.3,
           },

From c2c675eed53b124b0aeecda7e474a1cb6a2eb4a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 24 Feb 2024 12:07:02 +0300
Subject: [PATCH 08/10] Make graph smaller

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

diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index dd5870d646bc7..77697cd413f96 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -144,6 +144,6 @@ export default {
 </template>
 <style scoped>
 .main-graph {
-  height: 440px;
+  height: 250px;
 }
 </style>

From f8771d5a9ee189bd6754f04e89329c2848a69101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 24 Feb 2024 12:50:17 +0300
Subject: [PATCH 09/10] Apply suggestions from code review

---
 routers/web/repo/recent_commits.go          | 1 -
 templates/repo/recent_commits.tmpl          | 1 +
 web_src/js/components/RepoRecentCommits.vue | 9 +++++----
 web_src/js/features/recent-commits.js       | 3 ++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/routers/web/repo/recent_commits.go b/routers/web/repo/recent_commits.go
index 3507cb8752112..b4de1919a67e8 100644
--- a/routers/web/repo/recent_commits.go
+++ b/routers/web/repo/recent_commits.go
@@ -22,7 +22,6 @@ func RecentCommits(ctx *context.Context) {
 
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsRecentCommits"] = true
-	ctx.PageData["repoLink"] = ctx.Repo.RepoLink
 
 	ctx.HTML(http.StatusOK, tplRecentCommits)
 }
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
index 5c241d635cd90..04757338d42e4 100644
--- a/templates/repo/recent_commits.tmpl
+++ b/templates/repo/recent_commits.tmpl
@@ -4,6 +4,7 @@
 		data-locale-loading-title-failed="{{ctx.Locale.Tr "graphs.component_loading_failed" (ctx.Locale.Tr "graphs.recent_commits.what")}}"
 		data-locale-loading-info="{{ctx.Locale.Tr "graphs.component_loading_info"}}"
 		data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
+		data-repo-link="{{ctx.Repo.RepoLink}}"
 	>
 	</div>
 {{end}}
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 77697cd413f96..4a1bbcd791751 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -18,8 +18,6 @@ import {chartJsColors} from '../utils/color.js';
 import {sleep} from '../utils.js';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 
-const {pageData} = window.config;
-
 Chart.defaults.color = chartJsColors.text;
 Chart.defaults.borderColor = chartJsColors.border;
 
@@ -37,11 +35,14 @@ export default {
       type: Object,
       required: true
     },
+    repoLink: {
+      type: String,
+      required: true
+    }
   },
   data: () => ({
     isLoading: false,
     errorText: '',
-    repoLink: pageData.repoLink || [],
     data: [],
   }),
   mounted() {
@@ -53,7 +54,7 @@ export default {
       try {
         let response;
         do {
-          response = await GET(`${this.repoLink}/activity/recent-commits/data`);
+          response = await GET(`${repoLink}/activity/recent-commits/data`);
           if (response.status === 202) {
             await sleep(1000); // wait for 1 second before retrying
           }
diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js
index ded10d39be49e..a32670782665b 100644
--- a/web_src/js/features/recent-commits.js
+++ b/web_src/js/features/recent-commits.js
@@ -11,7 +11,8 @@ export async function initRepoRecentCommits() {
         loadingTitle: el.getAttribute('data-locale-loading-title'),
         loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
         loadingInfo: el.getAttribute('data-locale-loading-info'),
-      }
+      },
+      repoLink: el.getAttribute('data-repo-link')
     });
     View.mount(el);
   } catch (err) {

From bc0294d7521dcb838b260f9dc89d5f6976892737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=9Eahin=20Akkaya?= <sahin@sahinakkaya.dev>
Date: Sat, 24 Feb 2024 12:57:13 +0300
Subject: [PATCH 10/10] Revert "Apply suggestions from code review"

This reverts commit f8771d5a9ee189bd6754f04e89329c2848a69101.
---
 routers/web/repo/recent_commits.go          | 1 +
 templates/repo/recent_commits.tmpl          | 1 -
 web_src/js/components/RepoRecentCommits.vue | 9 ++++-----
 web_src/js/features/recent-commits.js       | 3 +--
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/routers/web/repo/recent_commits.go b/routers/web/repo/recent_commits.go
index b4de1919a67e8..3507cb8752112 100644
--- a/routers/web/repo/recent_commits.go
+++ b/routers/web/repo/recent_commits.go
@@ -22,6 +22,7 @@ func RecentCommits(ctx *context.Context) {
 
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsRecentCommits"] = true
+	ctx.PageData["repoLink"] = ctx.Repo.RepoLink
 
 	ctx.HTML(http.StatusOK, tplRecentCommits)
 }
diff --git a/templates/repo/recent_commits.tmpl b/templates/repo/recent_commits.tmpl
index 04757338d42e4..5c241d635cd90 100644
--- a/templates/repo/recent_commits.tmpl
+++ b/templates/repo/recent_commits.tmpl
@@ -4,7 +4,6 @@
 		data-locale-loading-title-failed="{{ctx.Locale.Tr "graphs.component_loading_failed" (ctx.Locale.Tr "graphs.recent_commits.what")}}"
 		data-locale-loading-info="{{ctx.Locale.Tr "graphs.component_loading_info"}}"
 		data-locale-component-failed-to-load="{{ctx.Locale.Tr "graphs.component_failed_to_load"}}"
-		data-repo-link="{{ctx.Repo.RepoLink}}"
 	>
 	</div>
 {{end}}
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 4a1bbcd791751..77697cd413f96 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -18,6 +18,8 @@ import {chartJsColors} from '../utils/color.js';
 import {sleep} from '../utils.js';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 
+const {pageData} = window.config;
+
 Chart.defaults.color = chartJsColors.text;
 Chart.defaults.borderColor = chartJsColors.border;
 
@@ -35,14 +37,11 @@ export default {
       type: Object,
       required: true
     },
-    repoLink: {
-      type: String,
-      required: true
-    }
   },
   data: () => ({
     isLoading: false,
     errorText: '',
+    repoLink: pageData.repoLink || [],
     data: [],
   }),
   mounted() {
@@ -54,7 +53,7 @@ export default {
       try {
         let response;
         do {
-          response = await GET(`${repoLink}/activity/recent-commits/data`);
+          response = await GET(`${this.repoLink}/activity/recent-commits/data`);
           if (response.status === 202) {
             await sleep(1000); // wait for 1 second before retrying
           }
diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js
index a32670782665b..ded10d39be49e 100644
--- a/web_src/js/features/recent-commits.js
+++ b/web_src/js/features/recent-commits.js
@@ -11,8 +11,7 @@ export async function initRepoRecentCommits() {
         loadingTitle: el.getAttribute('data-locale-loading-title'),
         loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
         loadingInfo: el.getAttribute('data-locale-loading-info'),
-      },
-      repoLink: el.getAttribute('data-repo-link')
+      }
     });
     View.mount(el);
   } catch (err) {