Helps you set up and work with Astro's Content Layer API for type-safe content management. Supports local and remote collections with built-in loaders, schema validation, and TypeScript integration.
This skill helps you implement Astro's Content Layer API to manage and query content collections with type-safety, schema validation, and automatic TypeScript support.
Guides you through setting up content collections in Astro projects using the Content Layer API (v5.0+). Works with local files (Markdown, MDX, JSON, YAML) and remote data sources through loaders. Provides type-safe content querying with Zod schema validation.
When a user asks to work with Astro content collections, follow these steps:
Check `tsconfig.json` includes required settings:
Create `src/content.config.ts` with this structure:
```typescript
// 1. Import utilities
import { defineCollection } from 'astro:content';
// 2. Import loaders
import { glob, file } from 'astro/loaders';
// 3. Import Zod for schema validation
import { z } from 'astro/zod';
// 4. Define collections
const collectionName = defineCollection({
loader: /* choose appropriate loader */,
schema: /* define schema */
});
// 5. Export collections object
export const collections = { collectionName };
```
**For local directory of files (one file per entry):**
```typescript
loader: glob({
pattern: "**/*.md",
base: "./src/data/blog"
})
```
**For single file with multiple entries:**
```typescript
loader: file("src/data/items.json")
```
**For CSV or custom formats:**
```typescript
import { parse } from 'csv-parse/sync';
loader: file("data.csv", {
parser: (text) => parse(text, { columns: true })
})
```
Create type-safe schema for validation:
```typescript
schema: z.object({
title: z.string(),
pubDate: z.date(),
author: z.string(),
tags: z.array(z.string()).optional(),
draft: z.boolean().default(false)
})
```
**For references between collections:**
```typescript
schema: z.object({
title: z.string(),
author: z.reference('authors')
})
```
**Get all entries:**
```typescript
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
```
**Filter entries:**
```typescript
const published = await getCollection('blog', ({ data }) => {
return data.draft !== true;
});
```
**Access referenced data:**
```typescript
const post = await getEntry('blog', 'post-1');
const author = await post.data.author.load();
```
**For static sites:**
```typescript
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(entry => ({
params: { slug: entry.id },
props: { entry }
}));
}
```
**For SSR:**
```typescript
const { slug } = Astro.params;
const entry = await getEntry('blog', slug);
```
```typescript
const { Content } = await entry.render();
<Content />
```
1. **TypeScript errors**: Verify `strictNullChecks` and `allowJs` in tsconfig
2. **Collection not found**: Ensure collection is exported from `src/content.config.ts`
3. **Schema validation fails**: Check frontmatter matches schema exactly
4. **Missing types**: Run `astro sync` to regenerate types after config changes
**Blog collection:**
```typescript
const blog = defineCollection({
loader: glob({ pattern: '*.md', base: './src/content/blog' }),
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(),
tags: z.array(z.string())
})
});
```
**Product catalog from JSON:**
```typescript
const products = defineCollection({
loader: file('src/data/products.json'),
schema: z.object({
name: z.string(),
price: z.number(),
inStock: z.boolean()
})
});
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/astro-content-collections-helper/raw