alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import { encodePathSegments } from "./urls";
4
5 interface Props {
6 ownerHandle: string;
7 repoName: string;
8 ref: string;
9 // repo-relative path, empty at the tree root
10 path: string;
11 }
12
13 let { ownerHandle, repoName, ref, path }: Props = $props();
14
15 const treeBase = $derived(`/${ownerHandle}/${repoName}/tree/${encodeURIComponent(ref)}`);
16
17 const crumbs = $derived.by(() => {
18 const parts = path.split("/").filter(Boolean);
19 return [
20 { name: repoName, href: treeBase, last: parts.length === 0 },
21 ...parts.map((name, index) => ({
22 name,
23 href: `${treeBase}/${encodePathSegments(parts.slice(0, index + 1).join("/"))}`,
24 last: index === parts.length - 1
25 }))
26 ];
27 });
28</script>
29
30<div
31 class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-canvas px-3 py-1 whitespace-nowrap"
32>
33 {#each crumbs as crumb (crumb.href)}
34 {#if crumb.last}
35 <span class="text-foreground-default" aria-current="page">{crumb.name}</span>
36 {:else}
37 <a
38 href={resolve(crumb.href as "/")}
39 class="text-foreground-muted no-underline hover:underline">{crumb.name}</a
40 >
41 <span class="text-foreground-muted" aria-hidden="true">/</span>
42 {/if}
43 {/each}
44</div>