Astro Content Site Patterns

# Astro Content Site Patterns for Google Antigravity

Astro delivers high-performance static sites with partial hydration. This guide covers patterns optimized for Google Antigravity IDE and Gemini 3.

## Blog Post Page

```astro
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Comments from '../../components/Comments';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

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

<BaseLayout title={post.data.title}>
  <article class="max-w-4xl mx-auto px-4 py-8">
    <header class="mb-8">
      <h1 class="text-4xl font-bold mb-4">{post.data.title}</h1>
      <time datetime={post.data.publishedAt.toISOString()}>
        {post.data.publishedAt.toLocaleDateString()}
      </time>
    </header>
    <div class="prose prose-lg max-w-none">
      <Content />
    </div>
    <Comments client:visible postId={post.slug} />
  </article>
</BaseLayout>
```

## Content Collection Schema

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

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string().max(100),
    excerpt: z.string().max(200),
    publishedAt: z.date(),
    author: z.object({ name: z.string(), avatar: z.string().url() }),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog: blogCollection };
```

## Island Architecture

```astro
---
// src/components/SearchDialog.astro
---

<div id="search-trigger" class="cursor-pointer">
  <button class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg">
    <span class="text-gray-500">Search...</span>
    <kbd class="ml-auto px-2 py-0.5 bg-gray-200 rounded text-xs">⌘K</kbd>
  </button>
</div>

<div id="search-dialog"></div>

<script>
  const trigger = document.getElementById('search-trigger');
  let SearchModal: any = null;

  async function openSearch() {
    if (!SearchModal) {
      const module = await import('./SearchModal');
      SearchModal = module.default;
    }
    // Render modal...
  }

  trigger?.addEventListener('click', openSearch);
  document.addEventListener('keydown', (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      openSearch();
    }
  });
</script>
```

## API Endpoint

```typescript
// src/pages/api/newsletter.ts
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const { email } = await request.json();

  if (!email?.includes('@')) {
    return new Response(JSON.stringify({ error: 'Invalid email' }), { status: 400 });
  }

  try {
    await subscribeToNewsletter(email);
    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch {
    return new Response(JSON.stringify({ error: 'Failed' }), { status: 500 });
  }
};
```

## Best Practices

1. **Content Collections**: Type-safe content with Zod
2. **Islands**: Only hydrate interactive components
3. **Client Directives**: client:visible, client:idle, client:load
4. **Static Generation**: Pre-render at build time
5. **Image Optimization**: Built-in image component
6. **View Transitions**: Smooth page transitions

Google Antigravity's Gemini 3 can generate Astro components and optimize hydration.