tenseleyflow/shithub / bc6f1b3

Browse files

Frame repo about sidebar

Authored by espadonne
SHA
bc6f1b3abfe9c8d2f91d022cd27b5d1d59cde057
Parents
138c588
Tree
0f8f8ea

3 changed files

StatusFile+-
M internal/web/render/octicons.go 10 0
M internal/web/static/css/shithub.css 119 71
M internal/web/templates/_repo_about_sidebar.html 69 21
internal/web/render/octicons.gomodified
@@ -65,6 +65,16 @@ func BuiltinOcticons() OcticonResolver {
6565
 			`><path d="M1 2.75C1 1.784 1.784 1 2.75 1h4.586c.464 0 .909.184 1.237.513l5.914 5.914a1.75 1.75 0 0 1 0 2.475l-4.585 4.585a1.75 1.75 0 0 1-2.475 0L1.513 8.573A1.75 1.75 0 0 1 1 7.336Zm1.75-.25a.25.25 0 0 0-.25.25v4.586c0 .066.026.13.073.177l5.914 5.914a.25.25 0 0 0 .353 0l4.587-4.587a.25.25 0 0 0 0-.353L7.513 2.573a.25.25 0 0 0-.177-.073Zm2.25 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/></svg>`),
6666
 		"person": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
6767
 			`><path d="M10.5 5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm1.5 0a4 4 0 1 0-8 0 4 4 0 0 0 8 0ZM2 14.25C2 11.35 4.686 9 8 9s6 2.35 6 5.25a.75.75 0 0 1-1.5 0c0-2.02-2.01-3.75-4.5-3.75s-4.5 1.73-4.5 3.75a.75.75 0 0 1-1.5 0Z"/></svg>`),
68
+		"people": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
69
+			`><path d="M5.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Zm0-1.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm5.5 1a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM1.25 14a.75.75 0 0 1-.75-.75C.5 10.9 2.738 9 5.5 9s5 1.9 5 4.25a.75.75 0 0 1-1.5 0c0-1.46-1.57-2.75-3.5-2.75S2 11.79 2 13.25a.75.75 0 0 1-.75.75Zm9.78-.58a.75.75 0 0 1-.55-.91 4.195 4.195 0 0 0-.43-.97 3.12 3.12 0 0 1 1.45-.04c1.35.25 2.5 1.05 2.5 2.25a.75.75 0 0 0 1.5 0c0-2.12-1.96-3.37-3.72-3.7a5.18 5.18 0 0 0-2.32.08.75.75 0 0 0-.37 1.2c.28.36.48.78.59 1.23a.75.75 0 0 0 1.35.86Z"/></svg>`),
70
+		"pulse": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
71
+			`><path d="M6 2.75A.75.75 0 0 1 6.75 2h.08a.75.75 0 0 1 .69.47l2.28 5.48 1.02-2.04A.75.75 0 0 1 11.5 5.5h3.75a.75.75 0 0 1 0 1.5h-3.29l-1.58 3.16a.75.75 0 0 1-1.36-.05L7.5 6.47l-1.57 6.95a.75.75 0 0 1-1.43.09L2.96 9.13 2.3 10.47A.75.75 0 0 1 1.62 10.9H.75a.75.75 0 0 1 0-1.5h.4l1.24-2.48a.75.75 0 0 1 1.38.08l1.24 3.52Z"/></svg>`),
72
+		"note": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
73
+			`><path d="M3.75 1A1.75 1.75 0 0 0 2 2.75v10.5C2 14.216 2.784 15 3.75 15h8.5A1.75 1.75 0 0 0 14 13.25V5.664c0-.464-.184-.909-.513-1.237L10.573 1.513A1.75 1.75 0 0 0 9.336 1Zm0 1.5h5.5v2.75c0 .414.336.75.75.75h2.5v7.25a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25V2.75a.25.25 0 0 1 .25-.25Zm7 .56 1.19 1.19h-1.19ZM5.25 8a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 8Zm0 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75Z"/></svg>`),
74
+		"package": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
75
+			`><path d="M7.66.23a.75.75 0 0 1 .68 0l6 3A.75.75 0 0 1 14.75 3.9v8.2a.75.75 0 0 1-.41.67l-6 3a.75.75 0 0 1-.68 0l-6-3a.75.75 0 0 1-.41-.67V3.9a.75.75 0 0 1 .41-.67Zm.34 1.51L3.67 3.9 8 6.06l4.33-2.16ZM2.75 5.1v6.54l4.5 2.25V7.36Zm6 8.79 4.5-2.25V5.1l-4.5 2.26Z"/></svg>`),
76
+		"dot-fill": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
77
+			`><path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"/></svg>`),
6878
 		"milestone": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
6979
 			`><path d="M8 0a.75.75 0 0 1 .75.75V2h3.5c.414 0 .75.336.75.75v4.5a.75.75 0 0 1-.75.75h-3.5v1h4.5c.414 0 .75.336.75.75v4.5a.75.75 0 0 1-.75.75h-5v.25a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM8.75 3.5v3h2.75v-3Zm0 7v3h3.75v-3Z"/></svg>`),
7080
 		// S29: notification bell for the top-bar inbox link.
internal/web/static/css/shithub.cssmodified
@@ -1329,6 +1329,7 @@ button.shithub-repo-action {
13291329
   border-top: 1px solid var(--border-default);
13301330
   padding-top: 1rem;
13311331
   font-size: 0.875rem;
1332
+  --language-color-primary: #00add8;
13321333
 }
13331334
 @media (min-width: 1025px) {
13341335
   .shithub-repo-about {
@@ -1336,68 +1337,150 @@ button.shithub-repo-action {
13361337
     padding-top: 0;
13371338
   }
13381339
 }
1339
-.shithub-repo-about-heading {
1340
-  font-size: 1rem;
1341
-  font-weight: 600;
1342
-  margin: 0 0 0.5rem;
1340
+.shithub-border-grid-row {
1341
+  border-top: 1px solid var(--border-default);
1342
+  padding: 1rem 0;
1343
+}
1344
+.shithub-border-grid-row:first-child {
1345
+  border-top: 0;
1346
+  padding-top: 0;
1347
+}
1348
+.shithub-repo-about-heading,
1349
+.shithub-repo-about-section-heading {
13431350
   display: flex;
13441351
   align-items: center;
13451352
   justify-content: space-between;
1346
-}
1347
-.shithub-repo-about-desc {
1353
+  gap: 0.75rem;
13481354
   margin: 0 0 0.75rem;
13491355
   color: var(--fg-default);
1350
-  line-height: 1.4;
1356
+  font-size: 1rem;
1357
+  font-weight: 600;
1358
+  line-height: 1.5;
13511359
 }
1352
-.shithub-repo-about-empty {
1360
+.shithub-repo-about-heading h2 {
1361
+  margin: 0;
1362
+  font-size: 1rem;
1363
+}
1364
+.shithub-repo-about-heading a {
13531365
   color: var(--fg-muted);
1354
-  font-style: italic;
1366
+  display: inline-flex;
13551367
 }
1356
-.shithub-repo-about-topics {
1357
-  list-style: none;
1368
+.shithub-repo-about-desc {
13581369
   margin: 0 0 1rem;
1359
-  padding: 0;
1370
+  color: var(--fg-default);
1371
+  font-size: 1rem;
1372
+  line-height: 1.5;
1373
+}
1374
+.shithub-repo-topics {
13601375
   display: flex;
13611376
   flex-wrap: wrap;
13621377
   gap: 0.4rem;
1378
+  margin: 0 0 1rem;
13631379
 }
1364
-.shithub-pill-topic {
1365
-  background: var(--accent-subtle, #ddf4ff);
1366
-  color: var(--accent-fg, #0969da);
1367
-  text-decoration: none;
1368
-  padding: 0.15rem 0.6rem;
1369
-  border-radius: 9999px;
1370
-  font-size: 0.8rem;
1380
+.shithub-topic {
1381
+  display: inline-flex;
1382
+  padding: 0.18rem 0.55rem;
1383
+  border-radius: 999px;
1384
+  background: color-mix(in srgb, var(--accent-fg, #4493f8) 12%, transparent);
1385
+  color: var(--accent-fg, #4493f8);
1386
+  font-size: 0.75rem;
1387
+  font-weight: 600;
13711388
 }
1372
-.shithub-pill-topic:hover { text-decoration: underline; }
1373
-
1374
-.shithub-repo-about-meta {
1389
+.shithub-repo-about-list,
1390
+.shithub-repo-about-stats,
1391
+.shithub-language-list {
13751392
   list-style: none;
1376
-  margin: 0 0 1.25rem;
13771393
   padding: 0;
1394
+  margin: 0;
13781395
 }
1379
-.shithub-repo-about-meta li {
1396
+.shithub-repo-about-list li,
1397
+.shithub-repo-about-stats li,
1398
+.shithub-language-list li {
13801399
   display: flex;
13811400
   align-items: center;
13821401
   gap: 0.5rem;
1383
-  padding: 0.25rem 0;
1402
+  min-width: 0;
1403
+  margin: 0.5rem 0;
13841404
   color: var(--fg-muted);
13851405
 }
1386
-.shithub-repo-about-meta li svg { color: var(--fg-muted); flex-shrink: 0; }
1387
-.shithub-repo-about-meta li span { color: var(--fg-default); }
1388
-
1389
-.shithub-repo-about-section {
1390
-  border-top: 1px solid var(--border-default);
1391
-  padding-top: 0.75rem;
1406
+.shithub-repo-about-list svg,
1407
+.shithub-repo-about-stats svg {
1408
+  color: var(--fg-muted);
1409
+  flex: 0 0 auto;
1410
+}
1411
+.shithub-repo-about-list span,
1412
+.shithub-repo-about-stats strong,
1413
+.shithub-language-list span:nth-child(2) {
1414
+  color: var(--fg-default);
1415
+}
1416
+.shithub-repo-about-stats {
13921417
   margin-top: 0.75rem;
13931418
 }
1394
-.shithub-repo-about-section h3 {
1395
-  font-size: 0.85rem;
1419
+.shithub-repo-about-stats a {
1420
+  color: var(--fg-muted);
1421
+  display: inline-flex;
1422
+  align-items: center;
1423
+  gap: 0.5rem;
1424
+}
1425
+.shithub-repo-about-stats a:hover,
1426
+.shithub-repo-report:hover,
1427
+.shithub-repo-contributor:hover {
1428
+  color: var(--accent-fg);
1429
+  text-decoration: none;
1430
+}
1431
+.shithub-repo-report {
1432
+  display: inline-block;
1433
+  margin-top: 0.5rem;
1434
+  color: var(--fg-muted);
1435
+}
1436
+.shithub-repo-about-section-heading {
1437
+  margin-bottom: 0.5rem;
1438
+}
1439
+.shithub-repo-contributors {
1440
+  display: flex;
1441
+  flex-direction: column;
1442
+  gap: 0.5rem;
1443
+}
1444
+.shithub-repo-contributor {
1445
+  display: inline-flex;
1446
+  align-items: center;
1447
+  gap: 0.5rem;
1448
+  color: var(--fg-default);
13961449
   font-weight: 600;
1397
-  margin: 0 0 0.5rem;
1398
-  text-transform: none;
13991450
 }
1400
-.shithub-repo-about-section p { margin: 0; }
1451
+.shithub-repo-contributor img {
1452
+  width: 32px;
1453
+  height: 32px;
1454
+  border-radius: 50%;
1455
+}
1456
+.shithub-language-bar {
1457
+  display: flex;
1458
+  overflow: hidden;
1459
+  height: 0.5rem;
1460
+  margin: 0.5rem 0 0.75rem;
1461
+  border-radius: 999px;
1462
+  background: var(--border-muted);
1463
+}
1464
+.shithub-language-bar span {
1465
+  display: block;
1466
+  min-width: 2px;
1467
+}
1468
+.shithub-language-list {
1469
+  display: flex;
1470
+  flex-wrap: wrap;
1471
+  gap: 0.25rem 1rem;
1472
+}
1473
+.shithub-language-list li {
1474
+  margin: 0;
1475
+  gap: 0.35rem;
1476
+  font-size: 0.75rem;
1477
+}
1478
+.shithub-language-dot {
1479
+  width: 0.75rem;
1480
+  height: 0.75rem;
1481
+  border-radius: 50%;
1482
+  flex: 0 0 auto;
1483
+}
14011484
14021485
 .shithub-readme {
14031486
   margin-top: 1rem;
@@ -1421,41 +1504,6 @@ button.shithub-repo-action {
14211504
 .shithub-readme pre code { padding: 0; background: none; }
14221505
 .shithub-readme-plain { white-space: pre-wrap; }
14231506
1424
-.shithub-repo-about { font-size: 0.9rem; }
1425
-.shithub-repo-about-heading {
1426
-  display: flex;
1427
-  justify-content: space-between;
1428
-  align-items: center;
1429
-  gap: 0.75rem;
1430
-  margin-bottom: 0.75rem;
1431
-}
1432
-.shithub-repo-about-heading h2 { font-size: 1rem; margin: 0; }
1433
-.shithub-repo-about-heading a { color: var(--fg-muted); display: inline-flex; }
1434
-.shithub-repo-about-desc { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.45; }
1435
-.shithub-repo-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
1436
-.shithub-topic {
1437
-  display: inline-flex;
1438
-  padding: 0.18rem 0.55rem;
1439
-  border-radius: 999px;
1440
-  background: color-mix(in srgb, var(--accent-fg, #4493f8) 12%, transparent);
1441
-  color: var(--accent-fg, #4493f8);
1442
-  font-size: 0.8rem;
1443
-  font-weight: 600;
1444
-}
1445
-.shithub-repo-about-list {
1446
-  list-style: none;
1447
-  padding: 0.85rem 0 0;
1448
-  margin: 0;
1449
-  border-top: 1px solid var(--border-default);
1450
-  color: var(--fg-muted);
1451
-}
1452
-.shithub-repo-about-list li {
1453
-  display: flex;
1454
-  align-items: center;
1455
-  gap: 0.55rem;
1456
-  margin: 0.55rem 0;
1457
-}
1458
-.shithub-repo-about-list svg { flex: 0 0 auto; }
14591507
 @media (max-width: 900px) {
14601508
   .shithub-repo-header-inner { align-items: flex-start; flex-direction: column; }
14611509
   .shithub-repo-content-grid { grid-template-columns: 1fr; }
internal/web/templates/_repo_about_sidebar.htmlmodified
@@ -1,26 +1,74 @@
11
 {{ define "repo-about-sidebar" -}}
22
 <aside class="shithub-repo-about" aria-label="Repository information">
3
-  <div class="shithub-repo-about-heading">
4
-    <h2>About</h2>
5
-    {{ if .CanSettings }}<a href="/{{ .Owner }}/{{ .Repo.Name }}/settings/general" aria-label="Edit repository about">{{ octicon "gear" }}</a>{{ end }}
3
+  <div class="shithub-border-grid">
4
+    <section class="shithub-border-grid-row">
5
+      <div class="shithub-repo-about-heading">
6
+        <h2>About</h2>
7
+        {{ if .CanSettings }}<a href="/{{ .Owner }}/{{ .Repo.Name }}/settings/general" aria-label="Edit repository about">{{ octicon "gear" }}</a>{{ end }}
8
+      </div>
9
+      {{ if .Repo.Description }}
10
+        <p class="shithub-repo-about-desc">{{ .Repo.Description }}</p>
11
+      {{ else }}
12
+        <p class="shithub-muted">No description, website, or topics provided.</p>
13
+      {{ end }}
14
+      {{ if .RepoTopics }}
15
+      <div class="shithub-repo-topics">
16
+        {{ range .RepoTopics }}<a href="/search?q=topic%3A{{ . }}" class="shithub-topic">{{ . }}</a>{{ end }}
17
+      </div>
18
+      {{ end }}
19
+      <ul class="shithub-repo-about-list">
20
+        {{ if .README }}<li>{{ octicon "book" }} <a href="#readme">Readme</a></li>{{ end }}
21
+        {{ if .Repo.LicenseKey.Valid }}<li>{{ octicon "law" }} <span>{{ .Repo.LicenseKey.String }} license</span></li>{{ end }}
22
+        <li>{{ octicon "pulse" }} <a href="/{{ .Owner }}/{{ .Repo.Name }}/activity">Activity</a></li>
23
+        <li>{{ octicon "note" }} <a href="/{{ .Owner }}/{{ .Repo.Name }}/settings/custom-properties">Custom properties</a></li>
24
+      </ul>
25
+      <ul class="shithub-repo-about-stats">
26
+        <li><a href="/{{ .Owner }}/{{ .Repo.Name }}/stargazers">{{ octicon "star" }} <strong>{{ .Repo.StarCount }}</strong> star{{ if ne .Repo.StarCount 1 }}s{{ end }}</a></li>
27
+        <li><a href="/{{ .Owner }}/{{ .Repo.Name }}/watchers">{{ octicon "eye" }} <strong>{{ .Repo.WatcherCount }}</strong> watching</a></li>
28
+        <li><a href="/{{ .Owner }}/{{ .Repo.Name }}/forks">{{ octicon "repo-forked" }} <strong>{{ .Repo.ForkCount }}</strong> fork{{ if ne .Repo.ForkCount 1 }}s{{ end }}</a></li>
29
+      </ul>
30
+      <a class="shithub-repo-report" href="/{{ .Owner }}/{{ .Repo.Name }}/report">Report repository</a>
31
+    </section>
32
+
33
+    <section class="shithub-border-grid-row">
34
+      <h2 class="shithub-repo-about-section-heading">Releases</h2>
35
+      <p class="shithub-muted">No releases published</p>
36
+      {{ if .CanSettings }}<a href="/{{ .Owner }}/{{ .Repo.Name }}/releases/new">Create a new release</a>{{ end }}
37
+    </section>
38
+
39
+    <section class="shithub-border-grid-row">
40
+      <h2 class="shithub-repo-about-section-heading">Packages</h2>
41
+      <p class="shithub-muted">No packages published</p>
42
+      {{ if .CanSettings }}<a href="/{{ .Owner }}/{{ .Repo.Name }}/packages/new">Publish your first package</a>{{ end }}
43
+    </section>
44
+
45
+    <section class="shithub-border-grid-row">
46
+      <h2 class="shithub-repo-about-section-heading">Contributors</h2>
47
+      <div class="shithub-repo-contributors">
48
+        <a href="/{{ .Owner }}/{{ .Repo.Name }}/graphs/contributors" class="shithub-repo-contributor">
49
+          <img src="/avatars/{{ .Owner }}" alt="" width="32" height="32">
50
+          <span>{{ .Owner }}</span>
51
+        </a>
52
+      </div>
53
+    </section>
54
+
55
+    <section class="shithub-border-grid-row">
56
+      <h2 class="shithub-repo-about-section-heading">Languages</h2>
57
+      {{ if .Repo.PrimaryLanguage.Valid }}
58
+      <div class="shithub-language-bar" aria-hidden="true">
59
+        <span style="background-color: var(--language-color-primary); width: 100%;"></span>
60
+      </div>
61
+      <ul class="shithub-language-list">
62
+        <li>
63
+          <span class="shithub-language-dot" style="background-color: var(--language-color-primary);"></span>
64
+          <span>{{ .Repo.PrimaryLanguage.String }}</span>
65
+          <span>100.0%</span>
66
+        </li>
67
+      </ul>
68
+      {{ else }}
69
+      <p class="shithub-muted">No languages detected.</p>
70
+      {{ end }}
71
+    </section>
672
   </div>
7
-  {{ if .Repo.Description }}
8
-    <p class="shithub-repo-about-desc">{{ .Repo.Description }}</p>
9
-  {{ else }}
10
-    <p class="shithub-muted">No description, website, or topics provided.</p>
11
-  {{ end }}
12
-  {{ if .RepoTopics }}
13
-  <div class="shithub-repo-topics">
14
-    {{ range .RepoTopics }}<a href="/search?q=topic%3A{{ . }}" class="shithub-topic">{{ . }}</a>{{ end }}
15
-  </div>
16
-  {{ end }}
17
-  <ul class="shithub-repo-about-list">
18
-    <li>{{ octicon "book" }} <a href="#readme">Readme</a></li>
19
-    {{ if .Repo.LicenseKey.Valid }}<li>{{ octicon "law" }} {{ .Repo.LicenseKey.String }} license</li>{{ end }}
20
-    {{ if .Repo.PrimaryLanguage.Valid }}<li>{{ octicon "code" }} {{ .Repo.PrimaryLanguage.String }}</li>{{ end }}
21
-    <li>{{ octicon "star" }} {{ .Repo.StarCount }} star{{ if ne .Repo.StarCount 1 }}s{{ end }}</li>
22
-    <li>{{ octicon "eye" }} {{ .Repo.WatcherCount }} watching</li>
23
-    <li>{{ octicon "repo-forked" }} {{ .Repo.ForkCount }} fork{{ if ne .Repo.ForkCount 1 }}s{{ end }}</li>
24
-  </ul>
2573
 </aside>
2674
 {{- end }}