improve UI with classless css library and other various modifications

cmd/web/handlers_user.go

@@ -98,7 +98,8 @@ func (app *application) postUserLogout(w http.ResponseWriter, r *http.Request) {
 	}
 	app.sessionManager.Remove(r.Context(), "authenticatedUserId")
 	app.sessionManager.Put(r.Context(), "flash", "You've been logged out successfully!")
-	http.Redirect(w, r, "/", http.StatusSeeOther)
+	w.Header().Add("HX-Redirect", "/")
+	// http.Redirect(w, r, "/", http.StatusSeeOther)
 }
 
 // func (app *application) getUsersList(w http.ResponseWriter, r *http.Request) {

ui/static/css/style.css

@@ -1,12 +1,12 @@
-html {
+/* html {
   background: lightgray;
-}
+} */
 
 body {
   max-width: 1024px;
   margin: 1rem auto;
   padding: 1rem;
-  background: white;
+  /* background: white; */
   font-size: 1.2rem;
   line-height: 1.5;
   font-family: Arial, Helvetica, sans-serif;
@@ -41,8 +41,8 @@ nav button {
   background: none;
   font-family: unset;
   font-size: unset;
-  color: blue;
+  /* color: blue; */
-  text-decoration: underline;
+  /* text-decoration: underline; */
   cursor: pointer;
 }
 
@@ -75,5 +75,5 @@ footer {
 }
 
 a {
-  color: blue;
+  /* color: blue; */
 }

ui/views/common.templ

@@ -2,6 +2,8 @@ package views
 
 import "git.32bit.cafe/32bitcafe/guestbook/internal/models"
 import "strconv"
+import "fmt"
+import "strings"
 
 type CommonData struct {
     CurrentYear int
@@ -21,6 +23,13 @@ func slugToShortId(slug string) uint64 {
     return id
 }
 
+func externalUrl(url string) string {
+    if !strings.HasPrefix(url, "http") {
+        return "http://" + url
+    }
+    return url
+}
+
 templ commonHeader() {
     <header>
         <h1><a href="/">webweav.ing</a></h1>
@@ -28,6 +37,7 @@ templ commonHeader() {
 }
 
 templ topNav(data CommonData) {
+    {{ hxHeaders := fmt.Sprintf("{\"X-CSRF-Token\": \"%s\"}", data.CSRFToken) }}
     <nav>
         <div>
             if data.IsAuthenticated {
@@ -39,10 +49,7 @@ templ topNav(data CommonData) {
                 <a href="/guestbooks">All Guestbooks</a> |
                 <a href="/websites">My Websites</a> | 
                 <a href="/users/settings">Settings</a> | 
-                <form action="/users/logout" method="post">
+                <a href="#" hx-post="/users/logout" hx-headers={ hxHeaders }>Logout</a>
-                    <input type="hidden" name="csrf_token" value={ data.CSRFToken }>
-                    <button>Logout</button>
-                </form>
             } else {
                 <a href="/users/register">Create an Account</a> | 
                 <a href="/users/login">Login</a>
@@ -54,8 +61,7 @@ templ topNav(data CommonData) {
 
 templ commonFooter() {
     <footer>
-        <p>Generated with Templ</p>
+        <p>A <a href="https://32bit.cafe">32bit.cafe</a> Project</p>
-        <p>A <a href="https://32bit.cafe">32-bit cafe</a> Project</p>
     </footer>
 }
 
@@ -66,6 +72,7 @@ templ base(title string, data CommonData) {
             <title>{ title } - webweav.ing</title>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1">
+            <link href="/static/css/classless.min.css" rel="stylesheet">
             <link href="/static/css/style.css" rel="stylesheet">
             <script src="/static/js/htmx.min.js"></script>
         </head>

ui/views/common_templ.go

@@ -10,6 +10,8 @@ import templruntime "github.com/a-h/templ/runtime"
 
 import "git.32bit.cafe/32bitcafe/guestbook/internal/models"
 import "strconv"
+import "fmt"
+import "strings"
 
 type CommonData struct {
 	CurrentYear     int
@@ -29,6 +31,13 @@ func slugToShortId(slug string) uint64 {
 	return id
 }
 
+func externalUrl(url string) string {
+	if !strings.HasPrefix(url, "http") {
+		return "http://" + url
+	}
+	return url
+}
+
 func commonHeader() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -79,6 +88,7 @@ func topNav(data CommonData) templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		hxHeaders := fmt.Sprintf("{\"X-CSRF-Token\": \"%s\"}", data.CSRFToken)
 		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<nav><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -91,7 +101,7 @@ func topNav(data CommonData) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.CurrentUser.Username)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 34, Col: 52}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 44, Col: 52}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -103,20 +113,20 @@ func topNav(data CommonData) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		if data.IsAuthenticated {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<a href=\"/guestbooks\">All Guestbooks</a> | <a href=\"/websites\">My Websites</a> |  <a href=\"/users/settings\">Settings</a> | <form action=\"/users/logout\" method=\"post\"><input type=\"hidden\" name=\"csrf_token\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<a href=\"/guestbooks\">All Guestbooks</a> | <a href=\"/websites\">My Websites</a> |  <a href=\"/users/settings\">Settings</a> |  <a href=\"#\" hx-post=\"/users/logout\" hx-headers=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(data.CSRFToken)
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxHeaders)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 43, Col: 81}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 52, Col: 74}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"> <button>Logout</button></form>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\">Logout</a>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -155,7 +165,7 @@ func commonFooter() templ.Component {
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<footer><p>Generated with Templ</p><p>A <a href=\"https://32bit.cafe\">32-bit cafe</a> Project</p></footer>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<footer><p>A <a href=\"https://32bit.cafe\">32bit.cafe</a> Project</p></footer>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -191,13 +201,13 @@ func base(title string, data CommonData) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 66, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 72, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " - webweav.ing</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link href=\"/static/css/style.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script></head><body>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " - webweav.ing</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link href=\"/static/css/classless.min.css\" rel=\"stylesheet\"><link href=\"/static/css/style.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script></head><body>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -221,7 +231,7 @@ func base(title string, data CommonData) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(data.Flash)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 77, Col: 51}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/views/common.templ`, Line: 84, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {

ui/views/common_templ.txt

@@ -2,13 +2,13 @@
 <nav><div>
 Welcome, 
 </div><div>
-<a href=\"/guestbooks\">All Guestbooks</a> | <a href=\"/websites\">My Websites</a> |  <a href=\"/users/settings\">Settings</a> | <form action=\"/users/logout\" method=\"post\"><input type=\"hidden\" name=\"csrf_token\" value=\"
+<a href=\"/guestbooks\">All Guestbooks</a> | <a href=\"/websites\">My Websites</a> |  <a href=\"/users/settings\">Settings</a> |  <a href=\"#\" hx-post=\"/users/logout\" hx-headers=\"
-\"> <button>Logout</button></form>
+\">Logout</a>
 <a href=\"/users/register\">Create an Account</a> |  <a href=\"/users/login\">Login</a>
 </div></nav>
-<footer><p>Generated with Templ</p><p>A <a href=\"https://32bit.cafe\">32-bit cafe</a> Project</p></footer>
+<footer><p>A <a href=\"https://32bit.cafe\">32bit.cafe</a> Project</p></footer>
 <!doctype html><html lang=\"en\"><head><title>
- - webweav.ing</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link href=\"/static/css/style.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script></head><body>
+ - webweav.ing</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link href=\"/static/css/classless.min.css\" rel=\"stylesheet\"><link href=\"/static/css/style.css\" rel=\"stylesheet\"><script src=\"/static/js/htmx.min.js\"></script></head><body>
 <main>
 <div class=\"flash\">
 </div>

ui/views/guestbooks.templ

@@ -4,23 +4,13 @@ import "fmt"
 import "git.32bit.cafe/32bitcafe/guestbook/internal/models"
 import "git.32bit.cafe/32bitcafe/guestbook/internal/forms"
 
-func gbUrl(gb models.Guestbook) string {
-    return fmt.Sprintf("/guestbooks/%s", shortIdToSlug(gb.ShortId))
-}
-
-templ gbCreateForm(csrf_token string) {
-    <input type="hidden" name="csrf_token" value={ csrf_token }>
-    <label for="siteurl">Site URL: </label>
-    <input type="text" name="siteurl" id="siteurl" required />
-    <button type="submit">Submit</button>
-}
-
 templ GuestbookDashboardCommentsView(title string, data CommonData, website models.Website, guestbook models.Guestbook, comments []models.GuestbookComment) {
     @base(title, data) {
         <div id="dashboard">
             @wSidebar(website)
             <div>
                 <h1>Comments on { website.SiteUrl }</h1>
+                <hr>
                 if len(comments) == 0 {
                     <p>No comments yet!</p>
                 }
@@ -32,6 +22,42 @@ templ GuestbookDashboardCommentsView(title string, data CommonData, website mode
     }
 }
 
+templ GuestbookDashboardCommentView(data CommonData, w models.Website, c models.GuestbookComment) {
+    {{ commentUrl := fmt.Sprintf("%s/dashboard/guestbook/comments/%s", wUrl(w), shortIdToSlug(c.ShortId)) }}
+    {{ hxHeaders := fmt.Sprintf("{\"X-CSRF-Token\": \"%s\"}", data.CSRFToken) }}
+    <div class="comment">
+        <div>
+            if c.Deleted.IsZero() {
+                <button class="danger" hx-delete={ commentUrl } hx-target="closest div.comment" hx-headers={ hxHeaders }>Delete</button>
+                <button class="outline" hx-put={ commentUrl } hx-target="closest div.comment" hx-headers={ hxHeaders }>
+                    if !c.IsPublished {
+                        Publish
+                    } else {
+                        Hide
+                    }
+                </button> 
+            }
+        </div>
+        <div>
+            <strong>{ c.AuthorName }</strong>
+            if len(c.AuthorEmail) > 0 {
+                {{ email := "mailto:" + c.AuthorEmail}}
+                | <a href={ templ.URL(email) } target="_blank">{ c.AuthorEmail }</a>
+            }
+            if len(c.AuthorSite) > 0 {
+                | <a href={ templ.URL(externalUrl(c.AuthorSite))} target="_blank">{ c.AuthorSite }</a>
+            }
+            <p>
+                { c.Created.Format("01-02-2006 03:04PM") }
+            </p>
+        </div>
+        <p>
+            { c.CommentText }
+        </p>
+        <hr>
+    </div>
+}
+
 templ commentForm(form forms.CommentCreateForm) {
     <div>
         <label for="authorname">Name: </label>
@@ -70,21 +96,6 @@ templ commentForm(form forms.CommentCreateForm) {
     </div>
 }
 
-templ GuestbookCommentList(comments []models.GuestbookComment) {
-    if len(comments) == 0 {
-        <p>No comments yet!</p>
-    }
-    for _, c := range comments {
-        <div>
-            <strong>{ c.AuthorName }</strong>
-            { c.Created.Format("01-02-2006 03:04PM") }
-            <p>
-                { c.CommentText }
-            </p>
-        </div>
-    }
-}
-
 templ GuestbookView(title string, data CommonData, website models.Website, guestbook models.Guestbook, comments []models.GuestbookComment, form forms.CommentCreateForm) {
     {{ postUrl := fmt.Sprintf("/websites/%s/guestbook/comments/create", shortIdToSlug(website.ShortId)) }}
     if data.IsHtmx {
@@ -93,18 +104,30 @@ templ GuestbookView(title string, data CommonData, website models.Website, guest
         <html>
             <head>
             <title>{ title }</title>
+            <link href="/static/css/classless.min.css" rel="stylesheet">
             </head>
             <body>
                 <main>
                     <div>
-                        <h1>Guestbook for { website.SiteUrl }</h1>
+                        <h1>Guestbook for { website.Name }</h1>
                         <form action={ templ.URL(postUrl) } method="post">
                             <input type="hidden" name="csrf_token" value={data.CSRFToken}>
                             @commentForm(form)
                         </form>
                     </div>
                     <div id="comments">
-                        @GuestbookCommentList(comments)
+                        if len(comments) == 0 {
+                            <p>No comments yet!</p>
+                        }
+                        for _, c := range comments {
+                            <div>
+                                <h3>{ c.AuthorName }</h3>
+                                { c.Created.Format("01-02-2006 03:04PM") }
+                                <p>
+                                    { c.CommentText }
+                                </p>
+                            </div>
+                        }
                     </div>
                     </main>
                 </body>
@@ -127,38 +150,6 @@ templ CreateGuestbookComment(title string, data CommonData, website models.Websi
     }
 }
 
-templ GuestbookCommentView(c models.GuestbookComment) {
-    <div>
-        <strong>{ c.AuthorName }</strong>
-        { c.Created.Format("01-02-2006 03:04PM") }
-        <p>
-            { c.CommentText }
-        </p>
-    </div>
-}
-
-templ GuestbookDashboardCommentView(data CommonData, w models.Website, c models.GuestbookComment) {
-    {{ commentUrl := fmt.Sprintf("%s/dashboard/guestbook/comments/%s", wUrl(w), shortIdToSlug(c.ShortId)) }}
-    {{ hxHeaders := fmt.Sprintf("{\"X-CSRF-Token\": \"%s\"}", data.CSRFToken) }}
-    <div>
-        <strong>{ c.AuthorName }</strong>
-        { c.Created.Format("01-02-2006 03:04PM") }
-        if c.Deleted.IsZero() {
-            <a href="#" hx-delete={ commentUrl } hx-target="closest div" hx-headers={ hxHeaders }>Delete</a>
-            <a href="#" hx-put={ commentUrl } hx-target="closest div" hx-headers={ hxHeaders }>
-                if !c.IsPublished {
-                    Publish
-                } else {
-                    Hide
-                }
-            </a> 
-        }
-        <p>
-            { c.CommentText }
-        </p>
-    </div>
-}
-
 templ AllGuestbooksView(data CommonData, websites []models.Website) {
     @base("All Guestbooks", data) {
         <div>

ui/views/guestbooks_templ.txt

@@ -1,10 +1,28 @@
-<input type=\"hidden\" name=\"csrf_token\" value=\"
-\"> <label for=\"siteurl\">Site URL: </label> <input type=\"text\" name=\"siteurl\" id=\"siteurl\" required> <button type=\"submit\">Submit</button>
 <div id=\"dashboard\">
 <div><h1>Comments on 
-</h1>
+</h1><hr>
 <p>No comments yet!</p>
 </div></div>
+<div class=\"comment\"><div>
+<button class=\"danger\" hx-delete=\"
+\" hx-target=\"closest div.comment\" hx-headers=\"
+\">Delete</button> <button class=\"outline\" hx-put=\"
+\" hx-target=\"closest div.comment\" hx-headers=\"
+\">
+Publish
+Hide
+</button>
+</div><div><strong>
+</strong> 
+| <a href=\"
+\" target=\"_blank\">
+</a> 
+| <a href=\"
+\" target=\"_blank\">
+</a>
+<p>
+</p></div><p>
+</p><hr></div>
 <div><label for=\"authorname\">Name: </label>
 <label class=\"error\">
 </label> 
@@ -18,17 +36,17 @@
 <label class=\"error\">
 </label> 
 <textarea name=\"content\" id=\"content\"></textarea></div><div><input type=\"submit\" value=\"Submit\"></div>
-<p>No comments yet!</p>
-<div><strong>
-</strong> 
-<p>
-</p></div>
 <html><head><title>
-</title></head><body><main><div><h1>Guestbook for 
+</title><link href=\"/static/css/classless.min.css\" rel=\"stylesheet\"></head><body><main><div><h1>Guestbook for 
 </h1><form action=\"
 \" method=\"post\"><input type=\"hidden\" name=\"csrf_token\" value=\"
 \">
 </form></div><div id=\"comments\">
+<p>No comments yet!</p>
+<div><h3>
+</h3>
+<p>
+</p></div>
 </div></main></body></html>
 <form hx-post=\"
 \" hx-target=\"closest div\">
@@ -36,23 +54,6 @@
 <form action=\"
 \" method=\"post\">
 </form>
-<div><strong>
-</strong> 
-<p>
-</p></div>
-<div><strong>
-</strong> 
- 
-<a href=\"#\" hx-delete=\"
-\" hx-target=\"closest div\" hx-headers=\"
-\">Delete</a> <a href=\"#\" hx-put=\"
-\" hx-target=\"closest div\" hx-headers=\"
-\">
-Publish
-Hide
-</a>
-<p>
-</p></div>
 <div><h1>All Guestbooks</h1><p>This page exists only for testing the service.</p><ul>
 <li>
 <a href=\"

ui/views/websites.templ

@@ -16,7 +16,7 @@ templ wSidebar(website models.Website) {
             <h2>{ website.Name}</h2>
             <ul>
                 <li><a href={ templ.URL(dashUrl) }>Dashboard</a></li>
-                <li><a href={ templ.URL(website.SiteUrl) }>View Website</a></li>
+                <li><a href={ templ.URL(externalUrl(website.SiteUrl)) } target="_blank">View Website</a></li>
             </ul>
             <h3>Guestbook</h3>
             <ul>

ui/views/websites_templ.go

@@ -65,12 +65,12 @@ func wSidebar(website models.Website) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var4 templ.SafeURL = templ.URL(website.SiteUrl)
+		var templ_7745c5c3_Var4 templ.SafeURL = templ.URL(externalUrl(website.SiteUrl))
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var4)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">View Website</a></li></ul><h3>Guestbook</h3><ul><li><a href=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" target=\"_blank\">View Website</a></li></ul><h3>Guestbook</h3><ul><li><a href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

ui/views/websites_templ.txt

@@ -1,7 +1,7 @@
 <nav><div><h2>
 </h2><ul><li><a href=\"
 \">Dashboard</a></li><li><a href=\"
-\">View Website</a></li></ul><h3>Guestbook</h3><ul><li><a href=\"
+\" target=\"_blank\">View Website</a></li></ul><h3>Guestbook</h3><ul><li><a href=\"
 \" target=\"_blank\">View Guestbook</a></li></ul><ul><li><a href=\"
 \">Manage messages</a></li><li><a href=\"
 \">Review message queue</a></li><li><a href=\"