---

import type { CollectionEntry } from 'astro:content';
import { getCollection, getEntries, render } from 'astro:content';
import FormattedDate from '@/components/FormattedDate.astro';
import JsonLd from '@/components/JsonLd.astro';
import defaultMarkdownComponents from '@/components/typography/defaultMarkdownComponents';
import { PRODUCTION_URL } from '@/consts';
import Blog from '@/layouts/Blog.astro';
import { createBlogPostingSchema } from '@/utils/jsonLd/schemas';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts
    .filter((post) => !post.data.devOnly || import.meta.env.DEV)
    .map((post) => ({
      params: { slug: post.id },
      props: post,
    }));
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content, remarkPluginFrontmatter } = await render(post);
const authors = await getEntries(post.data.authors);

// Resolve OG image URL for JSON-LD
const ogImageUrl = post.data.ogImage
  ? typeof post.data.ogImage === 'string'
    ? post.data.ogImage
    : new URL(post.data.ogImage.src, Astro.url).toString()
  : undefined;

// Build JSON-LD schema for BlogPosting
const pageUrl = new URL(Astro.url.pathname, PRODUCTION_URL).toString();
const jsonLdSchema = createBlogPostingSchema({
  title: post.data.title,
  description: post.data.description,
  url: pageUrl,
  pubDate: post.data.pubDate,
  updatedDate: post.data.updatedDate,
  readingTime: remarkPluginFrontmatter.readingTimeMinutes,
  authors,
  siteUrl: PRODUCTION_URL.toString(),
  image: ogImageUrl,
});
---

<Blog
  title={[post.data.title, "Blog"]}
  description={post.data.description}
  canonical={post.data.canonical}
  image={post.data.ogImage}
  twitterImage={post.data.twitterImage}
>
  <JsonLd slot="head" schema={jsonLdSchema} />
  <article
    class="@container text-p2 sm:text-p15"
    data-search-content
    data-llms-content
    data-llms-description={post.data.description}
    data-llms-sort={post.data.pubDate.toISOString()}
    data-site="blog"
  >
    <header
      class="relative mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
    >
      <div
        class="mb-3 flex flex-col gap-2 font-display text-h4 font-bold text-orange uppercase sm:flex-row sm:gap-4"
      >
        <FormattedDate date={post.data.pubDate} />
        <span class="hidden sm:inline">&bull;</span>
        <span data-search-ignore data-llms-ignore
          >{remarkPluginFrontmatter.minutesRead}</span
        >
      </div>
      <h1 class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15">
        {post.data.title}
      </h1>
      <div class="">
        By {
          new Intl.ListFormat("en", { style: "long", type: "conjunction" })
            .formatToParts(authors.map((author) => author.data.name))
            .map((part) =>
              part.type === "element" ? (
                // inline-block removes the whitespace that prettier+astro adds around the text
                <a
                  href={`/blog/authors/${authors.find((a) => a.data.name === part.value)?.id}`}
                  class="inline-block intent:underline"
                >
                  {part.value}
                </a>
              ) : (
                <span>{part.value}</span>
              ),
            )
        }
      </div>
    </header>
    <Content components={{ ...defaultMarkdownComponents }} />
  </article>
</Blog>
