--- title: Standard Astro Architecture description: Guidelines for implementing the standard Astro project architecture tags: [Astro, Architecture, Standard] globs: /src/**/*.astro --- # Standard Astro Architecture ## Overview The standard Astro architecture follows Astro's recommended project structure with a focus on maintainability, performance, and developer experience. ## Directory Structure ``` ├── public/ # Static assets ├── src/ │ ├── components/ # Reusable UI components │ │ ├── common/ # Shared components │ │ ├── layout/ # Layout components │ │ └── pages/ # Page-specific components │ ├── layouts/ # Layout templates │ ├── pages/ # Page routes │ ├── content/ # Content collections │ │ └── config.ts # Collection schemas │ ├── styles/ # Global styles and variables │ ├── utils/ # Utility functions │ │ ├── api.ts # API functions │ │ └── helpers.ts # Helper functions │ └── env.d.ts # TypeScript env definitions ├── astro.config.mjs # Astro configuration ├── package.json # Project dependencies └── tsconfig.json # TypeScript configuration ``` ## Component Organization ### Categorizing Components In the standard architecture, components are organized into the following categories: 1. **Common Components**: Reusable UI elements like buttons, cards, etc. 2. **Layout Components**: Elements that define the page structure 3. **Page Components**: Components specific to particular pages ### Component Responsibilities Each component should have a focused responsibility: ```typescript // src/components/common/Button.astro --- interface Props { text: string; variant?: 'primary' | 'secondary' | 'tertiary'; size?: 'small' | 'medium' | 'large'; onClick?: string; } const { text, variant = 'primary', size = 'medium', onClick } = Astro.props; --- ``` ## Layouts Implementation Layouts are used to define consistent page structures: ```typescript // src/layouts/BaseLayout.astro --- import Header from '../components/layout/Header.astro'; import Footer from '../components/layout/Footer.astro'; import '../styles/global.css'; interface Props { title: string; description?: string; } const { title, description = 'My Astro Site' } = Astro.props; --- {title}