Create Vue3 + Vite module for standalone DevChart functionality

[Copilot]

This PR implements a complete Vue3 + Vite module that provides all the functionality of the Python Flask DevChart application as a standalone, reusable client-side component.

🚀 What's New

Complete Vue3 + Vite Module

• Location: vue-module/ directory
• Package: Standalone npm module with TypeScript support
• Build: ES and UMD bundles for flexible distribution

Core Features Ported

• ✅ GitHub contribution data fetching with web scraping logic
• ✅ LeetCode submission data fetching via GraphQL API
• ✅ SVG heatmap chart generation using D3.js (replaces matplotlib)
• ✅ Light/dark theme support matching original design
• ✅ Multiple output formats (SVG, JSON, both)

📦 Module Structure

vue-module/
├── src/
│   ├── components/DevChart.vue     # Main Vue component
│   ├── services/                   # Data fetching services
│   │   ├── githubService.ts        # GitHub contributions
│   │   └── leetcodeService.ts      # LeetCode submissions
│   ├── utils/                      # Utilities and chart generation
│   │   ├── chartGenerator.ts       # D3.js heatmap generation
│   │   └── textUtils.ts           # Text processing utilities
│   ├── types/index.ts             # TypeScript definitions
│   └── index.ts                   # Module entry point
├── examples/                      # Usage examples
├── dist/                         # Built library files
└── README.md                     # Comprehensive documentation

🎯 Usage Examples

Vue Component Usage

<template>
  <DevChart 
    username="your-username"
    platform="github"
    theme="dark"
    output-format="svg"
    :width="900"
    :height="180"
  />
</template>

<script setup>
import { DevChart } from 'devchart-vue'
</script>

Direct API Usage

import { getGitHubContribution, generateHeatmap } from 'devchart-vue'

// Fetch data
const data = await getGitHubContribution('username')

// Generate chart
const svg = generateHeatmap(
  data.data, 
  data.username, 
  data.summary,
  { theme: 'dark', width: 900, height: 180 }
)

Vue Plugin Usage

import { createApp } from 'vue'
import DevChart from 'devchart-vue'

const app = createApp(App)
app.use(DevChart)  // Register globally

🔧 Technical Implementation

Data Fetching

• GitHub: DOM parsing of contribution calendar (same logic as Python version)
• LeetCode: GraphQL API calls with proper error handling
• CORS Handling: Documented solutions for GitHub data in browser environments

Chart Generation

• D3.js SVG rendering replacing matplotlib/July library
• GitHub-style color schemes for light and dark themes
• Responsive design with configurable dimensions
• Interactive tooltips showing contribution counts

Component System

• Reactive props for all configuration options
• Loading and error states with user-friendly messages
• Theme switching with CSS custom properties
• Output format flexibility (SVG display, JSON data, or both)

📚 Documentation & Testing

• Comprehensive README with API reference and examples
• TypeScript definitions for all components and utilities
• Unit tests using Vitest for utility functions
• Standalone HTML example demonstrating usage
• Development server with hot reload for testing

⚠️ Known Considerations

CORS Limitations

GitHub data fetching may be blocked by CORS policies in browser environments. The documentation provides several solutions:

• Server-side proxy implementation
• CORS proxy services (development only)
• GitHub API with authentication

LeetCode data fetching works directly as their GraphQL API supports CORS.

🎨 Features Comparison

Feature	Python Flask	Vue3 Module
GitHub Data	✅ Server-side scraping	✅ Client-side scraping*
LeetCode Data	✅ GraphQL API	✅ GraphQL API
Chart Generation	✅ Matplotlib + July	✅ D3.js SVG
Themes	✅ Light/Dark	✅ Light/Dark
Output Formats	✅ SVG/JSON	✅ SVG/JSON
Deployment	✅ Flask server	✅ Client-side component

*With CORS considerations documented

🚀 Getting Started

cd vue-module
npm install
npm run dev          # Development server
npm run build-lib    # Build library
npm test            # Run tests

The module is now ready for distribution as an npm package and can be integrated into any Vue 3 application or used as a standalone component in static websites.

Fixes #2.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.