---
import ArticleList from '../../components/ArticleList.astro';
import Breadcrumbs from '../../components/Breadcrumbs.astro';
import TagList from '../../components/TagList.astro';
import Page from '../../layouts/Page.astro';
import {
  buildBreadcrumbJsonLd,
  buildBreadcrumbTrail,
  getAllTags,
  getPublishedPosts,
  tagSlug,
} from '../../lib/site';

export async function getStaticPaths() {
  const posts = await getPublishedPosts();
  return getAllTags(posts).map((tag) => ({
    params: { tag: tagSlug(tag) },
    props: { tag },
  }));
}

const { tag } = Astro.props;
const posts = await getPublishedPosts();
const allTags = getAllTags(posts);
const filteredPosts = posts.filter((post) => post.data.tags.some((t) => t === tag));
const title = `Articles tagged "${tag}"`;
const trail = buildBreadcrumbTrail({ tag });
const visibleTrail = trail.map((c, i) => ({
  label: c.name,
  href: i === trail.length - 1 ? undefined : c.href,
}));
const breadcrumbJsonLd = buildBreadcrumbJsonLd(trail);
---

<Page
  title={title}
  description={`Project articles and technical notes filed under #${tag}.`}
  jsonLd={breadcrumbJsonLd}
>
  <Breadcrumbs slot="breadcrumbs" items={visibleTrail} />
  <nav class="tag-filter" aria-label="Browse other tags">
    <span>Browse other tags</span>
    <TagList tags={allTags} currentTag={tag} />
  </nav>

  <h2 class="sr-only">Articles</h2>
  <ArticleList posts={filteredPosts} currentTag={tag} />
</Page>
