PostLayout.astro

---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import BaseLayout from './BaseLayout.astro';
import CategoryBadges from '../components/CategoryBadges.astro';
import YouTubeEmbed from '../components/YouTubeEmbed.astro';
import BlueskyEngagement from '../components/BlueskyEngagement.astro';

interface Props {
  title: string;
  subtitle?: string;
  slug: string;
  date: Date;
  categories: string[];
  description?: string;
  image?: ImageMetadata;
  youtube?: string;
  blueskyPostId?: string;
}

const { title, subtitle, slug, date, categories, description, image, youtube, blueskyPostId } = Astro.props;

const formattedDate = date.toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZone: 'America/New_York'
});

const postUrl = `https://www.codingwithcalvin.net/${slug}/`;

// Get the image URL for OG tags - use the src property from ImageMetadata
const ogImageUrl = image?.src;

// Extract year for lightbox original image paths
const year = date.getFullYear();
---

<BaseLayout title={title} description={description} image={ogImageUrl} type="article">
  <article class="py-12" data-year={year} data-slug={slug}>
    <div class="container mx-auto px-4 max-w-3xl relative md:pl-8">
      <div class="absolute left-0 top-0 bottom-0 w-3 bg-gradient-to-b from-primary via-primary/50 to-transparent hidden md:block"></div>
      <div class="absolute left-3 top-0 bottom-0 w-1 bg-gradient-to-b from-[#FFB833] via-[#FFB833]/50 to-transparent hidden md:block"></div>
      <header class="mb-8">
        <time class="text-text-muted text-sm">{formattedDate}</time>
        <h1 class="text-4xl font-heading mt-2 mb-2">{title}</h1>
        {subtitle && (
          <p class="text-[#FFB833] text-xl mb-4">{subtitle}</p>
        )}
        <CategoryBadges categories={categories} />
      </header>

      {youtube && (
        <div class="mb-8">
          <YouTubeEmbed url={youtube} title={title} />
        </div>
      )}

      {!youtube && image && (
        <div class="mb-8 rounded-lg overflow-hidden">
          <Image
            src={image}
            alt={title}
            quality={80}
            format="webp"
            class="w-full"
          />
        </div>
      )}

      <div class="prose prose-lg max-w-none">
        <slot />
      </div>

      <script>
        import mermaid from 'mermaid';

        mermaid.initialize({
          startOnLoad: false,
          theme: 'dark'
        });

        // Find all mermaid code blocks (Shiki uses data-language attribute)
        document.querySelectorAll('pre[data-language="mermaid"]').forEach(async (pre) => {
          const code = pre.textContent || '';
          const div = document.createElement('div');
          div.className = 'mermaid';

          const { svg } = await mermaid.render('mermaid-' + Math.random().toString(36).substr(2, 9), code);
          div.innerHTML = svg;

          pre.replaceWith(div);
        });

        // Create lightbox overlay
        const lightbox = document.createElement('div');
        lightbox.className = 'lightbox-overlay';
        lightbox.innerHTML = `
          <div class="lightbox-header">
            <span class="lightbox-title">Full-size image</span>
            <span class="lightbox-hint">Click outside or press Esc to close</span>
          </div>
          <button class="lightbox-nav lightbox-prev" aria-label="Previous image"></button>
          <div class="lightbox-container">
            <img src="" alt="" />
          </div>
          <button class="lightbox-nav lightbox-next" aria-label="Next image"></button>
          <button class="lightbox-close" aria-label="Close"></button>
          <div class="lightbox-footer">
            <span class="lightbox-counter"></span>
          </div>
        `;
        document.body.appendChild(lightbox);

        const lightboxImg = lightbox.querySelector('.lightbox-container img');
        const closeBtn = lightbox.querySelector('.lightbox-close');
        const container = lightbox.querySelector('.lightbox-container');
        const prevBtn = lightbox.querySelector('.lightbox-prev');
        const nextBtn = lightbox.querySelector('.lightbox-next');
        const counter = lightbox.querySelector('.lightbox-counter');

        // Get year and slug from data attributes
        const article = document.querySelector('article[data-year][data-slug]');
        const year = article?.dataset.year;
        const slug = article?.dataset.slug;

        // Collect all prose images (excluding those wrapped in links)
        const proseImages = Array.from(document.querySelectorAll('.prose img')).filter(
          (img) => img.parentElement?.tagName !== 'A'
        );
        let currentIndex = 0;

        // Function to get original image path
        function getOriginalPath(src, baseName) {
          if (year && slug && baseName) {
            return `/originals/${year}/${slug}/${baseName}.png`;
          }
          return src;
        }

        // Function to load image with fallbacks
        function loadImage(src, alt, baseName) {
          lightboxImg.src = getOriginalPath(src, baseName);
          lightboxImg.alt = alt;

          if (baseName && year && slug) {
            lightboxImg.onerror = () => {
              lightboxImg.src = `/originals/${year}/${slug}/${baseName}.jpg`;
              lightboxImg.onerror = () => {
                lightboxImg.src = src;
              };
            };
          }
        }

        // Function to update navigation state
        function updateNavigation() {
          prevBtn.classList.toggle('disabled', currentIndex === 0);
          nextBtn.classList.toggle('disabled', currentIndex === proseImages.length - 1);
          counter.textContent = `${currentIndex + 1} / ${proseImages.length}`;
        }

        // Function to show image at index
        function showImage(index) {
          if (index < 0 || index >= proseImages.length) return;
          currentIndex = index;
          const img = proseImages[index];
          const src = img.getAttribute('src') || '';
          const alt = img.getAttribute('alt') || '';
          const match = src.match(/\/_astro\/([^.]+)\./);
          const baseName = match ? match[1] : null;
          loadImage(src, alt, baseName);
          updateNavigation();
        }

        // Navigation handlers
        prevBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          if (currentIndex > 0) showImage(currentIndex - 1);
        });

        nextBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          if (currentIndex < proseImages.length - 1) showImage(currentIndex + 1);
        });

        // Close lightbox on overlay click (but not container), close button, or Escape key
        lightbox.addEventListener('click', (e) => {
          if (e.target === lightbox || e.target === closeBtn || e.target.closest('.lightbox-header') || e.target.closest('.lightbox-footer')) {
            lightbox.classList.remove('active');
          }
        });
        // Prevent closing when clicking the container
        container.addEventListener('click', (e) => e.stopPropagation());

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
          if (!lightbox.classList.contains('active')) return;
          if (e.key === 'Escape') lightbox.classList.remove('active');
          if (e.key === 'ArrowLeft' && currentIndex > 0) showImage(currentIndex - 1);
          if (e.key === 'ArrowRight' && currentIndex < proseImages.length - 1) showImage(currentIndex + 1);
        });

        // Make prose images clickable to open lightbox with original
        proseImages.forEach((img, index) => {
          img.addEventListener('click', () => {
            currentIndex = index;
            const src = img.getAttribute('src') || '';
            const alt = img.getAttribute('alt') || '';
            const match = src.match(/\/_astro\/([^.]+)\./);
            const baseName = match ? match[1] : null;
            loadImage(src, alt, baseName);
            updateNavigation();
            lightbox.classList.add('active');
          });
        });
      </script>

      <blockquote class="mt-12 border-l-4 border-primary bg-background-2 rounded-r-lg p-6 text-center">
        <p class="text-text-muted italic">
          This post, "{title}", first appeared on<br />
          <a href={postUrl} class="text-primary hover:underline">{postUrl}</a>
        </p>
      </blockquote>

      <hr class="mt-12 border-t border-[#FFB833]/30" />

      {blueskyPostId && (
        <>
          <BlueskyEngagement postId={blueskyPostId} />
          <hr class="mt-12 border-t border-[#FFB833]/30" />
        </>
      )}

      <section class="mt-8">
        <script
          src="https://giscus.app/client.js"
          data-repo="CodingWithCalvin/codingwithcalvin.net"
          data-repo-id="R_kgDOIdGZXw"
          data-category="Blog Post Comments"
          data-category-id="DIC_kwDOIdGZX84C0RR6"
          data-mapping="og:title"
          data-strict="1"
          data-reactions-enabled="0"
          data-emit-metadata="0"
          data-input-position="top"
          data-theme="dark"
          data-lang="en"
          data-loading="lazy"
          crossorigin="anonymous"
          async
        ></script>
      </section>
    </div>
  </article>
</BaseLayout>