zblade.dev/src/pages/blog.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? data.draft !== true : true;
})).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<BaseLayout title="Blog - Zaguán Blade" description="Latest news, tutorials, and insights from Zaguán Blade.">
  <main>
    <!-- Hero Section -->
    <section class="blog-hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-label">// BLOG</div>
          <h1 class="hero-title">
            <span class="title-line-1">BLOG</span>
            <span class="title-accent">LATEST_NEWS_</span>
          </h1>
          <p class="hero-description">
            News, tutorials, and insights about AI-powered development with Zaguán Blade.
          </p>
        </div>
      </div>
    </section>

    <!-- Blog Posts -->
    <section class="blog-section">
      <div class="container">
        <div class="posts-grid">
          {posts.map((post) => (
            <a href={`/blog/${post.slug}`} class="post-card">
              {post.data.heroImage && (
                <div class="post-image">
                  <img src={post.data.heroImage} alt="" />
                </div>
              )}
              <div class="post-content">
                <div class="post-meta">
                  <time datetime={post.data.pubDate.toISOString()}>
                    {post.data.pubDate.toLocaleDateString('en-US', {
                      year: 'numeric',
                      month: 'short',
                      day: 'numeric',
                    })}
                  </time>
                </div>
                <h2 class="post-title">{post.data.title}</h2>
                <p class="post-excerpt">{post.data.description}</p>
                {post.data.tags.length > 0 && (
                  <div class="post-tags">
                    {post.data.tags.slice(0, 3).map((tag) => (
                      <span class="tag">#{tag}</span>
                    ))}
                  </div>
                )}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  </main>
</BaseLayout>

<style>
  /* Hero */
  .blog-hero {
    min-height: 35vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--space-2xl) + 60px);
    padding-bottom: var(--space-lg);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
    border-bottom: 1px solid var(--color-border);
  }
  
  .blog-hero .hero-content {
    max-width: 800px;
  }
  
  .hero-label {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
  }
  
  .hero-title {
    margin-bottom: var(--space-md);
  }
  
  .title-line-1 {
    display: block;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }
  
  .title-accent {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-mono);
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
  }
  
  .hero-description {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 600px;
  }
  
  /* Blog Section */
  .blog-section {
    padding: var(--space-xl) 0;
  }
  
  /* Posts Grid */
  .posts-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  /* Post Card */
  .post-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
  }
  
  .post-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
  }
  
  .post-image {
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  
  .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .post-card:hover .post-image img {
    transform: scale(1.05);
  }
  
  .post-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .post-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
  }
  
  .post-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
  }
  
  .post-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-md);
    flex: 1;
  }
  
  .post-tags {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }
  
  .tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    background: var(--color-bg-elevated);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .blog-hero {
      min-height: auto;
      padding-top: calc(var(--space-2xl) + 60px);
    }
    
    .posts-grid {
      grid-template-columns: 1fr;
    }
  }
</style>