32bitcafe/guestbook
1
0
Fork 0
Code Issues6 Pull Requests Packages Projects1 Releases Wiki Activity

improve UI with classless css library and other various modifications

Browse Source
This commit is contained in:
yequari 2025-03-24 21:00:19 -07:00
parent f239b17255
commit 025f273f48
12 changed files with 496 additions and 567 deletions

3
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) {

1
ui/static/css/classless.min.css vendored Normal file

File diff suppressed because one or more lines are too long

12
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;
text-decoration: underline;
/* color: blue; */
/* text-decoration: underline; */
cursor: pointer;
}
@ -75,5 +75,5 @@ footer {
}
a {
color: blue;
/* color: blue; */
}

19
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">
<input type="hidden" name="csrf_token" value={ data.CSRFToken }>
<button>Logout</button>
</form>
<a href="#" hx-post="/users/logout" hx-headers={ hxHeaders }>Logout</a>
} 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">32-bit cafe</a> Project</p>
<p>A <a href="https://32bit.cafe">32bit.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>

28
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 {

8
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=\"
\"> <button>Logout</button></form>
<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=\"
\">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>

127
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,29 +104,41 @@ 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>
</html>
</main>
</body>
</html>
}
}
}
templ CreateGuestbookComment(title string, data CommonData, website models.Website, guestbook models.Guestbook, form forms.CommentCreateForm) {
{{ postUrl := fmt.Sprintf("/websites/%s/guestbook/comments/create", shortIdToSlug(website.ShortId)) }}
if data.IsHtmx {
<form hx-post={ postUrl } hx-target="closest div">
templ CreateGuestbookComment(title string, data CommonData, website models.Website, guestbook models.Guestbook, form forms.CommentCreateForm) {
{{ postUrl := fmt.Sprintf("/websites/%s/guestbook/comments/create", shortIdToSlug(website.ShortId)) }}
if data.IsHtmx {
<form hx-post={ postUrl } hx-target="closest div">
@commentForm(form)
</form>
} else {
@ -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>

804
ui/views/guestbooks_templ.go

File diff suppressed because it is too large Load Diff

53
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=\"

2
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>

4
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
}

2
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=\"