Below are a set of UX patterns implemented in htmx with minimal HTML and styling.
@@ -32,13 +42,13 @@ templ page() {
- @exampleRow(
- "/examples/click-to-edit",
+ @e.exampleRow(
+ "/examples/templ/click-to-edit",
"Click To Edit",
"Demonstrates inline editing of a data object",
)
- @exampleRow(
- "/examples/bulk-update",
+ @e.exampleRow(
+ "/examples/templ/bulk-update",
"Bulk Update",
"Demonstrates bulk updating of multiple rows of data",
)
@@ -47,7 +57,7 @@ templ page() {
}
}
-templ exampleRow(link, name, description string) {
+templ (e templExample) exampleRow(link, name, description string) {
{ name }
@@ -57,3 +67,17 @@ templ exampleRow(link, name, description string) {
}
+
+templ (e templExample) notFoundPage() {
+ @e.layout.Base("Not Found") {
+ Not Found
+ The page you are looking for does not exist.
+ }
+}
+
+templ (e templExample) serverErrorPage(err string) {
+ @e.layout.Base("Server Error") {
+ Something went wrong
+ { err }
+ }
+}
diff --git a/examples/web/examples/examples_templ.go b/examples/web/examples/examples_templ.go
new file mode 100644
index 0000000..d19e7b1
--- /dev/null
+++ b/examples/web/examples/examples_templ.go
@@ -0,0 +1,235 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package examples
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import (
+ "bytes"
+ "context"
+ "io"
+
+ "github.com/a-h/templ"
+
+ "github.com/will-wow/typed-htmx-go/examples/web/layout"
+)
+
+type templExample struct {
+ layout layout.Templ
+}
+
+func newTemplExample() templExample {
+ return templExample{
+ layout: layout.Templ{},
+ }
+}
+
+func (e templExample) 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)
+ templ_7745c5c3_Var2 := 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)
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("UI Templ Examples Below are a set of UX patterns implemented in htmx with minimal HTML and styling.
These are ported from the htmx examples and are intended showcase the use of hx when building HTMX applications.
You can copy and paste them and then adjust them for your needs.
Pattern Description ")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ templ_7745c5c3_Err = e.exampleRow(
+ "/examples/templ/click-to-edit",
+ "Click To Edit",
+ "Demonstrates inline editing of a data object",
+ ).Render(ctx, templ_7745c5c3_Buffer)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ templ_7745c5c3_Err = e.exampleRow(
+ "/examples/templ/bulk-update",
+ "Bulk Update",
+ "Demonstrates bulk updating of multiple rows of data",
+ ).Render(ctx, templ_7745c5c3_Buffer)
+ 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 = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+ }
+ return templ_7745c5c3_Err
+ })
+ templ_7745c5c3_Err = e.layout.Base("").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), 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 (e templExample) exampleRow(link, name, description 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)
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ var templ_7745c5c3_Var5 string
+ templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+ if templ_7745c5c3_Err != nil {
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/examples/examples.templ`, Line: 62, Col: 41}
+ }
+ _, 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
+ }
+ var templ_7745c5c3_Var6 string
+ templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(description)
+ if templ_7745c5c3_Err != nil {
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/examples/examples.templ`, Line: 65, Col: 16}
+ }
+ _, 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(" Not Found The page you are looking for does not exist.
")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ if !templ_7745c5c3_IsBuffer {
+ _, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+ }
+ return templ_7745c5c3_Err
+ })
+ templ_7745c5c3_Err = e.layout.Base("Not Found").Render(templ.WithChildren(ctx, templ_7745c5c3_Var8), 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 (e templExample) serverErrorPage(err 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_Var9 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var9 == nil {
+ templ_7745c5c3_Var9 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ templ_7745c5c3_Var10 := 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)
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Something went wrong ")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ var templ_7745c5c3_Var11 string
+ templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(err)
+ if templ_7745c5c3_Err != nil {
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/examples/examples.templ`, Line: 80, Col: 10}
+ }
+ _, 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("
")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ if !templ_7745c5c3_IsBuffer {
+ _, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+ }
+ return templ_7745c5c3_Err
+ })
+ templ_7745c5c3_Err = e.layout.Base("Server Error").Render(templ.WithChildren(ctx, templ_7745c5c3_Var10), 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
+ })
+}
diff --git a/examples/web/layout/layout.gom.go b/examples/web/layout/layout.gom.go
new file mode 100644
index 0000000..d9fd072
--- /dev/null
+++ b/examples/web/layout/layout.gom.go
@@ -0,0 +1,102 @@
+package layout
+
+import (
+ g "github.com/maragudk/gomponents"
+ . "github.com/maragudk/gomponents/html"
+
+ "github.com/will-wow/typed-htmx-go/htmx"
+)
+
+var ghx = htmx.NewGomponents()
+
+type Gomponents struct{}
+
+func (l Gomponents) Base(title string, children ...g.Node) g.Node {
+ return Doctype(
+ HTML(
+ Lang("en"),
+ Head(
+ Meta(Name("viewport"), Content("width=device-width, initial-scale=1")),
+ Meta(Charset("utf-8")),
+
+ g.If(title != "",
+ TitleEl(g.Textf("%s | HX | Examples", title)),
+ ),
+ g.If(title == "",
+ TitleEl(g.Text("HX | Examples")),
+ ),
+
+ Meta(Name("htmx-config"), Content(`{"includeIndicatorStyles":false}`)),
+ Meta(Name("color-scheme"), Content("light")),
+ Meta(Name("description"), Content("Examples of typed-htmx-go/hx")),
+ Meta(Name("referrer"), Content("origin-when-cross-origin")),
+ Meta(Name("creator"), Content("Will Ockelmann-Wagner")),
+ Script(Src("https://unpkg.com/htmx.org@1.9.10")),
+ Link(Rel("stylesheet"), Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css")),
+ Link(Rel("stylesheet"), Href("/static/main.css")),
+ ),
+ Body(
+ ghx.Boost(true),
+ Main(
+ l.nav(),
+ g.Group(children),
+ ),
+ ),
+ ),
+ )
+}
+
+func (l Gomponents) nav() g.Node {
+ return Nav(
+ Ul(
+ Li(
+ A(
+ Href("/examples/gomponents/"),
+ Strong(
+ g.Text("T"),
+ U(g.Text("HX")),
+ g.Text("GO"),
+ ),
+ ),
+ ),
+ ),
+ Ul(
+ Li(
+ A(
+ Href("https://pkg.go.dev/github.com/will-wow/typed-htmx-go/hx"),
+ Target("_blank"),
+ Rel("noopener"),
+ g.Text("Docs"),
+ ),
+ ),
+ Li(
+ A(
+ Href("https://htmx.org"),
+ Target("_blank"),
+ Rel("noopener"),
+ g.Text("HTMX"),
+ ),
+ ),
+ Li(
+ A(
+ Href("/"),
+ g.Text("Templ"),
+ ),
+ ),
+ Li(
+ A(
+ Href("/examples/gomponents/"),
+ g.Text("Gomponents"),
+ ),
+ ),
+ Li(
+ A(
+ Href("https://github.com/will-wow/typed-htmx-go"),
+ Target("_blank"),
+ Rel("noopener"),
+ g.Text("GitHub"),
+ ),
+ ),
+ ),
+ )
+}
diff --git a/examples/templ/web/layout/layout.templ b/examples/web/layout/layout.templ
similarity index 80%
rename from examples/templ/web/layout/layout.templ
rename to examples/web/layout/layout.templ
index 5d372fc..61c85f4 100644
--- a/examples/templ/web/layout/layout.templ
+++ b/examples/web/layout/layout.templ
@@ -1,19 +1,23 @@
package layout
import (
- "github.com/will-wow/typed-htmx-go/hx"
+ "github.com/will-wow/typed-htmx-go/htmx"
)
-templ Base(title string, className ...string) {
+var thx = htmx.NewTempl()
+
+type Templ struct{}
+
+templ (l Templ) Base(title string, className ...string) {
HX | Examples
+ Templ | HX | Examples
} else {
- { title } | HX | Examples
+ { title } | Templ | HX | Examples
}
@nav()
{ children... }
@@ -71,7 +71,12 @@ templ nav() {
- Examples
+ Templ
+
+
+
+
+ Gomponents
diff --git a/examples/templ/web/layout/layout_templ.go b/examples/web/layout/layout_templ.go
similarity index 90%
rename from examples/templ/web/layout/layout_templ.go
rename to examples/web/layout/layout_templ.go
index 2107492..d5eb438 100644
--- a/examples/templ/web/layout/layout_templ.go
+++ b/examples/web/layout/layout_templ.go
@@ -11,10 +11,15 @@ import (
"io"
"github.com/a-h/templ"
- "github.com/will-wow/typed-htmx-go/hx"
+
+ "github.com/will-wow/typed-htmx-go/htmx"
)
-func Base(title string, className ...string) templ.Component {
+var thx = htmx.NewTempl()
+
+type Templ struct{}
+
+func (l Templ) Base(title string, className ...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 {
@@ -32,7 +37,7 @@ func Base(title string, className ...string) templ.Component {
return templ_7745c5c3_Err
}
if title == "" {
- _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("HX | Examples ")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Templ | HX | Examples ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -44,13 +49,13 @@ func Base(title string, className ...string) templ.Component {
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
- return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layout/layout.templ`, Line: 15, Col: 18}
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layout/layout.templ`, Line: 19, Col: 18}
}
_, 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(" | HX | Examples")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" | Templ | HX | Examples")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -59,9 +64,7 @@ func Base(title string, className ...string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
- templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, hx.New().
- Boost(true).
- Build())
+ templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, thx.Boost(true))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -118,7 +121,7 @@ func nav() templ.Component {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
- _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("