Skip to content
Sign up

flagon-io/g1t

public
0
507 linesCodeBlameRaw
1import { BookOpen, Check, ChevronDown, Code2, File, FileArchive, Folder, FolderGit2, GitBranch, History, Search, SquareTerminal, Tag as TagIcon } from "lucide-react";
2import { type ReactNode, Suspense } from "react";
3import { Await, Form, Link } from "react-router";
4
5import type { BlobView as Blob, Branch, TreeView as RawTree } from "@g1t/contracts";
6
7import type { FileCommits, ShownBlame, ShownCommit } from "../lib/commit-people";
8import { CommitAvatars, CommitNames } from "./commit-person";
9
10import type { DeploymentEnvironments } from "@g1t/contracts";
11
12import { BlameView } from "./blame-view";
13import { DeploymentsPanel } from "./deployments-panel";
14import { CodeLines } from "./code-lines";
15
16import { AgentSetup } from "./agent-setup";
17import { useAddresses } from "../lib/addresses";
18import { isImagePath } from "../lib/usercontent";
19import { CloneBox } from "./clone-box";
20import { type ChecksSource, CommitChecksBadge } from "./commit-checks";
21import { type AboutData, RepoAboutPanel } from "./repo-about";
22import { Markdown } from "./markdown";
23import { CopyLine, TimeAgo, notACredential } from "./ui";
24import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./ui/dropdown-menu";
25import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
26import { Hint } from "./ui/hint";
27import { SkeletonLine } from "./ui/skeleton";
28
29function encodePath(path: string): string {
30 return path.split("/").map(encodeURIComponent).join("/");
31}
32
33function Breadcrumbs({
34 base,
35 repo,
36 gitRef,
37 path,
38}: {
39 base: string;
40 repo: string;
41 gitRef: string;
42 path: string;
43}) {
44 const segments = path.split("/").filter(Boolean);
45 if (segments.length === 0) return null;
46 // On a phone, one line: the folders between the repository and the last
47 // two fold into an ellipsis that opens the deepest of them.
48 const folded = segments.length - 2;
49 const slash = <span className="mx-1.5 shrink-0 text-faint">/</span>;
50 return (
51 <nav aria-label="Path" className="flex min-w-0 basis-full items-center font-mono text-sm whitespace-nowrap text-muted sm:basis-auto sm:flex-wrap sm:whitespace-normal">
52 <Link to={`${base}/tree/${gitRef}`} className="shrink-0 py-2 text-accent hover:underline sm:py-0">
53 {repo}
54 </Link>
55 {folded > 0 && (
56 <span className="flex shrink-0 items-center sm:hidden">
57 {slash}
58 <Link
59 to={`${base}/tree/${gitRef}/${encodePath(segments.slice(0, folded).join("/"))}`}
60 aria-label={`Up to ${segments.slice(0, folded).join("/")}`}
61 className="rounded px-1 py-2 text-accent hover:underline"
62 >
63 …
64 </Link>
65 </span>
66 )}
67 {segments.map((segment, i) => {
68 const to = encodePath(segments.slice(0, i + 1).join("/"));
69 const last = i === segments.length - 1;
70 return (
71 <span
72 key={to}
73 className={`${i < folded ? "hidden sm:flex" : "flex"} items-center ${last ? "min-w-0" : i === segments.length - 2 ? "min-w-0 shrink-[2]" : "shrink-0"}`}
74 >
75 {slash}
76 {last ? (
77 <span className="truncate font-medium text-fg">{segment}</span>
78 ) : (
79 <Link
80 to={`${base}/tree/${gitRef}/${to}`}
81 className="truncate py-2 text-accent hover:underline sm:py-0"
82 >
83 {segment}
84 </Link>
85 )}
86 </span>
87 );
88 })}
89 </nav>
90 );
91}
92
93/** The bar above a file listing: the latest commit, its checks, and the way to the history. */
94/** A tree as the page gets it: its latest commit with its people. */
95export type Tree = Omit<RawTree, "head"> & { head: ShownCommit | null };
96
97function CommitBar({ commit, base, checks }: { commit: ShownCommit; base: string; checks?: ChecksSource }) {
98 return (
99 <div className="flex items-center gap-2.5 border-b border-line bg-surface px-3 py-2.5 text-sm sm:gap-3 sm:px-4">
100 <CommitAvatars commit={commit} />
101 <span className="shrink-0 font-medium">
102 <CommitNames commit={commit} />
103 </span>
104 <Link to={`${base}/commit/${commit.hash}`} className="truncate text-muted hover:text-fg hover:underline">
105 {commit.message.split("\n")[0]}
106 </Link>
107 <CommitChecksBadge checks={checks} sha={commit.hash} className="-ml-1.5" />
108 <span className="ml-auto flex shrink-0 items-center gap-3 text-xs text-faint sm:gap-4">
109 <Link to={`${base}/commit/${commit.hash}`} className="hidden font-mono hover:text-fg sm:inline">
110 {commit.hash.slice(0, 7)}
111 </Link>
112 <span className="hidden sm:inline">
113 <TimeAgo at={commit.authoredAt} />
114 </span>
115 <Link to={`${base}/commits`} aria-label="History" className="-my-2 inline-flex items-center gap-1.5 py-2 font-medium text-muted hover:text-fg">
116 <History size={14} />
117 <span className="hidden sm:inline">History</span>
118 </Link>
119 </span>
120 </div>
121 );
122}
123
124const BAR_BUTTON =
125 "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-line bg-surface px-3 text-sm transition-colors hover:border-line-strong hover:bg-raised data-[state=open]:border-line-strong";
126
127/** Which branch is shown, and the others to switch to, at the same path. */
128function BranchMenu({
129 base,
130 gitRef,
131 path,
132 branches,
133 view = "tree",
134}: {
135 base: string;
136 gitRef: string;
137 path: string;
138 branches: Branch[];
139 /** Whether `path` is a folder or a file. */
140 view?: "tree" | "blob";
141}) {
142 const rest = path ? `/${encodePath(path)}` : "";
143 return (
144 <DropdownMenu>
145 <DropdownMenuTrigger className={`${BAR_BUTTON} max-w-56 font-medium`}>
146 <GitBranch size={14} className="text-faint" />
147 <span className="truncate font-mono text-[0.8125rem]">{gitRef}</span>
148 <ChevronDown size={13} className="text-faint" />
149 </DropdownMenuTrigger>
150 <DropdownMenuContent align="start" className="max-h-80 w-64 overflow-y-auto">
151 <DropdownMenuLabel>Switch branches</DropdownMenuLabel>
152 {branches.map((branch) => (
153 <DropdownMenuItem key={branch.name} asChild>
154 <Link to={`${base}/${view}/${encodePath(branch.name)}${rest}`}>
155 <Check className={branch.name === gitRef ? "" : "invisible"} />
156 <span className="truncate font-mono text-[0.8125rem]">{branch.name}</span>
157 </Link>
158 </DropdownMenuItem>
159 ))}
160 </DropdownMenuContent>
161 </DropdownMenu>
162 );
163}
164
165/** Searches this repository's code on the search page, where it can be widened to all of g1t. */
166function SearchCode({ repo }: { repo: string }) {
167 return (
168 <Form action="/search" role="search" className="relative ml-auto min-w-0 flex-1 basis-40 sm:w-64 sm:flex-none sm:basis-auto">
169 <Search size={14} className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-faint" />
170 <input
171 name="q"
172 {...notACredential()}
173 placeholder="Search code"
174 aria-label={`Search ${repo}`}
175 className="h-9 w-full rounded-md border border-line bg-surface pr-3 pl-8 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim sm:h-8"
176 />
177 <input type="hidden" name="repo" value={repo} />
178 <input type="hidden" name="type" value="code" />
179 </Form>
180 );
181}
182
183/** The one button for getting the code: clone over HTTPS or SSH, hand it to an agent, or download it. */
184function CodeButton({ path, gitRef }: { path: string; gitRef: string }) {
185 return (
186 <Popover>
187 <PopoverTrigger className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-3 text-sm font-medium text-bg transition-colors hover:bg-accent/90">
188 <Code2 size={15} />
189 Code
190 <ChevronDown size={13} />
191 </PopoverTrigger>
192 <PopoverContent align="end" className="w-[min(24rem,calc(100vw-2rem))] p-0">
193 <div className="p-4">
194 <h2 className="mb-3 flex items-center gap-2 text-sm font-medium">
195 <SquareTerminal size={15} className="text-faint" />
196 Clone
197 </h2>
198 <CloneBox path={path} />
199 </div>
200 <div className="border-t border-line p-1.5">
201 {/* A plain link: the browser downloads it, not the router. */}
202 <a
203 href={`/${path}/archive/${encodePath(gitRef)}.zip`}
204 download
205 className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg/90 transition-colors hover:bg-line hover:text-fg"
206 >
207 <FileArchive size={15} className="text-faint" />
208 Download ZIP
209 </a>
210 </div>
211 </PopoverContent>
212 </Popover>
213 );
214}
215
216/** Above the files: the branch and, at the root, how many there are, search and Code; below it, where you are. */
217function CodeBar({
218 base,
219 repo,
220 gitRef,
221 path,
222 branches,
223}: {
224 base: string;
225 repo: { namespace: string; name: string };
226 gitRef: string;
227 path: string;
228 branches: Branch[] | null;
229}) {
230 const full = `${repo.namespace}/${repo.name}`;
231 const list = branches && branches.length > 0 ? branches : [{ name: gitRef, hash: "" }];
232 return (
233 <div className="mb-4 flex flex-wrap items-center gap-x-3 gap-y-2">
234 <BranchMenu base={base} gitRef={gitRef} path={path} branches={list} />
235 {path ? (
236 <Breadcrumbs base={base} repo={repo.name} gitRef={gitRef} path={path} />
237 ) : (
238 <>
239 {branches && (
240 <Link to={`${base}/branches`} className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-accent">
241 <GitBranch size={14} className="text-faint" />
242 <span className="font-medium text-fg">{branches.length}</span>
243 {branches.length === 1 ? "branch" : "branches"}
244 </Link>
245 )}
246 <Link to={`${base}/tags`} className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-accent">
247 <TagIcon size={14} className="text-faint" />
248 Tags
249 </Link>
250 <SearchCode repo={full} />
251 <CodeButton path={full} gitRef={gitRef} />
252 </>
253 )}
254 </div>
255 );
256}
257
258/**
259 * The files of a directory, each with the commit that last changed it.
260 * `last` is undefined while those are still being read (the column holds
261 * its place), and null when they could not be.
262 */
263function FileRows({
264 base,
265 gitRef,
266 prefix,
267 entries,
268 last,
269}: {
270 base: string;
271 gitRef: string;
272 prefix: string;
273 entries: Tree["entries"];
274 last: FileCommits | null | undefined;
275}) {
276 const byName = new Map((last?.entries ?? []).map((entry) => [entry.name, entry.commit]));
277 return (
278 // Busy while each entry's last commit is on its way; its cells keep their size.
279 <ul aria-busy={last === undefined || undefined} className="divide-y divide-line text-sm">
280 {entries.map((entry) => {
281 const isTree = entry.kind === "tree";
282 const Icon = isTree ? Folder : entry.kind === "gitlink" ? FolderGit2 : File;
283 const commit = byName.get(entry.name);
284 return (
285 <li key={entry.name} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 px-4 transition-colors hover:bg-surface sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)_auto] lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)_auto]">
286 {/* The whole row's height is the link's: a 44px target on a phone. */}
287 <Link
288 to={`${base}/${isTree ? "tree" : "blob"}/${gitRef}/${prefix}${encodeURIComponent(entry.name)}`}
289 className="flex min-h-11 min-w-0 items-center gap-3 py-2 hover:text-accent hover:underline sm:min-h-0"
290 >
291 <Icon size={15} className={`shrink-0 ${isTree ? "text-accent-dim" : "text-faint"}`} />
292 <span className="truncate font-mono text-[0.8125rem]">{entry.name}</span>
293 </Link>
294 <span className="hidden min-w-0 sm:block">
295 {commit ? (
296 <Hint label={commit.message.split("\n")[0]}>
297 <Link to={`${base}/commit/${commit.hash}`} className="block animate-fade-in truncate text-muted hover:text-fg hover:underline">
298 {commit.message.split("\n")[0]}
299 </Link>
300 </Hint>
301 ) : last === undefined ? (
302 <SkeletonLine width="10rem" barClassName="max-w-full" />
303 ) : null}
304 </span>
305 <span className="text-right text-xs whitespace-nowrap text-faint">
306 {commit ? <span className="animate-fade-in"><TimeAgo at={commit.authoredAt} /></span> : last === undefined ? <SkeletonLine className="justify-end" barClassName="w-12" /> : null}
307 </span>
308 </li>
309 );
310 })}
311 </ul>
312 );
313}
314
315export function TreeView({
316 tree,
317 branches = null,
318 lastCommits = null,
319 checks = null,
320 about = null,
321 canPush = false,
322 homepage = null,
323 deployments = null,
324}: {
325 tree: Tree;
326 branches?: Branch[] | null;
327 /** Each entry's last commit, streamed in after the list. */
328 lastCommits?: Promise<FileCommits | null> | null;
329 /** The latest commit's checks, streamed in. */
330 checks?: ChecksSource;
331 /** The About beside the files, at the root: streamed in after them. */
332 about?: AboutData | null;
333 /** Whether the viewer may push, for the About's "Create a new release". */
334 canPush?: boolean;
335 /** The project's homepage; the repository's website when null. */
336 homepage?: string | null;
337 /** The repository's environments, for the About's Deployments section. */
338 deployments?: DeploymentEnvironments | null;
339}) {
340 const { repo, ref, path, head, entries, readme } = tree;
341 const base = `/${repo.namespace}/${repo.name}`;
342 const prefix = path ? `${encodePath(path)}/` : "";
343 const cloneUrl = `${useAddresses().site}${base}.git`;
344
345 if (!head) {
346 return (
347 <div className="mx-auto max-w-2xl rounded-xl border border-line bg-surface p-8">
348 <h2 className="text-lg font-semibold tracking-tight">
349 This repository is empty
350 </h2>
351 <p className="mt-1 text-sm text-muted">
352 Push an existing project to it. Use an access token as the password.
353 </p>
354 <div className="mt-5 space-y-2">
355 <CopyLine prompt text={`git remote add g1t ${cloneUrl}`} />
356 <CopyLine prompt text={`git push -u g1t ${ref}`} />
357 </div>
358 <h3 className="mt-7 text-sm font-medium">Or have your coding agent start it</h3>
359 <p className="mt-1 text-sm text-muted">
360 Connect it to g1t, then ask it to build the first version of{" "}
361 <span className="font-mono text-fg">{repo.name}</span> and push it here.
362 </p>
363 <AgentSetup className="mt-3" />
364 </div>
365 );
366 }
367
368 return (
369 <div className={path ? "" : "grid gap-8 lg:grid-cols-[1fr_17rem]"}>
370 <div className="min-w-0">
371 <CodeBar base={base} repo={repo} gitRef={ref} path={path} branches={branches} />
372 <div className="overflow-hidden rounded-xl border border-line">
373 <CommitBar commit={head} base={base} checks={checks} />
374 {lastCommits ? (
375 <Suspense fallback={<FileRows base={base} gitRef={ref} prefix={prefix} entries={entries} last={undefined} />}>
376 <Await resolve={lastCommits} errorElement={<FileRows base={base} gitRef={ref} prefix={prefix} entries={entries} last={null} />}>
377 {(last) => <FileRows base={base} gitRef={ref} prefix={prefix} entries={entries} last={last} />}
378 </Await>
379 </Suspense>
380 ) : (
381 <FileRows base={base} gitRef={ref} prefix={prefix} entries={entries} last={null} />
382 )}
383 </div>
384
385 {readme?.text != null && (
386 <section id="readme" className="mt-6 scroll-mt-20 overflow-hidden rounded-xl border border-line">
387 <h2 className="flex items-center gap-2 border-b border-line bg-surface px-4 py-2.5 text-sm font-medium">
388 <BookOpen size={15} className="text-faint" />
389 {readme.name}
390 </h2>
391 <div className="p-4 sm:p-6">
392 {/\.(md|markdown)$/i.test(readme.name) ? (
393 <Markdown
394 source={readme.text}
395 repo={{ namespace: repo.namespace, name: repo.name }}
396 // Relative links in a README point into the repository,
397 // and its pictures at the files of the commit shown.
398 base={`/${repo.namespace}/${repo.name}/blob/${ref}${path ? `/${path}` : ""}`}
399 rawBase={`/${repo.namespace}/${repo.name}/raw/${head.hash}${path ? `/${encodePath(path)}` : ""}`}
400 />
401 ) : (
402 <pre className="whitespace-pre-wrap text-sm"><code>{readme.text}</code></pre>
403 )}
404 </div>
405 </section>
406 )}
407 </div>
408
409 {!path && (
410 <RepoAboutPanel
411 repo={repo}
412 gitRef={ref}
413 readme={Boolean(readme)}
414 data={about ?? { about: null, watchers: null, packages: null }}
415 canPush={canPush}
416 homepage={homepage}
417 deployments={<DeploymentsPanel base={base} summary={deployments} className="border-t border-line pt-4" />}
418 />
419 )}
420 </div>
421 );
422}
423
424export function BlobView({
425 blob,
426 html,
427 blame,
428 branches = null,
429 notice,
430 marked,
431}: {
432 /** For the branch menu; it shows the current branch alone without them. */
433 branches?: Branch[] | null;
434 /** Said above the file, such as what is wrong with it. */
435 notice?: ReactNode;
436 /** Lines to mark as having a problem, 1-based. */
437 marked?: readonly number[];
438 blob: Blob;
439 /** Syntax-highlighted HTML per line, when the language is known. */
440 html: string[] | null;
441 /** Shown instead of the plain file when asked for, with HTML per line. */
442 blame?: { blame: ShownBlame; lines: string[] | null } | null;
443}) {
444 const { repo, ref, path, size, text } = blob;
445 const lines = text?.replace(/\n$/, "").split("\n");
446 const base = `/${repo.namespace}/${repo.name}`;
447 // The file as it is, on the usercontent origin (routes/repo/raw.ts).
448 const raw = `${base}/raw/${encodeURIComponent(ref)}/${encodePath(path)}`;
449 const toggle = (label: string, on: boolean, search: string) => (
450 <Link
451 to={{ search }}
452 preventScrollReset
453 className={`rounded px-2.5 py-1.5 transition-colors sm:px-2 sm:py-0.5 ${on ? "bg-raised text-fg" : "hover:text-fg"}`}
454 >
455 {label}
456 </Link>
457 );
458 return (
459 <div>
460 <div className="mb-4 flex flex-wrap items-center gap-x-3 gap-y-2">
461 <BranchMenu
462 base={base}
463 gitRef={ref}
464 path={path}
465 branches={branches && branches.length > 0 ? branches : [{ name: ref, hash: "" }]}
466 view="blob"
467 />
468 <Breadcrumbs base={base} repo={repo.name} gitRef={ref} path={path} />
469 </div>
470 {notice}
471 <div className="overflow-hidden rounded-xl border border-line">
472 <div className="flex items-center gap-3 border-b border-line bg-surface px-3 py-2 text-xs text-muted sm:px-4 sm:py-2.5">
473 {lines && <span>{lines.length.toLocaleString("en-US")} lines</span>}
474 <span className="hidden min-[400px]:inline">{size.toLocaleString("en-US")} bytes</span>
475 <span className="ml-auto flex items-center gap-2">
476 {lines && (
477 <span className="flex rounded-md border border-line p-0.5">
478 {toggle("Code", !blame, "")}
479 {toggle("Blame", Boolean(blame), "?blame=1")}
480 </span>
481 )}
482 <a href={raw} className="rounded-md border border-line px-2.5 py-2 transition-colors hover:text-fg sm:px-2 sm:py-1">
483 Raw
484 </a>
485 </span>
486 </div>
487 {blame && lines ? (
488 <BlameView base={base} path={path} lines={lines} html={blame.lines} blame={blame.blame} />
489 ) : lines ? (
490 <CodeLines lines={lines} html={html} marked={marked} />
491 ) : isImagePath(path) ? (
492 <div className="flex justify-center bg-[repeating-conic-gradient(var(--color-raised)_0_25%,transparent_0_50%)] bg-[length:16px_16px] p-6">
493 <img src={raw} alt={path.split("/").pop() ?? path} className="max-h-[70vh] max-w-full" />
494 </div>
495 ) : (
496 <p className="p-6 text-sm text-muted">
497 This file is binary or too large to show.{" "}
498 <a href={raw} className="text-accent hover:underline">
499 View it raw
500 </a>
501 .
502 </p>
503 )}
504 </div>
505 </div>
506 );
507}