Astro SSG

# Astro Static Site Development

## Setup Commands

- Install dependencies: `npm install` or `pnpm install`
- Start dev server: `npm run dev` or `pnpm dev`
- Build for production: `npm run build` or `pnpm build`
- Preview build: `npm run preview` or `pnpm preview`

## Code Style

- Use TypeScript for type safety
- Prefer `.astro` components for page templates
- Use React/Vue/Svelte components only when interactivity is needed
- Keep components island-based (minimal client-side JavaScript)
- Use content collections for structured content

## Project Structure

src/ ├── pages/ # File-based routing ├── layouts/ # Page layouts ├── components/ # Reusable components ├── content/ # Content collections └── styles/ # Global styles

## Content Collections

- Define schemas in `src/content/config.ts`
- Use `getCollection()` to query content
- Type-safe frontmatter with Zod schemas
- Use `getEntry()` for single item lookups

## Component Patterns

- Server components (default): No client-side JavaScript
- Client components: Add `client:load`, `client:visible`, or `client:idle` directive
- Share components across frameworks with Astro Islands
- Use slots for component composition

## Routing

- File-based routing in `src/pages/`
- Dynamic routes: `[slug].astro`
- API routes: `src/pages/api/*.ts`
- Use `getStaticPaths()` for dynamic static generation

## Image Optimization

- Use `<Image>` component from `astro:assets`
- Images in `src/` are optimized automatically
- Use `public/` only for files that don't need processing

## Testing & Build

- Run TypeScript check: `npx astro check`
- Build site: `npm run build`
- Preview before deploying: `npm run preview`
- Ensure no build errors before committing

## PR Instructions

- Run `astro check` for type validation
- Test build locally: `npm run build && npm run preview`
- Verify all pages render correctly
- Check Lighthouse scores for performance