johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import Icon from '#lib/atoms/Icon.svelte';
	import Meta from '#lib/atoms/Meta.svelte';
	import More from '#lib/atoms/More.svelte';
	import Empty from '#lib/molecules/Empty.svelte';
	import StepList from '#lib/organisms/StepList.svelte';
	import { repoHref } from '#lib/format.ts';
	import { Pages } from '#lib/pages.svelte.ts';
	import { stepsHref } from '#lib/steps.ts';
	let { data } = $props();
	const repo = $derived(data.repo);
	const pages = new Pages(
		() => data,
		(d) => ({ items: d.steps.steps, cursor: d.steps.cursor }),
		(s) => s.uri
	);
	// A search cleared keeps to the repository it was of.
	const clear = $derived(repo ? stepsHref(repo.owner, repo.name) : stepsHref());
</script>

<Meta
	title={repo ? `steps of ${repo.owner}/${repo.name} · knotless` : 'steps · knotless'}
	about="Steps any knotless workflow can use, from the repositories that publish them."
/>

<section class="steps-page">
	{#if repo}
		<h1>
			Shared steps of <a href={repoHref(repo.owner, repo.name)}>{`${repo.owner}/${repo.name}`}</a>
		</h1>
	{:else}
		<h1>Shared steps</h1>
	{/if}
	<p class="lede">
		Steps any workflow can use. <a href="/docs/design/reusable-workflows/" data-sveltekit-reload
			>How shared steps work</a
		>
	</p>
	<form class="query" role="search" action="/steps">
		<Icon name="search" /><input
			type="search"
			name="q"
			value={data.q}
			placeholder="Find a step by name"
			aria-label="Find a step by name"
		/>
		{#if repo}<input type="hidden" name="repo" value="{repo.owner}/{repo.name}" />{/if}
	</form>
	<div class="box items">
		<StepList steps={pages.items}>
			{#snippet empty()}
				{#if !data.indexed}
					<Empty title="Steps are off here">This server keeps no index of them.</Empty>
				{:else if data.q}
					<Empty title="No steps start with “{data.q}”"><a href={clear}>Clear the search</a></Empty>
				{:else if repo}
					<Empty title="{repo.owner}/{repo.name} shares no steps yet"
						><a href={stepsHref()}>See every shared step</a></Empty
					>
				{:else}
					<Empty title="No shared steps yet"
						>A step file published from a repository shows here. <a
							href="/docs/design/reusable-workflows/"
							data-sveltekit-reload>How to publish one</a
						></Empty
					>
				{/if}
			{/snippet}
		</StepList>
	</div>
	<More {pages} label="More steps" />
</section>