Add Technical Kiwi website with Go, templ, and HTMX.
Single-page site with gallery by album and event, contact form over SMTP, Docker dev/prod setup, and on-server image derivatives. Gallery photos stay local (app/images/ is gitignored). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
76
app/templates/contact.templ
Normal file
76
app/templates/contact.templ
Normal file
@@ -0,0 +1,76 @@
|
||||
package templates
|
||||
|
||||
templ ContactForm(enabled bool) {
|
||||
<section id="contact" class="contact">
|
||||
<h2>Contact</h2>
|
||||
<p class="contact-intro">
|
||||
Interested in a project or collaboration? Send a message below.
|
||||
</p>
|
||||
if !enabled {
|
||||
<p class="contact-unavailable">
|
||||
The contact form is not configured yet. Email
|
||||
<a href="mailto:hello@technical.kiwi">hello@technical.kiwi</a>
|
||||
directly.
|
||||
</p>
|
||||
} else {
|
||||
<form
|
||||
class="contact-form"
|
||||
method="post"
|
||||
action="/contact"
|
||||
hx-post="/contact"
|
||||
hx-target="#contact-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-boost="false"
|
||||
hx-disabled-elt="find button[type=submit]"
|
||||
>
|
||||
<div class="form-row">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name" maxlength="120"/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email" maxlength="254"/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" required rows="6" maxlength="8000"></textarea>
|
||||
</div>
|
||||
<input
|
||||
class="hp-field"
|
||||
type="text"
|
||||
name="website"
|
||||
id="website"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary">Send message</button>
|
||||
</form>
|
||||
}
|
||||
<div id="contact-result" class="contact-result"></div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ ContactSuccess() {
|
||||
<div class="alert alert-success" role="status">
|
||||
<p>Thanks — your message has been sent. We will get back to you soon.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ ContactValidationAlert(errs map[string]string) {
|
||||
<div class="alert alert-error" role="alert">
|
||||
<p>Please fix the following:</p>
|
||||
<ul>
|
||||
for _, msg := range errs {
|
||||
<li>{ msg }</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ ContactSendError() {
|
||||
<div class="alert alert-error" role="alert">
|
||||
<p>Something went wrong sending your message. Please try again later or email
|
||||
<a href="mailto:hello@technical.kiwi">hello@technical.kiwi</a>.</p>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user