alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import GitFork from "$icon/git-fork";
4 import Globe from "$icon/globe";
5 import Star from "$icon/star";
6 import Avatar from "$lib/components/ui/Avatar.svelte";
7 import Button from "$lib/components/ui/Button.svelte";
8 import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
9 import Tag from "$lib/components/ui/Tag.svelte";
10 import { getAuth } from "$lib/auth.svelte";
11 import StarButton from "./StarButton.svelte";
12 import type { RepoCounts, RepoInfo } from "./types";
13
14 interface Props {
15 repo: RepoInfo;
16 counts: RepoCounts;
17 viewerStarRkey?: string | null;
18 }
19
20 let { repo, counts, viewerStarRkey }: Props = $props();
21
22 const auth = getAuth();
23 const signedIn = $derived(Boolean(auth.currentDid));
24 const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
25 const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");
26 const topics = $derived([...new Set(repo.topics ?? [])]);
27</script>
28
29{#snippet repoActions(className: string)}
30 <div class={className}>
31 {#if signedIn}
32 <StarButton
33 repoDid={repo.repoDid ?? ""}
34 repoOwnerHandle={repo.ownerHandle}
35 repoName={repo.name}
36 initialCount={counts.stars}
37 initialRkey={viewerStarRkey}
38 />
39 {:else}
40 <Button
41 href={resolve(`${base}/stars` as "/")}
42 variant="default"
43 size="sm"
44 icon={Star}
45 title="Starred by"
46 >
47 {counts.stars}
48 </Button>
49 {/if}
50
51 <ButtonGroup>
52 <Button
53 href={resolve(`${base}/fork` as "/")}
54 variant="default"
55 size="sm"
56 insetShadow={true}
57 icon={GitFork}
58 >
59 Fork
60 </Button>
61 <Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="sm" title="Forked by">
62 {counts.forks}
63 </Button>
64 </ButtonGroup>
65 </div>
66{/snippet}
67
68<section class="mb-2 px-4 py-2">
69 <div class="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row">
70 <div class="flex min-w-0 flex-col gap-2">
71 <div class="flex flex-wrap items-center gap-2 typography-paragraph-large font-normal">
72 <a
73 href={resolve(`/${repo.ownerHandle}` as "/")}
74 class="flex items-center gap-2 text-foreground-default no-underline hover:underline"
75 >
76 <Avatar did={repo.ownerDid} handle={repo.ownerHandle} size="size-6" tiny />
77 {repo.ownerHandle}
78 </a>
79 <span class="text-foreground-subtle select-none">/</span>
80 <a
81 href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
82 class="font-bold text-foreground-default no-underline hover:underline"
83 >
84 {repo.name}
85 </a>
86 </div>
87
88 {#if repo.source}
89 <div class="flex flex-wrap items-center gap-1 text-sm text-foreground-muted">
90 <GitFork class="size-3 shrink-0" aria-hidden="true" />
91 <span>forked from</span>
92 <a
93 href={resolve(`/${repo.source.ownerHandle}/${repo.source.name}` as "/")}
94 class="underline"
95 >
96 {repo.source.ownerHandle}/{repo.source.name}
97 </a>
98 </div>
99 {/if}
100 </div>
101
102 {@render repoActions("flex shrink-0 items-start gap-2 hidden sm:flex")}
103 </div>
104
105 <div class="flex flex-wrap items-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted">
106 {#if repo.description}
107 <span>{repo.description}</span>
108 {:else}
109 <span class="italic">This repository has no description</span>
110 {/if}
111
112 {#if repo.website}
113 <span class="flex items-center gap-1">
114 <Globe class="size-4 shrink-0" aria-hidden="true" />
115 <a href={repo.website} rel="external ugc nofollow noopener noreferrer"
116 >{trimScheme(repo.website)}</a
117 >
118 </span>
119 {/if}
120
121 {#if topics.length}
122 <div class="flex flex-wrap items-center gap-1">
123 {#each topics as topic (topic)}
124 <Tag color="gray">{topic}</Tag>
125 {/each}
126 </div>
127 {/if}
128 </div>
129
130 {@render repoActions("mt-2 grid grid-cols-2 items-center gap-2 sm:hidden")}
131</section>