initial commit
This commit is contained in:
parent
5d46262520
commit
74dd3e08df
@ -1,3 +1,4 @@
|
||||
# boner-htmx
|
||||
[Boner site and guestbook](https://boner.be)
|
||||
|
||||
Website and guestbook for boner.be
|
||||
Implementation of boner.be website and guestbook with the meme stack of Go and HTMX
|
||||
(_)_)::::::::::::::D~~~~
|
||||
|
||||
158
cmd/main.go
Normal file
158
cmd/main.go
Normal file
@ -0,0 +1,158 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"html/template"
|
||||
"io"
|
||||
"strconv"
|
||||
"time"
|
||||
|
||||
"github.com/labstack/echo/v4"
|
||||
"github.com/labstack/echo/v4/middleware"
|
||||
)
|
||||
|
||||
type Templates struct {
|
||||
templates *template.Template
|
||||
}
|
||||
|
||||
func (t *Templates) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
|
||||
return t.templates.ExecuteTemplate(w, name, data)
|
||||
}
|
||||
|
||||
func newTemplate() *Templates {
|
||||
return &Templates{
|
||||
templates: template.Must(template.ParseGlob("views/*.html")),
|
||||
}
|
||||
}
|
||||
|
||||
var id = 0
|
||||
|
||||
type Contact struct {
|
||||
Name string
|
||||
Email string
|
||||
Id int
|
||||
}
|
||||
|
||||
func newContact(name, email string) Contact {
|
||||
id++
|
||||
return Contact{
|
||||
Name: name,
|
||||
Email: email,
|
||||
Id: id,
|
||||
}
|
||||
}
|
||||
|
||||
type Contacts = []Contact
|
||||
|
||||
type Data struct {
|
||||
Contacts Contacts
|
||||
}
|
||||
|
||||
func (d *Data) indexOf(id int) int {
|
||||
for i, contact := range d.Contacts {
|
||||
if contact.Id == id {
|
||||
return i
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
|
||||
func (d *Data) hasEmail(email string) bool {
|
||||
for _, contact := range d.Contacts {
|
||||
if contact.Email == email {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
func newData() Data {
|
||||
return Data{
|
||||
Contacts: []Contact{
|
||||
newContact("John Smith", "johndoe@me.com"),
|
||||
newContact("Jane Doe", "janedoe@me.com"),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
type FormData struct {
|
||||
Values map[string]string
|
||||
Errors map[string]string
|
||||
}
|
||||
|
||||
func newFormData() FormData {
|
||||
return FormData{
|
||||
Values: make(map[string]string),
|
||||
Errors: make(map[string]string),
|
||||
}
|
||||
}
|
||||
|
||||
type Page struct {
|
||||
Data Data
|
||||
Form FormData
|
||||
}
|
||||
|
||||
func newPage() Page {
|
||||
return Page{
|
||||
Data: newData(),
|
||||
Form: newFormData(),
|
||||
}
|
||||
}
|
||||
|
||||
func main() {
|
||||
|
||||
e := echo.New()
|
||||
e.Use(middleware.Logger())
|
||||
|
||||
page := newPage()
|
||||
e.Renderer = newTemplate()
|
||||
|
||||
e.Static("/css", "css")
|
||||
e.Static("/images", "images")
|
||||
|
||||
e.GET("/", func(c echo.Context) error {
|
||||
return c.Render(200, "index", page)
|
||||
})
|
||||
|
||||
e.POST("/contacts", func(c echo.Context) error {
|
||||
name := c.FormValue("name")
|
||||
email := c.FormValue("email")
|
||||
|
||||
if page.Data.hasEmail(email) {
|
||||
formData := newFormData()
|
||||
formData.Values["name"] = name
|
||||
formData.Values["email"] = email
|
||||
formData.Errors["email"] = "Email already exists"
|
||||
|
||||
return c.Render(422, "form", formData)
|
||||
}
|
||||
|
||||
contact := newContact(name, email)
|
||||
page.Data.Contacts = append(page.Data.Contacts, contact)
|
||||
|
||||
c.Render(200, "form", newFormData())
|
||||
return c.Render(200, "oob-contact", contact)
|
||||
})
|
||||
|
||||
e.DELETE("/contacts/:id", func(c echo.Context) error {
|
||||
|
||||
// TODO: remove this to make server faster LOL
|
||||
time.Sleep(1 * time.Second)
|
||||
|
||||
idStr := c.Param("id")
|
||||
id, err := strconv.Atoi(idStr)
|
||||
if err != nil {
|
||||
return c.String(400, "Invalid ID")
|
||||
}
|
||||
|
||||
i := page.Data.indexOf(id)
|
||||
if i == -1 {
|
||||
return c.String(404, "Contact not found")
|
||||
}
|
||||
|
||||
page.Data.Contacts = append(page.Data.Contacts[:i], page.Data.Contacts[i+1:]...)
|
||||
return c.NoContent(200)
|
||||
|
||||
})
|
||||
|
||||
e.Logger.Fatal(e.Start(":1337"))
|
||||
}
|
||||
14
css/index.css
Normal file
14
css/index.css
Normal file
@ -0,0 +1,14 @@
|
||||
.htmx-indicator {
|
||||
opacity:0;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
.htmx-request .htmx-indicator{
|
||||
opacity:1
|
||||
}
|
||||
.htmx-request.htmx-indicator{
|
||||
opacity:1
|
||||
}
|
||||
.contact.htmx-swapping {
|
||||
opacity: 0;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
19
go.mod
Normal file
19
go.mod
Normal file
@ -0,0 +1,19 @@
|
||||
module chemistry.software/htmx
|
||||
|
||||
go 1.23.0
|
||||
|
||||
require github.com/labstack/echo/v4 v4.12.0
|
||||
|
||||
require (
|
||||
github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
|
||||
github.com/labstack/gommon v0.4.2 // indirect
|
||||
github.com/mattn/go-colorable v0.1.13 // indirect
|
||||
github.com/mattn/go-isatty v0.0.20 // indirect
|
||||
github.com/valyala/bytebufferpool v1.0.0 // indirect
|
||||
github.com/valyala/fasttemplate v1.2.2 // indirect
|
||||
golang.org/x/crypto v0.22.0 // indirect
|
||||
golang.org/x/net v0.24.0 // indirect
|
||||
golang.org/x/sys v0.19.0 // indirect
|
||||
golang.org/x/text v0.14.0 // indirect
|
||||
golang.org/x/time v0.5.0 // indirect
|
||||
)
|
||||
35
go.sum
Normal file
35
go.sum
Normal file
@ -0,0 +1,35 @@
|
||||
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
|
||||
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
|
||||
github.com/golang-jwt/jwt v3.2.2+incompatible/go.mod h1:8pz2t5EyA70fFQQSrl6XZXzqecmYZeUEB8OUGHkxJ+I=
|
||||
github.com/labstack/echo/v4 v4.12.0 h1:IKpw49IMryVB2p1a4dzwlhP1O2Tf2E0Ir/450lH+kI0=
|
||||
github.com/labstack/echo/v4 v4.12.0/go.mod h1:UP9Cr2DJXbOK3Kr9ONYzNowSh7HP0aG0ShAyycHSJvM=
|
||||
github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
|
||||
github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
|
||||
github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
|
||||
github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
|
||||
github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
|
||||
github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
|
||||
github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
|
||||
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
|
||||
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||
github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
|
||||
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
|
||||
github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
|
||||
github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
|
||||
github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
|
||||
github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
|
||||
golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
|
||||
golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
|
||||
golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
|
||||
golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
|
||||
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
|
||||
golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
|
||||
golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
|
||||
golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
|
||||
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
|
||||
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||
52
images/bars.svg
Normal file
52
images/bars.svg
Normal file
@ -0,0 +1,52 @@
|
||||
<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
|
||||
<rect y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height"
|
||||
begin="0.5s" dur="1s"
|
||||
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="y"
|
||||
begin="0.5s" dur="1s"
|
||||
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="30" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height"
|
||||
begin="0.25s" dur="1s"
|
||||
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="y"
|
||||
begin="0.25s" dur="1s"
|
||||
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="60" width="15" height="140" rx="6">
|
||||
<animate attributeName="height"
|
||||
begin="0s" dur="1s"
|
||||
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="y"
|
||||
begin="0s" dur="1s"
|
||||
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="90" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height"
|
||||
begin="0.25s" dur="1s"
|
||||
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="y"
|
||||
begin="0.25s" dur="1s"
|
||||
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="120" y="10" width="15" height="120" rx="6">
|
||||
<animate attributeName="height"
|
||||
begin="0.5s" dur="1s"
|
||||
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
<animate attributeName="y"
|
||||
begin="0.5s" dur="1s"
|
||||
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
83
views/index.html
Normal file
83
views/index.html
Normal file
@ -0,0 +1,83 @@
|
||||
{{ block "index" . }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
|
||||
<title></title>
|
||||
<link href="/css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
{{ template "form" .Form }}
|
||||
<hr />
|
||||
{{ template "display" .Data }}
|
||||
|
||||
<script>
|
||||
// allow 422 responses to swap as we are using this as a signal that
|
||||
// a form was submitted with bad data and want to rerender with the errors
|
||||
document.addEventListener("DOMContentLoaded", event => {
|
||||
document.body.addEventListener("htmx:beforeSwap", evt => {
|
||||
if (evt.detail.xhr.status === 422) {
|
||||
evt.detail.shouldSwap = true;
|
||||
evt.detail.isError = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
|
||||
{{ block "form" . }}
|
||||
<form hx-swap="outerHTML" hx-post="/contacts">
|
||||
name: <input
|
||||
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
||||
type="text" name="name" />
|
||||
email: <input
|
||||
{{ if .Values.email }} value="{{ .Values.email }}" {{ end }}
|
||||
type="email" name="email" />
|
||||
|
||||
{{ if .Errors.email }}
|
||||
<span style="color: red">{{ .Errors.email }}</span>
|
||||
{{ end }}
|
||||
<button>Create contact</button>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
||||
{{ block "display" . }}
|
||||
<div id="contacts" style="display: flex; flex-direction: column">
|
||||
{{ range .Contacts }}
|
||||
{{ template "contact" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ block "contact" . }}
|
||||
<div class="contact" id="contact-{{ .Id }}" style="display: flex;">
|
||||
<div style="width: 1rem; cursor: pointer;"
|
||||
hx-indicator="#contact-{{ .Id }}-indicator"
|
||||
hx-target="#contact-{{ .Id }}"
|
||||
hx-swap="outerHTML swap:500ms"
|
||||
hx-delete="/contacts/{{ .Id }}"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
Name: <span>{{ .Name }}</span>
|
||||
Email: <span>{{ .Email }}</span>
|
||||
|
||||
<div id="contact-{{ .Id }}-indicator" class="htmx-indicator">
|
||||
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ block "oob-contact" . }}
|
||||
<div id="contacts" hx-swap-oob="afterbegin">
|
||||
{{ template "contact" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
Loading…
x
Reference in New Issue
Block a user