johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { StepView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type { Snippet } from 'svelte';
	import { plural, repoHref } from '#lib/format.ts';
	import { asksFor, stepHref } from '#lib/steps.ts';
	/**
	 * Shared steps, each with its repository, what it does, its latest
	 * version, how many repositories use it and what it asks for; `empty`
	 * where its rows would be, with none.
	 */
	let { steps, empty }: { steps: StepView[]; empty: Snippet } = $props();
</script>

<ul class="list steps">
	{#each steps as s (s.uri)}
		<li>
			<div class="grow">
				<a class="title" href={stepHref(s.repo.handle, s.repo.name, s.name)}>{s.name}</a>
				<div class="meta">
					<a class="repo" href={repoHref(s.repo.handle, s.repo.name)}
						>{`${s.repo.handle}/${s.repo.name}`}</a
					>
				</div>
				<div class="meta">{s.description ?? 'No description'}</div>
			</div>
			<div class="step-facts meta">
				<span>{s.version}</span>
				<span
					>{s.useCount
						? `Used by ${plural(s.useCount, 'repository', 'repositories')}`
						: 'Not used yet'}</span
				>
				<span>{asksFor(s.secretCount)}</span>
			</div>
		</li>
	{:else}
		<li class="blank">{@render empty()}</li>
	{/each}
</ul>