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 RepoLink from '#lib/molecules/RepoLink.svelte';
	import StepSheet from '#lib/organisms/StepSheet.svelte';
	import { repoHref, urlPath } from '#lib/format.ts';
	import { stepsHref } from '#lib/steps.ts';
	let { data } = $props();
	const s = $derived(data.step);
	const source = $derived(
		repoHref(s.repo.handle, s.repo.name, `/blob/${s.commit}/${urlPath(s.path)}`)
	);
</script>

<Meta
	title="{s.name} · {s.repo.handle}/{s.repo.name}"
	about={s.description ?? `A shared step from ${s.repo.handle}/${s.repo.name}.`}
/>

<section class="step-page">
	<nav class="crumbs">
		<a href={stepsHref()}>Shared steps</a><span class="sep">/</span><a
			href={stepsHref(s.repo.handle, s.repo.name)}>{`${s.repo.handle}/${s.repo.name}`}</a
		>
	</nav>
	<div class="step-head">
		<h1><Icon name="workflow" />{s.name}</h1>
		<span class="tag">{s.version}</span>
	</div>
	<p class="meta">
		<RepoLink owner={s.repo.handle} name={s.repo.name} /><span class="sep" aria-hidden="true"
			>·</span
		><a href={source}><Icon name="code" />{s.path}</a>
	</p>
	{#if s.description}<p class="lede">{s.description}</p>{/if}
	<StepSheet step={s} />
</section>