This is a Golang library which allows you to build HTML using Go code.
It's mainly designed as a way to create re-usable HTML components, similar to how React components work.
Let's start with an easy example. This is the generated HTML:
<div class="userProfile">
<h1 class="profileName">
pclaerhout
</h1>
<img src="https://en.gravatar.com/userimage/389631/32413201cb4a680e82ee7c4bdd30b795.jpeg" class="profileImage" alt="pclaerhout">
</img>
</div>
This is the Go code which generates this HTML:
package components
import (
"github.com/pieterclaerhout/go-html"
)
type UserProfile struct {
Username string
AvatarURL string
}
// HTML returns the HTML version of the component
func (userProfile *UserProfile) HTML(minified bool) string {
root := html.Blocks{
html.Div(
html.Class("userProfile"),
html.H1(
html.Class("profileName"),
html.Text(userProfile.Username),
),
html.Img(
html.Class("profileImage").Src(userProfile.AvatarURL).Alt(userProfile.Username),
),
),
}
return html.Render(root, minified)
}
Let's assume you want to create this blob of HTML:
<div class="page-header">
<table>
<tr>
<td>
<img src="https://en.gravatar.com/userimage/389631/32413201cb4a680e82ee7c4bdd30b795.jpeg" alt="Title" class="app-icon-left shadow">
</img>
</td>
<td>
<h1>
Title
</h1> d
<h3>
Subtitle
</h3>
</td>
</tr>
</table>
</div>
To express the following HTML code in Go code using this library, you write:
package components
import (
"github.com/pieterclaerhout/go-html"
)
type PageHeader struct {
Title string
Subtitle string
IconURL string
}
// HTML returns the HTML version of the component
func (pageHeader *PageHeader) HTML(minified bool) string {
root := html.Blocks{
html.Div(
html.Class("page-header"),
html.Table(nil,
html.Tr(nil,
html.Td(nil,
html.Img(html.Src(pageHeader.IconURL).Class("app-icon-left shadow").Alt(pageHeader.Title)),
),
html.Td(nil,
html.H1(nil, html.Text(pageHeader.Title)),
html.H3(nil, html.Text(pageHeader.Subtitle)),
),
),
),
),
}
return html.Render(root, minified)
}
You can also make it slightly more complex, e.g. to build a HTML select
box:
<select>
<option value="1">label 1</option>
<option value="2" selected="true">label 2</option>
<option value="3">label 3</option>
</select>
The equivalent Go code:
package components
import (
"github.com/pieterclaerhout/go-html"
)
type Option struct {
Value string
Text string
}
type MySelectBuilder struct {
options []Option
selected string
}
func MySelect() *MySelectBuilder {
return &MySelectBuilder{}
}
func (b *MySelectBuilder) Options(opts []Option) (r *MySelectBuilder) {
b.options = opts
return b
}
func (b *MySelectBuilder) Selected(selected string) (r *MySelectBuilder) {
b.selected = selected
return b
}
// HTML returns the HTML version of the component
func (b *MySelectBuilder) HTML(minified bool) string {
options := []html.Block{}
for _, op := range b.options {
attrs := html.Value(op.Value)
if op.Value == b.selected {
attrs = attrs.Attr("selected", "true")
}
options = append(options, html.Option(attrs, html.Text(op.Text)))
}
root := html.Blocks{
html.Select(nil, options...),
}
return html.Render(root, minified)
}
This library is a fork of https://github.com/mbertschler/blocks with additional features and incompatible changes.