1
0

Add better example in readme (#16)

This commit is contained in:
Markus Wüstenberg 2020-09-23 22:05:59 +02:00 committed by GitHub
parent eb2cfa10c2
commit 3de9270f78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 7 deletions

View File

@ -11,5 +11,5 @@ trim_trailing_whitespace = true
[Makefile] [Makefile]
indent_style = tab indent_style = tab
[*.go] [{*.go,*.md}]
indent_style = tab indent_style = tab

View File

@ -21,24 +21,51 @@ go get -u github.com/maragudk/gomponents
Then do something like this: Then do something like this:
```go ```go
package foo package main
import ( import (
"net/http" "fmt"
"net/http"
g "github.com/maragudk/gomponents" g "github.com/maragudk/gomponents"
"github.com/maragudk/gomponents/el" "github.com/maragudk/gomponents/attr"
"github.com/maragudk/gomponents/el"
) )
func main() { func main() {
_ = http.ListenAndServe("localhost:8080", handler()) _ = http.ListenAndServe("localhost:8080", handler())
} }
func handler() http.HandlerFunc { func handler() http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) { 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!"))))) page := Page("Hi!", r.URL.Path)
_ = g.Write(w, page)
} }
} }
func Page(title, path string) g.Node {
return el.Document(
el.HTML(
g.Attr("lang", "en"),
el.Head(
el.Title(title),
el.Style(g.Attr("type", "text/css"), g.Raw(".is-active{font-weight: bold}")),
),
el.Body(
Navbar(path),
el.H1(title),
el.P(g.Text(fmt.Sprintf("Welcome to the page at %v.", path))),
),
),
)
}
func Navbar(path string) g.Node {
return g.El("nav",
el.A("/", attr.Classes{"is-active": path == "/"}, g.Text("Home")),
el.A("/about", attr.Classes{"is-active": path == "/about"}, g.Text("About")),
)
}
``` ```
For more complete examples, see [the examples directory](examples/). For more complete examples, see [the examples directory](examples/).