2021-12-03 03:11:01 -08:00
|
|
|
{{define "content"}}
|
2021-12-24 14:58:53 -08:00
|
|
|
{{- if not (eq .HTMX.Request.Target "posts")}}
|
2021-12-24 15:54:25 -08:00
|
|
|
{{template "top-content" .}}
|
2021-12-24 14:58:53 -08:00
|
|
|
{{- end}}
|
|
|
|
|
|
|
|
{{template "posts" .}}
|
2021-12-24 15:54:25 -08:00
|
|
|
|
|
|
|
{{- if not (eq .HTMX.Request.Target "posts")}}
|
|
|
|
{{template "file-msg" .}}
|
|
|
|
{{- end}}
|
|
|
|
{{end}}
|
|
|
|
|
|
|
|
{{define "top-content"}}
|
2021-12-27 07:09:46 -08:00
|
|
|
<section class="hero is-info welcome is-small">
|
|
|
|
<div class="hero-body">
|
|
|
|
<div class="container">
|
|
|
|
<h1 class="title">
|
|
|
|
Hello{{if .IsAuth}}, {{.AuthUser.Name}}{{end}}
|
|
|
|
</h1>
|
2021-12-27 09:54:27 -08:00
|
|
|
<h2 class="subtitle">{{if .IsAuth}}Welcome back!{{else}}Please login in to your account.{{end}}</h2>
|
2021-12-27 07:09:46 -08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
2021-12-24 15:54:25 -08:00
|
|
|
<section class="section">
|
|
|
|
<h1 class="title">Recent posts</h1>
|
|
|
|
<h2 class="subtitle">
|
|
|
|
Below is an example of both paging and AJAX fetching using HTMX
|
|
|
|
</h2>
|
|
|
|
</section>
|
2021-12-24 14:58:53 -08:00
|
|
|
{{end}}
|
|
|
|
|
|
|
|
{{define "posts"}}
|
|
|
|
<div id="posts">
|
|
|
|
{{- range .Data}}
|
|
|
|
<article class="media">
|
|
|
|
<figure class="media-left">
|
|
|
|
<p class="image is-64x64">
|
|
|
|
<img src="{{file "gopher.png"}}" alt="Gopher"/>
|
|
|
|
</p>
|
|
|
|
</figure>
|
|
|
|
<div class="media-content">
|
|
|
|
<div class="content">
|
|
|
|
<p>
|
|
|
|
<strong>{{.Title}}</strong>
|
|
|
|
<br>
|
|
|
|
{{.Body}}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
{{- end}}
|
|
|
|
|
|
|
|
<div class="field is-grouped is-grouped-centered">
|
|
|
|
{{- if not $.Pager.IsBeginning}}
|
|
|
|
<p class="control">
|
|
|
|
<button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{sub $.Pager.Page 1}}" hx-target="#posts">Previous page</button>
|
|
|
|
</p>
|
|
|
|
{{- end}}
|
|
|
|
{{- if not $.Pager.IsEnd}}
|
|
|
|
<p class="control">
|
|
|
|
<button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{add $.Pager.Page 1}}" hx-target="#posts">Next page</button>
|
|
|
|
</p>
|
|
|
|
{{- end}}
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-12-24 15:54:25 -08:00
|
|
|
{{end}}
|
|
|
|
|
|
|
|
{{define "file-msg"}}
|
2021-12-27 07:09:46 -08:00
|
|
|
<div class="block"></div>
|
|
|
|
<article class="message is-small is-warning" x-data="{show: true}" x-show="show">
|
2021-12-24 15:54:25 -08:00
|
|
|
<div class="message-header">
|
|
|
|
<p>Serving files</p>
|
2021-12-24 20:31:43 -08:00
|
|
|
<button class="delete is-small" aria-label="delete" @click="show = false"></button>
|
2021-12-24 15:54:25 -08:00
|
|
|
</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.
|
|
|
|
Static files also contain cache-control headers which are configured via middleware.
|
|
|
|
You can also use AlpineJS to dismiss this message.
|
|
|
|
</div>
|
|
|
|
</article>
|
2021-12-03 03:11:01 -08:00
|
|
|
{{end}}
|