Templates

The html/template package in Go offers a powerful and secure way to dynamically generate HTML content in web applications. One of its key advantages is the built-in protection against Cross-Site Scripting (XSS) attacks. By default, the package automatically escapes potentially dangerous content, ensuring that user inputs are safely handled and output without the risk of injecting malicious code into web pages.

With separation of logic and presentation of html/template, can maintain cleaner and more modular codebases, where the business logic in Go code remains separate from the HTML structure and design.

Component based templates

Goffee implements an easy-to-extend componentized templating system approach in Go using the html/template package. The core defining small components like Button or Dropdown, with components you can nest them to create complete pages. In one application, you can abstracting component logic using responses, reducing redundancy across different pages. The organization of templates and Go code maintain modularity.

In the following graphic we see two example pages LoginPage and HomePage:

We can see that the two pages share most of the components with some variations. Components like Navbar should be able to abstract away its child components.

Implementation using html/template

This example define a low-level component, Button:

// components/button.html
{{define "button"}}
    <button class="button-container">
        <a
            class="button {{if .IsPrimary}}primary{{end}}" 
            {{if eq .IsSubmit true}}
                type="submit"
            {{else}}
                href="{{.Link}}"
            {{end}}>
            {{.Text}}
        </a>
    </button>
{{end}}

// components/button.go
package components

type Button struct {
 Text      string
 Link      string
 IsSubmit  bool
 IsPrimary bool
}

This example define the Navbar:

// components/navbar.html
{{define "navbar"}}
<div class="navbar">
    <a class="logo" href="/">My App</a>

    <div class="actions">
        {{template "dropdown" .ProjectsDropdown}}
        {{template "button" .SettingsButton}}
    </div>

</div>
{{end}}

// components/navbar.go
package components

type Navbar struct {
 ProjectsDropdown Dropdown
 SettingsButton   Button
}

We’ve used define to define the components and template to compose smaller components within larger ones. For more information about how templates works check the oficial documentation html/template.

Templates structure inside Goffee

Goffee core includes an initial base of templates along with their basic structures, which can be used by any application. This initial base is organized into three groups:

• Form
• Content
• Page

The groups generally contain the template and structure pair. You can inspect the core code to see the details of the available components. These are inside the "template/components" folder in the core project.

├── core
│   ├── template/
│	│	├── components/ -------> contains the templates & structures

In the next chapter you will find the details of the templates and components included in the core component templates.

Custom templates inside Goffee cup

Templates can be defined inside the storage/templates folder of your application. Here you can define any templates and structures you need.

If you use the same filename as a core template filename in your application, it will take preference over the core. That allow you to change the template of core components in your custom application.