# Starlight Documentation Site

[![Astro](https://img.shields.io/badge/Built%20with-Astro-FF5D01.svg?style=flat-square)](https://astro.build)
[![Tailwind CSS](https://img.shields.io/badge/Styled%20with-Tailwind-38B2AC.svg?style=flat-square)](https://tailwindcss.com)
[![React](https://img.shields.io/badge/Components-React-61DAFB.svg?style=flat-square)](https://reactjs.org)
[![Starlight](https://img.shields.io/badge/Docs-Starlight-DD0DB9.svg?style=flat-square)](https://starlight.astro.build)

A modern documentation website built with Astro Starlight, React, and Tailwind CSS. This project provides a sleek, responsive documentation platform with a dark theme option.

## 🚀 Features

- **Astro-powered**: Fast, static site generation with dynamic capabilities
- **Starlight Documentation**: Purpose-built documentation framework
- **Shadcn UI Components**: Beautiful, accessible UI components
- **Dark Mode Support**: Built-in dark theme with Starlight Theme Black
- **Responsive Design**: Mobile-friendly layout
- **TypeScript Support**: Full type safety throughout the codebase
- **Markdown Content**: Easy content authoring with Markdown

## 📋 Prerequisites

- Node.js 18 or higher
- npm or yarn

## 🛠️ Installation

1. Clone the repository
   ```bash
   git clone https://github.com/yourusername/your-repo-name.git
   cd your-repo-name
   ```

2. Install dependencies
   ```bash
   npm install
   ```

3. Start the development server
   ```bash
   npm run dev
   ```

4. Open your browser and visit `http://localhost:4321`

## 📁 Project Structure

```
/
├── public/             # Static assets
├── src/
│   ├── components/     # UI components
│   │   └── ui/         # Shadcn UI components
│   ├── content/        # Documentation content
│   │   └── docs/       # Markdown files
│   ├── hooks/          # React hooks
│   ├── layouts/        # Page layouts
│   ├── lib/            # Utility functions
│   └── styles/         # Global styles
├── astro.config.mjs    # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
└── tsconfig.json       # TypeScript configuration
```

## 📦 Package Dependencies

### Core Framework
- **astro** (v5.5.2): The core framework for building the site
- **@astrojs/starlight** (v0.32.2): Documentation theme for Astro
- **@astrojs/react** (v4.2.1): React integration for Astro
- **@astrojs/tailwind** (v5.1.1): Tailwind CSS integration for Astro

### UI and Styling
- **tailwindcss** (v3.4.13): Utility-first CSS framework
- **tailwindcss-animate** (v1.0.7): Animation utilities for Tailwind
- **tailwind-merge** (v2.5.2): Utility for merging Tailwind classes
- **class-variance-authority** (v0.7.0): Create variant components
- **clsx** (v2.1.1): Utility for constructing className strings
- **starlight-theme-black** (v0.3.0): Dark theme for Starlight

### React and Components
- **react** (v18.3.1): UI library for building components
- **react-dom** (v18.3.1): DOM bindings for React
- **@types/react** (v18.3.10): TypeScript definitions for React
- **@types/react-dom** (v18.3.0): TypeScript definitions for React DOM

### UI Component Libraries
- **Radix UI**: Collection of accessible UI primitives
  - Various components including: accordion, alert-dialog, avatar, checkbox, etc.
- **cmdk** (v1.0.0): Command menu component
- **embla-carousel-react** (v8.3.0): Carousel component
- **lucide-react** (v0.446.0): Icon library
- **sonner** (v1.5.0): Toast notifications
- **vaul** (v1.0.0): Drawer component
- **recharts** (v2.12.7): Charting library
- **react-resizable-panels** (v2.1.4): Resizable panel components

### Form Handling
- **react-hook-form** (v7.53.0): Form state management
- **@hookform/resolvers** (v3.9.0): Form validation resolvers
- **zod** (v3.23.8): TypeScript-first schema validation
- **input-otp** (v1.2.4): One-time password input

### Date Utilities
- **date-fns** (v3.6.0): Date utility library
- **react-day-picker** (v8.10.1): Flexible date picker

### Theming
- **next-themes** (v0.3.0): Theme management

## 📝 Adding Content

Place your Markdown files in the `src/content/docs/` directory. Starlight will automatically generate pages based on these files.

Example frontmatter for a documentation page:

```md
---
title: Getting Started
description: Learn how to get started with our product
---

Content goes here...
```

## 🧩 Available Components

This project includes a comprehensive set of UI components from Shadcn UI:

- Buttons, Cards, Dialogs
- Forms, Inputs, Selectors
- Navigation components
- And many more!

## 🚢 Deployment

Build the site for production:

```bash
npm run build
```

Preview the production build:

```bash
npm run preview
```

## 🔧 Configuration

### Starlight

Customize Starlight in `astro.config.mjs`:

```js
starlight({
  title: "Your Site Title",
  // Other options...
})
```

### Tailwind CSS

Customize Tailwind in `tailwind.config.mjs`.

## 📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

## 👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request