all repos — gomponents @ 3df42084aed213fc9e760b53b5132da63b1818b7

HTML components in pure Go

Add HTML5 document template (#36)
Markus Wüstenberg markus@maragu.dk
Thu, 29 Oct 2020 12:03:43 +0100
commit

3df42084aed213fc9e760b53b5132da63b1818b7

parent

13701c4f668eba27956a8ac554a1fe272245d210

5 files changed, 129 insertions(+), 0 deletions(-)

jump to
M README.md → README.md
@@ -70,4 +70,50 @@ ) }
 ```
 
+You could also use a page template to simplify your code a bit:
+
+```go
+package main
+
+import (
+	"net/http"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/attr"
+	c "github.com/maragudk/gomponents/components"
+	"github.com/maragudk/gomponents/el"
+)
+
+func main() {
+	_ = http.ListenAndServe("localhost:8080", handler())
+}
+
+func handler() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		page := Page("Hi!", r.URL.Path)
+		_ = g.Write(w, page)
+	}
+}
+
+func Page(title, path string) g.Node {
+	return c.HTML5(c.DocumentProps{
+		Title:       title,
+		Language:    "en",
+		Head:        []g.Node{el.Style(g.Attr("type", "text/css"), g.Raw(".is-active{font-weight: bold}"))},
+		Body:        []g.Node{
+			Navbar(path),
+			el.H1(title),
+			el.P(g.Textf("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/).
M attr/simple.go → attr/simple.go
@@ -12,8 +12,16 @@ func AutoComplete(v string) g.Node { 	return g.Attr("autocomplete", v)
 }
 
+func Charset(v string) g.Node {
+	return g.Attr("charset", v)
+}
+
 func Class(v string) g.Node {
 	return g.Attr("class", v)
+}
+
+func Content(v string) g.Node {
+	return g.Attr("content", v)
 }
 
 func Form(v string) g.Node {
M attr/simple_test.go → attr/simple_test.go
@@ -13,7 +13,9 @@ func TestSimpleAttributes(t *testing.T) { 	cases := map[string]func(string) g.Node{
 		"accept":       attr.Accept,
 		"autocomplete": attr.AutoComplete,
+		"charset":      attr.Charset,
 		"class":        attr.Class,
+		"content":      attr.Content,
 		"form":         attr.Form,
 		"height":       attr.Height,
 		"href":         attr.Href,
A components/documents.go
@@ -0,0 +1,40 @@+package components
+
+import (
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/attr"
+	"github.com/maragudk/gomponents/el"
+)
+
+// DocumentProps for HTML5.
+// Title is set no matter what, Description and Language elements only if the strings are non-empty.
+type DocumentProps struct {
+	Title       string
+	Description string
+	Language    string
+	Head        []g.Node
+	Body        []g.Node
+}
+
+// HTML5 document template.
+func HTML5(p DocumentProps) g.NodeFunc {
+	var lang, description g.Node
+	if p.Language != "" {
+		lang = attr.Lang(p.Language)
+	}
+	if p.Description != "" {
+		description = el.Meta(attr.Name("description"), attr.Content(p.Description))
+	}
+	return el.Document(
+		el.HTML(lang,
+			el.Head(
+				el.Meta(attr.Charset("utf-8")),
+				el.Meta(attr.Name("viewport"), attr.Content("width=device-width, initial-scale=1")),
+				el.Title(p.Title),
+				description,
+				g.Group(p.Head),
+			),
+			el.Body(g.Group(p.Body)),
+		),
+	)
+}
A components/documents_test.go
@@ -0,0 +1,33 @@+package components_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/attr"
+	c "github.com/maragudk/gomponents/components"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestHTML5(t *testing.T) {
+	t.Run("returns an html5 document template", func(t *testing.T) {
+		e := c.HTML5(c.DocumentProps{
+			Title:       "Hat",
+			Description: "Love hats.",
+			Language:    "en",
+			Head:        []g.Node{el.Link(attr.Rel("stylesheet"), attr.Href("/hat.css"))},
+			Body:        []g.Node{el.Div()},
+		})
+
+		assert.Equal(t, `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Hat</title><meta name="description" content="Love hats." /><link rel="stylesheet" href="/hat.css" /></head><body><div /></body></html>`, e)
+	})
+
+	t.Run("returns no language, description, and extra head/body elements if empty", func(t *testing.T) {
+		e := c.HTML5(c.DocumentProps{
+			Title: "Hat",
+		})
+
+		assert.Equal(t, `<!doctype html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Hat</title></head><body /></html>`, e)
+	})
+}