Convert login and register pages to Templ

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch main",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "${workspaceFolder}/cmd/web/main.go"
+        },
+        {
+            "name": "Launch test function",
+            "type": "go",
+            "request": "launch",
+            "mode": "test",
+            "program": "${workspaceFolder}/pkg",
+            "args": [
+                "-test.run",
+                "FindAllSubStr"
+            ]
+        },
+        {
+            "name": "Test Current File",
+            "type": "go",
+            "request": "launch",
+            "mode": "test",
+            "program": "./${relativeFileDirname}",
+            "showLog": true
+        }
+    ]
+}

Makefile

@@ -1,6 +1,6 @@
 # Run the application
 .PHONY: run
-run:
+run: sqlc templ
 	clear
 	go run cmd/web/main.go
 
@@ -14,6 +14,10 @@ sqlc:
 	rm -f pkg/models/sqlc/*
 	sqlc generate
 
+.PHONY: templ
+templ:
+	templ generate
+
 # Check for direct dependency updates
 .PHONY: check-updates
 check-updates:

go.mod

@@ -26,6 +26,7 @@ require (
 	ariga.io/atlas v0.21.1 // indirect
 	github.com/Masterminds/goutils v1.1.1 // indirect
 	github.com/Masterminds/semver v1.5.0 // indirect
+	github.com/a-h/templ v0.2.747 // indirect
 	github.com/agext/levenshtein v1.2.3 // indirect
 	github.com/andybalholm/cascadia v1.3.2 // indirect
 	github.com/apparentlymart/go-textseg/v15 v15.0.0 // indirect

go.sum

@@ -14,6 +14,8 @@ github.com/PuerkitoBio/goquery v1.9.1 h1:mTL6XjbJTZdpfL+Gwl5U2h1l9yEkJjhmlTeV9VP
 github.com/PuerkitoBio/goquery v1.9.1/go.mod h1:cW1n6TmIMDoORQU5IU/P1T3tGFunOeXEpGP2WHRwkbY=
 github.com/PuerkitoBio/goquery v1.9.2 h1:4/wZksC3KgkQw7SQgkKotmKljk0M6V8TUvA8Wb4yPeE=
 github.com/PuerkitoBio/goquery v1.9.2/go.mod h1:GHPCaP0ODyyxqcNoFGYlAprUFH81NuRPd0GX3Zu2Mvk=
+github.com/a-h/templ v0.2.747 h1:D0dQ2lxC3W7Dxl6fxQ/1zZHBQslSkTSvl5FxP/CfdKg=
+github.com/a-h/templ v0.2.747/go.mod h1:69ObQIbrcuwPCU32ohNaWce3Cb7qM5GMiqN1K+2yop4=
 github.com/agext/levenshtein v1.2.3 h1:YB2fHEn0UJagG8T1rrWknE3ZQzWM06O8AMAatNn7lmo=
 github.com/agext/levenshtein v1.2.3/go.mod h1:JEDfjyjHDjOF/1e4FlBE/PkbqA9OfWu2ki2W0IB5558=
 github.com/andybalholm/cascadia v1.3.2 h1:3Xi6Dw5lHF15JtdcmAHD3i1+T8plmv7BQ/nsViSLyss=

pkg/funcmap/funcmap.go

@@ -53,6 +53,10 @@ func (fm *funcMap) file(filepath string) string {
 	return fmt.Sprintf("/%s/%s?v=%s", config.StaticPrefix, filepath, CacheBuster)
 }
 
+func File(filepath string) string {
+	return fmt.Sprintf("/%s/%s?v=%s", config.StaticPrefix, filepath, CacheBuster)
+}
+
 // link outputs HTML for a link element, providing the ability to dynamically set the active class
 func (fm *funcMap) link(url, text, currentPath string, classes ...string) template.HTML {
 	if currentPath == url {

pkg/handlers/auth.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"strings"
 
+	"github.com/a-h/templ"
 	"github.com/go-playground/validator/v10"
 	"github.com/labstack/echo/v4"
 
@@ -17,6 +18,8 @@ import (
 	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
 	"git.grosinger.net/tgrosinger/saasitone/pkg/redirect"
 	"git.grosinger.net/tgrosinger/saasitone/pkg/services"
+	"git.grosinger.net/tgrosinger/saasitone/templ/layouts"
+	"git.grosinger.net/tgrosinger/saasitone/templ/pages"
 	"git.grosinger.net/tgrosinger/saasitone/templates"
 )
 
@@ -46,20 +49,6 @@ type (
 		form.Submission
 	}
 
-	loginForm struct {
-		Email    string `form:"email" validate:"required,email"`
-		Password string `form:"password" validate:"required"`
-		form.Submission
-	}
-
-	registerForm struct {
-		Name            string `form:"name" validate:"required"`
-		Email           string `form:"email" validate:"required,email"`
-		Password        string `form:"password" validate:"required"`
-		ConfirmPassword string `form:"password-confirm" validate:"required,eqfield=Password"`
-		form.Submission
-	}
-
 	resetPasswordForm struct {
 		Password        string `form:"password" validate:"required"`
 		ConfirmPassword string `form:"password-confirm" validate:"required,eqfield=Password"`
@@ -163,16 +152,22 @@ func (h *Auth) ForgotPasswordSubmit(ctx echo.Context) error {
 
 func (h *Auth) LoginPage(ctx echo.Context) error {
 	p := page.New(ctx)
-	p.Layout = templates.LayoutAuth
 	p.Name = templates.PageLogin
 	p.Title = "Log in"
-	p.Form = form.Get[loginForm](ctx)
 
-	return h.RenderPage(ctx, p)
+	f := form.Get[pages.LoginForm](ctx)
+	component := pages.Login(p, f)
+
+	// TODO: This can be reused
+	p.LayoutComponent = func(content templ.Component) templ.Component {
+		return layouts.Auth(p, content)
+	}
+
+	return h.RenderPageTempl(ctx, p, component)
 }
 
 func (h *Auth) LoginSubmit(ctx echo.Context) error {
-	var input loginForm
+	var input pages.LoginForm
 
 	authFailed := func() error {
 		input.SetFieldError("Email", "")
@@ -231,16 +226,22 @@ func (h *Auth) Logout(ctx echo.Context) error {
 
 func (h *Auth) RegisterPage(ctx echo.Context) error {
 	p := page.New(ctx)
-	p.Layout = templates.LayoutAuth
 	p.Name = templates.PageRegister
 	p.Title = "Register"
-	p.Form = form.Get[registerForm](ctx)
 
-	return h.RenderPage(ctx, p)
+	f := form.Get[pages.RegisterForm](ctx)
+	component := pages.Register(p, f)
+
+	// TODO: This can be reused
+	p.LayoutComponent = func(content templ.Component) templ.Component {
+		return layouts.Auth(p, content)
+	}
+
+	return h.RenderPageTempl(ctx, p, component)
 }
 
 func (h *Auth) RegisterSubmit(ctx echo.Context) error {
-	var input registerForm
+	var input pages.RegisterForm
 
 	err := form.Submit(ctx, &input)
 

pkg/handlers/pages.go

@@ -1,13 +1,15 @@
 package handlers
 
 import (
-	"fmt"
 	"html/template"
 
+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 
 	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
 	"git.grosinger.net/tgrosinger/saasitone/pkg/services"
+	"git.grosinger.net/tgrosinger/saasitone/templ/layouts"
+	"git.grosinger.net/tgrosinger/saasitone/templ/pages"
 	"git.grosinger.net/tgrosinger/saasitone/templates"
 )
 
@@ -19,11 +21,7 @@ const (
 type (
 	Pages struct {
 		*services.TemplateRenderer
-	}
-
-	post struct {
-		Title string
-		Body  string
+		*services.DBClient
 	}
 
 	aboutData struct {
@@ -44,6 +42,7 @@ func init() {
 
 func (h *Pages) Init(c *services.Container) error {
 	h.TemplateRenderer = c.TemplateRenderer
+	h.DBClient = c.DB
 	return nil
 }
 
@@ -54,28 +53,20 @@ func (h *Pages) Routes(g *echo.Group) {
 
 func (h *Pages) Home(ctx echo.Context) error {
 	p := page.New(ctx)
-	p.Layout = templates.LayoutMain
 	p.Name = templates.PageHome
 	p.Metatags.Description = "Welcome to the homepage."
 	p.Metatags.Keywords = []string{"Go", "MVC", "Web", "Software"}
 	p.Pager = page.NewPager(ctx, 4)
-	p.Data = h.fetchPosts(&p.Pager)
 
-	return h.RenderPage(ctx, p)
-}
+	data := h.Post.FetchAll(&p.Pager)
+	component := pages.Home(p, data)
 
-// fetchPosts is an mock example of fetching posts to illustrate how paging works
-func (h *Pages) fetchPosts(pager *page.Pager) []post {
-	pager.SetItems(20)
-	posts := make([]post, 20)
-
-	for k := range posts {
-		posts[k] = post{
-			Title: fmt.Sprintf("Post example #%d", k+1),
-			Body:  fmt.Sprintf("Lorem ipsum example #%d ddolor sit amet, consectetur adipiscing elit. Nam elementum vulputate tristique.", k+1),
-		}
+	// TODO: This can be reused
+	p.LayoutComponent = func(content templ.Component) templ.Component {
+		return layouts.Main(p, content)
 	}
-	return posts[pager.GetOffset() : pager.GetOffset()+pager.ItemsPerPage]
+
+	return h.RenderPageTempl(ctx, p, component)
 }
 
 func (h *Pages) About(ctx echo.Context) error {

pkg/page/page.go

@@ -1,10 +1,10 @@
 package page
 
 import (
-	"html/template"
 	"net/http"
 	"time"
 
+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 	echomw "github.com/labstack/echo/v4/middleware"
 
@@ -39,6 +39,9 @@ type Page struct {
 	// URL stores the URL of the current request
 	URL string
 
+	// ToURL is a function to convert a route name and optional route parameters to a URL
+	ToURL func(name string, params ...interface{}) string
+
 	// Data stores whatever additional data that needs to be passed to the templates.
 	// This is what the handler uses to pass the content of the page.
 	Data any
@@ -54,6 +57,8 @@ type Page struct {
 	// The template extension should not be included in this value.
 	Layout templates.Layout
 
+	LayoutComponent func(content templ.Component) templ.Component
+
 	// Name stores the name of the page as well as the name of the template file which will be used to render
 	// the content portion of the layout template.
 	// This should match a template file located within the pages directory inside the templates directory.
@@ -127,6 +132,7 @@ func New(ctx echo.Context) Page {
 		Context:    ctx,
 		Path:       ctx.Request().URL.Path,
 		URL:        ctx.Request().URL.String(),
+		ToURL:      ctx.Echo().Reverse,
 		StatusCode: http.StatusOK,
 		Pager:      NewPager(ctx, DefaultItemsPerPage),
 		Headers:    make(map[string]string),
@@ -151,11 +157,6 @@ func New(ctx echo.Context) Page {
 
 // GetMessages gets all flash messages for a given type.
 // This allows for easy access to flash messages from the templates.
-func (p Page) GetMessages(typ msg.Type) []template.HTML {
-	strs := msg.Get(p.Context, typ)
-	ret := make([]template.HTML, len(strs))
-	for k, v := range strs {
-		ret[k] = template.HTML(v)
-	}
-	return ret
+func (p Page) GetMessages(typ msg.Type) []string {
+	return msg.Get(p.Context, typ)
 }

pkg/services/db.go

@@ -18,6 +18,7 @@ type DBClient struct {
 	C  *sqlc.Queries
 
 	User *DBUserClient
+	Post *DBPostClient
 }
 
 func NewDBClient(cfg *config.Config) (*DBClient, error) {
@@ -43,6 +44,7 @@ func NewDBClient(cfg *config.Config) (*DBClient, error) {
 		C:  sqlc.New(db),
 	}
 	client.User = &DBUserClient{db: db}
+	client.Post = &DBPostClient{db: db}
 
 	migrationsDirPath := cfg.Storage.MigrationsDir
 	logger.Info("Loading schema migrations",

pkg/services/posts.go

@@ -0,0 +1,31 @@
+package services
+
+import (
+	"database/sql"
+	"fmt"
+
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+)
+
+type Post struct {
+	Title string
+	Body  string
+}
+
+type DBPostClient struct {
+	db *sql.DB
+}
+
+// FetchAll is an mock example of fetching posts to illustrate how paging works
+func (c *DBPostClient) FetchAll(pager *page.Pager) []Post {
+	pager.SetItems(20)
+	posts := make([]Post, 20)
+
+	for k := range posts {
+		posts[k] = Post{
+			Title: fmt.Sprintf("Post example #%d", k+1),
+			Body:  fmt.Sprintf("Lorem ipsum example #%d ddolor sit amet, consectetur adipiscing elit. Nam elementum vulputate tristique.", k+1),
+		}
+	}
+	return posts[pager.GetOffset() : pager.GetOffset()+pager.ItemsPerPage]
+}

pkg/services/template_renderer.go

@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"sync"
 
+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 
 	"git.grosinger.net/tgrosinger/saasitone/config"
@@ -96,6 +97,52 @@ func (t *TemplateRenderer) Parse() *templateBuilder {
 	}
 }
 
+func (t *TemplateRenderer) RenderPageTempl(ctx echo.Context, page page.Page, content templ.Component) error {
+	// Page name is required
+	if page.Name == "" {
+		return echo.NewHTTPError(http.StatusInternalServerError, "page render failed due to missing name")
+	}
+
+	// Use the app name in configuration if a value was not set
+	if page.AppName == "" {
+		page.AppName = t.config.App.Name
+	}
+
+	var err error
+	var buf bytes.Buffer
+	if page.HTMX.Request.Enabled && !page.HTMX.Request.Boosted {
+		// This is an HTMX non-boosted request.
+		// Only partial content should be rendered.
+		err = content.Render(ctx.Request().Context(), &buf)
+	} else {
+		err = page.LayoutComponent(content).Render(ctx.Request().Context(), &buf)
+	}
+	if err != nil {
+		return echo.NewHTTPError(
+			http.StatusInternalServerError,
+			fmt.Sprintf("failed to parse and execute templates: %s", err),
+		)
+	}
+
+	// Set the status code
+	ctx.Response().Status = page.StatusCode
+
+	// Set any headers
+	for k, v := range page.Headers {
+		ctx.Response().Header().Set(k, v)
+	}
+
+	// Apply the HTMX response, if one
+	if page.HTMX.Response != nil {
+		page.HTMX.Response.Apply(ctx)
+	}
+
+	// Cache this page, if caching was enabled
+	t.cachePage(ctx, page, &buf)
+
+	return ctx.HTMLBlob(ctx.Response().Status, buf.Bytes())
+}
+
 // RenderPage renders a Page as an HTTP response
 func (t *TemplateRenderer) RenderPage(ctx echo.Context, page page.Page) error {
 	var buf *bytes.Buffer

templ/components/forms.templ

@@ -0,0 +1,11 @@
+package components
+
+templ CSRF(csrf string) {
+	<input type="hidden" name="csrf" value={ csrf }/>
+}
+
+templ FieldErrors(errors []string) {
+	for _, err := range errors {
+		<p class="help is-danger">{ err }</p>
+	}
+}

templ/components/forms_templ.go

@@ -0,0 +1,87 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func CSRF(csrf string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"hidden\" name=\"csrf\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(csrf)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/components/forms.templ`, Line: 4, Col: 46}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func FieldErrors(errors []string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		for _, err := range errors {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"help is-danger\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(err)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/components/forms.templ`, Line: 9, Col: 33}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/components/messages.templ

@@ -0,0 +1,21 @@
+package components
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/msg"
+)
+
+templ Messages(p page.Page) {
+	for _, msgType := range []msg.Type{msg.TypeSuccess, msg.TypeInfo, msg.TypeWarning, msg.TypeDanger} {
+		for _, msg := range p.GetMessages(msgType) {
+			@message(msgType, msg)
+		}
+	}
+}
+
+templ message(msgType msg.Type, msg string) {
+	<div class={ "notification is-light", "is-" + msgType } x-data="{show: true}" x-show="show">
+		<button class="delete" @click="show = false"></button>
+		{ msg }
+	</div>
+}

templ/components/messages_templ.go

@@ -0,0 +1,99 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/msg"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+)
+
+func Messages(p page.Page) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		for _, msgType := range []msg.Type{msg.TypeSuccess, msg.TypeInfo, msg.TypeWarning, msg.TypeDanger} {
+			for _, msg := range p.GetMessages(msgType) {
+				templ_7745c5c3_Err = message(msgType, msg).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func message(msgType msg.Type, msg string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var3 = []any{"notification is-light", "is-" + msgType}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/components/messages.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-data=\"{show: true}\" x-show=\"show\"><button class=\"delete\" @click=\"show = false\"></button> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(msg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/components/messages.templ`, Line: 19, Col: 7}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/layouts/auth.templ

@@ -0,0 +1,42 @@
+package layouts
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+templ Auth(p page.Page, content templ.Component) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			@metatags(p)
+			@css()
+			@js()
+		</head>
+		<body>
+			<section class="hero is-info is-fullheight">
+				<div class="hero-body">
+					<div class="container">
+						<div class="columns is-centered">
+							<div class="column is-half">
+								if p.Title != "" {
+									<h1 class="title">{ p.Title }</h1>
+								}
+								<div class="box">
+									@components.Messages(p)
+									@content
+									<div class="content is-small has-text-centered" hx-boost="true">
+										<a href={ templ.URL(p.ToURL("login")) }>Login</a> &#9676;
+										<a href={ templ.URL(p.ToURL("register")) }>Create an account</a> &#9676;
+										<a href={ templ.URL(p.ToURL("forgot_password")) }>Forgot password?</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+			@footer(p)
+		</body>
+	</html>
+}

templ/layouts/auth_templ.go

@@ -0,0 +1,126 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package layouts
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+func Auth(p page.Page, content templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = metatags(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = css().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = js().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><body><section class=\"hero is-info is-fullheight\"><div class=\"hero-body\"><div class=\"container\"><div class=\"columns is-centered\"><div class=\"column is-half\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.Title != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"title\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(p.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/auth.templ`, Line: 23, Col: 36}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"box\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.Messages(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = content.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"content is-small has-text-centered\" hx-boost=\"true\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 templ.SafeURL = templ.URL(p.ToURL("login"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Login</a> &#9676; <a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 templ.SafeURL = templ.URL(p.ToURL("register"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var4)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Create an account</a> &#9676; <a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 templ.SafeURL = templ.URL(p.ToURL("forgot_password"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var5)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Forgot password?</a></div></div></div></div></div></div></section>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = footer(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/layouts/main.templ

@@ -0,0 +1,168 @@
+package layouts
+
+import (
+	"strings"
+
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/funcmap"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+templ Main(p page.Page, content templ.Component) {
+	<!DOCTYPE html>
+	<html lang="en" style="height:100%;">
+		<head>
+			@metatags(p)
+			@css()
+			@js()
+		</head>
+		<body class="has-background-light" style="min-height:100%;">
+			<nav class="navbar is-dark">
+				<div class="container">
+					<div class="navbar-brand" hx-boost="true">
+						<a href={ templ.URL(p.ToURL("home")) } class="navbar-item">{ p.AppName }</a>
+					</div>
+					<div id="navbarMenu" class="navbar-menu">
+						<div class="navbar-end">
+							@search(p)
+						</div>
+					</div>
+				</div>
+			</nav>
+			<div class="container mt-5">
+				<div class="columns">
+					<div class="column is-2">
+						<aside class="menu" hx-boost="true">
+							<p class="menu-label">General</p>
+							<ul class="menu-list">
+								<li>
+									@link(p, p.ToURL("home"), "Dashboard", "")
+								</li>
+								<li>
+									@link(p, p.ToURL("about"), "About", "")
+								</li>
+								<li>
+									@link(p, p.ToURL("contact"), "Contact", "")
+								</li>
+								<li>
+									@link(p, p.ToURL("cache"), "Cache", "")
+								</li>
+								<li>
+									@link(p, p.ToURL("task"), "Task", "")
+								</li>
+							</ul>
+							<p class="menu-label">Account</p>
+							<ul class="menu-list">
+								if p.IsAuth {
+									<li>
+										@link(p, p.ToURL("logout"), "Logout", "")
+									</li>
+								} else {
+									<li>
+										@link(p, p.ToURL("login"), "Login", "")
+									</li>
+									<li>
+										@link(p, p.ToURL("register"), "Register", "")
+									</li>
+									<li>
+										@link(p, p.ToURL("forgot_password"), "Forgot password", "")
+									</li>
+								}
+							</ul>
+						</aside>
+					</div>
+					<div class="column is-10">
+						<div class="box">
+							if p.Title != "" {
+								<h1 class="title">{ p.Title }</h1>
+							}
+							@components.Messages(p)
+							@content
+						</div>
+					</div>
+				</div>
+			</div>
+			@footer(p)
+		</body>
+	</html>
+}
+
+templ link(p page.Page, url, text, classes string) {
+	<a class={ classes, templ.KV("is-active", p.Path == url) } href={ templ.URL(url) }>{ text }</a>
+}
+
+templ search(p page.Page) {
+	<div class="search mr-2 mt-1" x-data="{modal:false}">
+		<input class="input" type="search" placeholder="Search..." @click="modal = true; $nextTick(() => $refs.input.focus());"/>
+		<div class="modal" :class="modal ? 'is-active' : ''" x-show="modal == true">
+			<div class="modal-background"></div>
+			<div class="modal-content" @click.away="modal = false;">
+				<div class="box">
+					<h2 class="subtitle">Search</h2>
+					<p class="control">
+						<input
+							hx-get={ p.ToURL("search") }
+							hx-trigger="keyup changed delay:500ms"
+							hx-target="#results"
+							name="query"
+							class="input"
+							type="search"
+							placeholder="Search..."
+							x-ref="input"
+						/>
+					</p>
+					<div class="block"></div>
+					<div id="results"></div>
+				</div>
+			</div>
+			<button class="modal-close is-large" aria-label="close"></button>
+		</div>
+	</div>
+}
+
+templ metatags(p page.Page) {
+	if p.Title != "" {
+		<title>{ p.AppName } | { p.Title }</title>
+	} else {
+		<title>{ p.AppName }</title>
+	}
+	<link rel="icon" href={ funcmap.File("favicon.png") }/>
+	<meta charset="utf-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	if p.Metatags.Description != "" {
+		<meta name="description" content="{{.Metatags.Description}}"/>
+	}
+	if len(p.Metatags.Keywords) > 0 {
+		<meta name="keywords" content={ strings.Join(p.Metatags.Keywords, ",") }/>
+	}
+}
+
+templ css() {
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"/>
+}
+
+templ js() {
+	<script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js"></script>
+	<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+}
+
+templ footer(p page.Page) {
+	if p.CSRF != "" {
+		<script>
+            document.body.addEventListener('htmx:configRequest', function(evt)  {
+                if (evt.detail.verb !== "get") {
+                    evt.detail.parameters['csrf'] = {p.CSRF};
+                }
+            })
+        </script>
+	}
+	<script>
+        document.body.addEventListener('htmx:beforeSwap', function(evt) {
+            if (evt.detail.xhr.status >= 400){
+                evt.detail.shouldSwap = true;
+                evt.detail.target = htmx.find("body");
+            }
+        });
+    </script>
+}

templ/layouts/main_templ.go

@@ -0,0 +1,506 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package layouts
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"strings"
+
+	"git.grosinger.net/tgrosinger/saasitone/pkg/funcmap"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+func Main(p page.Page, content templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" style=\"height:100%;\"><head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = metatags(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = css().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = js().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><body class=\"has-background-light\" style=\"min-height:100%;\"><nav class=\"navbar is-dark\"><div class=\"container\"><div class=\"navbar-brand\" hx-boost=\"true\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(p.ToURL("home"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"navbar-item\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.AppName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 23, Col: 76}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div><div id=\"navbarMenu\" class=\"navbar-menu\"><div class=\"navbar-end\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = search(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></nav><div class=\"container mt-5\"><div class=\"columns\"><div class=\"column is-2\"><aside class=\"menu\" hx-boost=\"true\"><p class=\"menu-label\">General</p><ul class=\"menu-list\"><li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = link(p, p.ToURL("home"), "Dashboard", "").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = link(p, p.ToURL("about"), "About", "").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = link(p, p.ToURL("contact"), "Contact", "").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = link(p, p.ToURL("cache"), "Cache", "").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = link(p, p.ToURL("task"), "Task", "").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li></ul><p class=\"menu-label\">Account</p><ul class=\"menu-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.IsAuth {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = link(p, p.ToURL("logout"), "Logout", "").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = link(p, p.ToURL("login"), "Login", "").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = link(p, p.ToURL("register"), "Register", "").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li><li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = link(p, p.ToURL("forgot_password"), "Forgot password", "").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></aside></div><div class=\"column is-10\"><div class=\"box\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.Title != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"title\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 77, Col: 35}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = components.Messages(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = content.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = footer(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func link(p page.Page, url, text, classes string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var6 = []any{classes, templ.KV("is-active", p.Path == url)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.SafeURL = templ.URL(url)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 91, Col: 90}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func search(p page.Page) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"search mr-2 mt-1\" x-data=\"{modal:false}\"><input class=\"input\" type=\"search\" placeholder=\"Search...\" @click=\"modal = true; $nextTick(() =&gt; $refs.input.focus());\"><div class=\"modal\" :class=\"modal ? &#39;is-active&#39; : &#39;&#39;\" x-show=\"modal == true\"><div class=\"modal-background\"></div><div class=\"modal-content\" @click.away=\"modal = false;\"><div class=\"box\"><h2 class=\"subtitle\">Search</h2><p class=\"control\"><input hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(p.ToURL("search"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 104, Col: 33}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"keyup changed delay:500ms\" hx-target=\"#results\" name=\"query\" class=\"input\" type=\"search\" placeholder=\"Search...\" x-ref=\"input\"></p><div class=\"block\"></div><div id=\"results\"></div></div></div><button class=\"modal-close is-large\" aria-label=\"close\"></button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func metatags(p page.Page) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if p.Title != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<title>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.AppName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 125, Col: 20}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" | ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var14 string
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(p.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 125, Col: 34}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<title>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var15 string
+			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(p.AppName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 127, Col: 20}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"icon\" href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(funcmap.File("favicon.png"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 129, Col: 52}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.Metatags.Description != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<meta name=\"description\" content=\"{{.Metatags.Description}}\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if len(p.Metatags.Keywords) > 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<meta name=\"keywords\" content=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var17 string
+			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(strings.Join(p.Metatags.Keywords, ","))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/layouts/main.templ`, Line: 137, Col: 72}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func css() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var18 == nil {
+			templ_7745c5c3_Var18 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func js() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var19 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var19 == nil {
+			templ_7745c5c3_Var19 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js\"></script><script defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"></script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func footer(p page.Page) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var20 == nil {
+			templ_7745c5c3_Var20 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if p.CSRF != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n            document.body.addEventListener('htmx:configRequest', function(evt)  {\n                if (evt.detail.verb !== \"get\") {\n                    evt.detail.parameters['csrf'] = {p.CSRF};\n                }\n            })\n        </script>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n        document.body.addEventListener('htmx:beforeSwap', function(evt) {\n            if (evt.detail.xhr.status >= 400){\n                evt.detail.shouldSwap = true;\n                evt.detail.target = htmx.find(\"body\");\n            }\n        });\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/pages/home.templ

@@ -0,0 +1,94 @@
+package pages
+
+import (
+	"strconv"
+
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/services"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/funcmap"
+)
+
+templ Home(p page.Page, posts []services.Post) {
+	if (p.HTMX.Request.Target != "posts") {
+		@topContent(p)
+	}
+	<div id="posts">
+		for _, post := range posts {
+			<article class="media">
+				<figure class="media-left">
+					<p class="image is-64x64">
+						<img src={ funcmap.File("gopher.png") } alt="Gopher"/>
+					</p>
+				</figure>
+				<div class="media-content">
+					<div class="content">
+						<p>
+							<strong>{ post.Title }</strong>
+							<br/>
+							{ post.Body }
+						</p>
+					</div>
+				</div>
+			</article>
+		}
+		<div class="field is-grouped is-grouped-centered">
+			if !p.Pager.IsBeginning() {
+				<p class="control">
+					<button class="button is-primary" hx-swap="outerHTML" hx-get={ "/?page=" + strconv.Itoa(p.Pager.Page-1) } hx-target="#posts">Previous page</button>
+				</p>
+			}
+			if !p.Pager.IsEnd() {
+				<p class="control">
+					<button class="button is-primary" hx-swap="outerHTML" hx-get={ "/?page=" + strconv.Itoa(p.Pager.Page+1) } hx-target="#posts">Next page</button>
+				</p>
+			}
+		</div>
+	</div>
+	if (p.HTMX.Request.Target != "posts") {
+		@fileMsg()
+	}
+}
+
+templ topContent(p page.Page) {
+	<section class="hero is-info welcome is-small">
+		<div class="hero-body">
+			<div class="container">
+				<h1 class="title">
+					if p.IsAuth {
+						Hello, { p.AuthUser.Name }
+					} else {
+						Hello
+					}
+				</h1>
+				<h2 class="subtitle">
+					if p.IsAuth {
+						Welcome back!
+					} else {
+						Please login in to your account.
+					}
+				</h2>
+			</div>
+		</div>
+	</section>
+	<section class="section">
+		<h1 class="title">Recent posts</h1>
+		<h2 class="subtitle">
+			Below is an example of both paging and AJAX fetching using HTMX
+		</h2>
+	</section>
+}
+
+templ fileMsg() {
+	<div class="block"></div>
+	<article class="message is-small is-warning" x-data="{show: true}" x-show="show">
+		<div class="message-header">
+			<p>Serving files</p>
+			<button class="delete is-small" aria-label="delete" @click="show = false"></button>
+		</div>
+		<div class="message-body">
+			In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted.
+			Static files also contain cache-control headers which are configured via middleware.
+			You can also use AlpineJS to dismiss this message.
+		</div>
+	</article>
+}

templ/pages/home_templ.go

@@ -0,0 +1,233 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"strconv"
+
+	"git.grosinger.net/tgrosinger/saasitone/pkg/funcmap"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/services"
+)
+
+func Home(p page.Page, posts []services.Post) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if p.HTMX.Request.Target != "posts" {
+			templ_7745c5c3_Err = topContent(p).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"posts\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, post := range posts {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<article class=\"media\"><figure class=\"media-left\"><p class=\"image is-64x64\"><img src=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(funcmap.File("gopher.png"))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 20, Col: 43}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" alt=\"Gopher\"></p></figure><div class=\"media-content\"><div class=\"content\"><p><strong>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(post.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 26, Col: 27}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</strong><br>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(post.Body)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 28, Col: 18}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div></div></article>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"field is-grouped is-grouped-centered\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !p.Pager.IsBeginning() {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"control\"><button class=\"button is-primary\" hx-swap=\"outerHTML\" hx-get=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/?page=" + strconv.Itoa(p.Pager.Page-1))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 37, Col: 108}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#posts\">Previous page</button></p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !p.Pager.IsEnd() {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"control\"><button class=\"button is-primary\" hx-swap=\"outerHTML\" hx-get=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/?page=" + strconv.Itoa(p.Pager.Page+1))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 42, Col: 108}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#posts\">Next page</button></p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.HTMX.Request.Target != "posts" {
+			templ_7745c5c3_Err = fileMsg().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func topContent(p page.Page) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"hero is-info welcome is-small\"><div class=\"hero-body\"><div class=\"container\"><h1 class=\"title\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.IsAuth {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Hello, ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.AuthUser.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/home.templ`, Line: 58, Col: 30}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Hello")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><h2 class=\"subtitle\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if p.IsAuth {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Welcome back!")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Please login in to your account.")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2></div></div></section><section class=\"section\"><h1 class=\"title\">Recent posts</h1><h2 class=\"subtitle\">Below is an example of both paging and AJAX fetching using HTMX</h2></section>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func fileMsg() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"block\"></div><article class=\"message is-small is-warning\" x-data=\"{show: true}\" x-show=\"show\"><div class=\"message-header\"><p>Serving files</p><button class=\"delete is-small\" aria-label=\"delete\" @click=\"show = false\"></button></div><div class=\"message-body\">In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted. Static files also contain cache-control headers which are configured via middleware. You can also use AlpineJS to dismiss this message.</div></article>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/pages/login.templ

@@ -0,0 +1,42 @@
+package pages
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+)
+
+type LoginForm struct {
+	Email    string `form:"email" validate:"required,email"`
+	Password string `form:"password" validate:"required"`
+	form.Submission
+}
+
+templ Login(p page.Page, form *LoginForm) {
+	<form method="post" hx-boost="true" action={ templ.URL(p.ToURL("login.submit")) }>
+		@components.Messages(p)
+		<div class="field">
+			<label for="email" class="label">Email address</label>
+			<div class="control">
+				<input id="email" type="email" name="email" class={ "input", form.Submission.GetFieldStatusClass("Email") } value={ form.Email }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("Email"))
+			</div>
+		</div>
+		<div class="field">
+			<label for="password" class="label">Password</label>
+			<div class="control">
+				<input id="password" type="password" name="password" placeholder="*******" class={ "input", form.Submission.GetFieldStatusClass("Password") }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("Password"))
+			</div>
+		</div>
+		<div class="field is-grouped">
+			<p class="control">
+				<button class="button is-primary">Log in</button>
+			</p>
+			<p class="control">
+				<a href={ templ.URL(p.ToURL("home")) } class="button is-light">Cancel</a>
+			</p>
+		</div>
+		@components.CSRF(p.CSRF)
+	</form>
+}

templ/pages/login_templ.go

@@ -0,0 +1,154 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+type LoginForm struct {
+	Email    string `form:"email" validate:"required,email"`
+	Password string `form:"password" validate:"required"`
+	form.Submission
+}
+
+func Login(p page.Page, form *LoginForm) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form method=\"post\" hx-boost=\"true\" action=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(p.ToURL("login.submit"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.Messages(p).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"field\"><label for=\"email\" class=\"label\">Email address</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 = []any{"input", form.Submission.GetFieldStatusClass("Email")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"email\" type=\"email\" name=\"email\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/login.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(form.Email)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/login.templ`, Line: 21, Col: 130}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("Email")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field\"><label for=\"password\" class=\"label\">Password</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 = []any{"input", form.Submission.GetFieldStatusClass("Password")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"password\" type=\"password\" name=\"password\" placeholder=\"*******\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/login.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("Password")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field is-grouped\"><p class=\"control\"><button class=\"button is-primary\">Log in</button></p><p class=\"control\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.SafeURL = templ.URL(p.ToURL("home"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"button is-light\">Cancel</a></p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.CSRF(p.CSRF).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templ/pages/register.templ

@@ -0,0 +1,57 @@
+package pages
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+)
+
+type RegisterForm struct {
+	Name            string `form:"name" validate:"required"`
+	Email           string `form:"email" validate:"required,email"`
+	Password        string `form:"password" validate:"required"`
+	ConfirmPassword string `form:"password-confirm" validate:"required,eqfield=Password"`
+	form.Submission
+}
+
+templ Register(p page.Page, form *RegisterForm) {
+	<form method="post" hx-boost="true" action={ templ.URL(p.ToURL("register.submit")) }>
+		<div class="field">
+			<label for="name" class="label">Name</label>
+			<div class="control">
+				<input type="text" id="name" name="name" class={ "input", form.Submission.GetFieldStatusClass("Name") } value={ form.Name }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("Name"))
+			</div>
+		</div>
+		<div class="field">
+			<label for="email" class="label">Email address</label>
+			<div class="control">
+				<input type="email" id="email" name="email" class={ "input", form.Submission.GetFieldStatusClass("Email") } value={ form.Email }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("Email"))
+			</div>
+		</div>
+		<div class="field">
+			<label for="password" class="label">Password</label>
+			<div class="control">
+				<input type="password" id="password" name="password" placeholder="*******" class={ "input", form.Submission.GetFieldStatusClass("Password") }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("Password"))
+			</div>
+		</div>
+		<div class="field">
+			<label for="password-confirm" class="label">Confirm password</label>
+			<div class="control">
+				<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class={ "input", form.Submission.GetFieldStatusClass("ConfigmPassword") }/>
+				@components.FieldErrors(form.Submission.GetFieldErrors("ConfigmPassword"))
+			</div>
+		</div>
+		<div class="field is-grouped">
+			<p class="control">
+				<button class="button is-primary">Register</button>
+			</p>
+			<p class="control">
+				<a href={ templ.URL(p.ToURL("home")) } class="button is-light">Cancel</a>
+			</p>
+		</div>
+		@components.CSRF(p.CSRF)
+	</form>
+}

templ/pages/register_templ.go

@@ -0,0 +1,221 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.707
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
+	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
+	"git.grosinger.net/tgrosinger/saasitone/templ/components"
+)
+
+type RegisterForm struct {
+	Name            string `form:"name" validate:"required"`
+	Email           string `form:"email" validate:"required,email"`
+	Password        string `form:"password" validate:"required"`
+	ConfirmPassword string `form:"password-confirm" validate:"required,eqfield=Password"`
+	form.Submission
+}
+
+func Register(p page.Page, form *RegisterForm) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form method=\"post\" hx-boost=\"true\" action=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(p.ToURL("register.submit"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"field\"><label for=\"name\" class=\"label\">Name</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 = []any{"input", form.Submission.GetFieldStatusClass("Name")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"text\" id=\"name\" name=\"name\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(form.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 22, Col: 125}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("Name")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field\"><label for=\"email\" class=\"label\">Email address</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 = []any{"input", form.Submission.GetFieldStatusClass("Email")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"email\" id=\"email\" name=\"email\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(form.Email)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 29, Col: 130}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("Email")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field\"><label for=\"password\" class=\"label\">Password</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 = []any{"input", form.Submission.GetFieldStatusClass("Password")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"password\" id=\"password\" name=\"password\" placeholder=\"*******\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var9).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("Password")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field\"><label for=\"password-confirm\" class=\"label\">Confirm password</label><div class=\"control\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 = []any{"input", form.Submission.GetFieldStatusClass("ConfigmPassword")}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"password\" id=\"password-confirm\" name=\"password-confirm\" placeholder=\"*******\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var11).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/register.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.FieldErrors(form.Submission.GetFieldErrors("ConfigmPassword")).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"field is-grouped\"><p class=\"control\"><button class=\"button is-primary\">Register</button></p><p class=\"control\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.SafeURL = templ.URL(p.ToURL("home"))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var13)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"button is-light\">Cancel</a></p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.CSRF(p.CSRF).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

templates/pages/home.gohtml

@@ -1,82 +0,0 @@
-{{define "content"}}
-    {{- if not (eq .HTMX.Request.Target "posts")}}
-        {{template "top-content" .}}
-    {{- end}}
-
-    {{template "posts" .}}
-
-    {{- if not (eq .HTMX.Request.Target "posts")}}
-        {{template "file-msg" .}}
-    {{- end}}
-{{end}}
-
-{{define "top-content"}}
-    <section class="hero is-info welcome is-small">
-        <div class="hero-body">
-            <div class="container">
-                <h1 class="title">
-                    Hello{{if .IsAuth}}, {{.AuthUser.Name}}{{end}}
-                </h1>
-                <h2 class="subtitle">{{if .IsAuth}}Welcome back!{{else}}Please login in to your account.{{end}}</h2>
-            </div>
-        </div>
-    </section>
-
-    <section class="section">
-        <h1 class="title">Recent posts</h1>
-        <h2 class="subtitle">
-            Below is an example of both paging and AJAX fetching using HTMX
-        </h2>
-    </section>
-{{end}}
-
-{{define "posts"}}
-    <div id="posts">
-        {{- range .Data}}
-            <article class="media">
-                <figure class="media-left">
-                    <p class="image is-64x64">
-                        <img src="{{file "gopher.png"}}" alt="Gopher"/>
-                    </p>
-                </figure>
-                <div class="media-content">
-                    <div class="content">
-                        <p>
-                            <strong>{{.Title}}</strong>
-                            <br>
-                            {{.Body}}
-                        </p>
-                    </div>
-                </div>
-            </article>
-        {{- end}}
-
-        <div class="field is-grouped is-grouped-centered">
-            {{- if not $.Pager.IsBeginning}}
-                <p class="control">
-                    <button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{sub $.Pager.Page 1}}" hx-target="#posts">Previous page</button>
-                </p>
-            {{- end}}
-            {{- if not $.Pager.IsEnd}}
-                <p class="control">
-                    <button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{add $.Pager.Page 1}}" hx-target="#posts">Next page</button>
-                </p>
-            {{- end}}
-        </div>
-    </div>
-{{end}}
-
-{{define "file-msg"}}
-    <div class="block"></div>
-    <article class="message is-small is-warning" x-data="{show: true}" x-show="show">
-        <div class="message-header">
-            <p>Serving files</p>
-            <button class="delete is-small" aria-label="delete" @click="show = false"></button>
-        </div>
-        <div class="message-body">
-            In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted.
-            Static files also contain cache-control headers which are configured via middleware.
-            You can also use AlpineJS to dismiss this message.
-        </div>
-    </article>
-{{end}}

templates/pages/login.gohtml

@@ -1,28 +0,0 @@
-{{define "content"}}
-    <form method="post" hx-boost="true" action="{{url "login.submit"}}">
-        {{template "messages" .}}
-        <div class="field">
-            <label for="email" class="label">Email address</label>
-            <div class="control">
-                <input id="email" type="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
-                {{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}}
-            </div>
-        </div>
-        <div class="field">
-            <label for="password" class="label">Password</label>
-            <div class="control">
-                <input id="password" type="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
-                {{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
-            </div>
-        </div>
-        <div class="field is-grouped">
-            <p class="control">
-                <button class="button is-primary">Log in</button>
-            </p>
-            <p class="control">
-                <a href="{{url "home"}}" class="button is-light">Cancel</a>
-            </p>
-        </div>
-        {{template "csrf" .}}
-    </form>
-{{end}}

templates/pages/register.gohtml

@@ -1,41 +0,0 @@
-{{define "content"}}
-    <form method="post" hx-boost="true" action="{{url "register.submit"}}">
-        <div class="field">
-            <label for="name" class="label">Name</label>
-            <div class="control">
-                <input type="text" id="name" name="name" class="input {{.Form.GetFieldStatusClass "Name"}}" value="{{.Form.Name}}">
-                {{template "field-errors" (.Form.GetFieldErrors "Name")}}
-            </div>
-        </div>
-        <div class="field">
-            <label for="email" class="label">Email address</label>
-            <div class="control">
-                <input type="email" id="email" name="email" class="input {{.Form.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
-                {{template "field-errors" (.Form.GetFieldErrors "Email")}}
-            </div>
-        </div>
-        <div class="field">
-            <label for="password" class="label">Password</label>
-            <div class="control">
-                <input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.GetFieldStatusClass "Password"}}">
-                {{template "field-errors" (.Form.GetFieldErrors "Password")}}
-            </div>
-        </div>
-        <div class="field">
-            <label for="password-confirm" class="label">Confirm password</label>
-            <div class="control">
-                <input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.GetFieldStatusClass "ConfirmPassword"}}">
-                {{template "field-errors" (.Form.GetFieldErrors "ConfirmPassword")}}
-            </div>
-        </div>
-        <div class="field is-grouped">
-            <p class="control">
-                <button class="button is-primary">Register</button>
-            </p>
-            <p class="control">
-                <a href="{{url "home"}}" class="button is-light">Cancel</a>
-            </p>
-        </div>
-        {{template "csrf" .}}
-    </form>
-{{end}}