johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import { scrollRow } from '#lib/rows.ts';
	import { KINDS } from '#lib/feed.ts';
	import Feed from '#lib/organisms/Feed.svelte';
	import Meta from '#lib/atoms/Meta.svelte';
	import TabLink from '#lib/molecules/TabLink.svelte';
	import Empty from '#lib/molecules/Empty.svelte';
	let { data } = $props();
	const feed = $derived(data.following ? '' : 'feed=everyone');
	const href = (kind: string | null, tab = feed) => {
		const q = [tab, kind && `kind=${kind}`].filter(Boolean).join('&');
		return q ? `/?${q}` : '/';
	};
	// What an empty page says, of the kind asked for and whose.
	const named = $derived(KINDS.find(([k]) => k === data.kind)?.[1].toLowerCase());
	const nothing = $derived(
		named
			? `No ${named} lately${data.following ? ' from the people you follow' : ''}`
			: 'Nothing yet from the people you follow'
	);
</script>

<Meta
	title="knotless"
	about="Git that lives in your Atmosphere account. Clone and push with plain git, and let agents work over MCP."
	card="/card.png"
/>

<section class="intro">
	<p>
		<b>knotless</b> is git that lives in your
		<a href="https://atmosphereaccount.com/" target="_blank" rel="noopener noreferrer"
			>Atmosphere account</a
		>. Push and clone with plain git, and let agents commit over MCP.
		<a href="/start">Getting started →</a>
	</p>
</section>
{#if data.feed}
	{#if data.signedIn}
		<nav class="tabs" data-sveltekit-reset="false" {@attach scrollRow(data.following)}>
			<TabLink href={href(data.kind, '')} label="Following" current={data.following} />
			<TabLink href={href(data.kind, 'feed=everyone')} label="Everyone" current={!data.following} />
		</nav>
	{/if}
	<nav class="chips feed-kinds" data-sveltekit-reset="false" {@attach scrollRow(data.kind)}>
		<a href={href(null)} aria-current={data.kind ? undefined : 'true'}>All</a>
		{#each KINDS as [k, name] (k)}{#if data.following || k !== 'stars'}<a
					href={href(k)}
					aria-current={data.kind === k ? 'true' : undefined}>{name}</a
				>{/if}{/each}
	</nav>
	{#snippet none()}<Empty title={nothing}
			><a href={data.following ? href(data.kind, 'feed=everyone') : href(null)}
				>{data.following ? 'See everyone’s' : 'See all kinds'}</a
			></Empty
		>{/snippet}
	<Feed events={data.feed.events} empty={data.following || data.kind ? none : undefined} />
{/if}