From aace72f063322b92d1a9d02b8c7d746b1200ab82 Mon Sep 17 00:00:00 2001
From: mikestefanello <mike.stefanello@gmail.com>
Date: Sat, 25 Dec 2021 14:20:49 -0500
Subject: [PATCH] Expanded the about page.

---
 routes/about.go              | 16 +++++++++++--
 templates/pages/about.gohtml | 45 +++++++++++++++++++++++-------------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/routes/about.go b/routes/about.go
index 07a8c32..6eeba36 100644
--- a/routes/about.go
+++ b/routes/about.go
@@ -15,7 +15,8 @@ type (
 
 	AboutData struct {
 		ShowCacheWarning bool
-		Tabs             []AboutTab
+		FrontendTabs     []AboutTab
+		BackendTabs      []AboutTab
 	}
 
 	AboutTab struct {
@@ -35,9 +36,10 @@ func (c *About) Get(ctx echo.Context) error {
 	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
+	// even though you wouldn't normally send markup like this
 	page.Data = AboutData{
 		ShowCacheWarning: true,
-		Tabs: []AboutTab{
+		FrontendTabs: []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.`),
@@ -51,6 +53,16 @@ func (c *About) Get(ctx echo.Context) error {
 				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.`),
 			},
 		},
+		BackendTabs: []AboutTab{
+			{
+				Title: "Echo",
+				Body:  template.HTML(`High performance, extensible, minimalist Go web framework. Visit <a href="https://echo.labstack.com/">echo.labstack.com</a> to learn more.`),
+			},
+			{
+				Title: "Ent",
+				Body:  template.HTML(`Simple, yet powerful ORM for modeling and querying data. Visit <a href="https://entgo.io/">entgo.io</a> to learn more.`),
+			},
+		},
 	}
 
 	return c.RenderPage(ctx, page)
diff --git a/templates/pages/about.gohtml b/templates/pages/about.gohtml
index 0a71219..06524c2 100644
--- a/templates/pages/about.gohtml
+++ b/templates/pages/about.gohtml
@@ -1,22 +1,20 @@
 {{define "content"}}
-    {{if .Data.Tabs}}
+    {{- if .Data.FrontendTabs}}
+        <p class="subtitle mt-5">Frontend</p>
         <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>
+        {{template "tabs" .Data.FrontendTabs}}
+        <div class="mb-4"></div>
+    {{- end}}
+
+    {{- if .Data.BackendTabs}}
+        <p class="subtitle mt-5">Backend</p>
+        <p class="mb-4">The following incredible projects provide the foundation of the Go backend. See the repository for a complete list of included projects.</p>
+        {{template "tabs" .Data.BackendTabs}}
+        <div class="mb-4"></div>
     {{end}}
 
-    {{if .Data.ShowCacheWarning}}
-        <article class="message is-warning mt-5">
+    {{- if .Data.ShowCacheWarning}}
+        <article class="message is-warning mt-6">
             <div class="message-header">
                 <p>Warning</p>
             </div>
@@ -24,5 +22,20 @@
                 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}}
+{{end}}
+
+{{define "tabs"}}
+    <div x-data="{tab: 0}">
+        <div class="tabs">
+            <ul>
+                {{- range $index, $tab := .}}
+                    <li :class="{'is-active': tab === {{$index}}}" @click="tab = {{$index}}"><a>{{.Title}}</a></li>
+                {{- end}}
+            </ul>
+        </div>
+        {{- range $index, $tab := .}}
+            <div x-show="tab == {{$index}}"><p> &rarr; {{.Body}}</p></div>
+        {{- end}}
+    </div>
 {{end}}
\ No newline at end of file