alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import GitBranch from "$icon/git-branch";
3 import Logs from "$icon/logs";
4 import Tags from "$icon/tags";
5 import TriangleAlert from "$icon/triangle-alert";
6 import BranchList from "./BranchList.svelte";
7 import CommitList from "./CommitList.svelte";
8 import EmptyRepo from "./EmptyRepo.svelte";
9 import FileTree from "./FileTree.svelte";
10 import LanguageBar from "./LanguageBar.svelte";
11 import PanelHeader from "./PanelHeader.svelte";
12 import Readme from "./Readme.svelte";
13 import RepoToolbar from "./RepoToolbar.svelte";
14 import TagList from "./TagList.svelte";
15 import type { loadRepoIndex } from "$lib/api/repoIndex";
16 import type { RepoInfo } from "./types";
17
18 interface Props {
19 repo: RepoInfo;
20 data: Awaited<ReturnType<typeof loadRepoIndex>>;
21 bobbinUrl: string;
22 }
23
24 let { repo, data, bobbinUrl }: Props = $props();
25
26 const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
27 const encodedRef = $derived(encodeURIComponent(data.ref));
28 const refsCapped = $derived(data.refs.capped);
29</script>
30
31<section
32 class="relative mx-auto w-full rounded bg-background-default px-6 py-4 text-foreground-default"
33>
34 {#if data.knotUnreachable}
35 <div class="flex h-96 items-center justify-center text-center text-foreground-danger">
36 <span class="flex items-center gap-2">
37 <TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
38 The knot hosting this repository is unreachable.
39 </span>
40 </div>
41 {:else if data.isEmpty}
42 <EmptyRepo {repo} />
43 {:else}
44 {#if data.languages.length > 0}
45 <LanguageBar languages={data.languages} />
46 {/if}
47
48 <RepoToolbar
49 {repo}
50 ref={data.ref}
51 refs={data.refs}
52 totalCommits={data.totalCommits}
53 totalBranches={data.totalBranches}
54 totalTags={data.totalTags}
55 {bobbinUrl}
56 />
57
58 <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
59 <div class="min-w-0 md:border-r md:border-border-default md:pr-2">
60 <FileTree
61 ownerHandle={repo.ownerHandle}
62 repoName={repo.name}
63 ref={data.ref}
64 entries={data.files}
65 />
66 </div>
67
68 <div class="hidden md:block">
69 {#if data.commits.length > 0}
70 <div class="px-2 pb-4">
71 <PanelHeader
72 title="Commits"
73 icon={Logs}
74 href={`${base}/commits/${encodedRef}`}
75 count={data.totalCommits}
76 />
77 <CommitList
78 ownerHandle={repo.ownerHandle}
79 repoName={repo.name}
80 commits={data.commits}
81 tagsByCommit={data.tagsByCommit}
82 />
83 </div>
84 {/if}
85
86 {#if data.branches.length > 0}
87 <div class="border-t border-border-default px-2 py-4">
88 <PanelHeader
89 title="Branches"
90 icon={GitBranch}
91 href={`${base}/branches`}
92 count={data.totalBranches}
93 approximate={refsCapped}
94 />
95 <BranchList
96 ownerHandle={repo.ownerHandle}
97 repoName={repo.name}
98 currentRef={data.ref}
99 branches={data.branches}
100 />
101 </div>
102 {/if}
103
104 {#if data.tags.length > 0}
105 <div class="border-t border-border-default px-2 py-4">
106 <PanelHeader
107 title="Tags"
108 icon={Tags}
109 href={`${base}/tags`}
110 count={data.totalTags}
111 approximate={refsCapped}
112 />
113 <TagList ownerHandle={repo.ownerHandle} repoName={repo.name} tags={data.tags} />
114 </div>
115 {/if}
116 </div>
117 </div>
118 {/if}
119</section>
120
121{#if data.readme}
122 <Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
123{/if}