saasitone/templates/pages/about.gohtml

{{define "content"}}
    {{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>
    {{end}}

    {{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}}