web/src/pages/blog/[...slug].astro

---
import { getCollection, render } from "astro:content";
import { Image } from "astro:assets";
import ContentLayout from "@/layouts/content.astro";
import { getArticleSchema } from "@/lib/structuredData";
import { blogWebsite } from "@/lib/structuredData";
import { Comments } from "@/components/blog/comments";
import { StreamContent } from "@/components/stream-content";
import { incrementViews, getViews } from "@/lib/views";

// This is a dynamic route in SSR mode
const { slug } = Astro.params;

// Fetch blog posts
const posts = await getCollection("blog");
const post = posts.find(post => post.id === slug);

if (!post || (!import.meta.env.DEV && post.data.isDraft === true)) {
  return new Response(null, {
    status: 404,
    statusText: "Not found"
  });
}

// Track page view and get count
let views = 0;
if (!import.meta.env.DEV) {
  views = await incrementViews(post.id);
} else {
  views = await getViews(post.id);
}

// Dynamically render the content
const { Content } = await render(post);

// Format the date
const formattedDate = new Date(post.data.date).toLocaleDateString("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric"
});

const articleStructuredData = getArticleSchema(post);

const breadcrumbsStructuredData = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "Blog",
      item: `${import.meta.env.SITE}/blog/`,
    },
    {
      "@type": "ListItem",
      position: 2,
      name: post.data.title,
      item: `${import.meta.env.SITE}/blog/${post.id}/`,
    },
  ],
};

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [articleStructuredData, breadcrumbsStructuredData, blogWebsite],
};
---

<ContentLayout
  title={`${post.data.title} | Timothy Pidashev`}
  description={post.data.description}
>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <div class="relative max-w-8xl mx-auto">
    <article class="prose prose-invert prose-lg mx-auto max-w-4xl">
      {post.data.image && (
        <div class="-mx-4 sm:mx-0 mb-4">
          <Image
            src={post.data.image}
            alt={post.data.title}
            class="w-full h-auto rounded-lg object-cover"
            width={1200}
            height={630}
            quality={100}
          />
        </div>
      )}
      <h1 class="text-3xl !mt-2 !mb-2">{post.data.title}</h1>
      <p class="lg:text-2xl sm:text-lg !mt-0 !mb-3">{post.data.description}</p>
      <div class="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
        <span class="text-orange">{post.data.author}</span>
        <span class="text-foreground/50">•</span>
        <time dateTime={post.data.date instanceof Date ? post.data.date.toISOString() : post.data.date} class="text-blue">
          {formattedDate}
        </time>
        {views > 0 && (
          <>
            <span class="text-foreground/50">•</span>
            <span class="text-green">{views.toLocaleString()} view{views !== 1 ? "s" : ""}</span>
          </>
        )}
      </div>
      <div class="flex flex-wrap gap-2 mt-2">
        {post.data.tags.map((tag) => (
          <span
            class="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
            onclick={`window.location.href='/blog/tags/${encodeURIComponent(tag)}'`}
          >
            #{tag}
          </span>
        ))}
      </div>
      <StreamContent client:load>
        <div class="prose prose-invert prose-lg max-w-none">
          <Content />
        </div>
      </StreamContent>
    </article>
    <Comments client:idle />
  </div>
</ContentLayout>