fix(frontend): malformed title and quote after hot update

5 files changed, 16 insertions, 9 deletions

diff --git a/backend/data.go b/backend/data.go
index bc3136c..2d9f97d 100644
--- a/backend/data.go
+++ b/backend/data.go
@@ -11,6 +11,7 @@ import (
 	"log/slog"
 	"math/rand"
 	"net/http"
+	"net/url"
 	"regexp"
 	"strings"
 )
@@ -93,8 +94,8 @@ func (d *data) handleGeneric(w http.ResponseWriter, r *http.Request, name string
 	exec := "base.html"
 	if r.Context().Value(isUpdateKey).(bool) {
 		exec = "body"
-		w.Header().Set("Updated-Title", d.Title())
-		w.Header().Set("Updated-Quote", d.Quote)
+		w.Header().Set("Updated-Title", url.QueryEscape(d.Title()))
+		w.Header().Set("Updated-Quote", url.QueryEscape(d.Quote))
 	}
 	if custom == nil {
 		err = t.ExecuteTemplate(w, exec, d)
diff --git a/backend/logs.go b/backend/logs.go
index 81e6f77..86e0221 100644
--- a/backend/logs.go
+++ b/backend/logs.go
@@ -23,8 +23,9 @@ var (
 type logData struct {
 	*data
 	EntryInfo
-	Content template.HTML `toml:"-"`
-	Slug    string        `toml:"-"`
+	LogTitle string
+	Content  template.HTML
+	Slug     string
 }
 
 func (d *logData) SetData(dt *data) {
@@ -35,6 +36,10 @@ func (d *logData) PubDate() string {
 	return d.PubLocalDate.String()
 }
 
+func (d *logData) Title() string {
+	return d.data.Title()
+}
+
 type image struct {
 	Src    string `toml:"src"`
 	Alt    string `toml:"alt"`
@@ -157,6 +162,7 @@ func parseLog(d *logData, mu *sync.Mutex, path, slug string) bool {
 	if !ok {
 		return false
 	}
+	d.LogTitle = d.EntryInfo.Title
 	mu.Lock()
 	logs[path] = d
 	mu.Unlock()
diff --git a/backend/templates/components.html b/backend/templates/components.html
index 2758a8b..2b43579 100644
--- a/backend/templates/components.html
+++ b/backend/templates/components.html
@@ -2,7 +2,7 @@
 <article>
     {{ range .Logs }}
     <article>
-        <h2><a href="/logs/{{ .Slug }}">{{ .Title }}</a></h2>
+        <h2><a href="/logs/{{ .Slug }}">{{ .LogTitle }}</a></h2>
         <figure>
             <a href="/logs/{{ .Slug }}"><img src="{{ static .Img.Src }}" alt="{{ .Img.Alt }}"></a>
             <figcaption>{{ .Img.Legend }}</figcaption>
diff --git a/backend/templates/log.html b/backend/templates/log.html
index 47a5d04..1dcf1bc 100644
--- a/backend/templates/log.html
+++ b/backend/templates/log.html
@@ -1,6 +1,6 @@
 {{define "body"}}
 <article id="content">
-    <h1>{{ .Title }}</h1>
+    <h1>{{ .LogTitle }}</h1>
     <p>
         {{ .Description }}
     </p>
@@ -10,4 +10,4 @@
     </figure>
     {{ .Content }}
 </article>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/frontend/index.ts b/frontend/index.ts
index 1d87f0a..a00854f 100644
--- a/frontend/index.ts
+++ b/frontend/index.ts
@@ -21,10 +21,10 @@ function setupAnchors() {
 document.addEventListener("htmx:afterSettle", e => {
     if (e.detail.xhr === undefined) return
     const title = e.detail.xhr.getResponseHeader("Updated-Title")
-    if (title?.length !== 0) document.title = title
+    if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " ") 
     const quote = e.detail.xhr.getResponseHeader("Updated-Quote")
     if (quote?.length !== 0)
-        document.querySelector("#quote")!.innerHTML = "«&thinsp;" + quote + "&thinsp;»"
+        document.querySelector("#quote")!.innerHTML = "«&thinsp;" + decodeURIComponent(quote).replaceAll("+", " ") + "&thinsp;»"
     setupAnchors()
 })