diff --git a/palette b/palette index 5653f95..492b385 100755 Binary files a/palette and b/palette differ diff --git a/web.go b/web.go index afef6e8..26b02d7 100644 --- a/web.go +++ b/web.go @@ -102,11 +102,21 @@ func (a *apiServer) renderPaste(w http.ResponseWriter, row *PasteRow, justCreate if row.ExpiresAt.Valid { expIn = expiryString(row.ExpiresAt.Int64) } + lang := row.Language.String + if lang == "" { + lang = "text" + } + summary := fmt.Sprintf("%s · %s · %d views · %s", lang, humanSize(len(row.Content)), row.ViewCount, agoString(row.CreatedAt)) data := map[string]any{ "Page": "paste", "ID": row.ID, "Title": row.Title.String, "Language": row.Language.String, + "StatsSummary": summary, + "SizeHuman": humanSize(len(row.Content)), + "HasPassword": row.PasswordHash.Valid, + "BurnAfterRead": row.BurnAfterRead, + "CustomSlug": row.CustomSlug.String, "ContentHTML": template.HTML(highlightCode(row.Content, row.Language.String)), // safe: highlightCode escapes all non-span text "ContentAttr": row.Content, "Gutter": strings.TrimSuffix(gutter, "\n"), diff --git a/web/static/app.css b/web/static/app.css index ae73d56..94456ee 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -114,6 +114,18 @@ body { .meta-bar h1 { font-size: 29.2px; font-weight: 600; } .slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: var(--radius); } .tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 9px; } +.paste-title-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; } +.paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; } +.stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } +.stats-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 10px 14px; cursor: pointer; text-align: left; } +.stats-head:hover { color: var(--fg); background: var(--surface-2); } +.stats-chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; } +.stats-pill.open .stats-chev { transform: rotate(180deg); } +.stats-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.stats-body { border-top: 1px solid var(--border); } +.stats-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; padding: 12px 16px; font-size: 20.7px; } +.stats-k { color: var(--muted-fg); } +.stats-v { color: var(--fg); word-break: break-all; } .meta-bar .spacer { flex: 1; } .iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; } .iconbtn:hover { color: var(--fg); border-color: var(--muted); } diff --git a/web/templates/paste.html b/web/templates/paste.html index 32547a9..705c890 100644 --- a/web/templates/paste.html +++ b/web/templates/paste.html @@ -2,17 +2,36 @@ {{template "topbar" .}}
-
+

{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}

- /{{.ID}} - {{if .Language}}{{.Language}}{{end}} - {{if .ExpiresAt}}expires in {{.ExpiresIn}}{{end}} + /{{if .CustomSlug}}{{.CustomSlug}}{{else}}{{.ID}}{{end}}
raw copy {{if .DeletionToken}}delete{{end}}
+
+
+ + +
+
{{if .JustCreated}}
@@ -22,13 +41,7 @@
{{end}}
-
{{.LineCount}} lines · {{.SizeBytes}} bytes
{{.Gutter}}
{{.ContentHTML}}
-
- Created {{.CreatedAgo}} - {{.ViewCount}} views - {{.Visibility}} -
@@ -41,6 +54,15 @@ function toast(msg) { clearTimeout(t._h); t._h = setTimeout(() => t.classList.remove('show'), 2000); } +function toggleStats() { + const body = document.getElementById('stats-body'); + const pill = document.getElementById('stats-pill'); + const btn = document.getElementById('stats-toggle'); + const open = body.hidden; + body.hidden = !open; + pill.classList.toggle('open', open); + btn.setAttribute('aria-expanded', open ? 'true' : 'false'); +} function copyContent() { navigator.clipboard.writeText(document.getElementById('raw-content').value); toast('Copied');