README
¶
Go Template Components
🚨 Possibly NSFW yet.This is a drop-in replacement for Go's text/template and html/template packages, that adds a new {{component}} and {{slot}} element to the language.
The new component element allows you to render reusable HTML template components that can be used across your HTML templates.
Install
go get github.com/taleoflong/go-template@latest
import (
"github.com/taleoflong/go-template/html/template" // for html templates
"github.com/taleoflong/go-template/text/template" // for text templates
)
Simple example
There are two new elements to Go's templating language:
{{component "headline" .}} ... {{end}{{slot}}
Defining a component
A new component can be defined using the regular {{define}} element. With the help of the new {{slot}} element, an outlet can be set which later renders the inner/child HTML.
{{define "navbar"}}
<nav class="navbar">
<ul class="navbar-items">
{{slot}}
<ul>
</nav>
{{end}}
Rendering a component
To render a previously defined component, the {{component}} element is used. The component element has two required parameters. First, the name of the component to render; second, the pipeline (dot).
{{component "navbar" .}}
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
{{end}}
This will render the following HTML:
<nav class="navbar">
<ul class="navbar-items">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<ul>
</nav>
Drop-in Replacement
This package is a drop-in replacement for the text/template and html/template packages and can be used by simply replacing the imports.
import (
// "html/template"
"github.com/philippta/go-template/html/template"
)
func main() {
t := template.Must(template.New("layout.html").ParseFiles(
"components/navbar.html",
"layout.html",
))
t.Execute(os.Stdout, nil)
}
Passing Component Props
Passing in additional properties to a component can be achieved with a simple template function.
A full example can be found in the example directory.
func main() {
funcs := template.FuncMap{
"props": props,
}
t := template.Must(template.New("layout.html").Funcs(funcs).ParseFiles("layout.html"))
t.Execute(os.Stdout, nil)
}
func props(v ...any) map[string]any {
if len(v)%2 != 0 {
panic("uneven number of key/value pairs")
}
m := map[string]any{}
for i := 0; i < len(v); i += 2 {
m[fmt.Sprint(v[i])] = v[i+1]
}
return m
}
{{define "card"}}
<div class="card">
{{if .Image}}
<img class="card-image" src="{{.Image}}" />
{{end}}
<div class="card-body">
{{slot}}
</div>
{{if .Link}}
<a class="card-link" href="{{.Link}}">Open</a>
{{end}}
</div>
{{end}}
<body>
{{component "card" (props "Image" "/static/dog.jpeg" "Link" "/blog/dogs" )}}
<h1>Dogs</h1>
<p>
This is a blog post about dogs.
</p>
{{end}}
</body>
Directories
¶
| Path | Synopsis |
|---|---|
|
html
|
|
|
template
Package template (html/template) implements data-driven templates for generating HTML output safe against code injection.
|
Package template (html/template) implements data-driven templates for generating HTML output safe against code injection. |
|
internal
|
|
|
cfg
Package cfg holds configuration shared by the Go command and internal/testenv.
|
Package cfg holds configuration shared by the Go command and internal/testenv. |
|
fmtsort
Package fmtsort provides a general stable ordering mechanism for maps, on behalf of the fmt and text/template packages.
|
Package fmtsort provides a general stable ordering mechanism for maps, on behalf of the fmt and text/template packages. |
|
testenv
Package testenv provides information about what functionality is available in different testing environments run by the Go team.
|
Package testenv provides information about what functionality is available in different testing environments run by the Go team. |
|
text
|
|
|
template
Package template implements data-driven templates for generating textual output.
|
Package template implements data-driven templates for generating textual output. |
|
template/parse
Package parse builds parse trees for templates as defined by text/template and html/template.
|
Package parse builds parse trees for templates as defined by text/template and html/template. |