Content Architecture in Ampo — Collections, Series, and Authors

Understanding Astro Content Collections

Ampo leverages Astro’s powerful content collections feature to create a robust, type-safe content architecture. This approach provides several advantages over traditional file-based routing systems, including better organization, automatic type generation, and enhanced developer experience.

The theme defines two primary collections that work together to create a comprehensive content ecosystem:

The Blog Collection

The blog collection forms the heart of Ampo’s content system. Each blog post is a Markdown or MDX file with comprehensive frontmatter that enables rich functionality:

// src/content/config.ts
const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().optional(),
    date: z.coerce.date(),
    updated: z.coerce.date().optional(),
    tags: z.array(z.string()).default([]),
    category: z.string().default('General'),
    series: z.string().optional(),
    authors: z.array(z.string()).default(['default']),
    cover: z.string().optional(),
    draft: z.boolean().default(false),
    minutesRead: z.number().optional(),
  }),
});

This schema provides:

• Type safety ensuring data consistency across all posts
• Default values for optional fields
• Validation preventing common content errors
• IDE support with autocomplete and error checking

The Authors Collection

The authors collection enables multi-author functionality with rich profile information:

const authors = defineCollection({
  type: 'data',
  schema: z.object({
    name: z.string(),
    avatar: z.string().optional(),
    bio: z.string().optional(),
    socials: z.object({
      twitter: z.string().optional(),
      github: z.string().optional(),
      website: z.string().optional(),
    }).optional(),
  }),
});

Content Organization Strategies

Taxonomic Structure

Ampo supports multiple organizational systems that can be used independently or in combination:

Tags

Tags provide flexible, cross-cutting categorization. They’re perfect for:

• Technology stacks (React, TypeScript, Node.js)
• Topics (performance, accessibility, design)
• Content types (tutorial, review, opinion)

Best practices for tagging:

• Use 3-5 tags per post for optimal discoverability
• Maintain a consistent vocabulary across posts
• Consider tag hierarchy for complex topics

Categories

Categories create broader content groupings:

• Tutorials for educational content
• News for industry updates
• Reviews for product evaluations
• Guides for comprehensive how-to content

Categories should be:

• Mutually exclusive where possible
• Limited in number (5-10 categories maximum)
• Clearly defined with distinct purposes

Series

Series enable sequential content organization:

• Tutorial series with progressive difficulty
• Product deep-dives covering different aspects
• Journey narratives following a project or learning path

Series functionality includes:

• Automatic previous/next navigation
• Series overview pages
• Progress indicators for readers

Multi-Author Support

Ampo’s author system supports various publishing models:

Single Author Blogs

Simple setup with one default author:

---
title: My Post
author: john-doe
---

Multi-Author Publications

Team blogs with multiple contributors:

---
title: Collaborative Post
authors: [jane-smith, john-doe]
---

Guest Author Management

Easy integration of guest contributors:

---
title: Guest Post
authors: [guest-writer]
---

Content Processing Pipeline

Automatic Enhancements

Ampo automatically enhances content during the build process:

Reading Time Calculation

// Automatic reading time estimation
const minutesRead = Math.max(1, Math.round(readingTime(post.body).minutes));

This provides readers with time expectations and helps with content planning.

Related Content Discovery

The system automatically suggests related posts based on:

• Tag overlap weighted by relevance
• Category matching for topical relevance
• Recency to surface current content

export async function getRelatedPosts(base: any, limit = 3) {
  const posts = await getAllPosts();
  const baseTags = new Set<string>(base.data.tags ?? []);
  const scored = posts
    .filter((p) => p.slug !== base.slug)
    .map((p) => {
      const overlap = p.data.tags?.filter((t: string) => baseTags.has(t)).length ?? 0;
      const sameCategory = p.data.category === base.data.category ? 1 : 0;
      const score = overlap * 10 + sameCategory * 3;
      return { p, score };
    })
    .sort((a, b) => b.score - a.score)
    .slice(0, limit);
  return scored.map(x => x.p);
}

Archive Generation

Ampo automatically generates comprehensive archive pages:

Dynamic Route Generation

// Automatic tag pages
export async function getStaticPaths() {
  const tags = await getAllTags();
  return tags.map((tag) => ({ params: { tag } }));
}

This creates:

• Individual tag pages (/tags/react/)
• Category archives (/categories/tutorial/)
• Series pages (/series/getting-started/)
• Author profiles (/authors/john-doe/)

Pagination Support

Built-in pagination for large content volumes:

export function paginate<T>(items: T[], page: number, perPage = 9) {
  const total = items.length;
  const pages = Math.max(1, Math.ceil(total / perPage));
  const current = Math.min(Math.max(1, page), pages);
  // ... pagination logic
}

Content Creation Workflow

Writing Process

1. Create new Markdown file in src/content/blog/
2. Add comprehensive frontmatter
3. Write content using Markdown or MDX
4. Preview using Astro’s dev server
5. Build to generate static pages

Content Quality Guidelines

Frontmatter Best Practices

• Title: Clear, descriptive, SEO-friendly
• Description: 120-160 characters for optimal SEO
• Tags: 3-5 relevant, consistent terms
• Category: Single, well-defined classification
• Series: Group related content logically

Content Structure

• Introduction: Hook readers and set expectations
• Headings: Use semantic hierarchy (H2, H3, H4)
• Code blocks: Include syntax highlighting
• Images: Add descriptive alt text
• Links: Use descriptive anchor text

Advanced Features

MDX Support

Ampo supports MDX for interactive content:

import CustomComponent from '../components/CustomComponent.astro';

# My Post Title

Regular markdown content...

<CustomComponent prop="value" />

More markdown...

Draft Management

Use the draft field for content in progress:

---
title: Work in Progress
draft: true
---

Draft posts are automatically excluded from production builds.

Performance Considerations

Build Optimization

• Static generation for maximum performance
• Efficient queries using Astro’s content APIs
• Image optimization with responsive sizing
• Code splitting for JavaScript components

Scalability

The architecture scales effectively:

• Hundreds of posts with fast build times
• Multiple authors with individual profiles
• Complex taxonomies without performance impact
• Large media files with optimization support

This comprehensive content architecture ensures that Ampo can grow with your needs, from simple personal blogs to complex multi-author publications, while maintaining excellent performance and user experience.