mirror of
https://github.com/handsomezhuzhu/AeroStart.git
synced 2026-02-20 12:00:15 +00:00
aa46cd16b7
Configure project for Vercel deployment with comprehensive build optimization: - Add Vercel deployment configuration (vercel.json) - Configure build commands and output directory - Set up Bilibili API proxy rewrites - Add security response headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection) - Integrate Tailwind CSS 4.x build system - Add PostCSS configuration with @tailwindcss/postcss plugin - Create Tailwind CSS configuration with content scanning paths - Set up index.css with Tailwind imports and custom styles - Add Tailwind CSS 4.x and dependencies to package.json - Optimize HTML and entry files - Remove CDN-based Tailwind CSS in favor of local build - Add Google Fonts preconnect for better performance - Import CSS in index.tsx for proper bundling - Update README with deployment instructions - Add one-click Vercel deployment button - Separate local development and deployment sections Tech Stack Updates: - Tailwind CSS 4.1.17 with new PostCSS architecture - Autoprefixer 10.4.22 for CSS compatibility - PostCSS 8.5.6 for CSS processing Build Verification: - Development server runs successfully on port 3000 - Production build completes in ~860ms - Output: 13KB CSS (gzipped: 2.94KB), 260KB JS (gzipped: 80KB) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
129 lines
3.2 KiB
Markdown
129 lines
3.2 KiB
Markdown
# AeroStart
|
|
|
|
A modern, customizable browser start page with elegant search experience and personalized settings.
|
|
|
|
## ✨ Features
|
|
|
|
- 🎨 **Multi-Theme Support** - 8 preset theme colors to choose from
|
|
- 🖼️ **Custom Wallpapers** - Support for image and video backgrounds with multiple fit modes
|
|
- 🔍 **Multiple Search Engines** - Built-in Google, Baidu, Bing, DuckDuckGo, Bilibili
|
|
- ⏰ **Real-time Clock** - Support for 12/24 hour format with optional seconds display
|
|
- 🎭 **Dynamic Blur** - Background automatically blurs during search for enhanced focus
|
|
- 💾 **Local Storage** - All settings automatically saved to browser local storage
|
|
- 📱 **Responsive Design** - Perfect adaptation to all screen sizes
|
|
- 🎬 **Smooth Animations** - Carefully designed transitions and interactive animations
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Deploy to Vercel
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/AeroStart)
|
|
|
|
Click the button above to deploy your own instance of AeroStart to Vercel in minutes.
|
|
|
|
### Local Development
|
|
|
|
**Prerequisites:** Node.js 16+
|
|
|
|
### Install Dependencies
|
|
|
|
```bash
|
|
pnpm install
|
|
# or
|
|
npm install
|
|
```
|
|
|
|
### Run Development Server
|
|
|
|
```bash
|
|
pnpm dev
|
|
# or
|
|
npm run dev
|
|
```
|
|
|
|
Visit `http://localhost:3000` to view the application.
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
pnpm build
|
|
# or
|
|
npm run build
|
|
```
|
|
|
|
## 🎯 Usage Guide
|
|
|
|
### Search Functionality
|
|
- Enter keywords in the search box and press Enter to search
|
|
- Click the icon on the left side of the search box to switch search engines
|
|
- Background automatically blurs during search to enhance focus
|
|
|
|
### Settings Panel
|
|
- Right-click the background to enter Dashboard mode
|
|
- Click the settings icon in the top right corner to open the settings panel
|
|
- Customizable options:
|
|
- Clock format (12/24 hour)
|
|
- Background wallpaper (preset or custom URL)
|
|
- Theme color
|
|
- Search box opacity
|
|
- Background blur intensity
|
|
|
|
### Wallpaper Settings
|
|
- Support for image and video backgrounds
|
|
- 5 fit modes: Cover, Contain, Fill, Center, Repeat
|
|
- Add custom wallpaper URLs
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Framework:** React 19
|
|
- **Build Tool:** Vite 6
|
|
- **Language:** TypeScript
|
|
- **Styling:** Tailwind CSS
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
AeroStart/
|
|
├── components/ # React components
|
|
│ ├── Clock.tsx # Clock component
|
|
│ ├── SearchBox.tsx # Search box component
|
|
│ ├── SettingsModal.tsx # Settings panel
|
|
│ └── ...
|
|
├── utils/ # Utility functions
|
|
├── context/ # React Context
|
|
├── constants.ts # Constants configuration
|
|
├── types.ts # TypeScript type definitions
|
|
├── App.tsx # Main application component
|
|
└── index.tsx # Application entry point
|
|
```
|
|
|
|
## 🎨 Customization
|
|
|
|
### Add Search Engine
|
|
|
|
Edit the `SEARCH_ENGINES` array in `constants.ts`:
|
|
|
|
```typescript
|
|
{
|
|
name: 'Engine Name',
|
|
urlPattern: 'https://example.com/search?q=',
|
|
icon: 'SVG icon string'
|
|
}
|
|
```
|
|
|
|
### Add Theme Color
|
|
|
|
Edit the `THEMES` array in `constants.ts`:
|
|
|
|
```typescript
|
|
{ name: 'Theme Name', hex: '#colorcode' }
|
|
```
|
|
|
|
## 📄 License
|
|
|
|
MIT License
|
|
|
|
## 🤝 Contributing
|
|
|
|
Issues and Pull Requests are welcome!
|