feat: create guestbook entry feature

blackfyre · Mar 6, 2024 · 2c35775 · 2c35775
1 parent 97b4436
commit 2c35775
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 480 deletions.
diff --git a/assets/templ/components/nav.templ b/assets/templ/components/nav.templ
@@ -30,7 +30,7 @@ templ TopNav() {
 				<a class="navbar-item" href="/artworks" hx-get="/artworks">
 					Artworks
 				</a>
-				<a class="navbar-item" href="/guestbook" hx-get="/guestbook">
+				<a class="navbar-item" href="/guestbook" hx-get="/guestbook" hx-trigger="guestbook-updated from:body">
 					Guestbook
 				</a>
 				<!-- 

diff --git a/assets/templ/layouts/layout.templ b/assets/templ/layouts/layout.templ
@@ -39,7 +39,7 @@ templ layout_base() {
 			<script type="text/javascript" src="/assets/js/vendor/htmx.min.js"></script>
 			<link rel="stylesheet" href="/assets/css/vendor/cookieconsent.css"/>
 		</head>
-		<body class="customBody" hx-indicator=".progress-indicator" hx-target="#mc-area">
+		<body class="customBody" hx-indicator=".progress-indicator" hx-target="#mc-area" hx-select="#mc-area">
 			<div class="progress-indicator" style="height: 3px;">
 				<div class="indeterminate" style="background-color: #489393;"></div>
 			</div>
@@ -50,6 +50,7 @@ templ layout_base() {
 				hx-get="/feedback"
 				hx-on="click: wga.openDialog()"
 				hx-target="#d"
+				hx-select="section.container"
 				class="button is-primary is-feedback"
 			>Feedback</a>
 			<script src="/assets/js/vendor/viewer.min.js"></script>

diff --git a/assets/templ/pages/guestbook.templ b/assets/templ/pages/guestbook.templ
@@ -24,9 +24,17 @@ templ GuestbookPage(v GuestbookView) {
 templ GuestbookBlock(v GuestbookView) {
 	<section class="section">
 		<div class="container box">
+			<h1 class="title">Guestbook</h1>
 			<div class="level">
 				<div class="level-left">
-					<h1 class="title">Guestbook</h1>
+					<a
+						href="#"
+						hx-get="/guestbook/add"
+						hx-on="click: wga.openDialog()"
+						hx-target="#d"
+						hx-select="section.container"
+						class="button is-primary"
+					>Add Entry</a>
 				</div>
 				<div class="level-right">
 					<div class="select">
@@ -52,6 +60,96 @@ templ GuestbookBlock(v GuestbookView) {
 	</section>
 }
 
+templ GuestbookEntryForm() {
+	<section class="container">
+		<h1 class="title mb-3">Leave an enty!</h1>
+		<p>Leave your mark in the guestbook!</p>
+		<p>Be kind and respectful to others.</p>
+		<p>Messages are moderated and will be reviewed before being published.</p>
+		<p class="mb-3">You can post your message anonymously if you prefer.</p>
+		<form
+			hx-post="/guestbook/add"
+			enctype="multipart/form-data"
+			hx-target="#d"
+			hx-disabled-elt="input,button,select"
+		>
+			<div class="field">
+				<label class="label">Name</label>
+				<input
+					type="text"
+					class="input"
+					placeholder="Your name"
+					name="sender_name"
+					required
+					autocomplete="name"
+				/>
+			</div>
+			<div class="field">
+				<label class="label">Email</label>
+				<input
+					type="email"
+					class="input"
+					placeholder="Your email"
+					name="sender_email"
+					required
+					autocomplete="email"
+				/>
+			</div>
+			<div class="field">
+				<label class="label">Location</label>
+				<input
+					type="text"
+					class="input"
+					placeholder="Your location"
+					name="location"
+					required
+					autocomplete="location"
+				/>
+			</div>
+			<div class="field">
+				<trix-editor input="message" placeholder="Your message"></trix-editor>
+				<input type="hidden" id="message" name="message"/>
+			</div>
+			<div class="field">
+				<label aria-hidden="true" class="hpt" for="name"></label>
+				<input
+					aria-hidden="true"
+					class="hpt"
+					autocomplete="off"
+					type="text"
+					id="name"
+					name="name"
+					placeholder="Enter your name"
+				/>
+			</div>
+			<div class="field">
+				<label aria-hidden="true" class="hpt" for="email"></label>
+				<input
+					aria-hidden="true"
+					class="hpt"
+					autocomplete="off"
+					type="email"
+					id="email"
+					name="email"
+					placeholder="Enter your email"
+				/>
+			</div>
+			<div class="field is-grouped">
+				<p class="control">
+					<button class="button is-link" type="submit">
+						Leave entry
+					</button>
+				</p>
+				<p class="control">
+					<button type="button" class="button" hx-on="click: wga.closeDialog();">
+						Cancel
+					</button>
+				</p>
+			</div>
+		</form>
+	</section>
+}
+
 templ GuestbookEntries(entries []*models.GuestbookEntry) {
 	<div class="list has-hoverable-list-items">
 		for _, entry := range entries {
@@ -81,11 +179,13 @@ templ GuestbookEntry(entry *models.GuestbookEntry) {
 				<div class="list-item-title">Anonymous</div>
 			}
 			<div class="list-item-description">
-				{ entry.Message }
+				<div class="content mb-0">
+					@templ.Raw(entry.Message)
+				</div>
 				if entry.Location != "" {
-					<br/>
-					<span class="tag is-light">{ entry.Location }</span>
+					<span class="tag is-light mr-3">{ entry.Location }</span>
 				}
+				<span class="tag is-light">{ entry.Created }</span>
 			</div>
 		</div>
 	</div>

diff --git a/assets/templ/utils/utils.go b/assets/templ/utils/utils.go
@@ -98,7 +98,7 @@ func GetOpenGraphTags(c context.Context) map[string]string {
 	if v, ok := c.Value(OgImageKey).(string); ok {
 		ogTags["og:image"] = v
 	} else {
-		ogTags["og:image"] = AssetUrl("/images/smo_cover_1080x1080.png")
+		ogTags["og:image"] = AssetUrl("/assets/images/smo_cover_1080x1080.png")
 	}
 
 	if v, ok := c.Value(OgUrlKey).(string); ok {
@@ -146,7 +146,7 @@ func GetTwitterTags(c context.Context) map[string]string {
 	if v, ok := c.Value(TwitterImageKey).(string); ok {
 		twitterTags["twitter:image"] = v
 	} else {
-		twitterTags["twitter:image"] = AssetUrl("/images/smo_cover_1080x1080.png")
+		twitterTags["twitter:image"] = AssetUrl("/assets/images/smo_cover_1080x1080.png")
 	}
 
 	return twitterTags

diff --git a/assets/views/pages/guestbook/addMessage.html b/assets/views/pages/guestbook/addMessage.html
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -64,6 +64,12 @@ let result = await esbuild.build({
               "bottom-level",
               "progress-indicator",
               "htmx-request",
+              "*-auto",
+              "mb-3",
+              "mr-*",
+              "my-*",
+              "mx-*",
+              "mb-0",
             ],
             content: [
               "assets/templ/**/*.templ",