Astro Content Collections Patterns

# Astro Content Collections Patterns for Google Antigravity IDE

Master type-safe content management with Astro's content collections system, leveraging Google Antigravity IDE's Gemini 3 AI for intelligent content organization, schema validation, and static site generation. This comprehensive guide covers everything from basic collection setup to advanced content relationships.

## Configuration Setup

```typescript
// src/content/config.ts
import { defineCollection, z, reference } from "astro:content";

// Blog posts collection with full schema
const blogCollection = defineCollection({
  type: "content",
  schema: ({ image }) => z.object({
    title: z.string().max(100),
    description: z.string().max(200),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    heroImage: image().refine((img) => img.width >= 1080, {
      message: "Cover image must be at least 1080px wide",
    }),
    author: reference("authors"),
    category: reference("categories"),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    featured: z.boolean().default(false),
    readingTime: z.number().optional(),
  }),
});

// Authors collection for relationships
const authorsCollection = defineCollection({
  type: "data",
  schema: ({ image }) => z.object({
    name: z.string(),
    bio: z.string(),
    avatar: image(),
    social: z.object({
      twitter: z.string().url().optional(),
      github: z.string().url().optional(),
      linkedin: z.string().url().optional(),
    }).optional(),
  }),
});

// Categories with nested structure
const categoriesCollection = defineCollection({
  type: "data",
  schema: z.object({
    name: z.string(),
    slug: z.string(),
    description: z.string(),
    color: z.string().regex(/^#[0-9A-Fa-f]{6}$/),
    parent: reference("categories").optional(),
  }),
});

export const collections = {
  blog: blogCollection,
  authors: authorsCollection,
  categories: categoriesCollection,
};
```

## Querying Content Collections

```typescript
// src/pages/blog/[...slug].astro
---
import { getCollection, getEntry } from "astro:content";
import type { CollectionEntry } from "astro:content";
import BlogLayout from "../../layouts/BlogLayout.astro";

export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => {
    return import.meta.env.PROD ? !data.draft : true;
  });

  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;
const { Content, headings, remarkPluginFrontmatter } = await post.render();

// Resolve references
const author = await getEntry(post.data.author);
const category = await getEntry(post.data.category);

// Get related posts
const allPosts = await getCollection("blog");
const relatedPosts = allPosts
  .filter((p) => 
    p.slug !== post.slug && 
    p.data.tags.some((tag) => post.data.tags.includes(tag))
  )
  .slice(0, 3);
---

<BlogLayout
  title={post.data.title}
  description={post.data.description}
  image={post.data.heroImage}
>
  <article>
    <header>
      <h1>{post.data.title}</h1>
      <div class="meta">
        <img src={author.data.avatar.src} alt={author.data.name} />
        <span>{author.data.name}</span>
        <time datetime={post.data.pubDate.toISOString()}>
          {post.data.pubDate.toLocaleDateString()}
        </time>
        <span>{remarkPluginFrontmatter.readingTime} min read</span>
      </div>
    </header>
    <Content />
  </article>
</BlogLayout>
```

## Best Practices for Google Antigravity IDE

When working with Astro content collections in Google Antigravity, let Gemini 3 assist with schema design by describing your content structure. Use strict TypeScript schemas for compile-time validation. Leverage image optimization with the built-in image helper. Create reference relationships between collections for normalized data. Implement draft filtering for production builds. Generate reading time and other computed properties with remark plugins. Use collection queries with filter functions for efficient content retrieval.

Google Antigravity's agent mode excels at generating content schemas based on your existing markdown files and suggesting optimizations for your content architecture.