Starlight Documentation Site

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

   git clone https://github.com/yourusername/your-repo-name.git
   cd your-repo-name
   

2. Install dependencies

   npm install
   

3. Start the development server

   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:

---
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:

npm run build

Preview the production build:

npm run preview

🔧 Configuration

Starlight

Customize Starlight in astro.config.mjs:

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