valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance site with HTMX for AJAX navigation and Alpine.js for reactivity
All checks were successful
Deploy Theme / deploy (push) Successful in 1m6s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 18:07:46 +01:00
parent 3129f982df
commit 64a3c1d583
7 changed files with 117 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.hbs
View File

@@ -9,32 +9,23 @@
{{#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}}
<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
<a href="{{url}}" class="block">
{{#if feature_image}}
<img
class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
src="{{img_url feature_image size="m"}}"
srcset="{{img_url feature_image size="s"}} 400w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
alt="{{title}}"
loading="lazy"
>
{{else}}
<div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
{{/if}}
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<h2 class="text-[var(--text-primary)] text-xl font-semibold leading-tight">{{title}}</h2>
</div>
</a>
</article>
{{> "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="text-center py-8 hidden">
<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>