feat: add tag template with header and infinite scroll
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
This commit is contained in:
43
tag.hbs
Normal file
43
tag.hbs
Normal file
@@ -0,0 +1,43 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#tag}}
|
||||
<header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
|
||||
<span class="text-xs uppercase tracking-[0.3em] text-[var(--text-tertiary)] mb-4 block">Tag</span>
|
||||
<h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{name}}</h1>
|
||||
{{#if description}}
|
||||
<p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">{{description}}</p>
|
||||
{{else}}
|
||||
<p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
|
||||
{{/if}}
|
||||
</header>
|
||||
{{/tag}}
|
||||
|
||||
<div class="container mx-auto px-4 pb-20">
|
||||
{{#if posts}}
|
||||
<div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
{{#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-12">
|
||||
<div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
|
||||
<p class="text-[var(--text-secondary)] mt-4 font-medium tracking-wide">Loading more posts...</p>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user