Expanded HTML examples in the about page template.

routes/about.go

@@ -1,23 +1,57 @@
 package routes
 
 import (
+	"html/template"
+
 	"goweb/controller"
 
 	"github.com/labstack/echo/v4"
 )
 
-type About struct {
-	controller.Controller
-}
+type (
+	About struct {
+		controller.Controller
+	}
+
+	AboutData struct {
+		ShowCacheWarning bool
+		Tabs             []AboutTab
+	}
+
+	AboutTab struct {
+		Title string
+		Body  template.HTML
+	}
+)
 
 func (c *About) Get(ctx echo.Context) error {
 	page := controller.NewPage(ctx)
 	page.Layout = "main"
 	page.Name = "about"
 	page.Title = "About"
-	page.Data = "The data field can take in anything you want to send to the templates"
-	page.Cache.Enabled = false
+
+	// This page will be cached!
+	page.Cache.Enabled = true
 	page.Cache.Tags = []string{"page_about", "page:list"}
 
+	// A simple example of how the Data field can contain anything you want to send to the templates
+	page.Data = AboutData{
+		ShowCacheWarning: true,
+		Tabs: []AboutTab{
+			{
+				Title: "HTMX",
+				Body:  template.HTML(`Completes HTML as a hypertext by providing attributes to AJAXify anything and much more. Visit <a href="https://htmx.org/">htmx.org</a> to learn more.`),
+			},
+			{
+				Title: "Alpine.js",
+				Body:  template.HTML(`Drop-in, Vue-like functionality written directly in your markup. Visit <a href="https://alpinejs.dev/">alpinejs.dev</a> to learn more.`),
+			},
+			{
+				Title: "Bulma",
+				Body:  template.HTML(`Ready-to-use frontend components that you can easily combine to build responsive web interfaces with no JavaScript requirements. Visit <a href="https://bulma.io/">bulma.io</a> to learn more.`),
+			},
+		},
+	}
+
 	return c.RenderPage(ctx, page)
 }

routes/about_test.go

@@ -7,6 +7,8 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
+// Simple example of how to test routes and their markup using the test HTTP server spun up within
+// this test package
 func TestAbout_Get(t *testing.T) {
 	doc := request(t).
 		setRoute("about").
@@ -14,6 +16,7 @@ func TestAbout_Get(t *testing.T) {
 		assertStatusCode(http.StatusOK).
 		toDoc()
 
+	// Goquery is an excellent package to use for testing HTML markup
 	h1 := doc.Find("h1.title")
 	assert.Len(t, h1.Nodes, 1)
 	assert.Equal(t, "About", h1.Text())

templates/pages/about.gohtml

@@ -1,43 +1,28 @@
 {{define "content"}}
-    <p>{{.Data}}</p>
-    <div x-data="{tab: 'pictures'}">
-        <div class="tabs">
-            <ul>
-                <li :class="{'is-active': tab === 'pictures'}" @click="tab = 'pictures'"><a>Pictures</a></li>
-                <li :class="{'is-active': tab === 'music'}" @click="tab = 'music'"><a>Music</a></li>
-                <li :class="{'is-active': tab === 'videos'}" @click="tab = 'videos'"><a>Videos</a></li>
-                <li :class="{'is-active': tab === 'documents'}" @click="tab = 'documents'"><a>Documents</a></li>
-            </ul>
+    {{if .Data.Tabs}}
+        <p class="mb-4">The following incredible projects make developing advanced, modern frontends possible and simple without having to write a single line of JS or CSS. You can go extremely far without leaving the comfort of Go with server-side rendered HTML.</p>
+        <div x-data="{tab: 0}">
+            <div class="tabs">
+                <ul>
+                    {{range $index, $tab := .Data.Tabs}}
+                        <li :class="{'is-active': tab === {{$index}}}" @click="tab = {{$index}}"><a>{{.Title}}</a></li>
+                    {{end}}
+                </ul>
+            </div>
+            {{range $index, $tab := .Data.Tabs}}
+                <div x-show="tab == {{$index}}"><p>{{.Body}}</p></div>
+            {{end}}
         </div>
-        <div x-show="tab == 'pictures'">pictures</div>
-        <div x-show="tab == 'music'">music</div>
-        <div x-show="tab == 'videos'">videos</div>
-        <div x-show="tab == 'documents'">documents</div>
-    </div>
+    {{end}}
 
-    <div class="row" x-data="{fields: []}">
-            <table class="table table-bordered align-items-center table-sm">
-                <thead class="thead-light">
-                <tr>
-                    <th>#</th>
-                    <th>Text Feild 1</th>
-                    <th>Remove</th>
-                </tr>
-                </thead>
-                <tbody>
-                <template x-for="(field, index) in fields" :key="index">
-                    <tr>
-                        <td x-text="index + 1"></td>
-                        <td><input x-model="field.value" type="text" name="txt1[]" class="form-control"></td>
-                        <td><button type="button" class="btn btn-danger btn-small" @click="fields.splice(index, 1);">&times;</button></td>
-                    </tr>
-                </template>
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td colspan="4" class="text-right"><button type="button" class="btn btn-info" @click="fields.push({value: ''})">+ Add Row</button></td>
-                </tr>
-                </tfoot>
-            </table>
-    </div>
+    {{if .Data.ShowCacheWarning}}
+        <article class="message is-warning mt-5">
+            <div class="message-header">
+                <p>Warning</p>
+            </div>
+            <div class="message-body">
+                This route has caching enabled so hot-reloading in the local environment will not work. Check the Redis cache for a key matching the URL path.
+            </div>
+        </article>
+    {{end}}
 {{end}}