108 lines
3.2 KiB
Plaintext
108 lines
3.2 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
|
|
// Get all blog entries
|
|
const allPosts = await getCollection('blog');
|
|
|
|
// Sort by publication date
|
|
const sortedPosts = allPosts.sort((a, b) => {
|
|
const dateA = a.data.pubDate ? new Date(a.data.pubDate) : new Date(0);
|
|
const dateB = b.data.pubDate ? new Date(b.data.pubDate) : new Date(0);
|
|
return dateB.getTime() - dateA.getTime();
|
|
});
|
|
---
|
|
|
|
<BaseLayout title="Blog | LaForce IT - Home Lab & DevOps Insights" description="Explore articles about Kubernetes, Infrastructure, DevOps, and Home Lab setups">
|
|
<main class="container">
|
|
<section class="blog-header">
|
|
<h1 class="blog-title">Blog</h1>
|
|
<p class="blog-description">
|
|
Technical insights, infrastructure guides, and DevOps best practices from my home lab to production environments.
|
|
</p>
|
|
</section>
|
|
|
|
<div class="blog-grid">
|
|
{sortedPosts.map((post) => (
|
|
<article class="post-card">
|
|
{post.data.heroImage ? (
|
|
<img
|
|
width={720}
|
|
height={360}
|
|
src={post.data.heroImage}
|
|
alt=""
|
|
class="post-image"
|
|
/>
|
|
) : (
|
|
<img
|
|
width={720}
|
|
height={360}
|
|
src="/blog/images/placeholders/default.jpg"
|
|
alt=""
|
|
class="post-image"
|
|
/>
|
|
)}
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<time datetime={post.data.pubDate ? new Date(post.data.pubDate).toISOString() : ''}>
|
|
{post.data.pubDate ? new Date(post.data.pubDate).toLocaleDateString('en-us', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
}) : 'No date'}
|
|
</time>
|
|
{post.data.category && (
|
|
<span class="post-category">
|
|
{post.data.category}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h3 class="post-title">
|
|
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
|
|
{post.data.draft && <span class="ml-2 px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded">Draft</span>}
|
|
</h3>
|
|
<p class="post-excerpt">{post.data.description}</p>
|
|
<div class="post-footer">
|
|
<span class="post-read-time">{post.data.readTime || '5 min read'}</span>
|
|
<a href={`/blog/${post.slug}/`} class="read-more">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.blog-header {
|
|
margin: 3rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.blog-title {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
.blog-description {
|
|
color: var(--text-secondary);
|
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.blog-grid {
|
|
margin: 2rem 0 4rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.blog-header {
|
|
margin: 2rem 0;
|
|
}
|
|
}
|
|
</style> |