Content Collections

Every theme leverages Astro Content Collections for content-focused pages:

Blog posts and articles
Changelog entries
Team members and authors
Customer testimonials
Help center documentation
Product showcases

Content collections provide type safety, automatic routing, and seamless content management.

How Content Collections Work

Content collections are defined in your src/content/config.ts file and stored in folders within the src/content/ directory. Each collection can have its own schema for type safety and validation.

Basic Collection Structure

src/content/
├── config.ts # Collection definitions
├── blog/ # Blog posts
│ ├── post-1.md
│ ├── post-2.mdx
│ └── ...
├── authors/ # Author profiles
│ ├── john-doe.md
│ └── jane-smith.md
└── testimonials/ # Customer testimonials
├── customer-1.md
└── customer-2.md

Example Content File

---
title: "Getting Started with Astro"
description: "Learn how to build fast websites with Astro"
publishDate: 2024-01-15
author: "john-doe"
tags: ["astro", "web-development", "tutorial"]
featured: true
---

# Getting Started with Astro

Your content goes here...

Content Best Practices

Frontmatter Structure

Keep your frontmatter consistent across content types:

---
title: "Post Title" # Required
description: "Brief description" # Required for SEO
publishDate: 2024-01-15 # Date format: YYYY-MM-DD
author: "author-slug" # Reference to author collection
tags: ["tag1", "tag2"] # Array of tags
featured: false # Boolean for featured content
draft: false # Boolean to hide from production
coverImage: "/images/post-cover.jpg" # Optional cover image
---

Content Organization

Use descriptive filenames that match your URL structure
Keep related content in appropriate collections
Use consistent naming conventions across files
Include all required frontmatter fields for proper functionality

SEO Optimization

Write compelling titles (50-60 characters)
Create descriptive meta descriptions (150-160 characters)
Use proper heading hierarchy (H1, H2, H3, etc.)
Include relevant keywords naturally
Add alt text to all images
Use semantic HTML structure

Working with Collections in Pages

Fetching Collection Data

---
import { getCollection } from 'astro:content';

// Get all blog posts
const posts = await getCollection('blog');

// Get published posts only
const publishedPosts = await getCollection('blog', ({ data }) => {
  return !data.draft;
});

// Get featured posts
const featuredPosts = await getCollection('blog', ({ data }) => {
  return data.featured === true;
});
---

Rendering Collection Items

---
const posts = await getCollection('blog');
---

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {posts.map((post) => (
    <article class="border rounded-lg p-6">
      <h2 class="text-xl font-bold mb-2">
        <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
      </h2>
      <p class="text-gray-600 mb-4">{post.data.description}</p>
      <time class="text-sm text-gray-500">
        {post.data.publishDate.toDateString()}
      </time>
    </article>
  ))}
</div>

Advanced Content Features

Content Relationships

Link content items together using references:

---
title: "Advanced Astro Techniques"
author: "john-doe" # References authors collection
relatedPosts:
  - "astro-basics" # References other blog posts
  - "astro-components"
category: "tutorials" # References categories collection
---

Content Filtering and Sorting

---
import { getCollection } from 'astro:content';

const allPosts = await getCollection('blog');

// Sort by publish date (newest first)
const sortedPosts = allPosts.sort((a, b) =>
  new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
);

// Filter by tag
const tutorialPosts = allPosts.filter(post =>
  post.data.tags?.includes('tutorial')
);

// Get posts by author
const authorPosts = allPosts.filter(post =>
  post.data.author === 'john-doe'
);
---

Documentation