add commit page

assets/style.css

@@ -15,7 +15,7 @@ p {
 	color: #ffffff;
 	display: flex;
 	flex-direction: column;
-	gap: 2rem;
+	gap: 1rem;
 	justify-content: center;
 	align-items: center;
 	width: 1050px;
@@ -104,6 +104,10 @@ p {
 	font-size: 2.5rem;
 	color: #6d728f;
 }
+.commit .repo-name {
+	font-size: 2.5rem;
+	color: #6d728f;
+}
 
 .repo .repo-name {
 	font-weight: 800;
@@ -140,6 +144,10 @@ p {
 	width: 100%;
 }
 
+.info-line:last-child {
+	margin-top: 1rem;
+}
+
 .info-line .author {
 	color: #ffffff;
 	font-weight: 700;

server.js

@@ -74,6 +74,53 @@ app.get('/:owner/:repo', async function (req, res) {
 	res.send(await render(html))
 })
 
+app.get('/:owner/:repo/commit/:hash', async function (req, res) {
+	const commitResp = await fetch(
+		`${forgejoBaseUrl}/api/v1/repos/${encodeURIComponent(
+			req.params.owner
+		)}/${encodeURIComponent(req.params.repo)}/git/commits/${encodeURIComponent(
+			req.params.hash
+		)}`
+	)
+	if (!commitResp.ok) {
+		res.status(commitResp.status)
+		res.end()
+		return
+	}
+	const commit = await commitResp.json()
+	let languages = {}
+	const languagesResp = await fetch(
+		`${forgejoBaseUrl}/api/v1/repos/${encodeURIComponent(
+			req.params.owner
+		)}/${encodeURIComponent(req.params.repo)}/languages`
+	)
+	if (languagesResp.ok) {
+		languages = getLanguagePercentages(await languagesResp.json())
+	}
+	const html = await eta.renderAsync('commit', {
+		commit: {
+			...commit.commit,
+			sha: commit.sha,
+			repository: {
+				full_name: `${req.params.owner}/${req.params.repo}`
+			},
+			committer: commit.committer,
+			stats: commit.stats,
+			created_at: commit.created
+		},
+		languages,
+		languageColors,
+		debug
+	})
+	if (debug) {
+		res.send(await renderHtml(html))
+		return
+	}
+	res.type('png')
+	res.set('Content-Disposition', 'inline')
+	res.send(await render(html))
+})
+
 app.get('/:owner/:repo/issue/:num', async function (req, res) {
 	const issueResp = await fetch(
 		`${forgejoBaseUrl}/api/v1/repos/${encodeURIComponent(

views/commit.eta

@@ -0,0 +1,39 @@
+<% layout('layout') %>
+<%
+	let title = it.commit.message.split('\n')[0]
+	let body = it.commit.message.split('\n').slice(1).join('\n').trim()
+	const titleCharLimit = 50
+	if (title.length > titleCharLimit) {
+		title = title.slice(0, titleCharLimit).trim() + '...'
+	}
+%>
+<div class="main commit">
+	<div class="contents">
+		<div class="info">
+			<p class="repo-name">@<%= it.commit.repository.full_name %></p>
+			<p class="title"><%= title %></p>
+			<% if (body) { %>
+				<p class="description">
+					<%= body %>
+				</p>
+			<% } %>
+		</div>
+		<div class="graphics">
+			<img width="120" height="120" src="<%= it.commit.committer.avatar_url %>?size=120"></img>
+		</div>
+	</div>
+	<div class="commit-stats info-line">
+		<p><%= it.commit.stats.total %> lines changed</p>
+		<p style="display: flex; gap: 0.25em; font-weight: 600;">
+			<span style="color: #53d37c;">+<%= it.commit.stats.additions %></span>
+			<span style="color: #d35353;">-<%= it.commit.stats.deletions %></span>
+		</p>
+	</div>
+	<div class="info-line">
+		<img class="avatar" width="48" height="48" src="<%= it.commit.committer.avatar_url %>?size=48"></img>
+		<p class="author"><%= it.commit.committer.full_name || it.commit.committer.login %></p>
+		<p>committed <%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.commit.created_at)) %></p>
+		<p>·</p>
+		<p><%= it.commit.sha.slice(0, 7) %></p>
+	</div>
+</div>