Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

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

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