From 6f4944eef3574fa0f737ecc8c03461a7fc4ac348 Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Mon, 17 Mar 2025 17:35:16 -0600 Subject: [PATCH] README.md --- README.md | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..2e21522 --- /dev/null +++ b/README.md @@ -0,0 +1,177 @@ +# 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