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;
---

<BaseLayout title={title} description={description} image={ogImageUrl} type="article">
  <article class="py-12">
    <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>
          <div class="lightbox-container">
            <img src="" alt="" />
          </div>
          <button class="lightbox-close" aria-label="Close">&times;</button>
          <div class="lightbox-footer">
            <span>Click anywhere outside the image to close</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');

        // 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());
        document.addEventListener('keydown', (e) => {
          if (e.key === 'Escape') lightbox.classList.remove('active');
        });

        // Get the current post slug from the URL
        const pathParts = window.location.pathname.split('/').filter(Boolean);
        const slug = pathParts[pathParts.length - 1] || pathParts[pathParts.length - 2];

        // Make prose images clickable to open lightbox with original
        document.querySelectorAll('.prose img').forEach((img) => {
          // Skip if already wrapped in a link
          if (img.parentElement?.tagName === 'A') return;

          img.addEventListener('click', () => {
            // Extract the filename from the optimized src
            const src = img.getAttribute('src') || '';
            const alt = img.getAttribute('alt') || '';

            // Try to find the original image
            // The optimized path is like /_astro/filename.hash.webp
            // We need to map it back to /originals/YEAR/SLUG/filename.png
            const match = src.match(/\/_astro\/([^.]+)\./);
            if (match) {
              const baseName = match[1];
              // Try common extensions
              const year = window.location.pathname.match(/\/(\d{4})\//)?.[1];
              if (year && slug) {
                // Try to load the original
                const originalPath = `/originals/${year}/${slug}/${baseName}.png`;
                lightboxImg.src = originalPath;
                lightboxImg.alt = alt;
                lightbox.classList.add('active');

                // Fallback to optimized if original fails
                lightboxImg.onerror = () => {
                  // Try jpg
                  lightboxImg.src = `/originals/${year}/${slug}/${baseName}.jpg`;
                  lightboxImg.onerror = () => {
                    // Fall back to optimized version
                    lightboxImg.src = src;
                  };
                };
              }
            } else {
              // Use the src as-is if we can't parse it
              lightboxImg.src = src;
              lightboxImg.alt = alt;
              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>