atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.0.0
Some checks failed
Docker Deploy / build-and-push (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2026-01-24 17:24:00 -07:00
parent 210edc771c
commit a26c990a21
27 changed files with 2142 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/pages/posts.astro
View File

@@ -30,92 +30,122 @@ function formatDate(date: Date): string {
</h1>
{/* Mobile: One-sided compact timeline */}
<ul class="timeline timeline-vertical timeline-compact timeline-snap-icon max-w-3xl mx-auto px-4 md:hidden">
<ul
class="timeline timeline-vertical timeline-compact timeline-snap-icon max-w-3xl mx-auto px-4 md:hidden"
>
{
sortedPosts.map((post, index) => (
<li>
{index > 0 && <hr class="bg-primary" />}
<div class="timeline-middle">
<Icon name="mdi:circle" class="w-4 h-4 text-primary" />
<Icon
name="mdi:circle"
class="w-4 h-4 text-primary"
/>
</div>
<div class="timeline-end mb-8 ml-4">
<div class="border border-base-content/20 rounded-box p-4 bg-base-200 hover:border-primary transition-colors">
<time class="font-mono text-sm opacity-60">
{formatDate(new Date(post.data.pubDate))}
</time>
<a
href={`/post/${post.slug}`}
<a
href={`/post/${post.id}`}
class="block group"
>
<h3 class="text-lg font-bold text-primary group-hover:text-accent transition-colors">
{post.data.title}
</h3>
<p class="text-sm opacity-80 mt-1">
{post.data.description || "No description available."}
{post.data.description ||
"No description available."}
</p>
</a>
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-1 flex-wrap mt-2">
{post.data.tags.slice(0, 3).map((tag: string) => (
<span class="badge badge-sm badge-outline">{tag}</span>
))}
</div>
)}
{post.data.tags &&
post.data.tags.length > 0 && (
<div class="flex gap-1 flex-wrap mt-2">
{post.data.tags
.slice(0, 3)
.map((tag: string) => (
<span class="badge badge-sm badge-outline">
{tag}
</span>
))}
</div>
)}
</div>
</div>
{index < sortedPosts.length - 1 && <hr class="bg-primary" />}
{index < sortedPosts.length - 1 && (
<hr class="bg-primary" />
)}
</li>
))
}
</ul>
{/* Desktop: Dual-sided alternating timeline */}
<ul class="timeline timeline-vertical timeline-snap-icon max-w-3xl mx-auto px-4 hidden md:block">
<ul
class="timeline timeline-vertical timeline-snap-icon max-w-3xl mx-auto px-4 hidden md:block"
>
{
sortedPosts.map((post, index) => (
<li>
{index > 0 && <hr class="bg-primary" />}
<div class="timeline-middle">
<Icon name="mdi:circle" class="w-4 h-4 text-primary" />
<Icon
name="mdi:circle"
class="w-4 h-4 text-primary"
/>
</div>
<div class={`timeline-${index % 2 === 0 ? 'start' : 'end'} text-${index % 2 === 0 ? 'end' : 'start'} mb-8 mx-4`}>
<div
class={`timeline-${index % 2 === 0 ? "start" : "end"} text-${index % 2 === 0 ? "end" : "start"} mb-8 mx-4`}
>
<div class="border border-base-content/20 rounded-box p-4 bg-base-200 hover:border-primary transition-colors">
<time class="font-mono text-sm opacity-60">
{formatDate(new Date(post.data.pubDate))}
</time>
<a
href={`/post/${post.slug}`}
<a
href={`/post/${post.id}`}
class="block group"
>
<h3 class="text-lg font-bold text-primary group-hover:text-accent transition-colors">
{post.data.title}
</h3>
<p class="text-sm opacity-80 mt-1">
{post.data.description || "No description available."}
{post.data.description ||
"No description available."}
</p>
</a>
{post.data.tags && post.data.tags.length > 0 && (
<div class={`flex gap-1 flex-wrap mt-2 ${index % 2 === 0 ? 'justify-end' : 'justify-start'}`}>
{post.data.tags.slice(0, 3).map((tag: string) => (
<span class="badge badge-sm badge-outline">{tag}</span>
))}
</div>
)}
{post.data.tags &&
post.data.tags.length > 0 && (
<div
class={`flex gap-1 flex-wrap mt-2 ${index % 2 === 0 ? "justify-end" : "justify-start"}`}
>
{post.data.tags
.slice(0, 3)
.map((tag: string) => (
<span class="badge badge-sm badge-outline">
{tag}
</span>
))}
</div>
)}
</div>
</div>
{index < sortedPosts.length - 1 && <hr class="bg-primary" />}
{index < sortedPosts.length - 1 && (
<hr class="bg-primary" />
)}
</li>
))
}