Add simple example (#13)

2 files changed, 103 insertions, 0 deletions

diff --git a/README.md b/README.md
index 5d15060..cd18771 100644
--- a/README.md
+++ b/README.md
@@ -9,3 +9,36 @@ without the use of a template language. Think server-side-rendered React,
 but without the virtual DOM and diffing.
 
 The implementation is still incomplete, but usable. The API may change until version 1 is reached.
+
+## Usage
+
+Get the library using `go get`:
+
+```shell script
+go get -u github.com/maragudk/gomponents
+```
+
+Then do something like this:
+
+```go
+package foo
+
+import (
+    "net/http"
+
+    g "github.com/maragudk/gomponents"
+    "github.com/maragudk/gomponents/el"
+)
+
+func main() {
+    _ = http.ListenAndServe("localhost:8080", handler())
+}
+
+func handler() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		_ = g.Write(w, el.Document(el.HTML(el.Head(el.Title("Hi!")), el.Body(el.H1("Hi!")))))
+	}
+}
+```
+
+For more complete examples, see [the examples directory](examples/).
diff --git a/examples/simple/simple.go b/examples/simple/simple.go
new file mode 100644
index 0000000..adc9094
--- /dev/null
+++ b/examples/simple/simple.go
@@ -0,0 +1,70 @@
+package main
+
+import (
+	"fmt"
+	"net/http"
+	"time"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/attr"
+	"github.com/maragudk/gomponents/el"
+)
+
+func main() {
+	_ = http.ListenAndServe("localhost:8080", handler())
+}
+
+func handler() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		props := pageProps{
+			title: r.URL.Path,
+			path:  r.URL.Path,
+		}
+
+		_ = g.Write(w, page(props))
+	}
+}
+
+type pageProps struct {
+	title string
+	path  string
+}
+
+func page(props pageProps) g.Node {
+	return el.Document(
+		el.HTML(
+			g.Attr("lang", "en"),
+			el.Head(
+				el.Title(props.title),
+				el.Style(g.Attr("type", "text/css"), g.Raw(".is-active{font-weight: bold}")),
+			),
+			el.Body(
+				navbar(navbarProps{path: props.path}),
+				el.H1(props.title),
+				el.P(g.Text(fmt.Sprintf("Welcome to the page at %v.", props.path))),
+				el.P(g.Text(fmt.Sprintf("Rendered at %v", time.Now()))),
+			),
+		),
+	)
+}
+
+type navbarProps struct {
+	path string
+}
+
+func navbar(props navbarProps) g.Node {
+	items := []struct {
+		path string
+		text string
+	}{
+		{"/", "Home"},
+		{"/foo", "Foo"},
+		{"/bar", "Bar"},
+	}
+	var lis []g.Node
+	for _, item := range items {
+		lis = append(lis, el.Li(
+			el.A(item.path, attr.Classes(map[string]bool{"is-active": props.path == item.path}), g.Text(item.text))))
+	}
+	return el.Ul(lis...)
+}