improve component example

README.md

@@ -16,21 +16,42 @@ Also enables template-free server-side rendered components with support for nest
 
 A component can be created and used with simple functions:
 ```golang
-	element := H("div", Attr{"class": "bg-grey-50"})
+// Example prop for a component
+type User struct {
+	Name string
+	// ...
+}
+
+func MyComponenet(user User) func() string {
+	return H(
+		"div",
+		Attr{"class": "bg-grey-50"},
+		user.Name,
+	)
+}
+
+func Root() func() string {
+	user := User{Name: "Daz"}
+	html := H("html", MyComponenet(user))
+}
 
-	html := H("html", element)
+// And used in a handler:
 
-	w.Write([]byte(html()))
+func Handler(w http.ResponseWriter, r *http.Request) {
+	w.Write([]byte(Root()))
+}
 ```
 
 Lists can be easily created without needing to embed a `range / end` in a template:
 ```golang
-	items := []func() string{H("li", "item one"), H("li", "item two")}
-
-	element := H("ul", Attr{"class": "bg-grey-50"}, items)
+items := []func() string{
+	H("li", "item one"),
+	H("li", "item two"),
+}
 
-	div := H("div", element)
+element := H("ul", Attr{"class": "bg-grey-50"}, items)
 
+div := H("div", element)
 ```
 
 

examples/server.go

@@ -7,13 +7,23 @@ import (
 	. "github.com/stevelacy/daz"
 )
 
+// User is an example prop for a component
+type User struct {
+	Name string
+}
+
 func main() {
 	http.HandleFunc("/", rootHandler)
 	fmt.Println("listening on :3000")
 	http.ListenAndServe(":3000", nil)
 }
 
 func rootHandler(w http.ResponseWriter, r *http.Request) {
+	title := "Example Server"
+	description := "Welcome to daz"
+
+	user := User{Name: "Daz"}
+
 	links := H("link", Attr{
 		"href": "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
 		"rel":  "stylesheet",
@@ -27,31 +37,36 @@ func rootHandler(w http.ResponseWriter, r *http.Request) {
 		}),
 	}
 
-	head := H("head", H("title", "Example Server"), meta, links)
+	head := H("head", H("title", title), meta, links)
 	style := Attr{"style": "background: #efefef"}
 
-	body := H("body", style, nested())
+	body := H(
+		"body",
+		style,
+		AppComponent(user, description),
+	)
 	html := H("html", head, body)
 	w.Write([]byte(html()))
 }
 
-func navItems() []func() string {
+func navItems(user User) []func() string {
 	// get itmes from somewhere such as a database
 	items := []func() string{H("li", "item one"), H("li", "item two")}
 
 	// example runtime modification
-	lastElement := H("li", "last item")
+	lastElement := H("li", user.Name)
 	items = append(items, lastElement)
 	return items
 }
 
-func nested() func() string {
-	nav := H("nav", navItems())
+// AppComponent is a daz component. It returns a daz.H func
+func AppComponent(user User, description string) func() string {
+	nav := H("nav", navItems(user))
 	return H(
 		"div", Attr{"class": "bg-grey-50"},
 		H("div", Attr{"class": "max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"},
 			H("h2", Attr{"class": "text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"},
-				H("span", Attr{"class": "block"}, "Welcome to daz"),
+				H("span", Attr{"class": "block"}, description),
 				H("span", Attr{"class": "block text-indigo-600"}, "This example uses Tailwind CSS"),
 			),
 			H("div", Attr{"class": "mt-8 lex lg:mt-0 lg:flex-shrink-0"},