Repository: maragudk/gomponents
Pull request #36 (2020-10-28 19:25:04)

Add HTML5 document template

codecov[bot]: # [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=h1) Report
> Merging [#36](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=desc) into [master](https://codecov.io/gh/maragudk/gomponents/commit/13701c4f668eba27956a8ac554a1fe272245d210?el=desc) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/maragudk/gomponents/pull/36/graphs/tree.svg?width=650&height=150&src=pr&token=JYN032TYAC)](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=tree)

```diff
@@            Coverage Diff            @@
##            master       #36   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            7         8    +1     
  Lines          207       226   +19     
=========================================
+ Hits           207       226   +19     
```


| [Impacted Files](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [attr/simple.go](https://codecov.io/gh/maragudk/gomponents/pull/36/diff?src=pr&el=tree#diff-YXR0ci9zaW1wbGUuZ28=) | `100.00% <100.00%> (ø)` | |
| [doc/documents.go](https://codecov.io/gh/maragudk/gomponents/pull/36/diff?src=pr&el=tree#diff-ZG9jL2RvY3VtZW50cy5nbw==) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=footer). Last update [13701c4...e2eff52](https://codecov.io/gh/maragudk/gomponents/pull/36?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/README.md b/README.md
index 6fe9ca8..b976f42 100644
--- a/README.md
+++ b/README.md
@@ -70,4 +70,50 @@ func Navbar(path string) g.Node {
 }
 ```
 
+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/).
diff --git a/attr/simple.go b/attr/simple.go
index e286c26..d7d4ab8 100644
--- a/attr/simple.go
+++ b/attr/simple.go
@@ -12,10 +12,18 @@ 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 {
 	return g.Attr("form", v)
 }
diff --git a/components/documents.go b/components/documents.go
new file mode 100644
index 0000000..65f3e63
--- /dev/null
+++ b/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)),
+		),
+	)
+}


Test patch:
diff --git a/attr/simple_test.go b/attr/simple_test.go
index 784561a..eb2cfe3 100644
--- a/attr/simple_test.go
+++ b/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,
diff --git a/components/documents_test.go b/components/documents_test.go
new file mode 100644
index 0000000..2aabd5a
--- /dev/null
+++ b/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)
+	})
+}