Add animations example

go.mod

@@ -3,7 +3,7 @@ module github.com/gofs-cli/template
 go 1.23.5
 
 require (
-	github.com/a-h/templ v0.3.819
+	github.com/a-h/templ v0.3.833
 	github.com/go-chi/chi/v5 v5.2.0
 	github.com/go-chi/cors v1.2.1
 )

go.sum

@@ -1,5 +1,7 @@
 github.com/a-h/templ v0.3.819 h1:KDJ5jTFN15FyJnmSmo2gNirIqt7hfvBD2VXVDTySckM=
 github.com/a-h/templ v0.3.819/go.mod h1:iDJKJktpttVKdWoTkRNNLcllRI+BlpopJc+8au3gOUo=
+github.com/a-h/templ v0.3.833 h1:L/KOk/0VvVTBegtE0fp2RJQiBm7/52Zxv5fqlEHiQUU=
+github.com/a-h/templ v0.3.833/go.mod h1:cAu4AiZhtJfBjMY0HASlyzvkrtjnHWPeEsyGK2YYmfk=
 github.com/go-chi/chi/v5 v5.2.0 h1:Aj1EtB0qR2Rdo2dG4O94RIU35w2lvQSj6BRA4+qwFL0=
 github.com/go-chi/chi/v5 v5.2.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=

internal/server/routes.go

@@ -6,6 +6,7 @@ import (
 	"github.com/gofs-cli/template/internal/server/assets"
 	"github.com/gofs-cli/template/internal/server/handlers"
 	activesearch "github.com/gofs-cli/template/internal/ui/pages/active-search"
+	"github.com/gofs-cli/template/internal/ui/pages/animations"
 	bulkupdate "github.com/gofs-cli/template/internal/ui/pages/bulk-update"
 	clicktoedit "github.com/gofs-cli/template/internal/ui/pages/click-to-edit"
 	clicktoload "github.com/gofs-cli/template/internal/ui/pages/click-to-load"
@@ -56,6 +57,11 @@ func (s *Server) Routes() {
 	routesMux.Handle("GET /active-search", activesearch.Index())
 	routesMux.Handle("POST /active-search/search", activesearch.Search())
 
+	// animations example
+	routesMux.Handle("GET /animations", animations.Index())
+	routesMux.Handle("GET /animations/colors", animations.Colors())
+	routesMux.Handle("POST /animations/fade_in_demo", animations.FadeIn())
+
 	routesMux.Handle("GET /modal", home.Modal())
 
 	routesMux.Handle("GET /page1", page1.Index())

internal/ui/pages/animations/handlers.go

@@ -0,0 +1,37 @@
+package animations
+
+import (
+	"math/rand/v2"
+	"net/http"
+
+	"github.com/a-h/templ"
+	"github.com/gofs-cli/template/internal/ui"
+	"github.com/gofs-cli/template/internal/ui/components/header"
+)
+
+func Index() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		templ.Handler(ui.IndexPage(layout(header.Header(), body()))).ServeHTTP(w, r)
+	})
+}
+
+func Colors() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		colors := []string{
+			"red",
+			"blue",
+			"green",
+			"orange",
+			"pink",
+		}
+		color := colors[rand.IntN(len(colors))]
+
+		templ.Handler(newColor(color)).ServeHTTP(w, r)
+	})
+}
+
+func FadeIn() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		templ.Handler(fadeIn()).ServeHTTP(w, r)
+	})
+}

internal/ui/pages/animations/index.templ

@@ -0,0 +1,57 @@
+package animations
+
+import "fmt"
+
+css classLayout() {
+	display: grid;
+}
+
+css smooth() {
+	transition: all 1s ease-in;
+}
+
+templ layout(header, body templ.Component) {
+	<main class={ classLayout() }>
+		<div>
+			@header
+		</div>
+		<div>
+			@body
+		</div>
+	</main>
+}
+
+templ body() {
+	<h2>Animations:</h2>
+	<h3>Color throb:</h3>
+	<div id="color-demo" class={ smooth() } style="color: blue;" hx-get="/animations/colors" hx-swap="outerHTML" hx-trigger="every 2s">
+		Color Swap Demo
+	</div>
+	@fadeIn()
+}
+
+templ newColor(color string) {
+	<div id="color-demo" class={ smooth() } style={ fmt.Sprintf("color: %s;", color) } hx-get="/animations/colors" hx-swap="outerHTML" hx-trigger="every 2s">
+		Color Swap Demo
+	</div>
+}
+
+templ fadeIn() {
+	<style>
+#fade-me-in.htmx-added {
+  opacity: 0;
+}
+#fade-me-in {
+  opacity: 1;
+  transition: opacity 1s ease-out;
+}
+</style>
+	<button
+		id="fade-me-in"
+		style="margin-top: 8px; padding: 4px;"
+		hx-post="/animations/fade_in_demo"
+		hx-swap="outerHTML settle:1s"
+	>
+		Fade Me In
+	</button>
+}