From 26ce57a710aac4cd8e4efcf4656c1f2448476c0d Mon Sep 17 00:00:00 2001
From: Runxi Yu <me@runxiyu.org>
Date: Mon, 10 Feb 2025 19:55:10 +0800
Subject: *: Some simple styling with tables

---
 handle_repo_tree.go          |  2 +-
 render_readme.go             |  2 +-
 static/style.css             | 26 ++++++++++++++++++++------
 templates/repo_index.html    | 27 ++++++++++++++++++++++++---
 templates/repo_tree_dir.html | 30 +++++++++++++++++++++++-------
 5 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/handle_repo_tree.go b/handle_repo_tree.go
index 5b27f8f..0782ce8 100644
--- a/handle_repo_tree.go
+++ b/handle_repo_tree.go
@@ -16,7 +16,7 @@ func handle_repo_tree(w http.ResponseWriter, r *http.Request) {
 	data := make(map[string]any)
 	// TODO: Sanitize path values
 	ref_name, category_name, repo_name, path_spec := r.PathValue("ref"), r.PathValue("category_name"), r.PathValue("repo_name"), strings.TrimSuffix(r.PathValue("rest"), "/")
-	data["category_name"], data["repo_name"], data["path_spec"] = category_name, repo_name, path_spec
+	data["ref"], data["category_name"], data["repo_name"], data["path_spec"] = ref_name, category_name, repo_name, path_spec
 	repo, err := open_git_repo(category_name, repo_name)
 	if err != nil {
 		_, _ = w.Write([]byte("Error opening repo: " + err.Error()))
diff --git a/render_readme.go b/render_readme.go
index 2a8fe0c..2d625aa 100644
--- a/render_readme.go
+++ b/render_readme.go
@@ -12,7 +12,7 @@ import (
 func render_readme_at_tree(tree *object.Tree) any {
 	readme_file, err := tree.File("README.md")
 	if err != nil {
-		return "There is no README available."
+		return ""
 	}
 	readme_file_contents, err := readme_file.Contents()
 	if err != nil {
diff --git a/static/style.css b/static/style.css
index bde80a8..d0d20ba 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,17 +1,19 @@
 html {
 	font-family: sans-serif;
-	--link-color: #7c3e66;
-	--text-decoration-color: #b8b8b8;
-	--box-background-color: #e6e6e6;
+	--link-color: hsl(320, 50%, 36%);
+	--border-color: hsl(0, 0%, 72%);
+	--text-decoration-color: hsl(0, 0%, 72%);
+	--darker-box-background-color: hsl(0, 0%, 92%);
+	--lighter-box-background-color: hsl(0, 0%, 95%);
 }
 html, code, pre {
-	font-size: 1rem;
+	font-size: 1rem; /* TODO: Not always correct */
 }
 
 .padding-wrapper {
 	padding: 0 1rem;
 	max-width: 50em;
-	margin: 0 auto;
+	margin: 1rem auto;
 }
 .padding-wrapper > * {
 	width: 100%;
@@ -21,7 +23,19 @@ a:link, a:visited {
 	color: var(--link-color);
 }
 code:not(pre > code) {
-	background-color: var(--box-background-color);
+	background-color: var(--lighter-box-background-color);
 	border-radius: 2px;
 	padding: 2px;
 }
+table {
+	border: var(--border-color) solid 1px;
+	border-spacing: 0px;
+	border-collapse: collapse;
+}
+td, th {
+	padding: 3px 5px;
+	border: var(--border-color) solid 1px;
+}
+th {
+	background-color: var(--darker-box-background-color);
+}
diff --git a/templates/repo_index.html b/templates/repo_index.html
index ec937a0..72fec06 100644
--- a/templates/repo_index.html
+++ b/templates/repo_index.html
@@ -9,6 +9,9 @@
 		<div class="padding-wrapper">
 			<table id="recent-commits">
 				<thead>
+					<tr>
+						<th colspan="4">Recent Commits</th>
+					</tr>
 					<tr>
 						<th scope="col">ID</th>
 						<th scope="col">Title</th>
@@ -35,6 +38,9 @@
 		<div class="padding-wrapper">
 			<table id="file-tree">
 				<thead>
+					<tr>
+						<th colspan="3">/ on {{ .ref }}</th>
+					</tr>
 					<tr>
 						<th scope="col">Mode</th>
 						<th scope="col">Name</th>
@@ -58,9 +64,24 @@
 			</div>
 		</div>
 		<div class="padding-wrapper">
-			<div id="readme">
-				{{ .readme -}}
-			</div>
+			{{ if .readme }}
+				<table id="readme">
+					<thead>
+						<tr>
+							<th>
+								README.md
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>
+								{{ .readme -}}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			{{ end }}
 		</div>
 	</body>
 </html>
diff --git a/templates/repo_tree_dir.html b/templates/repo_tree_dir.html
index 1306167..0af63d6 100644
--- a/templates/repo_tree_dir.html
+++ b/templates/repo_tree_dir.html
@@ -7,11 +7,13 @@
 	</head>
 	<body class="repo-tree-dir">
 		<div class="padding-wrapper">
-			<p>
-				/{{ .path_spec }}/
-			</p>
 			<table id="file-tree">
 				<thead>
+					<tr>
+						<th colspan="3">
+							/{{ .path_spec }}/ on {{ .ref }}
+						</th>
+					</tr>
 					<tr>
 						<th scope="col">Mode</th>
 						<th scope="col">Name</th>
@@ -19,7 +21,6 @@
 					</tr>
 				</thead>
 				<tbody>
-					{{- $ref := .ref }}
 					{{- $path_spec := .path_spec }}
 					{{- range .files }}
 						<tr>
@@ -36,9 +37,24 @@
 			</div>
 		</div>
 		<div class="padding-wrapper">
-			<div id="readme">
-				{{ .readme -}}
-			</div>
+			{{ if .readme }}
+				<table id="readme">
+					<thead>
+						<tr>
+							<th>
+								README.md
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>
+								{{ .readme -}}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			{{ end }}
 		</div>
 	</body>
 </html>
-- 
cgit v1.2.3