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

refactor: extract post feed logic into reusable partial
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-22 08:13:20 +01:00
parent 021a3ea2a2
commit 0b42a7f0da
4 changed files with 29 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
author.hbs
View File

@@ -61,26 +61,9 @@
{{/author}} {{/author}}
<div class="container mx-auto px-4 pb-20"> <div class="container mx-auto px-4 pb-20">
<div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> {{#if posts}}
{{#foreach posts}} {{> "post-feed"}}
{{> "post-card"}} {{else}}
{{/foreach}} <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
{{#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}} {{/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>
</div> </div>

24
index.hbs
View File

@@ -7,29 +7,7 @@
<div class="container mx-auto px-4 pb-20"> <div class="container mx-auto px-4 pb-20">
{{#if posts}} {{#if posts}}
<div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> {{> "post-feed"}}
{{#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}} {{else}}
<p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p> <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
{{/if}} {{/if}}

22
partials/post-feed.hbs Normal file
View File

@@ -0,0 +1,22 @@
<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>

24
tag.hbs
View File

@@ -18,29 +18,7 @@
<div class="container mx-auto px-4 pb-20"> <div class="container mx-auto px-4 pb-20">
{{#if posts}} {{#if posts}}
<div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> {{> "post-feed"}}
{{#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}} {{else}}
<p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p> <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
{{/if}} {{/if}}