claude-code-templates 1.21.11 → 1.21.13

package/docs/js/trending.js

@@ -0,0 +1,752 @@
+/**
+ * Trending Page JavaScript
+ * GitHub-inspired trending components page for Claude Code Templates
+ */
+
+class TrendingPage {
+    constructor() {
+        this.currentType = 'agents';
+        this.currentRange = 'month'; // Changed from 'today' to 'month' to show real data
+        this.data = null;
+
+        this.init();
+    }
+
+    async init() {
+        try {
+            await this.loadData();
+            this.setupEventListeners();
+            this.renderHeroStats();
+            this.renderPopularItems();
+            this.renderChart();
+            this.renderTrendingItems();
+        } catch (error) {
+            console.error('Failed to initialize trending page:', error);
+            this.showError('Failed to load trending data');
+        }
+    }
+
+    async loadData() {
+        try {
+            const response = await fetch('trending-data.json');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            this.data = await response.json();
+        } catch (error) {
+            console.error('Error loading trending data:', error);
+            throw error;
+        }
+    }
+
+    setupEventListeners() {
+        // Component tabs
+        document.querySelectorAll('.component-tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                // Remove active class from all tabs
+                document.querySelectorAll('.component-tab').forEach(t => t.classList.remove('active'));
+
+                // Add active class to clicked tab
+                e.target.classList.add('active');
+
+                // Update current type
+                this.currentType = e.target.dataset.type;
+                this.renderTrendingItems();
+            });
+        });
+
+        // Date range filter
+        const dateRange = document.getElementById('date-range');
+        if (dateRange) {
+            dateRange.addEventListener('change', (e) => {
+                this.currentRange = e.target.value;
+                this.renderTrendingItems();
+            });
+        }
+    }
+
+    renderHeroStats() {
+        const container = document.getElementById('hero-stats');
+        if (!container || !this.data || !this.data.globalStats) {
+            return;
+        }
+
+        // Use real global statistics from the JSON
+        const globalStats = this.data.globalStats;
+
+        const stats = [
+            {
+                number: globalStats.totalComponents.toLocaleString(),
+                label: 'Unique Components',
+                change: 'Across 6 categories',
+                positive: true
+            },
+            {
+                number: globalStats.totalDownloads.toLocaleString(),
+                label: 'Total Downloads',
+                change: 'All time downloads',
+                positive: true
+            },
+            {
+                number: globalStats.totalCountries.toLocaleString(),
+                label: 'Countries',
+                change: 'Global reach',
+                positive: true
+            }
+        ];
+
+        container.innerHTML = stats.map(stat => `
+            <div class="hero-stat-item">
+                <div class="hero-stat-number">${stat.number}</div>
+                <div class="hero-stat-label">${stat.label}</div>
+                <div class="hero-stat-change ${stat.positive ? '' : 'negative'}">
+                    <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="${stat.positive ? 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z' : 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM3.25 8a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8A.75.75 0 0 1 3.25 8z'}"/>
+                    </svg>
+                    ${stat.change}
+                </div>
+            </div>
+        `).join('');
+    }
+
+    renderPopularItems() {
+        const container = document.getElementById('popular-categories');
+        if (!container || !this.data || !this.data.trending) {
+            return;
+        }
+
+        // Define categories to show and their display info
+        const categories = [
+            { key: 'agents', title: 'Agents', icon: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z' },
+            { key: 'commands', title: 'Commands', icon: 'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM2.5 8a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0z' },
+            { key: 'mcps', title: 'MCPs', icon: 'M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c0 .026.009.051.025.072L2.5 7a.5.5 0 0 1 0 .708L1.025 9.133a.149.149 0 0 0-.025.072V10.5A1.5 1.5 0 0 0 2.5 12h2.793a.149.149 0 0 0 .072-.025L7 10.5a.5.5 0 0 1 .708 0l1.625 1.475c.021.016.046.025.072.025H12.5A1.5 1.5 0 0 0 14 10.5v-.793a.149.149 0 0 0-.025-.072L12.5 8a.5.5 0 0 1 0-.708l1.475-1.625a.149.149 0 0 0 .025-.072V4.5A1.5 1.5 0 0 0 12.5 3H9.707a.149.149 0 0 0-.072.025L8 4.5a.5.5 0 0 1-.708 0L5.867 3.025A.149.149 0 0 0 5.793 3H2.5z' },
+            { key: 'settings', title: 'Settings', icon: 'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' },
+            { key: 'hooks', title: 'Hooks', icon: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z' },
+            { key: 'templates', title: 'Templates', icon: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75zM7.25 4a.75.75 0 0 1 1.5 0v4.25H12a.75.75 0 0 1 0 1.5H8.75V12a.75.75 0 0 1-1.5 0V9.75H4a.75.75 0 0 1 0-1.5h3.25V4z' }
+        ];
+
+        container.innerHTML = '';
+
+        categories.forEach(category => {
+            const categoryData = this.data.trending[category.key];
+            if (!categoryData || !Array.isArray(categoryData) || categoryData.length === 0) {
+                return;
+            }
+
+            // Sort by monthly downloads and take only the top 1
+            const topItem = categoryData
+                .sort((a, b) => (b.downloadsMonth || 0) - (a.downloadsMonth || 0))[0];
+
+            const itemElement = this.createPopularItemCard(category, topItem);
+            container.appendChild(itemElement);
+        });
+    }
+
+    createPopularItemCard(category, item) {
+        const itemElement = document.createElement('div');
+        itemElement.className = 'popular-item';
+
+        const totalDownloads = item.downloadsTotal || 0;
+
+        itemElement.innerHTML = `
+            <div class="popular-item-header">
+                <div class="popular-item-info">
+                    <div class="popular-item-type">${category.title}</div>
+                    <h4 class="popular-item-name">${item.name}</h4>
+                </div>
+            </div>
+
+            <div class="popular-total-downloads">
+                <span class="total-number">${totalDownloads.toLocaleString()}</span>
+                <span class="total-label">downloads</span>
+            </div>
+
+            <div class="popular-stats">
+                <button class="popular-install-btn" onclick="showInstallModal('${item.id || item.name}')">
+                    <svg class="popular-install-icon" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                    </svg>
+                    Get
+                </button>
+            </div>
+        `;
+
+        return itemElement;
+    }
+
+    renderChart() {
+        if (!this.data || !this.data.chartData) {
+            console.warn('No chart data available');
+            return;
+        }
+
+        const ctx = document.getElementById('downloadsChart');
+        if (!ctx) {
+            console.warn('Chart canvas not found');
+            return;
+        }
+
+        // Chart colors matching terminal theme
+        const colors = {
+            commands: '#10b981',    // emerald (green)
+            agents: '#f59e0b',      // amber (yellow)
+            mcps: '#3b82f6',        // blue
+            settings: '#8b5cf6',    // violet
+            hooks: '#f97316',       // orange
+            templates: '#06b6d4'    // cyan
+        };
+
+        // Define the desired order for the legend (agents first - most popular)
+        const categoryOrder = ['agents', 'commands', 'mcps', 'settings', 'hooks', 'templates'];
+
+        // Prepare datasets in the specified order
+        const datasets = categoryOrder
+            .filter(category => this.data.chartData.series[category]) // Only include categories that exist
+            .map(category => ({
+                label: category.charAt(0).toUpperCase() + category.slice(1),
+                data: this.data.chartData.series[category],
+                borderColor: colors[category] || '#6b7280',
+                backgroundColor: (colors[category] || '#6b7280') + '20',
+                borderWidth: 2,
+                fill: false,
+                tension: 0.1,
+                pointRadius: 0,
+                pointHoverRadius: 4,
+                pointBackgroundColor: colors[category] || '#6b7280',
+                pointBorderColor: '#1f2937',
+                pointBorderWidth: 2
+            }));
+
+        // Create chart
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: this.data.chartData.dates.map(date => {
+                    return new Date(date).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric'
+                    });
+                }),
+                datasets: datasets
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: '#d1d5db',
+                            usePointStyle: true,
+                            pointStyle: 'circle',
+                            padding: 20,
+                            font: {
+                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
+                                size: 11
+                            }
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: '#1f2937',
+                        titleColor: '#f3f4f6',
+                        bodyColor: '#d1d5db',
+                        borderColor: '#374151',
+                        borderWidth: 1,
+                        titleFont: {
+                            family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
+                        },
+                        bodyFont: {
+                            family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
+                        },
+                        filter: function(tooltipItem, data) {
+                            return true; // Show all items
+                        },
+                        itemSort: function(a, b) {
+                            // Sort tooltip items by download count (highest to lowest)
+                            return b.parsed.y - a.parsed.y;
+                        },
+                        callbacks: {
+                            title: function(context) {
+                                return `Date: ${context[0].label}`;
+                            },
+                            label: function(context) {
+                                return `${context.dataset.label}: ${context.parsed.y.toLocaleString()} downloads`;
+                            },
+                            labelColor: function(context) {
+                                // Use the same colors as defined for the chart lines
+                                const category = context.dataset.label.toLowerCase();
+                                const color = colors[category] || '#6b7280';
+                                return {
+                                    borderColor: color,
+                                    backgroundColor: color
+                                };
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: '#374151',
+                            borderColor: '#4b5563'
+                        },
+                        ticks: {
+                            color: '#9ca3af',
+                            font: {
+                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
+                                size: 10
+                            }
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: '#374151',
+                            borderColor: '#4b5563'
+                        },
+                        ticks: {
+                            color: '#9ca3af',
+                            font: {
+                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
+                                size: 10
+                            },
+                            callback: function(value) {
+                                return value.toLocaleString();
+                            }
+                        }
+                    }
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                }
+            }
+        });
+    }
+
+    renderTrendingItems() {
+        const container = document.getElementById('trending-list');
+        const items = this.getFilteredItems();
+
+        if (items.length === 0) {
+            container.innerHTML = this.getEmptyState();
+            return;
+        }
+
+        container.innerHTML = '';
+        items.forEach((item, index) => {
+            const itemElement = this.createTrendingItem(item, index + 1);
+            container.appendChild(itemElement);
+        });
+    }
+
+    getFilteredItems() {
+        let allItems = [];
+        
+        if (this.currentType === '') {
+            // If no filter, get items from "all" category if it exists, 
+            // otherwise combine all categories
+            if (this.data.trending.all) {
+                allItems = this.data.trending.all;
+            } else {
+                Object.values(this.data.trending).forEach(categoryItems => {
+                    if (Array.isArray(categoryItems)) {
+                        allItems = allItems.concat(categoryItems);
+                    }
+                });
+            }
+        } else {
+            // Get items from selected category
+            allItems = this.data.trending[this.currentType] || [];
+        }
+        
+        // Sort by the current date range downloads (highest to lowest)
+        allItems.sort((a, b) => {
+            const aDownloads = this.getDownloadsForRange(a);
+            const bDownloads = this.getDownloadsForRange(b);
+            return bDownloads - aDownloads;
+        });
+        
+        // For "all" categories, limit to top 10
+        if (this.currentType === '') {
+            allItems = allItems.slice(0, 10);
+        }
+        
+        return allItems;
+    }
+
+    createTrendingItem(item, rank) {
+        const itemElement = document.createElement('div');
+        itemElement.className = 'trending-item';
+        
+        const category = item.category || 'general';
+        const itemType = this.getItemType(item);
+        const componentType = this.getComponentTypeLabel(item);
+        const downloads = this.getDownloadsForRange(item);
+        
+        itemElement.innerHTML = `
+            <div class="trending-rank">
+                <span class="rank-number">#${rank}</span>
+            </div>
+            
+            <div class="trending-content">
+                <div class="trending-header">
+                    <div class="trending-title">
+                        <svg class="trending-icon" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="${this.getIconPath(itemType)}"/>
+                        </svg>
+                        <h3 class="trending-name">${item.name}</h3>
+                        <span class="trending-category">${category}</span>
+                    </div>
+                    <button class="install-button" onclick="showInstallModal('${item.id || item.name}')">
+                        <svg class="install-icon" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                        </svg>
+                        Install
+                    </button>
+                </div>
+                
+                <div class="trending-metadata">
+                    <div class="trending-downloads">
+                        <svg class="meta-icon" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                        </svg>
+                        <span>${downloads.toLocaleString()} downloads ${this.getRangeLabel()}</span>
+                    </div>
+                    <div class="trending-type-badge">${componentType}</div>
+                </div>
+            </div>
+        `;
+
+        return itemElement;
+    }
+
+    getDownloadsForRange(item) {
+        switch(this.currentRange) {
+            case 'today':
+                return item.downloadsToday || 0;
+            case 'week':
+                return item.downloadsWeek || 0;
+            case 'month':
+                return item.downloadsMonth || 0;
+            default:
+                return item.downloadsToday || 0;
+        }
+    }
+
+    getRangeLabel() {
+        switch(this.currentRange) {
+            case 'today':
+                return 'today';
+            case 'week':
+                return 'this week';
+            case 'month':
+                return 'this month';
+            default:
+                return 'today';
+        }
+    }
+
+    getComponentTypeLabel(item) {
+        // Determine the component type from the item ID or context
+        const id = item.id || '';
+        
+        if (id.includes('agent-') || id.startsWith('agent') || this.currentType === 'agents') {
+            return 'Agent';
+        } else if (id.includes('command-') || id.startsWith('command') || this.currentType === 'commands') {
+            return 'Command';
+        } else if (id.includes('setting-') || id.startsWith('setting') || this.currentType === 'settings') {
+            return 'Settings';
+        } else if (id.includes('hook-') || id.startsWith('hook') || this.currentType === 'hooks') {
+            return 'Hooks';
+        } else if (id.includes('mcp-') || id.startsWith('mcp') || this.currentType === 'mcps') {
+            return 'MCP';
+        } else if (id.includes('template-') || id.startsWith('template') || this.currentType === 'templates') {
+            return 'Template';
+        }
+        
+        // Fallback: try to determine from data structure
+        if (item.expertise) return 'Agent';
+        if (item.command) return 'Command';
+        
+        return 'Component';
+    }
+
+    renderContributors(contributors) {
+        if (!contributors || contributors.length === 0) {
+            return '';
+        }
+
+        const contributorElements = contributors.slice(0, 3).map(contributor => 
+            `<img class="contributor-avatar" src="${contributor.avatar}" alt="${contributor.name}" title="${contributor.name}">`
+        ).join('');
+
+        return `
+            <div class="meta-item">
+                <span>Built by</span>
+                <div class="contributors">
+                    ${contributorElements}
+                </div>
+            </div>
+        `;
+    }
+
+    renderTags(tags) {
+        if (!tags || tags.length === 0) {
+            return '';
+        }
+
+        const tagElements = tags.map(tag => 
+            `<span class="tag">${tag}</span>`
+        ).join('');
+
+        return `<div class="tags">${tagElements}</div>`;
+    }
+
+    getLanguageClass(language) {
+        const languageMap = {
+            'JavaScript/TypeScript': 'typescript',
+            'JavaScript': 'javascript',
+            'TypeScript': 'typescript',
+            'Node.js/Express': 'nodejs',
+            'Python': 'python',
+            'SQL/Node.js': 'sql',
+            'Docker': 'docker',
+            'C#/Unity': 'csharp',
+            'Unity/Game Development': 'unity',
+            'Git/Bash': 'git',
+            'Multi-language': 'javascript',
+            'Universal': 'javascript'
+        };
+
+        return languageMap[language] || 'javascript';
+    }
+
+    getItemType(item) {
+        // Determine item type based on data structure or properties
+        if (item.expertise) return 'agents';
+        if (item.command) return 'commands';
+        if (item.type === 'settings') return 'settings';
+        if (item.type === 'hooks') return 'hooks';
+        if (item.type === 'mcps') return 'mcps';
+        if (item.type === 'templates') return 'templates';
+        return 'commands'; // default
+    }
+
+    getIconPath(type) {
+        const icons = {
+            commands: 'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM2.5 8a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0z',
+            agents: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z',
+            settings: 'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z',
+            hooks: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z',
+            mcps: 'M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c0 .026.009.051.025.072L2.5 7a.5.5 0 0 1 0 .708L1.025 9.133a.149.149 0 0 0-.025.072V10.5A1.5 1.5 0 0 0 2.5 12h2.793a.149.149 0 0 0 .072-.025L7 10.5a.5.5 0 0 1 .708 0l1.625 1.475c.021.016.046.025.072.025H12.5A1.5 1.5 0 0 0 14 10.5v-.793a.149.149 0 0 0-.025-.072L12.5 8a.5.5 0 0 1 0-.708l1.475-1.625a.149.149 0 0 0 .025-.072V4.5A1.5 1.5 0 0 0 12.5 3H9.707a.149.149 0 0 0-.072.025L8 4.5a.5.5 0 0 1-.708 0L5.867 3.025A.149.149 0 0 0 5.793 3H2.5z',
+            templates: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75zM7.25 4a.75.75 0 0 1 1.5 0v4.25H12a.75.75 0 0 1 0 1.5H8.75V12a.75.75 0 0 1-1.5 0V9.75H4a.75.75 0 0 1 0-1.5h3.25V4z'
+        };
+
+        return icons[type] || icons.commands;
+    }
+
+    getEmptyState() {
+        return `
+            <div class="empty-state">
+                <svg class="empty-state-icon" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"/>
+                </svg>
+                <h3>No trending items found</h3>
+                <p>Try adjusting your filters or check back later for new trending content.</p>
+            </div>
+        `;
+    }
+
+    showError(message) {
+        const container = document.getElementById('trending-list');
+        container.innerHTML = `
+            <div class="empty-state">
+                <svg class="empty-state-icon" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+                </svg>
+                <h3>Error Loading Data</h3>
+                <p>${message}</p>
+            </div>
+        `;
+    }
+
+    showLoading() {
+        const container = document.getElementById('trending-list');
+        container.innerHTML = `
+            <div class="loading">
+                <div class="loading-spinner"></div>
+                <p>Loading trending components...</p>
+            </div>
+        `;
+    }
+}
+
+// Initialize the trending page when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.trendingPageInstance = new TrendingPage();
+});
+
+// Modal functionality
+function showInstallModal(componentName) {
+    const modal = document.getElementById('installModal');
+    const commandText = document.getElementById('commandText');
+    
+    // Determine the component type from the current filter or component name
+    let componentType = 'command'; // default
+    
+    // Get the current trending page instance to check the type
+    if (window.trendingPageInstance) {
+        componentType = window.trendingPageInstance.currentType || 'commands';
+    }
+    
+    // Convert plural to singular for the command flag
+    const typeMap = {
+        'agents': 'agent',
+        'commands': 'command', 
+        'settings': 'setting',
+        'hooks': 'hook',
+        'mcps': 'mcp',
+        'templates': 'template'
+    };
+    
+    const flagType = typeMap[componentType] || 'command';
+    
+    // Clean the component name by removing prefixes
+    let cleanName = componentName;
+    const prefixesToRemove = ['agent-', 'command-', 'setting-', 'hook-', 'mcp-', 'template-'];
+    
+    for (const prefix of prefixesToRemove) {
+        if (cleanName.startsWith(prefix)) {
+            cleanName = cleanName.substring(prefix.length);
+            break;
+        }
+    }
+    
+    // Update the command with the correct flag and clean component name
+    const command = `npx claude-code-templates@latest --${flagType} ${cleanName} --yes`;
+    commandText.textContent = command;
+    
+    // Show the modal
+    modal.classList.add('show');
+    
+    // Prevent body scrolling
+    document.body.style.overflow = 'hidden';
+}
+
+function closeInstallModal() {
+    const modal = document.getElementById('installModal');
+    modal.classList.remove('show');
+    
+    // Restore body scrolling
+    document.body.style.overflow = '';
+    
+    // Hide copy feedback
+    const feedback = document.getElementById('copyFeedback');
+    feedback.classList.remove('show');
+}
+
+function copyInstallCommand() {
+    const commandText = document.getElementById('commandText');
+    const copyFeedback = document.getElementById('copyFeedback');
+    const copyButton = document.querySelector('.copy-button');
+    
+    // Copy to clipboard
+    navigator.clipboard.writeText(commandText.textContent).then(() => {
+        // Show success feedback
+        copyFeedback.classList.add('show');
+        
+        // Temporarily change button text
+        const originalText = copyButton.innerHTML;
+        copyButton.innerHTML = `
+            <svg class="copy-icon" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+            </svg>
+            Copied!
+        `;
+        
+        // Reset after 2 seconds
+        setTimeout(() => {
+            copyButton.innerHTML = originalText;
+            copyFeedback.classList.remove('show');
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy: ', err);
+        // Fallback for older browsers
+        fallbackCopyTextToClipboard(commandText.textContent);
+    });
+}
+
+function fallbackCopyTextToClipboard(text) {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.width = "2em";
+    textArea.style.height = "2em";
+    textArea.style.padding = "0";
+    textArea.style.border = "none";
+    textArea.style.outline = "none";
+    textArea.style.boxShadow = "none";
+    textArea.style.background = "transparent";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    
+    try {
+        document.execCommand('copy');
+        const copyFeedback = document.getElementById('copyFeedback');
+        copyFeedback.classList.add('show');
+        setTimeout(() => {
+            copyFeedback.classList.remove('show');
+        }, 2000);
+    } catch (err) {
+        console.error('Fallback: Could not copy text: ', err);
+    }
+    
+    document.body.removeChild(textArea);
+}
+
+// Close modal on Escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeInstallModal();
+    }
+});
+
+// Add some utility functions for future enhancements
+window.TrendingUtils = {
+    formatDate(dateString) {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    },
+
+    formatNumber(num) {
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'M';
+        }
+        if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'k';
+        }
+        return num.toString();
+    },
+
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+};