350 lines
12 KiB
Markdown
350 lines
12 KiB
Markdown
<div align="center">
|
|
|
|
# 🕶️ ✨ AWESOME WEB ✨ 🕶️
|
|
### *The Most Funkadelic, Cosmically-Enhanced, Star-Powered GitHub Explorer in the Known Universe!*
|
|
|
|
|
|
|
|
> 🎤 *"Yeah baby! We got that COSMIC SLOP of awesome lists, sprinkled with STARDUST and served on a MOTHERSHIP of Next.js goodness! Slide into the funkiest GitHub explorer this side of the galaxy, ya dig?"*
|
|
>
|
|
> **— Bootsy Collins, Minister of Funk & Chief Awesome Officer**
|
|
|
|
[](https://github.com)
|
|
[](https://github.com)
|
|
[](https://github.com)
|
|
[](https://github.com)
|
|
|
|
**🚀 Powered By The Funk:** Next.js 15 • Tailwind CSS 4 • shadcn/ui • SQLite3 • Web Workers • PWA Magic
|
|
|
|
---
|
|
|
|
</div>
|
|
|
|
## 🎸 What's This Funkadelic Trip All About?
|
|
|
|
Yo, check it! This ain't your grandma's GitHub list browser (no disrespect to grandma). This is a **FULL-BLOWN PSYCHEDELIC EXPERIENCE** for exploring awesome lists from GitHub. We're talkin' purple, pink, and GOLD, baby! We're talkin' FULL-TEXT SEARCH powered by SQLite FTS5 running at the SPEED OF FUNK! We're talkin' a personal list editor so smooth it'll make you wanna BOOGIE!
|
|
|
|
### 🌟 The Cosmic Feature List (Funkometer: 11/10)
|
|
|
|
#### 🎯 **The P-Funk Database Experience**
|
|
- **FTS5 Full-Text Search** - Search faster than Bootsy's bass licks! ⚡
|
|
- **Faceted Filtering** - Filter by language, stars, topics - smooth as silk! 🎨
|
|
- **Hierarchical Navigation** - Browse awesome lists like you're navigating the Mothership 🚀
|
|
- **Personal List Curation** - Save your faves with our WYSIWYG markdown editor (powered by TipTap) ✍️
|
|
- **Real-time Updates** - Web workers polling for fresh data every 6 hours! 🔄
|
|
- **PWA Ready** - Install it on ANY device and take the funk MOBILE! 📱
|
|
|
|
#### 🕶️ **The Aesthetic Funk**
|
|
- **Purple/Pink/Gold Theme** - Colors so fly, they'll make you CRY! 💜💗💛
|
|
- `#DA22FF` - That FUNKY Purple
|
|
- `#FF69B4` - That SASSY Pink
|
|
- `#FFD700` - That COSMIC Gold
|
|
- **Gradient Everything** - Buttons, text, backgrounds - all sliding through the rainbow! 🌈
|
|
- **Smooth Animations** - Transitions smoother than a James Brown slide! ✨
|
|
- **Dark Mode** - For those late-night funk sessions! 🌙
|
|
- **Custom Scrollbar** - Even the scrollbar got STYLE! 📜
|
|
|
|
#### 🤖 **The Technical Groove**
|
|
|
|
**Frontend Funk:**
|
|
- Next.js 15 (App Router) + TypeScript - Modern as tomorrow!
|
|
- Tailwind CSS 4 - Utility-first FUNK!
|
|
- shadcn/ui Components - Beautiful AND accessible!
|
|
- Radix UI - Headless but not heartless!
|
|
- Motion/Framer Motion - Animations that MOVE you!
|
|
- Lucide Icons - Icons with SOUL!
|
|
|
|
**Backend Bass Line:**
|
|
- SQLite3 + better-sqlite3 - Database with GROOVE!
|
|
- FTS5 Full-Text Search - Finding stuff at LIGHT SPEED!
|
|
- Node.js 22+ - The latest and GREATEST!
|
|
- Zustand State Management - State so fresh it squeaks!
|
|
|
|
**DevOps Drumbeat:**
|
|
- GitHub Actions - Automated builds every 6 hours!
|
|
- Web Workers - Background sync like a BACKBEAT!
|
|
- PWA Support - Offline? NO PROBLEM!
|
|
- Docker Ready - Container that CONTAINS the funk!
|
|
|
|
---
|
|
|
|
## 🎤 Getting Your Funk On (Installation)
|
|
|
|
Alright, space cadets! Let's get this MOTHERSHIP launched!
|
|
|
|
### 🛸 Prerequisites
|
|
|
|
You're gonna need:
|
|
- **Node.js 22+** (The funk requires modern tech!)
|
|
- **pnpm** (Package manager with STYLE!)
|
|
- **Better-sqlite3** (For that database GROOVE!)
|
|
|
|
### 🚀 Launch Sequence
|
|
|
|
```bash
|
|
# Clone this funkadelic masterpiece
|
|
git clone https://github.com/yourusername/awesome-web.git
|
|
cd awesome-web
|
|
|
|
# Install the cosmic dependencies
|
|
pnpm install
|
|
|
|
# Fire up the development server (Mothership: ACTIVATED!)
|
|
pnpm dev
|
|
|
|
# Open your browser to http://localhost:3000
|
|
# Put on your sunglasses
|
|
# Prepare for MAXIMUM FUNK! 🕶️
|
|
```
|
|
|
|
### 🏗️ Building for Production
|
|
|
|
```bash
|
|
# Build that funky fresh production bundle
|
|
pnpm build
|
|
|
|
# Launch the production server
|
|
pnpm start
|
|
|
|
# Deploy to Vercel/wherever and SPREAD THE FUNK! 🌍
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 The Funkadelic Architecture
|
|
|
|
```
|
|
awesome-web/ 🏛️ THE MOTHERSHIP
|
|
├── 🎸 app/
|
|
│ ├── layout.tsx 💜 Root layout with COSMIC theme
|
|
│ ├── globals.css 🎨 Where the MAGIC happens
|
|
│ ├── page.tsx 🏠 Landing page of FUNK
|
|
│ ├── search/ 🔍 Search with STYLE
|
|
│ ├── browse/ 📚 Browse with GROOVE
|
|
│ ├── my-list/ ✨ Personal list MAGIC
|
|
│ └── api/ 🚀 API routes for DATA
|
|
│ ├── search/ 💫 Full-text search endpoint
|
|
│ ├── repositories/ 📦 Repository details
|
|
│ ├── stats/ 📊 Database statistics
|
|
│ └── db-version/ 🔄 Version checking
|
|
│
|
|
├── 🎵 components/
|
|
│ ├── layout/
|
|
│ │ ├── app-header.tsx 🎩 Header with ATTITUDE
|
|
│ │ ├── app-sidebar.tsx 📂 Sidebar with SOUL
|
|
│ │ └── command-menu.tsx ⌨️ Cmd+K for COSMIC search
|
|
│ ├── personal-list/
|
|
│ │ ├── personal-list-editor.tsx ✍️ WYSIWYG editor
|
|
│ │ ├── push-to-list-button.tsx 💾 Save with STYLE
|
|
│ │ └── sliding-panel.tsx 📱 Panel that SLIDES
|
|
│ ├── readme/
|
|
│ │ ├── readme-viewer.tsx 📖 Markdown with FLAVOR
|
|
│ │ └── readme-header.tsx 🎯 Header with STARS
|
|
│ └── ui/ 🎨 shadcn components with FUNK
|
|
│
|
|
├── 🎹 lib/
|
|
│ ├── db.ts 💾 Database GROOVE
|
|
│ ├── personal-list-store.ts 🗂️ Zustand state MAGIC
|
|
│ ├── themes.ts 🎨 Theme POWER
|
|
│ └── utils.ts 🔧 Utility FUNK
|
|
│
|
|
├── 🌟 public/
|
|
│ ├── worker.js 🤖 Service worker MAGIC
|
|
│ ├── manifest.json 📱 PWA manifest
|
|
│ └── icons/ ✨ Funkadelic icons
|
|
│
|
|
├── 🎬 scripts/
|
|
│ └── build-db.js 🏗️ Database builder (2 modes!)
|
|
│
|
|
└── 🚀 .github/workflows/
|
|
└── db.yml ⚙️ Automated builds every 6 hours
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Key Features (The Funk Breakdown)
|
|
|
|
### 🔍 **Search Like You Mean It!**
|
|
Our FTS5-powered search is FASTER than a cheetah on roller skates! Search by:
|
|
- **Keywords** - Find ANYTHING in milliseconds!
|
|
- **Language** - JavaScript? Python? We got 'em all!
|
|
- **Stars** - Filter by popularity (but everything's a STAR here!)
|
|
- **Category** - Organize that KNOWLEDGE!
|
|
|
|
### 📝 **Personal List Editor - Your Own Awesome Creation!**
|
|
Built with TipTap, this editor got MORE extensions than Parliament-Funkadelic:
|
|
- ✨ Rich text formatting (bold, italic, strikethrough)
|
|
- 📋 Tables, task lists, code blocks
|
|
- 🎨 Syntax highlighting for code
|
|
- 📊 Character count
|
|
- 💾 Auto-save to localStorage (your funk is SAFE!)
|
|
- 📤 Export to markdown (SHARE the funk!)
|
|
|
|
### 🔄 **Smart Updates - Set It and Forget It!**
|
|
Our Web Worker is like a ROBOT BASSIST - always keeping the rhythm:
|
|
- Polls database version every 6 hours
|
|
- Notifies you when new data drops
|
|
- Cache invalidation (OLD data? GONE!)
|
|
- Exponential backoff (SMART and efficient!)
|
|
|
|
### 🎨 **Theme System - Purple Rain Meets Cosmic Slop!**
|
|
|
|
```css
|
|
/* The Funkadelic Palette */
|
|
--awesome-purple: #DA22FF; /* 💜 Primary FUNK */
|
|
--awesome-pink: #FF69B4; /* 💗 Secondary GROOVE */
|
|
--awesome-gold: #FFD700; /* 💛 Accent SHINE */
|
|
|
|
/* Gradients that'll BLOW YOUR MIND */
|
|
background: linear-gradient(135deg,
|
|
#DA22FF 0%, /* Purple PASSION */
|
|
#9733EE 50%, /* Violet VIBES */
|
|
#FFD700 100% /* Golden GLORY */
|
|
);
|
|
```
|
|
|
|
---
|
|
|
|
## 🏗️ Automated Database Building (The GitHub Actions GROOVE)
|
|
|
|
We got TWO build modes, baby!
|
|
|
|
### ⚡ **Download Mode** (Default - Fast Like Lightning!)
|
|
- Downloads pre-built database from `valknarness/awesome` repo
|
|
- Takes ~5 minutes (TIME is money, honey!)
|
|
- Runs every 6 hours automatically
|
|
- Fallback to build mode if download fails (SMART!)
|
|
|
|
### 🔨 **Build Mode** (Slow But Thorough!)
|
|
- Clones awesome CLI and runs FULL indexing
|
|
- Takes 1-2 hours (PATIENCE is a virtue!)
|
|
- Manual trigger only (for the CONTROL FREAKS!)
|
|
- Generates fresh database with ALL the data
|
|
|
|
**Trigger it manually:**
|
|
```bash
|
|
# Via GitHub Actions UI
|
|
# Select "Build mode" and hit "Run workflow"
|
|
# Then sit back and let the FUNK flow! 🎸
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Deployment (Spread the Funk Worldwide!)
|
|
|
|
### Deploy to Vercel (Recommended!)
|
|
|
|
```bash
|
|
# Install Vercel CLI
|
|
pnpm i -g vercel
|
|
|
|
# Deploy!
|
|
vercel deploy
|
|
|
|
# BOOM! Your funk is LIVE! 🌍
|
|
```
|
|
|
|
### Environment Variables (Keep 'em Secret, Keep 'em Safe!)
|
|
|
|
```env
|
|
# .env.local
|
|
AWESOME_DB_PATH=/path/to/awesome.db
|
|
WEBHOOK_SECRET=your-secret-here
|
|
GITHUB_TOKEN=your-github-token
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 What Makes This COSMICALLY AWESOME?
|
|
|
|
1. **🎨 Perfect Theme Match** - Colors straight from the awesome CLI! HARMONIOUS!
|
|
2. **⚡ Lightning Search** - FTS5 search faster than a meteor! ZOOM!
|
|
3. **💾 Smart Caching** - Web workers keeping things FRESH!
|
|
4. **🤖 Automation** - GitHub Actions building databases while you SLEEP!
|
|
5. **📱 PWA Ready** - Install it ANYWHERE! Desktop! Mobile! TOASTER!
|
|
6. **♿ Accessible** - Keyboard shortcuts, ARIA labels, semantic HTML - EVERYONE gets the funk!
|
|
7. **🌗 Dark Mode** - Light mode for DAY, dark mode for NIGHT!
|
|
8. **✨ Smooth UX** - Animations smoother than BUTTER on a hot skillet!
|
|
|
|
---
|
|
|
|
## 🎵 Development Notes (For the Funkateers!)
|
|
|
|
### Adding shadcn/ui Components
|
|
|
|
```bash
|
|
npx shadcn@latest add button dialog dropdown-menu toast command scroll-area
|
|
# Add ALL the components! MORE is MORE!
|
|
```
|
|
|
|
### Database Schema
|
|
|
|
The SQLite database vibes with these tables:
|
|
- `awesome_lists` - List metadata (ALL the lists!)
|
|
- `repositories` - Repository data (ALL the repos!)
|
|
- `readmes` - README content (ALL the docs!)
|
|
- `readmes_fts` - FTS5 virtual table (SEARCH POWER!)
|
|
|
|
### Path Aliases (Keep It Clean!)
|
|
|
|
- `@/` - Project root (HOME base!)
|
|
- `@/components` - UI components (BUILDING blocks!)
|
|
- `@/lib` - Utilities (TOOL box!)
|
|
- `@/app` - Next.js pages (THE routes!)
|
|
|
|
---
|
|
|
|
## 🌟 Future Enhancements (The Cosmic Roadmap!)
|
|
|
|
- [ ] 🎮 **Gamification** - Earn badges for exploring lists! COLLECT 'EM ALL!
|
|
- [ ] 👥 **User Accounts** - Save preferences in the CLOUD!
|
|
- [ ] 📊 **Analytics Dashboard** - See what's TRENDING!
|
|
- [ ] 🔔 **Push Notifications** - Get alerted when lists UPDATE!
|
|
- [ ] 🌐 **Internationalization** - FUNK in every language!
|
|
- [ ] 📱 **Mobile App** - React Native version (THE REMIX!)
|
|
- [ ] 🔌 **Browser Extension** - Search from ANYWHERE!
|
|
- [ ] 🤖 **AI Recommendations** - "You might also like..." with INTELLIGENCE!
|
|
|
|
---
|
|
|
|
## 📜 License
|
|
|
|
MIT License - Free as a bird, baby! Use it, share it, FUNK IT UP!
|
|
|
|
---
|
|
|
|
<div align="center">
|
|
|
|
## ⭐ CREDITS ⭐
|
|
|
|
### 🎸 The One and Only FUNK Himself 🎸
|
|
|
|
<img src="https://media.giphy.com/media/xUA7ba93zaOaGW8GWI/giphy.gif" width="200">
|
|
|
|
**Built with 💜💗💛 by funkateers worldwide**
|
|
|
|
*"Free your mind and your code will follow!"*
|
|
|
|
---
|
|
|
|
### Special Shoutout To:
|
|
|
|
🎤 **Bootsy Collins** - For inspiring the COSMIC vision
|
|
🌟 **George Clinton** - For the MOTHERSHIP connection
|
|
🎸 **Parliament-Funkadelic** - For the GROOVE foundation
|
|
⭐ **sindresorhus/awesome** - For the original awesome lists
|
|
💜 **The Open Source Community** - For keeping the FUNK alive
|
|
|
|
---
|
|
|
|
### 🕶️ One Nation Under A Groove 🕶️
|
|
|
|
*If you dig this funkadelic masterpiece, drop us a ⭐ STAR ⭐ on GitHub!*
|
|
*Let's spread the FUNK across the galaxy, one awesome list at a time!*
|
|
|
|
|
|
|
|
**P-FUNK NEVER DIES!** 🎸✨🚀
|
|
|
|
</div>
|