Add static configuration page using Hono JSX/TSX

[Copilot]

🎯 Overview

Implements a static web-based configuration page for generating Clash subscription URLs with customizable search parameters. Users can now visually configure their subscription settings without manually constructing URLs or encoding parameters.

Built with modern stack: Hono JSX/TSX components for type-safe, component-based development.

🚀 Changes

Configuration Page Component (src/components/ConfigPage.tsx)

• Created a type-safe TSX component using Hono's JSX runtime
• Provides an intuitive form interface for all subscription parameters
• Automatically generates properly formatted URLs with base64-encoded subscription links
• Includes copy-to-clipboard functionality for easy URL sharing
• Modern, responsive design with collapsible advanced options

Route Handler (src/index.tsx)

• Added GET / route to serve the configuration page using JSX rendering
• Renamed from index.ts to index.tsx for JSX support
• Uses Hono's c.html() with TSX component
• Maintains backward compatibility with all existing API endpoints

Documentation (README.md)

• Updated Quick Start section to highlight the visual configuration method
• Added new feature to the features list
• Added technical details about TSX architecture

Dependencies (package.json)

• Updated entry point references to .tsx
• No additional build tools required - uses Wrangler for development and deployment

✨ Features

The configuration page supports all subscription parameters:

• Subscription URL - Required field with validation
• Convert toggle - Enable/disable configuration optimization
• Regions filtering - Comma-separated region codes (e.g., HK,US,JP)
• Rate limiting - Maximum billing rate filter
• Filter regex - Node name filtering pattern
• DNS nameserver - Strategy selection (strict/direct)
• DNS rules - Resolution strategy (remote/always-resolve)
• QUIC toggle - Disable QUIC protocol option
• Log level - Debug level selection (debug/info/warning/error/silent)

UI Highlights

• 🎨 Modern gradient design with smooth animations
• 📱 Fully responsive for mobile and desktop
• 🔧 Collapsible advanced options section
• 📋 One-click copy to clipboard
• ✅ Real-time form validation
• ⚡ Zero external dependencies

Technical Highlights

• 🔒 Type-safe: Full TypeScript type checking for JSX
• 🧩 Component-based: Clean, maintainable architecture
• 🛠️ Minimal Stack: Hono JSX without additional build tools
• 📦 Cloudflare Workers Ready: Direct deployment without extra configuration

📸 Screenshots

Main Interface (TSX-rendered)

Advanced Options

Generated URL

🧪 Testing

• ✅ TypeScript compilation verified
• ✅ Tested with Wrangler dev server
• ✅ URL generation and base64 encoding validated
• ✅ All form fields and interactions tested
• ✅ Responsive design verified across viewports
• ✅ JSX rendering working correctly

📝 Example Usage

1. Navigate to https://clash.jctaoo.site/ (or your deployed instance)
2. Enter your subscription URL
3. Configure optional parameters in the advanced section
4. Click "生成订阅链接" to generate the URL
5. Copy and use in your Clash client

The generated URL will be in the format:

https://clash.jctaoo.site/sub?sub=<base64-encoded-url>&convert=true&regions=HK,US,JP&quic=true

🛠️ Development

# Development with Wrangler (Cloudflare Workers simulation)
bun run dev

# Development with Bun runtime
bun run dev:bun

🔗 Related

Resolves the requirement: "生成一个静态页面，用于配置 search params"

Implements feedback: Use Hono's render API with TSX

Original prompt

生成一个静态页面，用于配置 search params

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[jctaoo]

查询 hono 文档，使用 hono 的render api，并使用 tsx，你可以同时配置 vite 等 @copilot

[Copilot]

查询 hono 文档，使用 hono 的render api，并使用 tsx，你可以同时配置 vite 等 @copilot

Refactored to use Hono JSX/TSX with Vite dev server as requested. The configuration page is now implemented as a type-safe TSX component with HMR support.

Changes:

• Created src/components/ConfigPage.tsx using Hono JSX
• Added Vite configuration with @hono/vite-dev-server
• Renamed entry point to src/index.tsx
• Added dev:vite script for development with HMR
• Updated all configuration files for TSX support

Screenshot:

Commit: Will be shown after push

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• sparrow.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/ClashConfig/ClashConfig/node_modules/wrangler/wrangler-dist/cli.js dev --local --port 8787 (dns block)
• workers.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/ClashConfig/ClashConfig/node_modules/wrangler/wrangler-dist/cli.js dev --local --port 8787 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[jctaoo]

It seems we don't need anything related to Vite; remove Vite @copilot

[Copilot]

It seems we don't need anything related to Vite; remove Vite @copilot

Removed Vite and @hono/vite-dev-server dependencies. The configuration page now uses Hono JSX/TSX directly without any additional build tools.

Changes:

• Removed vite.config.ts
• Removed vite and @hono/vite-dev-server from devDependencies
• Removed dev:vite script from package.json
• Updated README to remove Vite references
• Updated bun.lock (2 packages removed)

The application still works perfectly with just Hono JSX and Wrangler for development.

Commit: (will show after push)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• sparrow.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/ClashConfig/ClashConfig/node_modules/wrangler/wrangler-dist/cli.js dev --local --port 8787 (dns block)
• workers.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/ClashConfig/ClashConfig/node_modules/wrangler/wrangler-dist/cli.js dev --local --port 8787 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)