johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import CopyButton from '#lib/atoms/CopyButton.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import { scrollRow } from '#lib/rows.ts';
	import { archiveHref } from '#lib/format.ts';
	/** The Code button, opening to how to clone the repository `name` that `authority` owns, and to download its files at `rev`. */
	let { authority, name, rev }: { authority: string; name: string; rev: string } = $props();
	const clone = $derived(`git clone knotless://${authority}/${name}`);
	let open = $state(false);
	function outside(e: MouseEvent) {
		if (open && !(e.target as Element).closest('.clone-menu')) open = false;
	}
</script>

<svelte:window onclick={outside} onkeydown={(e) => e.key === 'Escape' && (open = false)} />

<details class="popover clone-menu" bind:open>
	<summary class="btn primary"><Icon name="code" />Code<Icon name="caret" /></summary>
	<div class="menu">
		<div class="menu-head">Clone with git</div>
		<div class="clone">
			<code {@attach scrollRow(clone)}>{clone}</code><CopyButton text={clone} />
		</div>
		<p>Needs the knotless git helper. <a href="/start">Set it up</a></p>
		<div class="menu-head">Download</div>
		<a href={archiveHref(authority, name, rev, 'zip')} download
			><Icon name="download" />Download zip</a
		>
		<a href={archiveHref(authority, name, rev, 'tar.gz')} download
			><Icon name="download" />Download tar.gz</a
		>
	</div>
</details>