diff --git a/README.md b/README.md index 3017706..33f0bf1 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ - - # create-lasereyes Interactive CLI tool to scaffold Next.js projects with LaserEyes integration to quickly start building Bitcoin Apps. -## Usage +## Quick Start ```bash npx create-lasereyes @@ -12,7 +10,67 @@ npx create-lasereyes ## Features -- Creates a Next.js project -- Integrates LaserEyes -- Optional Tailwind CSS setup -- Optional Shadcn UI components +- ⚡️ **Next.js Integration** - Creates a modern Next.js project with App Router using React 18 +- 🔐 **LaserEyes Wallet Connect Modal** - Pre-configured Bitcoin wallet integration +- 🎨 **Styling** + - Shadcn / Tailwind CSS setup + - Light / Dark Mode App Toggle +- 🚀 **Best Practices** + - TypeScript by default + - ESLint configuration + - Optimized project structure + +## Project Structure + +After running the command, your project will include: + +``` +src/ +├── app/ +│ ├── favicon.ico +│ ├── globals.css +│ ├── layout.tsx # Root layout with providers +│ └── page.tsx # Home page +├── components/ +│ ├── ui/ # Reusable Shadcn UI Components +│ ├── ConnectWallet.tsx # LaserEyes Wallet Connection Modal +│ ├── DefaultLayout.tsx # LaserEyes Provider Wrapper +│ └── ThemeToggle.tsx # Light/Dark Mode Toggle +└── lib/ + └── utils.ts +``` + +## Development + +1. Create a new project: + + ```bash + npx create-lasereyes + ``` + +2. Follow the interactive prompts to customize your setup + +3. Navigate to your project: + + ```bash + cd your-project-name + ``` + +4. Start developing: + ```bash + npm run dev + ``` + +## Coming Soon + +- Vue.js template support +- Vanilla JavaScript template +- Additional wallet integrations + +## Contributing + +Contributions are welcome! Please feel free to submit a Pull Request. + +## License + +MIT License - feel free to use this in your own projects! diff --git a/src/frameworks.ts b/src/frameworks.ts index 47f167e..e93147c 100644 --- a/src/frameworks.ts +++ b/src/frameworks.ts @@ -12,13 +12,14 @@ export interface Framework { display: string; color: (str: string) => string; variants?: Variant[]; + disabled?: boolean; } export const frameworks: Framework[] = [ { name: "react", display: "React", - color: pc.blue, + color: pc.green, variants: [ { name: "next-app", @@ -29,25 +30,27 @@ export const frameworks: Framework[] = [ }, { name: "vue", - display: "Vue", - color: pc.green, + display: "Vue: Coming Soon", + color: pc.gray, + disabled: true, variants: [ { name: "vue-app", display: "Vue 3 + Vite", - color: pc.green, + color: pc.gray, }, ], }, { name: "vanilla", - display: "Vanilla", - color: pc.yellow, + display: "Vanilla: Coming Soon", + color: pc.gray, + disabled: true, variants: [ { name: "vite-vanilla", display: "Vite", - color: pc.yellow, + color: pc.gray, }, ], },