diff options
author | Markus Wüstenberg | 2024-09-19 21:45:31 +0200 |
---|---|---|
committer | GitHub | 2024-09-19 21:45:31 +0200 |
commit | 12acb8041060306b361109b46f9f05dbb4382ea0 (patch) | |
tree | 469f06f059809b6c606ff2e489896dec47a546a8 /README.md | |
parent | 69b0da41dff1813f3939cf4ea09fbbb2d06b7719 (diff) | |
download | gomponents-12acb8041060306b361109b46f9f05dbb4382ea0.tar.lz gomponents-12acb8041060306b361109b46f9f05dbb4382ea0.tar.zst gomponents-12acb8041060306b361109b46f9f05dbb4382ea0.zip |
Add full example app (#204)
Also, remove the other examples and simplify the readme.
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 91 |
1 files changed, 8 insertions, 83 deletions
diff --git a/README.md b/README.md index cb8bd7e..1650ba4 100644 --- a/README.md +++ b/README.md @@ -39,109 +39,34 @@ Get the library using `go get`: go get github.com/maragudk/gomponents ``` -The preferred way to use gomponents is with so-called dot-imports (note the dot before the `gomponents/html` import), +The preferred way to use gomponents is with so-called dot-imports (note the dot before the imports), to give you that smooth, native HTML feel: ```go package main import ( - "net/http" - - g "github.com/maragudk/gomponents" - c "github.com/maragudk/gomponents/components" + . "github.com/maragudk/gomponents" + . "github.com/maragudk/gomponents/components" . "github.com/maragudk/gomponents/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 { +func Navbar(authenticated bool, currentPath string) Node { return Nav( NavbarLink("/", "Home", currentPath), NavbarLink("/about", "About", currentPath), + If(authenticated, NavbarLink("/profile", "Profile", currentPath)), ) } -func NavbarLink(href, name, currentPath string) g.Node { - return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name)) +func NavbarLink(href, name, currentPath string) Node { + return A(Href(href), Classes{"is-active": currentPath == href}, g.Text(name)) } ``` Some people don't like dot-imports, and luckily it's completely optional. -If you don't like dot-imports, just use regular imports. - -You could also use the provided HTML5 document template to simplify your code a bit: - -```go -package main - -import ( - "net/http" - - g "github.com/maragudk/gomponents" - c "github.com/maragudk/gomponents/components" - . "github.com/maragudk/gomponents/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)) -} -``` -For more complete examples, see [the examples directory](examples/). +For a more complete example, see [the examples directory](internal/examples/). ### What's up with the specially named elements and attributes? |