saasitone/templ/pages/home.templ

package pages

import (
	"strconv"

	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
	"git.grosinger.net/tgrosinger/saasitone/pkg/models"
	"git.grosinger.net/tgrosinger/saasitone/pkg/funcmap"
)

templ Home(p page.Page, posts []models.Post) {
	if (p.HTMX.Request.Target != "posts") {
		@topContent(p)
	}
	<div id="posts">
		for _, post := range posts {
			<article class="media">
				<figure class="media-left">
					<p class="image is-64x64">
						<img src={ funcmap.File("gopher.png") } alt="Gopher"/>
					</p>
				</figure>
				<div class="media-content">
					<div class="content">
						<p>
							<strong>{ post.Title }</strong>
							<br/>
							{ post.Body }
						</p>
					</div>
				</div>
			</article>
		}
		<div class="field is-grouped is-grouped-centered">
			if !p.Pager.IsBeginning() {
				<p class="control">
					<button class="button is-primary" hx-swap="outerHTML" hx-get={ "/?page=" + strconv.Itoa(p.Pager.Page-1) } hx-target="#posts">Previous page</button>
				</p>
			}
			if !p.Pager.IsEnd() {
				<p class="control">
					<button class="button is-primary" hx-swap="outerHTML" hx-get={ "/?page=" + strconv.Itoa(p.Pager.Page+1) } hx-target="#posts">Next page</button>
				</p>
			}
		</div>
	</div>
	if (p.HTMX.Request.Target != "posts") {
		@fileMsg()
	}
}

templ topContent(p page.Page) {
	<section class="hero is-info welcome is-small">
		<div class="hero-body">
			<div class="container">
				<h1 class="title">
					if p.IsAuth {
						Hello, { p.AuthUser.Name }
					} else {
						Hello
					}
				</h1>
				<h2 class="subtitle">
					if p.IsAuth {
						Welcome back!
					} else {
						Please login in to your account.
					}
				</h2>
			</div>
		</div>
	</section>
	<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>
}

templ fileMsg() {
	<div class="block"></div>
	<article class="message is-small is-warning" x-data="{show: true}" x-show="show">
		<div class="message-header">
			<p>Serving files</p>
			<button class="delete is-small" aria-label="delete" @click="show = false"></button>
		</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>
}