diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..e5ccc89c74e61489be29e1175734ae84385b0c3f --- /dev/null +++ b/README.md @@ -0,0 +1,78 @@ + + +# README.md + +## Introduction + +This is a Nuxt 3 application that provides a UI for creating and customizing code snippets with a WYSIWYG editor. The app allows users to customize various aspects of code snippet presentation including colors, themes, window styling, and layout. + +### Key Features + +- Visual editor for code snippets +- Multiple color theme options +- Customizable window/frame styling +- Export to PNG functionality +- Markdown and HTML preview +- Social media sharing customization +- Particle background effects + +## Tech Stack + +- **Vue 3** with **Nuxt 3** framework +- **TypeScript** for type safety +- **Tailwind CSS** for utility-first styling +- **Vue Color Kit** for color selection interfaces +- **Shiki** for markdown code highlighting +- **Drizzle ORM** for database interactions +- **Vercel** for deployment configuration +- **Umami** for analytics + +## Project Structure + +``` +app/ +├── components/ # Vue UI components +│ ├── shared/ # Reusable UI elements +│ └── ui/ # Feature-specific UI components +│ ├── editor/ # Code editor related components +│ ├── frame/ # Frame styling components +│ └── window/ # Window styling components +├── lib/ # Core application logic +│ ├── themes.ts # Theme management +│ ├── colors.ts # Color handling utilities +│ ├── shiki.ts # Markdown highlighting configuration +│ └── store.ts # State management +├── pages/ # Page components +├── styles/ # CSS styles +│ ├── color-picker.css # Styles for color selection UI +│ └── *.css # Theme-specific styles +├── server/ # Server-side logic +│ ├── api/ # API endpoints +│ └── database/ # Database configuration and migrations + +``` + +## Installation + +1. Clone the repository +2. Install dependencies: `pnpm install` +3. Set up the database: `npx drizzle-kit generate` followed by `npx drizzle-kit migrate` +4. Start the development server: `pnpm dev` + +## Usage + +- Create and customize code snippets visually +- Adjust colors using the color picker +- Switch between different themes +- Modify window/frame styling options +- Use markdown or HTML preview +- Export snippets to PNG format +- Save and load presets + +## Contributing + +Contributions are welcome! Please refer to the project's issue tracker for current development needs and enhancement opportunities. + +## License + +This project is licensed under the terms of the MIT License. See LICENSE file for details. \ No newline at end of file