camzalewski/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Expanded the about page.

Browse source
This commit is contained in:
mikestefanello 2021-12-25 14:20:49 -05:00
parent 334cb1c20e
commit aace72f063
2 changed files with 43 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

16
routes/about.go
View file

@ -15,7 +15,8 @@ type (
AboutData struct { AboutData struct {
ShowCacheWarning bool ShowCacheWarning bool
Tabs []AboutTab FrontendTabs []AboutTab
BackendTabs []AboutTab
} }
AboutTab struct { AboutTab struct {
@ -35,9 +36,10 @@ func (c *About) Get(ctx echo.Context) error {
page.Cache.Tags = []string{"page_about", "page:list"} 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 // 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{ page.Data = AboutData{
ShowCacheWarning: true, ShowCacheWarning: true,
Tabs: []AboutTab{ FrontendTabs: []AboutTab{
{ {
Title: "HTMX", 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.`), 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.`), 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) return c.RenderPage(ctx, page)

45
templates/pages/about.gohtml
View file

@ -1,22 +1,20 @@
{{define "content"}} {{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> <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}"> {{template "tabs" .Data.FrontendTabs}}
<div class="tabs"> <div class="mb-4"></div>
<ul> {{- end}}
{{range $index, $tab := .Data.Tabs}}
<li :class="{'is-active': tab === {{$index}}}" @click="tab = {{$index}}"><a>{{.Title}}</a></li> {{- if .Data.BackendTabs}}
{{end}} <p class="subtitle mt-5">Backend</p>
</ul> <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>
</div> {{template "tabs" .Data.BackendTabs}}
{{range $index, $tab := .Data.Tabs}} <div class="mb-4"></div>
<div x-show="tab == {{$index}}"><p>{{.Body}}</p></div>
{{end}}
</div>
{{end}} {{end}}
{{if .Data.ShowCacheWarning}} {{- if .Data.ShowCacheWarning}}
<article class="message is-warning mt-5"> <article class="message is-warning mt-6">
<div class="message-header"> <div class="message-header">
<p>Warning</p> <p>Warning</p>
</div> </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. 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> </div>
</article> </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}} {{end}}