johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type { ReleasesView } from '#lib/lexicons/dev/knotless/defs.ts';
import Icon from '#lib/atoms/Icon.svelte';
import ReleaseName from '#lib/molecules/ReleaseName.svelte';
import { plural } from '#lib/format.ts';
import { releaseAnchor, releasesHref } from '#lib/releases.ts';
import { stepOf, stepsHref } from '#lib/steps.ts';
/** What `owner`'s repository `name` publishes, in one line under its name: the release to show, its package's latest or else its newest pre-release, and its packages, how many of them images; and the shared steps among them, linked to the directory of its steps. */
let {
owner,
name,
releases: r
}: { owner: string; name: string; releases: ReleasesView } = $props();
const href = $derived(releasesHref(owner, name));
const images = $derived(r.packages.filter((p) => p.image).length);
const steps = $derived(r.packages.filter((p) => stepOf(p.name)).length);
const said = $derived(
images
? `${plural(r.packages.length, 'package', 'packages')}, ${images === r.packages.length ? (images === 1 ? 'an image' : 'all images') : plural(images, 'image', 'images')}`
: plural(r.packages.length, 'package', 'packages')
);
</script>
<p class="release-strip" aria-label="Releases">
<ReleaseName release={r.release} href="{href}#{releaseAnchor(r.release)}" />
<span class="sep" aria-hidden="true">·</span>
<a class="mute fact" {href}><Icon name={images ? 'container' : 'package'} />{said}</a>
{#if steps}<span class="sep" aria-hidden="true">·</span><a
class="mute fact"
href={stepsHref(owner, name)}
><Icon name="workflow" />{plural(steps, 'shared step', 'shared steps')}</a
>{/if}
</p>