{"id":29571065,"url":"https://github.com/xixu-me/meta.js-customizer","last_synced_at":"2025-07-19T03:41:17.116Z","repository":{"id":304512007,"uuid":"1018994292","full_name":"xixu-me/META.js-Customizer","owner":"xixu-me","description":"An intuitive web app that allows users to easily create custom META.js of xixu-me/META","archived":false,"fork":false,"pushed_at":"2025-07-13T14:27:01.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-13T16:23:38.014Z","etag":null,"topics":["custom","customizer","meta","metajs","web","webapp"],"latest_commit_sha":null,"homepage":"https://metajs.xi-xu.me","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xixu-me.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-13T14:06:23.000Z","updated_at":"2025-07-13T14:58:06.000Z","dependencies_parsed_at":"2025-07-13T16:23:46.603Z","dependency_job_id":"7403a2ec-f704-41c9-8ad6-9527c33a1bfa","html_url":"https://github.com/xixu-me/META.js-Customizer","commit_stats":null,"previous_names":["xixu-me/meta.js-customizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/xixu-me/META.js-Customizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xixu-me%2FMETA.js-Customizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xixu-me%2FMETA.js-Customizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xixu-me%2FMETA.js-Customizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xixu-me%2FMETA.js-Customizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xixu-me","download_url":"https://codeload.github.com/xixu-me/META.js-Customizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xixu-me%2FMETA.js-Customizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265883799,"owners_count":23843802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom","customizer","meta","metajs","web","webapp"],"created_at":"2025-07-19T03:41:14.938Z","updated_at":"2025-07-19T03:41:17.099Z","avatar_url":"https://github.com/xixu-me.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# META.js Customizer\n\n## 🎯 Overview\n\nMETA.js Customizer is a modern, intuitive web app that allows users to easily create custom META.js of [xixu-me/META](https://github.com/xixu-me/META). It provides a beautiful visual interface to select and configure service rulesets from the [xixu-me/RFM](https://github.com/xixu-me/RFM) repository.\n\n### ✨ Key Features\n\n- 🔍 **Smart Service Search**: Instantly search and filter through all available services\n- 🎨 **Modern Glass UI**: Beautiful, responsive design with glassmorphism effects\n- 🌙 **Intelligent Theming**: Auto-detects system theme with manual override options\n- 📱 **Mobile Responsive**: Seamlessly adapts to all device sizes\n- 🚀 **Real-time Generation**: Instantly generates META.js as you select services\n- 📋 **One-click Copy**: Copy generated configuration to clipboard with visual feedback\n- 💾 **Download Support**: Download your configuration as META.js file\n- ♿ **Accessibility First**: WCAG compliant with full keyboard navigation support\n- 🎯 **Modern Architecture**: Clean, modular codebase with BEM methodology\n\n## 🚀 Quick Start\n\n### Online Usage (Recommended)\n\nVisit **[metajs.xi-xu.me](https://metajs.xi-xu.me)** to use the customizer directly in your browser.\n\n### Local Development\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/xixu-me/META.js-Customizer.git\n   cd META.js-Customizer\n   ```\n\n2. **Serve the files**\n\n   ```bash\n   # Using Python 3\n   python -m http.server 8000\n   \n   # Using Python 2\n   python -m SimpleHTTPServer 8000\n   \n   # Using Node.js http-server\n   npx http-server\n   \n   # Using PHP\n   php -S localhost:8000\n   \n   # Or simply open index.html in your browser\n   ```\n\n3. **Open in browser**\n   Navigate to `http://localhost:8000` (or your chosen port)\n\n## 📖 Usage Guide\n\n### Basic Workflow\n\n1. **🔍 Search for Services**: Use the search bar to find services you want to include\n2. **✅ Select Services**: Click on search results to add them to your configuration\n3. **📝 Review Selection**: Check your selected services in the main panel\n4. **⚙️ Generate Configuration**: Your META.js is automatically generated in real-time\n5. **📋 Copy or Download**: Use the action buttons to copy or download your configuration\n\n### Service Configuration Logic\n\nService icons are sourced from [xixu-me/favicons](https://github.com/xixu-me/favicons). Auto-generated configurations may require manual adjustments based on availability:\n\n#### Configuration Rules\n\n- **🚫 Icon Unavailable**: Uses specific `domain` for services requiring custom domains\n  - *Example*: `rednote` → `{ name: \"rednote\", domain: \"xiaohongshu.com\" }`\n  \n- **✅ Icon Available**: Uses only `tld` when service name matches Second-Level Domain\n  - *Example*: `github` → `{ name: \"GitHub\", tld: \"com\" }`\n\n- **🔧 Name Mismatch**: Adds `sld` when name doesn't match SLD\n  - *Example*: `xai` → `{ name: \"xAI\", sld: \"x\", tld: \"ai\" }`\n\n### Theme Options\n\nClick the theme toggle button to cycle through:\n\n- 🌙 **Auto**: Follows system preference (default)\n- ☀️ **Light**: Force light mode  \n- 🌙 **Dark**: Force dark mode\n\nThe app automatically detects system theme changes and applies them when in auto mode.\n\n## 🏗️ Architecture\n\nThe META.js Customizer follows a modern, modular architecture designed for maintainability, scalability, and performance:\n\n### 🧩 Component-Based Design\n\n#### **🎨 ThemeManager**\n\n- Handles system theme detection and manual switching\n- Supports auto, light, and dark modes with smooth transitions\n- Persists user preferences in localStorage\n- Responsive to system theme changes\n\n#### **🔍 ServicesManager**\n\n- Fetches and caches services from RFM repository via GitHub API\n- Implements debounced search for optimal performance\n- Manages service selection state with event-driven updates\n- Provides real-time filtering and search capabilities\n\n#### **⚙️ ServiceConfigGenerator**\n\n- Intelligent favicon detection from xixu-me/favicons repository\n- Smart configuration generation with domain parsing\n- Handles special cases and complex domain patterns\n- Caches favicon availability for performance optimization\n\n#### **📤 OutputManager**\n\n- Real-time META.js code generation and preview\n- Clipboard integration with comprehensive error handling\n- File download functionality with progress feedback\n- Template management and dynamic content substitution\n\n#### **🎯 MetaJSCustomizer (Main Controller)**\n\n- App lifecycle management and component orchestration\n- Global error handling with user-friendly feedback\n- Performance monitoring and optimization\n- Loading state management and initialization coordination\n\n### 🚀 Modern JavaScript Features\n\n- **ES6+ Modules**: Clean import/export system for better organization\n- **Async/Await**: Modern asynchronous programming patterns\n- **Error Boundaries**: Comprehensive error handling with user feedback\n- **Event-Driven Architecture**: Loose coupling between components\n- **Performance Optimization**: Debouncing, caching, and efficient DOM operations\n\n### 🎨 Enhanced UI/UX\n\n- **Glassmorphism Design**: Modern glass effects with backdrop blur\n- **Smooth Animations**: CSS-based transitions and micro-interactions\n- **Responsive Layout**: Mobile-first design that adapts to all screen sizes\n- **Accessibility First**: ARIA labels, semantic HTML, and keyboard navigation\n- **Loading States**: Clear feedback during async operations\n\n### 💻 Technology Stack\n\n- **Frontend**: Modern HTML5, CSS3, JavaScript (ES2020+)\n- **Architecture**: Component-based modular design with ES6 modules\n- **Styling**: CSS Custom Properties, CSS Grid/Flexbox, Glassmorphism effects\n- **Methodology**: BEM (Block Element Modifier) for CSS organization\n- **Icons**: Font Awesome 6.5.1 for consistent iconography\n- **API Integration**: GitHub REST API for dynamic service fetching\n- **Performance**: Debounced search, caching strategies, optimized DOM operations\n- **Accessibility**: WCAG 2.1 AA compliant with comprehensive ARIA support\n- **Build**: Zero-build architecture - runs directly in modern browsers\n\n## 🎨 Design Features\n\n### Glassmorphism UI\n\n- **Translucent cards** with backdrop blur effects\n- **Smooth animations** and micro-interactions\n- **Modern button interactions** with liquid shine effects\n- **Depth and hierarchy** through layered glass elements\n\n### Responsive Design\n\n- **Mobile-first approach** with progressive enhancement\n- **Adaptive layouts** for all screen sizes (320px+)\n- **Touch-friendly interface** elements with proper hit targets\n- **Optimized typography** scaling across devices\n\n### Accessibility Features\n\n- **Semantic HTML structure** for screen readers\n- **ARIA labels and roles** for enhanced accessibility\n- **Keyboard navigation support** for all interactive elements\n- **High contrast mode support** for visual accessibility\n- **Reduced motion support** for users with vestibular disorders\n- **Focus management** with visible focus indicators\n\n### Performance Optimizations\n\n- **Minimal dependencies** - vanilla JavaScript only\n- **CSS custom properties** for efficient theming\n- **Debounced search** to reduce API calls\n- **Lazy loading** of non-critical resources\n- **Optimized animations** with `transform` and `opacity`\n\n## 📄 License\n\nThis project is licensed under the **GNU General Public License v3.0** - see the [LICENSE](LICENSE) file for details.\n\n## 🤝 Related Projects\n\n- **[xixu-me/META](https://github.com/xixu-me/META)** - The main META.js repository\n- **[xixu-me/RFM](https://github.com/xixu-me/RFM)** - Rulesets\n- **[xixu-me/favicons](https://github.com/xixu-me/favicons)** - Service icons repository\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxixu-me%2Fmeta.js-customizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxixu-me%2Fmeta.js-customizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxixu-me%2Fmeta.js-customizer/lists"}