Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/xixu-me/meta.js-customizer

An intuitive web app that allows users to easily create custom META.js of xixu-me/META
https://github.com/xixu-me/meta.js-customizer

custom customizer meta metajs web webapp

Last synced: 11 months ago
JSON representation

An intuitive web app that allows users to easily create custom META.js of xixu-me/META

Awesome Lists containing this project

README 

          
# META.js Customizer



## 🎯 Overview



META.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.



### ✨ Key Features



- 🔍 **Smart Service Search**: Instantly search and filter through all available services

- 🎨 **Modern Glass UI**: Beautiful, responsive design with glassmorphism effects

- 🌙 **Intelligent Theming**: Auto-detects system theme with manual override options

- 📱 **Mobile Responsive**: Seamlessly adapts to all device sizes

- 🚀 **Real-time Generation**: Instantly generates META.js as you select services

- 📋 **One-click Copy**: Copy generated configuration to clipboard with visual feedback

- 💾 **Download Support**: Download your configuration as META.js file

- ♿ **Accessibility First**: WCAG compliant with full keyboard navigation support

- 🎯 **Modern Architecture**: Clean, modular codebase with BEM methodology



## 🚀 Quick Start



### Online Usage (Recommended)



Visit **[metajs.xi-xu.me](https://metajs.xi-xu.me)** to use the customizer directly in your browser.



### Local Development



1. **Clone the repository**



   ```bash

   git clone https://github.com/xixu-me/META.js-Customizer.git

   cd META.js-Customizer

   ```



2. **Serve the files**



   ```bash

   # Using Python 3

   python -m http.server 8000

   

   # Using Python 2

   python -m SimpleHTTPServer 8000

   

   # Using Node.js http-server

   npx http-server

   

   # Using PHP

   php -S localhost:8000

   

   # Or simply open index.html in your browser

   ```



3. **Open in browser**

   Navigate to `http://localhost:8000` (or your chosen port)



## 📖 Usage Guide



### Basic Workflow



1. **🔍 Search for Services**: Use the search bar to find services you want to include

2. **✅ Select Services**: Click on search results to add them to your configuration

3. **📝 Review Selection**: Check your selected services in the main panel

4. **⚙️ Generate Configuration**: Your META.js is automatically generated in real-time

5. **📋 Copy or Download**: Use the action buttons to copy or download your configuration



### Service Configuration Logic



Service icons are sourced from [xixu-me/favicons](https://github.com/xixu-me/favicons). Auto-generated configurations may require manual adjustments based on availability:



#### Configuration Rules



- **🚫 Icon Unavailable**: Uses specific `domain` for services requiring custom domains

  - *Example*: `rednote` → `{ name: "rednote", domain: "xiaohongshu.com" }`

  

- **✅ Icon Available**: Uses only `tld` when service name matches Second-Level Domain

  - *Example*: `github` → `{ name: "GitHub", tld: "com" }`



- **🔧 Name Mismatch**: Adds `sld` when name doesn't match SLD

  - *Example*: `xai` → `{ name: "xAI", sld: "x", tld: "ai" }`



### Theme Options



Click the theme toggle button to cycle through:



- 🌙 **Auto**: Follows system preference (default)

- ☀️ **Light**: Force light mode  

- 🌙 **Dark**: Force dark mode



The app automatically detects system theme changes and applies them when in auto mode.



## 🏗️ Architecture



The META.js Customizer follows a modern, modular architecture designed for maintainability, scalability, and performance:



### 🧩 Component-Based Design



#### **🎨 ThemeManager**



- Handles system theme detection and manual switching

- Supports auto, light, and dark modes with smooth transitions

- Persists user preferences in localStorage

- Responsive to system theme changes



#### **🔍 ServicesManager**



- Fetches and caches services from RFM repository via GitHub API

- Implements debounced search for optimal performance

- Manages service selection state with event-driven updates

- Provides real-time filtering and search capabilities



#### **⚙️ ServiceConfigGenerator**



- Intelligent favicon detection from xixu-me/favicons repository

- Smart configuration generation with domain parsing

- Handles special cases and complex domain patterns

- Caches favicon availability for performance optimization



#### **📤 OutputManager**



- Real-time META.js code generation and preview

- Clipboard integration with comprehensive error handling

- File download functionality with progress feedback

- Template management and dynamic content substitution



#### **🎯 MetaJSCustomizer (Main Controller)**



- App lifecycle management and component orchestration

- Global error handling with user-friendly feedback

- Performance monitoring and optimization

- Loading state management and initialization coordination



### 🚀 Modern JavaScript Features



- **ES6+ Modules**: Clean import/export system for better organization

- **Async/Await**: Modern asynchronous programming patterns

- **Error Boundaries**: Comprehensive error handling with user feedback

- **Event-Driven Architecture**: Loose coupling between components

- **Performance Optimization**: Debouncing, caching, and efficient DOM operations



### 🎨 Enhanced UI/UX



- **Glassmorphism Design**: Modern glass effects with backdrop blur

- **Smooth Animations**: CSS-based transitions and micro-interactions

- **Responsive Layout**: Mobile-first design that adapts to all screen sizes

- **Accessibility First**: ARIA labels, semantic HTML, and keyboard navigation

- **Loading States**: Clear feedback during async operations



### 💻 Technology Stack



- **Frontend**: Modern HTML5, CSS3, JavaScript (ES2020+)

- **Architecture**: Component-based modular design with ES6 modules

- **Styling**: CSS Custom Properties, CSS Grid/Flexbox, Glassmorphism effects

- **Methodology**: BEM (Block Element Modifier) for CSS organization

- **Icons**: Font Awesome 6.5.1 for consistent iconography

- **API Integration**: GitHub REST API for dynamic service fetching

- **Performance**: Debounced search, caching strategies, optimized DOM operations

- **Accessibility**: WCAG 2.1 AA compliant with comprehensive ARIA support

- **Build**: Zero-build architecture - runs directly in modern browsers



## 🎨 Design Features



### Glassmorphism UI



- **Translucent cards** with backdrop blur effects

- **Smooth animations** and micro-interactions

- **Modern button interactions** with liquid shine effects

- **Depth and hierarchy** through layered glass elements



### Responsive Design



- **Mobile-first approach** with progressive enhancement

- **Adaptive layouts** for all screen sizes (320px+)

- **Touch-friendly interface** elements with proper hit targets

- **Optimized typography** scaling across devices



### Accessibility Features



- **Semantic HTML structure** for screen readers

- **ARIA labels and roles** for enhanced accessibility

- **Keyboard navigation support** for all interactive elements

- **High contrast mode support** for visual accessibility

- **Reduced motion support** for users with vestibular disorders

- **Focus management** with visible focus indicators



### Performance Optimizations



- **Minimal dependencies** - vanilla JavaScript only

- **CSS custom properties** for efficient theming

- **Debounced search** to reduce API calls

- **Lazy loading** of non-critical resources

- **Optimized animations** with `transform` and `opacity`



## 📄 License



This project is licensed under the **GNU General Public License v3.0** - see the [LICENSE](LICENSE) file for details.



## 🤝 Related Projects



- **[xixu-me/META](https://github.com/xixu-me/META)** - The main META.js repository

- **[xixu-me/RFM](https://github.com/xixu-me/RFM)** - Rulesets

- **[xixu-me/favicons](https://github.com/xixu-me/favicons)** - Service icons repository