saasitone/templates/pages/about.gohtml

{{define "content"}}
    {{- 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>
        {{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-6">
            <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.
            </div>
        </article>
    {{- 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}}