claudetools/projects/radio-show/website/src/pages/blog/[...slug].astro

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

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<BaseLayout title={post.data.title} description={post.data.description}>
  <article class="article section">
    <div class="container--narrow">
      <!-- Back Link -->
      <a href="/blog" class="back-link fade-in">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Back to Blog
      </a>

      <!-- Article Header -->
      <header class="article__header fade-in">
        <div class="article__meta">
          <time datetime={post.data.pubDate.toISOString()}>
            {post.data.pubDate.toLocaleDateString('en-US', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            })}
          </time>
          <span class="article__author">by {post.data.author}</span>
        </div>
        <h1 class="article__title">{post.data.title}</h1>
        {post.data.tags.length > 0 && (
          <div class="article__tags">
            {post.data.tags.map((tag: string) => (
              <span class="badge">{tag}</span>
            ))}
          </div>
        )}
      </header>

      <!-- Article Content -->
      <div class="article__content prose fade-in">
        <Content />
      </div>

      <!-- Back Link Bottom -->
      <div class="article__footer fade-in">
        <a href="/blog" class="btn btn--ghost">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
          Back to Blog
        </a>
      </div>
    </div>
  </article>
</BaseLayout>

<style>
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
  }
  .back-link:hover {
    color: var(--color-accent);
  }

  .article__header {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }
  .article__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .article__meta time {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .article__author {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .article__title {
    font-size: var(--text-4xl);
    line-height: 1.15;
    margin-bottom: var(--space-4);
  }
  .article__tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  /* Prose styles for rendered markdown */
  .prose {
    line-height: 1.8;
    color: var(--color-text-secondary);
  }
  .prose :global(h2) {
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
  }
  .prose :global(h3) {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
  }
  .prose :global(p) {
    margin-bottom: var(--space-6);
  }
  .prose :global(ul),
  .prose :global(ol) {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
  }
  .prose :global(li) {
    margin-bottom: var(--space-2);
  }
  .prose :global(strong) {
    color: var(--color-text-primary);
    font-weight: 600;
  }
  .prose :global(a) {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .prose :global(blockquote) {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-6);
    margin-block: var(--space-6);
    color: var(--color-text-muted);
    font-style: italic;
  }
  .prose :global(code) {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }
  .prose :global(pre) {
    background: var(--color-bg-tertiary);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-6);
  }
  .prose :global(pre code) {
    background: none;
    padding: 0;
  }
  .prose :global(hr) {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
  }

  .article__footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
  }

  @media (max-width: 768px) {
    .article__title {
      font-size: var(--text-3xl);
    }
  }
</style>