---
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,
  getArticles,
  tagSlug,
  visibleBreadcrumbs,
} from '../../lib/site';

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

const { tag } = Astro.props;
const posts = await getArticles();
const allTags = getAllTags(posts);
const filteredPosts = posts.filter((post) =>
  (post.data.article?.tags ?? []).some((t) => t === tag)
);
const title = `Articles tagged "${tag}"`;
const trail = buildBreadcrumbTrail({ tag });
const visibleTrail = visibleBreadcrumbs(trail);
const breadcrumbJsonLd = buildBreadcrumbJsonLd(trail);
---

<Page
  title={title}
  description={`Project articles and technical notes filed under #${tag}.`}
  jsonLd={breadcrumbJsonLd}
  noindex
>
  <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} eagerThumbnailCount={3} />
</Page>
