example: add bare-bones HTMX example (#15)

gamebox · web-flow · commit 733326ad0225 · 2024-01-07T16:35:47.000-06:00
Closes #8 Obviously it's the simplest, silliest example possible, but we can build upon it as we go along.
diff --git a/README.md b/README.md
@@ -33,6 +33,10 @@ expression.
 
 ## Getting started
 
+> [!NOTE]
+> If you are interested in seeing an example of using Gwirl in an [HTMX](https://htmx.org)
+> app, take a look [here](/htmx-example)
+
 First, you should install the gwirl tool using `go get`:
 
 ```
diff --git a/htmx-example/main.go b/htmx-example/main.go
@@ -0,0 +1,33 @@
+package main
+
+import (
+    "log"
+    "net/http"
+
+    "github.com/gamebox/gwirl/htmx-example/views/html"
+)
+
+type Server struct {
+    count int
+}
+
+
+func (s *Server) renderIndex(rw http.ResponseWriter, req *http.Request) {
+    rw.Write([]byte(html.Index(s.count)))
+    rw.WriteHeader(200)
+}
+
+func (s *Server) renderCount(rw http.ResponseWriter, req *http.Request) {
+    s.count += 1
+    rw.Write([]byte(html.Counter(s.count)))
+    rw.WriteHeader(200)
+}
+
+func main() {
+    log.Println("Starting up...")
+    handler := http.NewServeMux()
+    s := Server{0}
+    handler.HandleFunc("/", s.renderIndex)
+    handler.HandleFunc("/count", s.renderCount)
+    log.Fatalf("%v", http.ListenAndServe(":3000", handler))
+}
diff --git a/htmx-example/templates/base.html.gwirl b/htmx-example/templates/base.html.gwirl
@@ -0,0 +1,12 @@
+@(title string, content string)
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>@title</title>
+        <script src="https://unpkg.com/htmx.org@@1.9.10"></script>
+    </head>
+    <body>
+        @content
+    </body>
+</html>
diff --git a/htmx-example/templates/counter.html.gwirl b/htmx-example/templates/counter.html.gwirl
@@ -0,0 +1,5 @@
+@(count int)
+
+@import "fmt"
+
+<p id="counter" class="count">@fmt.Sprintf("%d", count)</p>
diff --git a/htmx-example/templates/index.html.gwirl b/htmx-example/templates/index.html.gwirl
@@ -0,0 +1,10 @@
+@(count int)
+
+@Base("Gwirl HTMX - Home") {
+    <h1>Gwirl HTMX</h1>
+
+    @Counter(count)
+
+    <button hx-patch="/count" hx-target="#counter">Increment</button>
+}
+
