og/views/repo.eta

<% layout('layout') %>
<%
	let description = it.repo.description?.replace(/https?:\/\/([\S]+)/g, '$1')
	function prettyNumber(number) {
		if (number < 10) return number
		if (number < 1000) return Math.floor(number/10) * 10 + '+'
		return Math.floor(number / 1000)+'k'
	}
%>
<div class="main repo">
	<div class="contents">
		<div class="info">
			<p class="author"><span><%= it.repo.owner.full_name || it.repo.owner.login %></span><span class="username">@<%= it.repo.owner.login %></span></p>
			<p class="title"><%= it.repo.name %></p>
			<% if (description) { %>
				<p class="description"><%= description %></p>
			<% } %>
		</div>
		<div class="graphics">
			<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
		</div>
	</div>
	<div class="info-line">
		<% if (!it.repo.empty) { %>
			<div class="fact">
				<p class="fact-heading"><%= prettyNumber(it.repo.commits_count) %></p>
				<p class="fact-subtitle"><%= (it.repo.commits_count) != 1 ? 'Commits' : 'Commit' %></p>
			</div>
			<div class="fact">
				<p class="fact-heading"><%= prettyNumber(it.repo.open_issues_count) %></p>
				<p class="fact-subtitle"><%= (it.repo.open_issues_count) != 1 ? 'Issues' : 'Issue' %></p>
			</div>
			<div class="fact">
				<p class="fact-heading"><%= prettyNumber(it.repo.stars_count) %></p>
				<p class="fact-subtitle"><%= (it.repo.stars_count) != 1 ? 'Stars' : 'Star' %></p>
			</div>
			<div class="fact">
				<p class="fact-heading"><%= prettyNumber(it.repo.forks_count) %></p>
				<p class="fact-subtitle"><%= (it.repo.forks_count) != 1 ? 'Forks' : 'Fork' %></p>
			</div>
		<% } %>
		<div class="fact">
			<p class="fact-subtitle">Last updated</p>
			<p class="fact-heading"><%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.repo.updated_at)) %></p>
		</div>
	</div>
</div>
<style>
	.repo .title {
		white-space: nowrap;
	}
	.repo .author {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-size: 2.5rem;
		font-weight: 600;
		color: #aeb3d0;
	}
	.repo .author .username {
		font-size: 1.75rem;
		font-weight: 400;
		color: #6d728f;
	}
	.repo .repo-name {
		font-weight: 800;
		font-size: 4.5rem;
		line-height: 1.2em;
	}
	.fact {
		display: flex;
		margin-right: 0.5em;
		font-size: 1.5rem;
		flex-direction: column;
	}
	.fact-heading {
		color: #8c91af;
		font-size: 2rem;
		font-weight: 600;
	}
</style>