From 36fd57061c532c2edca08c9d2e82930418b02f3e Mon Sep 17 00:00:00 2001
From: "oppili.bsky.social" <nerdy@peppe.rs>
Date: Sat, 5 Apr 2025 18:47:45 +0000
Subject: [PATCH] implement cache busting for tw.css

- proper tabindex for login page form
- overflow for handles in profile page
---
 appview/pages/funcmap.go                  |  1 +
 appview/pages/pages.go                    | 23 ++++++++++++++++++++++-
 appview/pages/templates/layouts/base.html |  3 +--
 appview/pages/templates/user/login.html   | 12 ++++++++++--
 appview/pages/templates/user/profile.html |  7 +++++--
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index 04b68686..775006a0 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -168,6 +168,7 @@ func funcMap() template.FuncMap {
 			}
 			return template.HTML(data)
 		},
+		"cssContentHash": CssContentHash,
 	}
 }
 
diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index 94257162..fdfaa64a 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -2,7 +2,9 @@ package pages
 
 import (
 	"bytes"
+	"crypto/sha256"
 	"embed"
+	"encoding/hex"
 	"fmt"
 	"html/template"
 	"io"
@@ -730,7 +732,9 @@ func (p *Pages) Static() http.Handler {
 
 func Cache(h http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		if strings.HasSuffix(r.URL.Path, ".css") {
+		path := strings.Split(r.URL.Path, "?")[0]
+
+		if strings.HasSuffix(path, ".css") {
 			// on day for css files
 			w.Header().Set("Cache-Control", "public, max-age=86400")
 		} else {
@@ -740,6 +744,23 @@ func Cache(h http.Handler) http.Handler {
 	})
 }
 
+func CssContentHash() string {
+	cssFile, err := Files.Open("static/tw.css")
+	if err != nil {
+		log.Printf("Error opening CSS file: %v", err)
+		return ""
+	}
+	defer cssFile.Close()
+
+	hasher := sha256.New()
+	if _, err := io.Copy(hasher, cssFile); err != nil {
+		log.Printf("Error hashing CSS file: %v", err)
+		return ""
+	}
+
+	return hex.EncodeToString(hasher.Sum(nil))[:8] // Use first 8 chars of hash
+}
+
 func (p *Pages) Error500(w io.Writer) error {
 	return p.execute("errors/500", w, nil)
 }
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index 74d756ad..9db73639 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -8,8 +8,7 @@
                 content="width=device-width, initial-scale=1.0"
             />
             <script src="/static/htmx.min.js"></script>
-            <link href="/static/tw.css" rel="stylesheet" type="text/css" />
-            
+            <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
             <title>{{ block "title" . }}{{ end }} · tangled</title>
             {{ block "extrameta" . }}{{ end }}
         </head>
diff --git a/appview/pages/templates/user/login.html b/appview/pages/templates/user/login.html
index 9ed5491e..5c8d45c9 100644
--- a/appview/pages/templates/user/login.html
+++ b/appview/pages/templates/user/login.html
@@ -8,7 +8,7 @@
                 content="width=device-width, initial-scale=1.0"
             />
             <script src="/static/htmx.min.js"></script>
-            <link rel="stylesheet" href="/static/tw.css" type="text/css" />
+            <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
             <title>login</title>
         </head>
         <body class="flex items-center justify-center min-h-screen">
@@ -27,7 +27,13 @@
                 >
                     <div class="flex flex-col">
                         <label for="handle">handle</label>
-                        <input type="text" id="handle" name="handle" required />
+                        <input 
+                          type="text"
+                          id="handle"
+                          name="handle"
+                          tabindex="1"
+                          required
+                        />
                         <span class="text-xs text-gray-500 mt-1">
                             You need to use your
                             <a href="https://bsky.app">Bluesky</a> handle to log
@@ -41,6 +47,7 @@
                             type="password"
                             id="app_password"
                             name="app_password"
+                            tabindex="2"
                             required
                         />
                         <span class="text-xs text-gray-500 mt-1">
@@ -57,6 +64,7 @@
                         class="btn w-full my-2 mt-6"
                         type="submit"
                         id="login-button"
+                        tabindex="3"
                     >
                         <span>login</span>
                     </button>
diff --git a/appview/pages/templates/user/profile.html b/appview/pages/templates/user/profile.html
index 59d2485c..fb9e7e6e 100644
--- a/appview/pages/templates/user/profile.html
+++ b/appview/pages/templates/user/profile.html
@@ -108,8 +108,11 @@
                 <img class="w-3/4 rounded-full p-2" src="{{ .AvatarUri }}" />
             {{ end }}
         </div>
-        <p class="text-xl font-bold text-center dark:text-white">
-            {{ truncateAt30 (didOrHandle .UserDid .UserHandle) }}
+        <p 
+          title="{{ didOrHandle .UserDid .UserHandle }}"
+          class="text-lg font-bold text-center dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full"
+          >
+          {{ didOrHandle .UserDid .UserHandle }}
         </p>
         <div class="text-sm text-center dark:text-gray-300">
             <span>{{ .ProfileStats.Followers }} followers</span>
-- 
2.51.2