hearthforge

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