Move elements and attributes into html package (#52)

This makes it easier to use dot-imports.

Also updated the readme and examples with new usage, and move the `Classes` helper into the `components` package.

2 files changed, 40 insertions, 33 deletions

diff --git a/examples/dot-import/dot-import.go b/examples/dot-import/dot-import.go
index be3bd50..1d595b8 100644
--- a/examples/dot-import/dot-import.go
+++ b/examples/dot-import/dot-import.go
@@ -3,9 +3,9 @@ package main
 import (
 	"net/http"
 
-	. "github.com/maragudk/gomponents"
+	g "github.com/maragudk/gomponents"
 	. "github.com/maragudk/gomponents/components"
-	. "github.com/maragudk/gomponents/el"
+	. "github.com/maragudk/gomponents/html"
 )
 
 func main() {
@@ -13,25 +13,32 @@ func main() {
 }
 
 func handler(w http.ResponseWriter, r *http.Request) {
-	p := page(props{
-		title: r.URL.Path,
-		path:  r.URL.Path,
-	})
-	_ = p.Render(w)
-}
-
-type props struct {
-	title string
-	path  string
+	page := Page("Hi!", r.URL.Path)
+	_ = page.Render(w)
 }
 
-func page(p props) Node {
-	return HTML5(DocumentProps{
-		Title:    p.title,
+func Page(title, currentPath string) g.Node {
+	return HTML5(HTML5Props{
+		Title:    title,
 		Language: "en",
-		Body: []Node{
-			H1(p.title),
-			P(Textf("Welcome to the page at %v.", p.path)),
+		Head: []g.Node{
+			StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
+		},
+		Body: []g.Node{
+			Navbar(currentPath),
+			H1(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, Classes{"is-active": currentPath == href}, g.Text(name))
+}
diff --git a/examples/simple/simple.go b/examples/simple/simple.go
index dd6dd58..535fa6e 100644
--- a/examples/simple/simple.go
+++ b/examples/simple/simple.go
@@ -5,8 +5,8 @@ import (
 	"time"
 
 	g "github.com/maragudk/gomponents"
-	"github.com/maragudk/gomponents/attr"
-	"github.com/maragudk/gomponents/el"
+	c "github.com/maragudk/gomponents/components"
+	h "github.com/maragudk/gomponents/html"
 )
 
 func main() {
@@ -27,22 +27,22 @@ type props struct {
 }
 
 func page(p props) g.Node {
-	return el.Document(
-		el.HTML(attr.Lang("en"),
-			el.Head(
-				el.Title(p.title),
-				el.Style(attr.Type("text/css"),
+	return h.Document(
+		h.HTML(h.Lang("en"),
+			h.Head(
+				h.TitleEl(p.title),
+				h.StyleEl(h.Type("text/css"),
 					g.Raw(".is-active{font-weight: bold}"),
 					g.Raw("ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }"),
 					g.Raw("ul.nav li { display: block;  padding: 8px; float: left; }"),
 				),
 			),
-			el.Body(
+			h.Body(
 				navbar(navbarProps{path: p.path}),
-				el.Hr(),
-				el.H1(p.title),
-				el.P(g.Textf("Welcome to the page at %v.", p.path)),
-				el.P(g.Textf("Rendered at %v", time.Now())),
+				h.Hr(),
+				h.H1(p.title),
+				h.P(g.Textf("Welcome to the page at %v.", p.path)),
+				h.P(g.Textf("Rendered at %v", time.Now())),
 			),
 		),
 	)
@@ -63,9 +63,9 @@ func navbar(props navbarProps) g.Node {
 	}
 	lis := g.Map(len(items), func(i int) g.Node {
 		item := items[i]
-		return el.Li(
-			el.A(item.path, attr.Classes(map[string]bool{"is-active": props.path == item.path}), g.Text(item.text)),
+		return h.Li(
+			h.A(item.path, c.Classes(map[string]bool{"is-active": props.path == item.path}), g.Text(item.text)),
 		)
 	})
-	return el.Ul(attr.Class("nav"), g.Group(lis))
+	return h.Ul(h.Class("nav"), g.Group(lis))
 }