# Astro Template

Minimal Astro development environment with React, Tailwind CSS, and Cloudflare Pages deployment.

## Stack

- **Astro 5** - Static site framework
- **React 19** - Interactive components
- **Tailwind CSS 4** - Styling
- **MDX** - Markdown with JSX
- **TypeScript** - Type safety
- **Cloudflare Pages** - Deployment
- **pnpm** - Package manager

## Quick Start

```bash
# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build
pnpm build

# Deploy
pnpm deploy
```

## Project Structure

```
src/
├── assets/          # Images (processed by Astro)
├── components/      # React/Astro components
├── content/         # MDX content collections
│   ├── blog/       # Blog posts
│   ├── sections/   # Homepage sections
│   └── pages/      # Page content
├── layouts/         # Page layouts
├── pages/          # Routes
├── styles/         # Global CSS
└── utils/          # Utility scripts

public/
└── media/          # Static assets

dev/
├── design.json     # Design system docs
└── continuity.md   # Development log
```

## Content Collections

### Blog Posts (`src/content/blog/`)

```yaml
---
title: 'Post Title'
description: 'Description'
pubDate: 'Dec 27 2024'
heroImage: '../../assets/image.avif'
featured: true
category: 'Category'
tags: ['tag1', 'tag2']
---

Content here...
```

### Sections (`src/content/sections/`)

- `hero.mdx` - Hero section
- `experience.mdx` - Work history
- `skills.mdx` - Skills
- `featured-project.mdx` - Featured work

See files for schema examples.

## Utilities

```bash
# AI-powered commit messages
pnpm commit

# Convert images to AVIF
pnpm convert:avif:all
pnpm convert:avif:jpeg
pnpm convert:avif:png

# Generate Cloudflare types
pnpm cf-typegen
```

## Configuration

- `src/consts.ts` - Site constants
- `astro.config.mjs` - Astro config
- `wrangler.jsonc` - Cloudflare config
- `dev/design.json` - Design system

## Development

See `CLAUDE.md` for detailed architecture and development patterns.

## License

MIT