Sebastian Krüger
64a3c1d583
All checks were successful
Deploy Theme / deploy (push) Successful in 1m6s
37 lines
1.4 KiB
Handlebars
37 lines
1.4 KiB
Handlebars
{{!< default}}
|
|
|
|
<header class="container mx-auto px-4 py-8 text-center">
|
|
<h1 class="text-5xl font-bold tracking-tight text-[var(--text-primary)]">{{@site.title}}</h1>
|
|
<p class="mt-2 text-xl text-[var(--text-secondary)]">{{@site.description}}</p>
|
|
</header>
|
|
|
|
<div class="container mx-auto px-4">
|
|
{{#if posts}}
|
|
<div id="posts-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{{#foreach posts}}
|
|
{{> "post-card"}}
|
|
{{/foreach}}
|
|
|
|
{{#if pagination.next}}
|
|
<div id="pagination-trigger"
|
|
hx-get="{{page_url pagination.next}}"
|
|
hx-trigger="revealed"
|
|
hx-select="#posts-container > *"
|
|
hx-target="this"
|
|
hx-swap="outerHTML"
|
|
hx-indicator="#loading-spinner"
|
|
class="col-span-full h-1">
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div id="loading-spinner" class="htmx-indicator text-center py-8">
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
|
|
<p class="text-[var(--text-secondary)] mt-2">Loading more posts...</p>
|
|
</div>
|
|
|
|
{{else}}
|
|
<p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
|
|
{{/if}}
|
|
</div>
|