Cleanup and additional template examples.

routes/about.go

@@ -10,14 +10,14 @@ type About struct {
 	controller.Controller
 }
 
-func (a *About) Get(c echo.Context) error {
-	p := controller.NewPage(c)
-	p.Layout = "main"
-	p.Name = "about"
-	p.Title = "About"
-	p.Data = "This is the about page"
-	p.Cache.Enabled = false
-	p.Cache.Tags = []string{"page_about", "page:list"}
+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
+	page.Cache.Tags = []string{"page_about", "page:list"}
 
-	return a.RenderPage(c, p)
+	return c.RenderPage(ctx, page)
 }

templates/components/messages.gohtml

@@ -15,7 +15,7 @@
 
 {{define "message"}}
     <div class="notification is-light is-{{.Type}}" x-data="{show: true}" x-show="show">
-        <button class="delete" x-on:click="show = false"></button>
+        <button class="delete" @click="show = false"></button>
         {{.Text}}
     </div>
 {{end}}

templates/pages/about.gohtml

@@ -1,3 +1,43 @@
 {{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>
+        </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>
+
+    <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>
 {{end}}

templates/pages/home.gohtml

@@ -11,9 +11,6 @@
 {{end}}
 
 {{define "top-content"}}
-    Hello homepage
-    <p><img src="{{file "gopher.png"}}" alt="Gopher"/></p>
-
     <section class="section">
         <h1 class="title">Recent posts</h1>
         <h2 class="subtitle">
@@ -62,7 +59,7 @@
     <article class="message is-small is-info mt-4" x-data="{show: true}" x-show="show">
         <div class="message-header">
             <p>Serving files</p>
-            <button class="delete is-small" aria-label="delete" x-on:click="show = false"></button>
+            <button class="delete is-small" aria-label="delete" @click="show = false"></button>
         </div>
         <div class="message-body">
             In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted.