### Install gomponents-htmx

Source: https://github.com/christophersw/gomponents-htmx/blob/master/README.md

Installs the gomponents-htmx library using the Go module system. This is the first step to integrate the library into your Go project.

```shell
go get -u github.com/christophersw/gomponents-htmx
```

--------------------------------

### Usage with HTML5 Document Template

Source: https://github.com/christophersw/gomponents-htmx/blob/master/README.md

An alternative usage pattern using the provided HTML5 document template for cleaner code. This example also sets up an HTTP server rendering a page with dynamic content.

```go
package main

import (
	"net/http"

	g "github.com/christophersw/gomponents-htmx"
	c "github.com/christophersw/gomponents-htmx/components"
	. "github.com/christophersw/gomponents-htmx/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return c.HTML5(c.HTML5Props{
		Title:    title,
		Language: "en",
		Head: []g.Node{
			StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
		},
		Body: []g.Node{
			Navbar(currentPath),
			H1(g.Text(title)),
			P(g.Textf("Welcome to the page at %v.", currentPath)),
		},
	})
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

func NavbarLink(href, name, currentPath string) g.Node {
	return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))
}
```

--------------------------------

### Basic Usage with Dot Imports

Source: https://github.com/christophersw/gomponents-htmx/blob/master/README.md

Demonstrates how to use gomponents-htmx with dot imports for a more native HTML feel. It sets up a simple HTTP server that renders a page with a navbar and content.

```go
package main

import (
	"net/http"

	g "github.com/christophersw/gomponents-htmx"
	c "github.com/christophersw/gomponents-htmx/components"
	. "github.com/christophersw/gomponents-htmx/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return Doctype(
		HTML(
			Lang("en"),
			Head(
				TitleEl(g.Text(title)),
				StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
			),
			Body(
				Navbar(currentPath),
				H1(g.Text(title)),
				P(g.Textf("Welcome to the page at %v.", currentPath)),
			),
		),
	)
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

func NavbarLink(href, name, currentPath string) g.Node {
	return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))
}
```

--------------------------------

### Handling HTML Name Clashes

Source: https://github.com/christophersw/gomponents-htmx/blob/master/README.md

Explains the necessity of using `El` or `Attr` suffixes for certain HTML elements and attributes in Go due to name collisions. This ensures compatibility and correct usage within the Go package.

```APIDOC
HTML Element/Attribute Name Clashes:

Certain HTML elements and attributes have names that are also Go keywords or common identifiers, leading to name clashes. To resolve this, gomponents-htmx appends suffixes to these specific names.

- `data` element/attribute: Use `DataEl` for the element and `DataAttr` for the attribute.
- `form` element/attribute: Use `FormEl` for the element and `FormAttr` for the attribute.
- `style` element/attribute: Use `StyleEl` for the element and `StyleAttr` for the attribute.
- `title` element/attribute: Use `TitleEl` for the element and `TitleAttr` for the attribute.

Example:
Instead of `style(...)`, use `StyleEl(...)` to create a style element.
Instead of `data="..."`, use `DataAttr("data", "...")` for an attribute.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.