Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/components/repo-view.tsx

211 lines7,199 bytesCodeBlame
1import { BookOpen, File, Folder, FolderGit2 } from "lucide-react";
2import { Link } from "react-router";
3
4import type { BlobView as Blob, Commit, TreeView as Tree } from "@g1t/contracts";
5
6import { CloneBox } from "./clone-box";
7import { Markdown } from "./markdown";
8import { Avatar, CopyLine, TimeAgo } from "./ui";
9
10function encodePath(path: string): string {
11 return path.split("/").map(encodeURIComponent).join("/");
12}
13
14function Breadcrumbs({
15 base,
16 repo,
17 gitRef,
18 path,
19}: {
20 base: string;
21 repo: string;
22 gitRef: string;
23 path: string;
24}) {
25 const segments = path.split("/").filter(Boolean);
26 if (segments.length === 0) return null;
27 return (
28 <p className="mb-4 font-mono text-sm text-muted">
29 <Link to={`${base}/tree/${gitRef}`} className="text-accent hover:underline">
30 {repo}
31 </Link>
32 {segments.map((segment, i) => {
33 const to = encodePath(segments.slice(0, i + 1).join("/"));
34 const last = i === segments.length - 1;
35 return (
36 <span key={to}>
37 <span className="mx-1.5 text-faint">/</span>
38 {last ? (
39 <span className="font-medium text-fg">{segment}</span>
40 ) : (
41 <Link
42 to={`${base}/tree/${gitRef}/${to}`}
43 className="text-accent hover:underline"
44 >
45 {segment}
46 </Link>
47 )}
48 </span>
49 );
50 })}
51 </p>
52 );
53}
54
55/** The bar above a file listing describing the latest commit. */
56function CommitBar({ commit, gitRef }: { commit: Commit; gitRef: string }) {
57 return (
58 <div className="flex items-center gap-3 border-b border-line bg-surface px-4 py-2.5 text-sm">
59 <Avatar name={commit.author.name} />
60 <span className="shrink-0 font-medium">{commit.author.name}</span>
61 <span className="truncate text-muted">{commit.message.split("\n")[0]}</span>
62 <span className="ml-auto flex shrink-0 items-center gap-3 text-xs text-faint">
63 <span className="rounded-full border border-line px-2 py-0.5 font-mono text-accent">
64 {gitRef}
65 </span>
66 <span className="font-mono">{commit.hash.slice(0, 7)}</span>
67 <TimeAgo at={commit.authoredAt} />
68 </span>
69 </div>
70 );
71}
72
73export function TreeView({ tree }: { tree: Tree }) {
74 const { repo, ref, path, head, entries, readme } = tree;
75 const base = `/${repo.namespace}/${repo.name}`;
76 const prefix = path ? `${encodePath(path)}/` : "";
77 const cloneUrl = `https://g1t.sh${base}.git`;
78
79 if (!head) {
80 return (
81 <div className="mx-auto max-w-2xl rounded-xl border border-line bg-surface p-8">
82 <h2 className="text-lg font-semibold tracking-tight">
83 This repository is empty
84 </h2>
85 <p className="mt-1 text-sm text-muted">
86 Push an existing project to it. Use an access token as the password.
87 </p>
88 <div className="mt-5 space-y-2">
89 <CopyLine prompt text={`git remote add g1t ${cloneUrl}`} />
90 <CopyLine prompt text={`git push -u g1t ${ref}`} />
91 </div>
92 </div>
93 );
94 }
95
96 return (
97 <div className="grid gap-6 lg:grid-cols-[1fr_18rem]">
98 <div className="min-w-0">
99 <Breadcrumbs base={base} repo={repo.name} gitRef={ref} path={path} />
100 <div className="overflow-hidden rounded-xl border border-line">
101 <CommitBar commit={head} gitRef={ref} />
102 <ul className="divide-y divide-line text-sm">
103 {entries.map((entry) => {
104 const isTree = entry.kind === "tree";
105 const Icon = isTree ? Folder : entry.kind === "gitlink" ? FolderGit2 : File;
106 return (
107 <li key={entry.name}>
108 <Link
109 to={`${base}/${isTree ? "tree" : "blob"}/${ref}/${prefix}${encodeURIComponent(entry.name)}`}
110 className="flex items-center gap-3 px-4 py-2 transition-colors hover:bg-surface"
111 >
112 <Icon
113 size={15}
114 className={isTree ? "text-accent-dim" : "text-faint"}
115 />
116 <span className="font-mono text-[0.8125rem]">{entry.name}</span>
117 </Link>
118 </li>
119 );
120 })}
121 </ul>
122 </div>
123
124 {readme?.text != null && (
125 <section className="mt-6 overflow-hidden rounded-xl border border-line">
126 <h2 className="flex items-center gap-2 border-b border-line bg-surface px-4 py-2.5 text-sm font-medium">
127 <BookOpen size={15} className="text-faint" />
128 {readme.name}
129 </h2>
130 <div className="p-6">
131 {/\.(md|markdown)$/i.test(readme.name) ? (
132 <Markdown source={readme.text} />
133 ) : (
134 <pre className="whitespace-pre-wrap text-sm">{readme.text}</pre>
135 )}
136 </div>
137 </section>
138 )}
139 </div>
140
141 {!path && (
142 <aside className="space-y-6">
143 <section>
144 <h2 className="text-sm font-medium">Clone</h2>
145 <div className="mt-2">
146 <CloneBox path={`${repo.namespace}/${repo.name}`} />
147 </div>
148 </section>
149 <section>
150 <h2 className="text-sm font-medium">About</h2>
151 <p className="mt-2 text-sm text-muted">
152 {repo.description ?? "No description."}
153 </p>
154 <p className="mt-3 text-xs text-faint">
155 Created <TimeAgo at={repo.createdAt} />
156 </p>
157 </section>
158 </aside>
159 )}
160 </div>
161 );
162}
163
164export function BlobView({
165 blob,
166 html,
167}: {
168 blob: Blob;
169 /** Syntax-highlighted HTML, when the language is known. */
170 html: string | null;
171}) {
172 const { repo, ref, path, size, text } = blob;
173 const lines = text?.replace(/\n$/, "").split("\n");
174 return (
175 <div>
176 <Breadcrumbs
177 base={`/${repo.namespace}/${repo.name}`}
178 repo={repo.name}
179 gitRef={ref}
180 path={path}
181 />
182 <div className="overflow-hidden rounded-xl border border-line">
183 <div className="flex items-center gap-3 border-b border-line bg-surface px-4 py-2.5 text-xs text-muted">
184 {lines && <span>{lines.length.toLocaleString("en-US")} lines</span>}
185 <span>{size.toLocaleString("en-US")} bytes</span>
186 </div>
187 {html ? (
188 <div
189 className="overflow-x-auto py-3 pr-4"
190 // Shiki escapes the source; this is its generated markup.
191 dangerouslySetInnerHTML={{ __html: html }}
192 />
193 ) : lines ? (
194 <div className="flex overflow-x-auto py-3 font-mono text-sm leading-6">
195 <pre
196 aria-hidden="true"
197 className="w-10 shrink-0 text-right text-faint select-none"
198 >
199 {lines.map((_, i) => i + 1).join("\n")}
200 </pre>
201 <pre className="pr-4 pl-5">{lines.join("\n")}</pre>
202 </div>
203 ) : (
204 <p className="p-6 text-sm text-muted">
205 This file is binary or too large to show.
206 </p>
207 )}
208 </div>
209 </div>
210 );
211}