johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { Month } from '#lib/activity.ts';
	import { monthName } from '#lib/activity.ts';
	import { plural, urlPath } from '#lib/format.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import Empty from '#lib/molecules/Empty.svelte';
	/**
	 * What an account did, a month at a time, newest first, as counts:
	 * its pushes to each repository, with a bar each, then what it made,
	 * opened and wrote. Its repositories' pages are under `base`, and all
	 * it did at `all`.
	 */
	let { months, base, all }: { months: Month[]; base: string; all: string } = $props();
</script>

<section class="rollup">
	<div class="section">
		<h2>Activity</h2>
		<a class="end mute" href={all}>All activity</a>
	</div>
	{#each months as m (m.month)}
		{@const most = Math.max(1, ...m.pushed.map((r) => r.pushes))}
		<h3 class="feed-day">{monthName(m.month)}</h3>
		<ul class="rollup-list">
			{#if m.pushes}
				<li>
					<Icon name="commit" />
					<div>
						<p>
							{`Pushed ${plural(m.pushes, 'time', 'times')} to ${plural(m.pushed.length, 'repository', 'repositories')}`}
						</p>
						<ul class="rollup-repos">
							{#each m.pushed as r (r.name)}
								<li>
									<a href="{base}/{urlPath(r.name)}">{r.name}</a><span class="mute"
										>{plural(r.pushes, 'push', 'pushes')}</span
									><span class="rollup-bar"
										><span style:width="{(r.pushes / most) * 100}%"></span></span
									>
								</li>
							{/each}
						</ul>
					</div>
				</li>
			{/if}
			{#if m.repos}<li>
					<Icon name="repo" />
					<p>{`Created ${plural(m.repos, 'repository', 'repositories')}`}</p>
				</li>{/if}
			{#if m.pulls}<li>
					<Icon name="pull" />
					<p>{`Opened ${plural(m.pulls, 'pull', 'pulls')}`}</p>
				</li>{/if}
			{#if m.issues}<li>
					<Icon name="issue" />
					<p>{`Opened ${plural(m.issues, 'issue', 'issues')}`}</p>
				</li>{/if}
			{#if m.comments}<li>
					<Icon name="chat" />
					<p>{`Wrote ${plural(m.comments, 'comment', 'comments')}`}</p>
				</li>{/if}
		</ul>
	{:else}
		<div class="box"><Empty title="Nothing done in the last year" /></div>
	{/each}
</section>