tenseleyflow/shithub / 0dcdf42

Browse files

S39: repo Code view — 2/3 + 1/3 layout with About sidebar

Authored by espadonne
SHA
0dcdf423b529ee2c09cd31f3adc5dc2776d15804
Parents
137671e
Tree
0b37e42

5 changed files

StatusFile+-
M internal/web/handlers/repo/code.go 6 0
M internal/web/static/css/shithub.css 94 0
A internal/web/templates/repo/_about_sidebar.html 62 0
M internal/web/templates/repo/populated.html 5 0
M internal/web/templates/repo/tree.html 5 0
internal/web/handlers/repo/code.gomodified
@@ -147,6 +147,11 @@ func (h *Handlers) codeTree(w http.ResponseWriter, r *http.Request) {
147147
 	// README detection on the requested directory only.
148148
 	readmeHTML := h.findAndRenderREADME(r, cc, entries)
149149
150
+	// Topics drive the About sidebar's pills. ListRepoTopics is one
151
+	// indexed query keyed on repo_id; failure is non-fatal — render the
152
+	// page without topics rather than 500 the whole tree.
153
+	topics, _ := h.rq.ListRepoTopics(r.Context(), h.d.Pool, cc.row.ID)
154
+
150155
 	h.d.Render.RenderPage(w, r, "repo/tree", map[string]any{
151156
 		"Title":         cc.row.Name + " · " + cc.owner,
152157
 		"CSRFToken":     middleware.CSRFTokenForRequest(r),
@@ -162,6 +167,7 @@ func (h *Handlers) codeTree(w http.ResponseWriter, r *http.Request) {
162167
 		"HTTPSCloneURL": h.cloneHTTPS(cc.owner, cc.row.Name),
163168
 		"SSHEnabled":    h.d.CloneURLs.SSHEnabled,
164169
 		"SSHCloneURL":   h.cloneSSH(cc.owner, cc.row.Name),
170
+		"Topics":        topics,
165171
 		"RepoCounts":    h.subnavCounts(r.Context(), cc.row.ID, cc.row.ForkCount),
166172
 		"CanSettings":   h.canViewSettings(middleware.CurrentUserFromContext(r.Context())),
167173
 		"ActiveSubnav":  "code",
internal/web/static/css/shithub.cssmodified
@@ -1089,6 +1089,100 @@ code {
10891089
 .shithub-tree-size { width: 100px; text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
10901090
 .shithub-tree-symlink, .shithub-tree-submodule { color: var(--fg-muted); font-style: italic; font-size: 0.8rem; }
10911091
1092
+/* Code-view layout: 2/3 main column + 1/3 About sidebar, mirroring
1093
+   the GitHub repo home layout. Single-column on narrow viewports so
1094
+   the sidebar drops below the tree on mobile. The S39 hardening pass
1095
+   replaces the previous single-centered-column layout that wasted
1096
+   the right rail. */
1097
+.shithub-repo-with-sidebar {
1098
+  display: grid;
1099
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
1100
+  gap: 1.5rem;
1101
+  align-items: start;
1102
+}
1103
+.shithub-repo-main {
1104
+  min-width: 0; /* let the grid item shrink so children with overflow-x scroll instead of forcing the column wider */
1105
+}
1106
+@media (max-width: 1024px) {
1107
+  .shithub-repo-with-sidebar {
1108
+    grid-template-columns: 1fr;
1109
+  }
1110
+}
1111
+
1112
+.shithub-repo-about {
1113
+  border-top: 1px solid var(--border-default);
1114
+  padding-top: 1rem;
1115
+  font-size: 0.875rem;
1116
+}
1117
+@media (min-width: 1025px) {
1118
+  .shithub-repo-about {
1119
+    border-top: none;
1120
+    padding-top: 0;
1121
+  }
1122
+}
1123
+.shithub-repo-about-heading {
1124
+  font-size: 1rem;
1125
+  font-weight: 600;
1126
+  margin: 0 0 0.5rem;
1127
+  display: flex;
1128
+  align-items: center;
1129
+  justify-content: space-between;
1130
+}
1131
+.shithub-repo-about-desc {
1132
+  margin: 0 0 0.75rem;
1133
+  color: var(--fg-default);
1134
+  line-height: 1.4;
1135
+}
1136
+.shithub-repo-about-empty {
1137
+  color: var(--fg-muted);
1138
+  font-style: italic;
1139
+}
1140
+.shithub-repo-about-topics {
1141
+  list-style: none;
1142
+  margin: 0 0 1rem;
1143
+  padding: 0;
1144
+  display: flex;
1145
+  flex-wrap: wrap;
1146
+  gap: 0.4rem;
1147
+}
1148
+.shithub-pill-topic {
1149
+  background: var(--accent-subtle, #ddf4ff);
1150
+  color: var(--accent-fg, #0969da);
1151
+  text-decoration: none;
1152
+  padding: 0.15rem 0.6rem;
1153
+  border-radius: 9999px;
1154
+  font-size: 0.8rem;
1155
+}
1156
+.shithub-pill-topic:hover { text-decoration: underline; }
1157
+
1158
+.shithub-repo-about-meta {
1159
+  list-style: none;
1160
+  margin: 0 0 1.25rem;
1161
+  padding: 0;
1162
+}
1163
+.shithub-repo-about-meta li {
1164
+  display: flex;
1165
+  align-items: center;
1166
+  gap: 0.5rem;
1167
+  padding: 0.25rem 0;
1168
+  color: var(--fg-muted);
1169
+}
1170
+.shithub-repo-about-meta li svg { color: var(--fg-muted); flex-shrink: 0; }
1171
+.shithub-repo-about-meta li span { color: var(--fg-default); }
1172
+
1173
+.shithub-repo-about-section {
1174
+  border-top: 1px solid var(--border-default);
1175
+  padding-top: 0.75rem;
1176
+  margin-top: 0.75rem;
1177
+}
1178
+.shithub-repo-about-section h3 {
1179
+  font-size: 0.85rem;
1180
+  font-weight: 600;
1181
+  margin: 0 0 0.5rem;
1182
+  text-transform: none;
1183
+}
1184
+.shithub-repo-about-section p { margin: 0; }
1185
+
10921186
 .shithub-readme {
10931187
   margin-top: 2rem;
10941188
   padding: 1.25rem;
internal/web/templates/repo/_about_sidebar.htmladded
@@ -0,0 +1,62 @@
1
+{{/*
2
+  About sidebar for the Code view. Mirrors GitHub's right-rail
3
+  layout: description, topics, "About" metadata, languages bar,
4
+  releases summary, packages summary, contributors. The shipped
5
+  shithub equivalents render real data; the post-MVP surfaces
6
+  (releases / packages / contributors) render placeholders so
7
+  the layout doesn't shift when those land.
8
+
9
+  Expected data keys on the page context:
10
+    .Repo            — reposdb.Repo (Description, License, Visibility,
11
+                       PrimaryLanguage, …)
12
+    .Topics          — []string of topic slugs (may be empty)
13
+    .Owner           — owner slug
14
+*/}}
15
+{{ define "about-sidebar" -}}
16
+<aside class="shithub-repo-about" aria-label="About">
17
+  <h2 class="shithub-repo-about-heading">About</h2>
18
+
19
+  {{ if .Repo.Description }}
20
+  <p class="shithub-repo-about-desc">{{ .Repo.Description }}</p>
21
+  {{ else }}
22
+  <p class="shithub-repo-about-desc shithub-repo-about-empty">No description provided.</p>
23
+  {{ end }}
24
+
25
+  {{ if .Topics }}
26
+  <ul class="shithub-repo-about-topics" aria-label="Topics">
27
+    {{ range .Topics }}
28
+    <li><a class="shithub-pill shithub-pill-topic" href="/topics/{{ . }}">{{ . }}</a></li>
29
+    {{ end }}
30
+  </ul>
31
+  {{ end }}
32
+
33
+  <ul class="shithub-repo-about-meta">
34
+    {{ if .Repo.LicenseKey.Valid }}
35
+    <li>{{ octicon "law" }} <span>{{ .Repo.LicenseKey.String }} license</span></li>
36
+    {{ end }}
37
+    {{ if .Repo.PrimaryLanguage.Valid }}
38
+    <li>{{ octicon "code" }} <span>{{ .Repo.PrimaryLanguage.String }}</span></li>
39
+    {{ end }}
40
+    <li>{{ octicon "star" }} <span>{{ .Repo.StarCount }} {{ pluralize (printf "%d" .Repo.StarCount | len) "star" "stars" }}</span></li>
41
+    <li>{{ octicon "eye" }} <span>{{ .Repo.WatcherCount }} watching</span></li>
42
+    <li>{{ octicon "repo-forked" }} <span>{{ .Repo.ForkCount }} {{ pluralize (printf "%d" .Repo.ForkCount | len) "fork" "forks" }}</span></li>
43
+  </ul>
44
+
45
+  {{/* Post-MVP surfaces — the section headings render so the layout
46
+       is stable; the body says "coming soon" for honesty. */}}
47
+  <section class="shithub-repo-about-section shithub-repo-about-section-deferred">
48
+    <h3>Releases</h3>
49
+    <p class="shithub-repo-about-empty">Releases land in a future sprint.</p>
50
+  </section>
51
+
52
+  <section class="shithub-repo-about-section shithub-repo-about-section-deferred">
53
+    <h3>Packages</h3>
54
+    <p class="shithub-repo-about-empty">No packages — feature lands post-MVP.</p>
55
+  </section>
56
+
57
+  <section class="shithub-repo-about-section shithub-repo-about-section-deferred">
58
+    <h3>Contributors</h3>
59
+    <p class="shithub-repo-about-empty">Contributor avatars land in a future sprint.</p>
60
+  </section>
61
+</aside>
62
+{{- end }}
internal/web/templates/repo/populated.htmlmodified
@@ -1,5 +1,7 @@
11
 {{ define "page" -}}
22
 <section class="shithub-repo-populated">
3
+  <div class="shithub-repo-with-sidebar">
4
+  <div class="shithub-repo-main">
35
   <header class="shithub-repo-populated-head">
46
     <h1>
57
       <a href="/{{ .Owner }}">{{ .Owner }}</a>
@@ -47,5 +49,8 @@
4749
   <p class="shithub-repo-populated-note">
4850
     Tree view, file blobs, branch list, and commit history land in S17. For now this view confirms a push has reached the server.
4951
   </p>
52
+  </div>
53
+  {{ template "about-sidebar" . }}
54
+  </div>
5055
 </section>
5156
 {{- end }}
internal/web/templates/repo/tree.htmlmodified
@@ -10,6 +10,8 @@
1010
   </header>
1111
   {{ template "repo-subnav" . }}
1212
13
+<div class="shithub-repo-with-sidebar">
14
+<div class="shithub-repo-main">
1315
 <section class="shithub-code">
1416
   <header class="shithub-code-head">
1517
     <nav class="shithub-code-crumbs" aria-label="Breadcrumb">
@@ -95,5 +97,8 @@
9597
     {{ .README }}
9698
   </section>
9799
   {{ end }}
100
+</div>
101
+  {{ template "about-sidebar" . }}
102
+</div>
98103
 </section>
99104
 {{- end }}