graph LR
    A[Widget Components] --> B[docs/WIDGET_DOCUMENTATION.md]
    B --> C[npm run docs:sync-wiki-local]
    C --> D[wiki/ folder]
    D --> E[Git Push]
    E --> F[GitHub Wiki]

1. 📄 Source Documentation - Widget properties and descriptions are maintained in docs/WIDGET_DOCUMENTATION.md
2. 🔧 Local Generation - Run npm run docs:sync-wiki-local to generate individual wiki pages
3. 📁 Wiki Folder - Generated markdown files are saved to the local wiki/ folder
4. 🔄 Git Sync - The wiki/ folder is a Git submodule linked to the GitHub Wiki repository
5. 🌐 Publish - Commit and push changes to automatically update the live GitHub Wiki

# 1️⃣ Clone the wiki repository
cd wiki
git clone https://github.com/Ruandv/Quantum-Tab.wiki.git .

# 2️⃣ Generate wiki pages from documentation
cd ..
npm run docs:sync-wiki-local

# 3️⃣ Review generated files
cd wiki
ls -la  # See all generated .md files

# 4️⃣ Commit and push changes
git add .
git commit -m "docs: update widget documentation"
git push origin master

The documentation generator automatically creates:

• Home.md - Main wiki landing page with widget index
• [widget-name].md - Individual pages for each widget
• timezones.md - Time zone reference for LiveClock widget

When creating a new widget, add its documentation to docs/WIDGET_DOCUMENTATION.md:

### YourNewWidget
- **Description**: Brief description of what the widget does
- **Usage**: How and when to use this widget

#### Properties
- **propertyName**: Description of the property and its purpose
- **anotherProperty**: Another property description

Then regenerate the wiki:

npm run docs:sync-wiki-local
cd wiki
git add .
git commit -m "docs: add YourNewWidget documentation"
git push

The repository includes a GitHub Action workflow (.github/workflows/sync-docs-to-wiki.yml) that automatically:

1. Triggers on push to the main branch when docs/WIDGET_DOCUMENTATION.md changes
2. Generates wiki pages using npm run docs:sync-wiki
3. Publishes to Wiki using the official GitHub Wiki Action
4. Updates live docs without manual intervention

npm run docs:sync-wiki

This command generates wiki files in wiki/ folder for CI/CD deployment.

Perfect for global teams and timezone management

✨ Features:

• 🌍 Multiple timezone support with auto-detection
• 📅 Customizable date and time formats
• 🔄 Real-time updates every second
• 📏 Resizable widget dimensions
• 🎨 Beautiful glass-morphism design

Multiple Instances: ✅ Yes (track multiple timezones)

One-click access to your favorite websites

✨ Features:

• 🎯 Customizable emoji icons and labels
• 🚀 Direct website navigation
• 🎛️ Drag-and-drop management
• ➕ Unlimited button creation
• 🔗 Smart URL validation

Multiple Instances: ✅ Yes (create themed button groups)
Default Buttons: GitHub, MyBroadband

Personalize your dashboard with custom backgrounds

✨ Features:

• 📁 Upload custom images (PNG, JPG, JPEG, GIF, WebP)
• 👁️ Live preview before applying
• 🔄 Restore default gradient anytime
• 🗑️ Remove backgrounds with one click
• 📊 5MB file size limit

Multiple Instances: ❌ No (single background manager)

Monitor your repositories and pull requests

✨ Features:

• 📊 Real-time pull request monitoring
• 🔐 PAT token authentication for private repos
• 🏷️ PR status indicators (Open, Merged, Closed, Draft)
• 🔄 Auto-refresh pull request data
• 📈 Repository information display

Multiple Instances: ✅ Yes (monitor multiple repositories)
Requirements: GitHub Personal Access Token for private repos

Track your browsing habits and favorite sites

✨ Features:

• 📈 Automatic visit counting
• 🌐 Favicon display for visual identification
• 📅 Last visited timestamps
• ⚙️ Customizable website list
• 📊 Visit statistics and trends

Multiple Instances: ❌ No (single counter tracks all sites)
Default Sites: Google, GitHub, MyBroadband

Multi-language interface support

✨ Features:

• 🌍 Support for multiple languages
• ⚡ Instant language switching (no restart needed)
• 💾 Persistent locale preferences in Chrome storage
• 🏳️ Visual language indicators with flag emojis
• 🔒 Read-only display when widget is locked

Multiple Instances: ❌ No (single language settings)
Available Languages: English , Afrikaans , Spanish

Track your agile sprint cycles with automatic calculations

✨ Features:

• 📅 Configure sprint start date, length, and current sprint number
• 🔄 Automatic sprint calculation based on elapsed days
• 📊 Display current sprint number with start/end dates
• ⏰ Live updates at midnight each day
• 🎯 Configurable sprint length (default: 14 days)
• 📈 Perfect for agile teams and project management

Multiple Instances: ✅ Yes (track multiple sprint schedules)
Configuration: Set once when adding widget
Calculation: (Today - StartDate) / SprintLength + BaseSprint

• Modern React-based UI with glass-morphism design
• Drag-and-drop widget management system
• Full internationalization (i18n) support
• Responsive design with CSS modules
• Real-time data synchronization

• Extension lifecycle event handling
• Message passing between components
• Badge updates and extension state management
• Website visit tracking for analytics
• Persistent data management

• Seamless page interaction capabilities
• Website visit detection and counting
• Communication bridge between web pages and extension
• Privacy-focused data collection