Astro Static Site Builder

Create an Astro static site for the following requirements:

Site Overview

Site Type: [Personal blog / Documentation / Portfolio / Marketing site / E-commerce / Community]
Site Name: [Specify name]
Primary Purpose: [What is this site for?]
Target Audience: [Developers / General public / Business / Students]

Pages and Routes

Define your site structure (list 5-10 pages):

Page 1: Homepage (/)

Layout: [Hero + Features / Blog list / Portfolio grid / Custom]
Sections: [Hero, About, Features, CTA, etc.]
Dynamic Content: [Fetch from API / Static / MDX content]

Page 2: [Page Name] (/path)

Purpose: [What this page does]
Layout Type: [Full width / Sidebar / Grid / Custom]
Content Source: [Static / API / Markdown / MDX / CMS]
Interactive Elements: [Forms / Buttons / Modals / None]

Page 3: Blog/Dynamic Routes (/blog/[slug])

Content Type: [Blog posts / Documentation / Portfolio items / Products]
Content Source: [Markdown files / Headless CMS / API / MDX]
Pagination: [Yes with X items per page / No]
Categories/Tags: [Yes / No]

[Continue for 5-10 total pages]

Content Management

Content Strategy: [Markdown/MDX files / Headless CMS / REST API / GraphQL / Static]
Content Collections: [Blog posts, Docs, Projects, etc.]
CMS Integration: [Contentful / Sanity / Strapi / Ghost / None]
Frontmatter Schema: [Define required fields: title, date, author, tags, etc.]

Dynamic Routes

List dynamic routes needed:

Route 1: [Pattern]

Pattern: [e.g., /blog/[slug], /docs/[...slug], /products/[category]/[id]]
Data Source: [Where to fetch route data]
Fallback: [404 / Dynamic fallback / None]

[Add more dynamic routes if needed]

Layout Components

Define main layouts:

Base Layout

Header: [Fixed / Sticky / Static] with [Navigation items: Home, About, Blog, etc.]
Footer: [Social links / Newsletter / Sitemap / Copyright]
SEO Meta Tags: [Yes / Basic]
Analytics: [Google Analytics / Plausible / None]

Page-Specific Layouts

[Blog post layout / Documentation layout / Landing page layout / Custom layouts]

UI Components

List reusable components needed (5-10 components):

Component 1: [Name]

Type: [Card / Button / Form / Navigation / Hero / Custom]
Props: [List props: title, description, link, etc.]
Interactivity: [None / Client-side JS / Framework integration]

Component 2: [Name]

Type: [Component type]
Props: [List props]
Interactivity: [Static / Interactive]

[Continue for 5-10 components]

Framework Integrations

React Components: [Yes for: [SPECIFY COMPONENTS] / No]
Vue Components: [Yes for: [SPECIFY COMPONENTS] / No]
Svelte Components: [Yes for: [SPECIFY COMPONENTS] / No]
Client Directives: [client:load / client:visible / client:idle / client:only]

Interactive Features

Search: [Client-side search / API-based / Algolia / Pagefind / None]
Forms: [Contact form / Newsletter signup / Comments / None]
Form Handling: [Netlify Forms / Formspree / API endpoint / None]
Filtering/Sorting: [Yes for: [SPECIFY] / No]
Dark Mode Toggle: [Yes / No]

Styling Approach

CSS Framework: [Tailwind CSS / UnoCSS / Vanilla CSS / CSS Modules / Styled Components]
Design System: [Custom theme / Existing design tokens / None]
Responsive Design: [Mobile-first / Desktop-first / Adaptive]
Typography: [System fonts / Google Fonts: [SPECIFY] / Custom fonts]

Data Fetching

External APIs: [List APIs to fetch from or None]
Build-time Fetching: [Yes for static generation / No]
Environment Variables: [API keys, URLs, etc.]

SEO and Meta

SEO Requirements: [Comprehensive / Basic / Minimal]
Open Graph Tags: [Yes / No]
Twitter Cards: [Yes / No]
Structured Data: [JSON-LD schema / None]
Sitemap: [Auto-generate / Manual / None]
RSS Feed: [Yes / No]

Performance Optimization

Image Optimization: [Astro Image / Sharp / Cloudinary / Manual]
Asset Optimization: [Vite defaults / Custom / None]
Prefetching: [Enable for internal links / Selective / Off]
Critical CSS: [Inline / Separate / Default]

Deployment

Deployment Target: [Vercel / Netlify / Cloudflare Pages / GitHub Pages / Custom]
Build Command: [Default: astro build / Custom]
Output Directory: [dist / public / Custom]
Adapter: [Static (default) / Node / Vercel / Netlify / Cloudflare]

Additional Features

Internationalization (i18n): [Multiple languages: [LIST] / Single language]
MDX Support: [Required / Not needed]
Syntax Highlighting: [For code blocks: Shiki / Prism / None]
View Transitions: [Yes (experimental) / No]
RSS Feed Generation: [Yes / No]

Project Configuration

TypeScript: [Yes with strict mode / Yes relaxed / No]
Markdown Plugins: [Reading time / Table of contents / Custom / None]
Integrations: [List Astro integrations: @astrojs/tailwind, @astrojs/mdx, etc.]

Generate a complete Astro static site with:

Full project structure (src/layouts, src/pages, src/components)
astro.config.mjs with proper configuration
All page components (.astro files)
Layout components with header and footer
Reusable components
Dynamic route handling with getStaticPaths()
Content collection configuration (if using content collections)
TypeScript types (if TypeScript is enabled)
Styling setup (Tailwind config, global styles, etc.)
Image optimization setup
SEO meta tags in layout
Example content (markdown files or sample data)
package.json with dependencies

Output production-ready code following Astro best practices with islands architecture, partial hydration for interactive components, and optimal build output.