repo home: clone line and language meter lead as one vitals card
commit 2d5549287a249527af8486df6938ba958feb47e0 · parent f748a0a942
· browse this tree
Ximianth, 2026-10-30 14:38:38 UTC
The two most useful impressions on a project page were at the bottom; now they sit in one compact rough box between the tagline and the README, so they land before the exhibit steers. The arc drops its clone button: a button that scrolls to something already in view is a non-move.
diff --git a/chrome.go b/chrome.go index 0f0e5d5..a813562 100644 --- a/chrome.go +++ b/chrome.go @@ -243,21 +243,26 @@ article .tagline { margin: 0 0 .75rem; } -/* The clone box and branch list sit centered under the plaque, like gallery cards. */ -article p.clone, article #branches { text-align: center; margin-left: auto; margin-right: auto; } -article p.clone.boxed { display: block; width: fit-content; } - -/* The language meter: composition by bytes at the shown commit, in its rough box - between the plaque and the clone line. Colors are linguist's conventions, used as - swatches only; names and percentages stay ink. The faint inset ring keeps pale - swatches from dissolving into the paper (or the dark ground). */ -article .langmeter { +/* The vitals card: the clone line and the language meter in one rough box, + placed before the README so the useful impressions land before the exhibit steers. + Meter colors are linguist's conventions, used as swatches only; names and + percentages stay ink. The faint inset ring keeps pale swatches from dissolving + into the paper (or the dark ground). */ +article .vitals { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; - margin: 0 auto 1.4rem; + margin: 0 auto 1.8rem; + padding: .4rem 1.2rem .5rem; } +article .vitals p.clone { margin: .2rem 0; } +article .vitals .langmeter { display: block; margin: .6rem 0 0; } + +/* The clone line and branch list sit centered, like gallery cards. */ +article p.clone, article #branches { text-align: center; margin-left: auto; margin-right: auto; } + + .langmeter .langbar { display: flex; gap: 3px; diff --git a/pages.go b/pages.go index 5138212..4060649 100644 --- a/pages.go +++ b/pages.go @@ -135,19 +135,22 @@ func (s *server) serveIndex(w http.ResponseWriter, r *http.Request, snap *snapsh // ---- repo home ---- -// The repo home: the README is the exhibit, framed with a plaque beneath; -// the clone line and the branch list stand below it as the arc's jump targets. +// The repo home: the vitals come first -- the clone line and the language meter in one +// compact card, the useful impressions offered before the README's exhibit takes over -- +// then the framed README with its plaque, and the branch list at the bottom. var homeTmpl = template.Must(template.New("home").Parse(`{{if .Description}}<p class="tagline">{{.Description}}</p> {{end}}{{if .Empty}}<p>This repository has no commits yet.</p> <p class="clone" id="clone">clone: <code>git clone {{.CloneURL}}</code></p> -{{else}}{{if .Readme}}<div class="exhibit">{{.Readme}}</div> -<p class="plaque">{{.ReadmeName}} · {{.ReadmeSize}} · {{.Ref}} = <code>{{.ShortSha}}</code></p> -{{end}}{{if .Langs}}<div class="langmeter boxed"> +{{else}}<div class="vitals boxed"> +<p class="clone" id="clone">clone: <code>git clone {{.CloneURL}}</code></p> +{{if .Langs}}<div class="langmeter"> <div class="langbar">{{range .Langs}}<span class="seg{{if not .Color}} other{{end}}" style="flex-grow:{{.Pct}}{{if .Color}};background:{{.Color}}{{end}}" title="{{.Name}} {{.Pct}}%"></span>{{end}}</div> <p class="langchips">{{range .Langs}}<span class="chip"><span class="swatch{{if not .Color}} other{{end}}"{{if .Color}} style="background:{{.Color}}"{{end}}></span>{{.Name}} {{.Pct}}%</span>{{end}}</p> </div> -{{end}}<p class="clone boxed" id="clone">clone: <code>git clone {{.CloneURL}}</code></p> -<p id="branches">branches: {{range $i, $b := .Branches}}{{if $i}}, {{end}}<a href="{{$b.Href}}">{{$b.Name}}</a>{{end}}{{if .Tags}} +{{end}}</div> +{{if .Readme}}<div class="exhibit">{{.Readme}}</div> +<p class="plaque">{{.ReadmeName}} · {{.ReadmeSize}} · {{.Ref}} = <code>{{.ShortSha}}</code></p> +{{end}}<p id="branches">branches: {{range $i, $b := .Branches}}{{if $i}}, {{end}}<a href="{{$b.Href}}">{{$b.Name}}</a>{{end}}{{if .Tags}} · tags: {{range $i, $t := .Tags}}{{if $i}}, {{end}}<a href="{{$t.Href}}">{{$t.Name}}</a>{{end}}{{end}}</p> {{end}}`)) @@ -264,13 +267,14 @@ func (s *server) serveHome(w http.ResponseWriter, r *http.Request, snap *snapsho Title: rp.name, Crumbs: repoCrumbs(snap.face.siteName, rp.name), } + // No clone button on the arc: the clone line sits right below it in the vitals card, + // and a button that scrolls to something already in view is a non-move. if !d.Empty { pd.Dawn = true pd.Arc = dawnArc([]arcButton{ {Label: "files", Title: "browse the tree at " + db, Href: treeHref(rp.name, db, "") + "/"}, {Label: "log", Title: "commit log of " + db, Href: "/" + rp.name + "/log/" + db}, {Label: "branches", Title: "branches and tags", Href: "#branches"}, - {Label: "clone", Title: "the clone command", Href: "#clone"}, }) } s.render(w, snap, homeTmpl, d, pd) diff --git a/testdata/pages.md b/testdata/pages.md index f4fe89d..cf7a652 100644 --- a/testdata/pages.md +++ b/testdata/pages.md @@ -88,22 +88,23 @@ Content-Type: text/html; charset=utf-8 <nav class="crumbs"> <a href="/">test</a> / fixturama </nav> -<nav class="arc" aria-label="page moves" style="--arc-drop:67px"> -<a class="va" href="/fixturama/tree/main/" title="browse the tree at main" style="--dy:67px">files</a> -<a class="vb" href="/fixturama/log/main" title="commit log of main" style="--dy:7px">log</a> -<a class="vc" href="#branches" title="branches and tags" style="--dy:7px">branches</a> -<a class="va" href="#clone" title="the clone command" style="--dy:67px">clone</a> +<nav class="arc" aria-label="page moves" style="--arc-drop:28px"> +<a class="va" href="/fixturama/tree/main/" title="browse the tree at main" style="--dy:28px">files</a> +<a class="vb" href="/fixturama/log/main" title="commit log of main" style="--dy:0px">log</a> +<a class="vc" href="#branches" title="branches and tags" style="--dy:28px">branches</a> </nav> <main><article><p class="tagline">the fixture</p> +<div class="vitals boxed"> +<p class="clone" id="clone">clone: <code>git clone http://socle.example/fixturama</code></p> +<div class="langmeter"> +<div class="langbar"><span class="seg" style="flex-grow:69.9;background:#00ADD8" title="Go 69.9%"></span><span class="seg" style="flex-grow:20.3;background:#dea584" title="Rust 20.3%"></span><span class="seg" style="flex-grow:9.9;background:#663399" title="CSS 9.9%"></span></div> +<p class="langchips"><span class="chip"><span class="swatch" style="background:#00ADD8"></span>Go 69.9%</span><span class="chip"><span class="swatch" style="background:#dea584"></span>Rust 20.3%</span><span class="chip"><span class="swatch" style="background:#663399"></span>CSS 9.9%</span></p> +</div> +</div> <div class="exhibit"><h1 id="fixturama">Fixturama<a href="#fixturama" class="anchor">🔗</a></h1> <p>A repo that exists to be looked at.</p> </div> <p class="plaque">README.md · 49 B · main = <code>ced91a8519</code></p> -<div class="langmeter boxed"> -<div class="langbar"><span class="seg" style="flex-grow:69.9;background:#00ADD8" title="Go 69.9%"></span><span class="seg" style="flex-grow:20.3;background:#dea584" title="Rust 20.3%"></span><span class="seg" style="flex-grow:9.9;background:#663399" title="CSS 9.9%"></span></div> -<p class="langchips"><span class="chip"><span class="swatch" style="background:#00ADD8"></span>Go 69.9%</span><span class="chip"><span class="swatch" style="background:#dea584"></span>Rust 20.3%</span><span class="chip"><span class="swatch" style="background:#663399"></span>CSS 9.9%</span></p> -</div> -<p class="clone boxed" id="clone">clone: <code>git clone http://socle.example/fixturama</code></p> <p id="branches">branches: <a href="/fixturama/tree/dev/">dev</a>, <a href="/fixturama/tree/main/">main</a> · tags: <a href="/fixturama/tree/v1.0/">v1.0</a></p> </article></main>