hearthforge

hearthforge/src/views/repos/RepoHome.tsx
RepoHome.tsx
⎇
Raw
1import { BASE_URL, SSH_DISABLED, SSH_PORT } from "../../config.ts";
2import type { RepositoryRow } from "../../db/index.ts";
3import type { SessionUser } from "../../middleware/session.ts";
4import type { TreeEntry } from "../../services/git.ts";
5import { Layout } from "../layout.tsx";
6import { BranchSelector } from "./BranchSelector.tsx";
7import { FileTreeTable } from "./FileTreeTable.tsx";
8import { RepoHeader } from "./RepoHeader.tsx";
9import { RepoNav } from "./RepoNav.tsx";
10
11interface RepoHomeProps {
12 user: SessionUser | null;
13 repo: RepositoryRow;
14 entries: TreeEntry[];
15 readmeHtml: string | null;
16 hasContent: boolean;
17 branches: string[];
18}
19
20export function RepoHome({
21 user,
22 repo,
23 entries,
24 readmeHtml,
25 hasContent,
26 branches,
27}: RepoHomeProps) {
28 return (
29 <Layout user={user} title={repo.name}>
30 <div class="container">
31 <RepoHeader repo={repo} />
32 {repo.description && (
33 <p class="repo-description">{repo.description}</p>
34 )}
35 <RepoNav repo={repo} active="code" user={user} />
36 {!hasContent ? (
37 <div class="empty-state">
38 <h2>This repository is empty.</h2>
39 <p>Push your first commit to get started:</p>
40 <pre class="code-setup">
41 <code>{`git clone ${sshUrl(repo.name)}
42cd ${repo.name}
43echo "# ${repo.name}" > README.md
44git add .
45git commit -m "Initial commit"
46git push origin main`}</code>
47 </pre>
48 </div>
49 ) : (
50 <>
51 <div class="tree-toolbar">
52 <BranchSelector
53 repoName={repo.name}
54 branches={branches}
55 currentRef={repo.default_branch}
56 view="tree"
57 />
58 <details class="clone-popup-details">
59 <summary class="btn btn-sm btn-primary">
60 Clone
61 </summary>
62 <div class="clone-popup">
63 <div class="clone-url-row">
64 <span class="clone-url-label">
65 HTTP
66 </span>
67 <input
68 type="text"
69 readonly
70 value={httpUrl(repo.name)}
71 class="clone-url-input"
72 />
73 </div>
74 {!SSH_DISABLED && (
75 <div class="clone-url-row">
76 <span class="clone-url-label">
77 SSH
78 </span>
79 <input
80 type="text"
81 readonly
82 value={sshUrl(repo.name)}
83 class="clone-url-input"
84 />
85 </div>
86 )}
87 </div>
88 </details>
89 </div>
90 <FileTreeTable
91 repoName={repo.name}
92 treeRef={repo.default_branch}
93 subpath=""
94 entries={entries}
95 />
96 {readmeHtml && (
97 <div class="readme-section">
98 <div class="readme-header">README</div>
99 <div class="markdown-body">{readmeHtml}</div>
100 </div>
101 )}
102 </>
103 )}
104 </div>
105 </Layout>
106 );
107}
108
109function httpUrl(name: string) {
110 return `${BASE_URL}/${name}.git`;
111}
112
113function sshUrl(name: string) {
114 const host = new URL(BASE_URL).hostname;
115 return `ssh://git@${host}:${SSH_PORT}/${name}.git`;
116}
117