metajs-customizer/README.md

META.js Customizer

🎯 Overview

META.js Customizer is an intuitive web app that allows users to easily create custom META.js of xixu-me/META. It provides a visual interface to select and configure service rulesets from xixu-me/RFM repository.

✨ Key Features

• 🔍 Smart Service Search: Instantly search and filter through all available services
• 🎨 Modern Glass UI: Beautiful, responsive design with dark/light theme support
• 🌙 Intelligent Theming: Auto-detects system theme with manual override options
• 📱 Mobile Responsive: Works seamlessly on all device sizes
• 🚀 Real-time Generation: Instantly generates META.js as you select services
• 📋 One-click Copy: Copy generated configuration to clipboard
• 💾 Download Support: Download your configuration as META.js file

🚀 Quick Start

Online Usage (Recommended)

Visit metajs.xi-xu.me to use the customizer directly in your browser.

Local Development

1. Clone the repository

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

2. Serve the files

   # Using Python
   python -m http.server 8000
   
   # Using Node.js http-server
   npx http-server
   
   # Or simply open index.html in your browser
   

3. Open in browser Navigate to http://localhost:8000 (or your chosen port)

📖 Usage

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
5. Copy or Download: Use the action buttons to copy or download your configuration

Service Configuration

Service icons are sourced from 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 does not match SLD: Adds 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

🏗️ Architecture

Key Components

• Service Fetcher: Retrieves available services from RFM repository via GitHub API
• Search Engine: Real-time filtering and matching of services
• Configuration Generator: Creates META.js with proper formatting
• Theme Manager: Handles theme detection, switching, and persistence
• UI Controller: Manages user interactions and visual feedback

Technology Stack

• Frontend: Vanilla HTML5, CSS3, JavaScript (ES6+)
• Styling: CSS Custom Properties, CSS Grid/Flexbox, Backdrop Filter
• Icons: Font Awesome 6
• API: GitHub REST API for fetching service data

🎨 Design Features

Glass Morphism UI

• Translucent cards with backdrop blur effects
• Smooth animations and transitions
• Modern button interactions with liquid shine effects

Responsive Design

• Mobile-first approach
• Adaptive layouts for all screen sizes
• Touch-friendly interface elements

Accessibility

• Semantic HTML structure
• Keyboard navigation support
• Screen reader friendly labels

📄 License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.