Astro: Content Collections — фильтр по тегу, сортировка по дате

Получение коллекции контента с фильтрацией по тегам и сортировкой по дате. Используйте для вывода списков постов, фильтрации по категориям.

import { getCollection } from 'astro:content';

// 1. Получить все посты с фильтром по тегу
const postsWithTag = (await getCollection('blog', ({ data }) => {
  return !data.draft && data.tags?.includes('astro');
}))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

// 2. Получить посты по нескольким тегам (AND)
const postsWithMultipleTags = (await getCollection('blog', ({ data }) => {
  return !data.draft 
    && data.tags?.includes('astro')
    && data.tags?.includes('tutorial');
}))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

// 3. Получить посты по любому из тегов (OR)
const targetTags = ['astro', 'react', 'vue'];
const postsWithAnyTag = (await getCollection('blog', ({ data }) => {
  return !data.draft 
    && data.tags?.some(tag => targetTags.includes(tag));
}))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

// 4. Получить последние N постов
const latestPosts = (await getCollection('blog', ({ data }) => !data.draft))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
  .slice(0, 5);

// 5. Получить посты по категории и отсортировать
const categoryPosts = (await getCollection('blog', ({ data }) => {
  return !data.draft && data.category === 'Frontend';
}))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

// 6. Получить уникальные теги из всех постов
const allPosts = await getCollection('blog', ({ data }) => !data.draft);
const allTags = Array.from(
  new Set(allPosts.flatMap(post => post.data.tags || []))
).sort();

Использование в компоненте:

---
// src/components/PostList.astro
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog', ({ data }) => 
  !data.draft && data.tags?.includes('tutorial')
))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
      <time>{post.data.pubDate.toLocaleDateString('ru')}</time>
    </li>
  ))}
</ul>

Usage:

Используйте getCollection() в компонентах или страницах Astro. Фильтр применяется на этапе получения коллекции, что эффективнее чем фильтрация после.

Notes:

⚠️ getCollection() возвращает промис, не забывайте await. Сортировка по pubDate.valueOf() работает корректно только если pubDate — объект Date (проверьте схему в config.ts).