claude-code-templates 1.21.13 → 1.21.14

package/docs/js/plugin-page.js

@@ -0,0 +1,390 @@
+/**
+ * Plugin Detail Page Manager
+ * Handles loading and displaying plugin details
+ */
+
+class PluginPageManager {
+    constructor() {
+        this.pluginData = null;
+        this.allPlugins = [];
+        this.pluginName = this.getPluginNameFromURL();
+    }
+
+    /**
+     * Get plugin name from URL path
+     */
+    getPluginNameFromURL() {
+        const path = window.location.pathname;
+        const segments = path.split('/').filter(segment => segment);
+
+        // URL format: /plugin/plugin-name
+        if (segments[0] === 'plugin' && segments[1]) {
+            return segments[1];
+        }
+
+        return null;
+    }
+
+    /**
+     * Initialize the page
+     */
+    async init() {
+        if (!this.pluginName) {
+            this.showError();
+            return;
+        }
+
+        try {
+            // Load components data
+            await this.loadComponentsData();
+
+            // Find the plugin
+            this.pluginData = this.findPlugin(this.pluginName);
+
+            if (!this.pluginData) {
+                this.showError();
+                return;
+            }
+
+            // Render the plugin details
+            this.renderPluginDetails();
+            this.renderRelatedPlugins();
+
+            // Update page title
+            document.title = `${this.formatPluginName(this.pluginData.name)} - Claude Code Templates`;
+
+            // Setup keyboard listeners
+            this.setupKeyboardListeners();
+
+        } catch (error) {
+            console.error('Error loading plugin:', error);
+            this.showError();
+        }
+    }
+
+    /**
+     * Setup keyboard event listeners
+     */
+    setupKeyboardListeners() {
+        document.addEventListener('keydown', (e) => {
+            // ESC key closes modal
+            if (e.key === 'Escape') {
+                const modal = document.getElementById('installModal');
+                if (modal.style.display === 'flex') {
+                    this.closeInstallModal();
+                }
+            }
+        });
+    }
+
+    /**
+     * Load components.json
+     */
+    async loadComponentsData() {
+        try {
+            const response = await fetch('/components.json');
+            if (!response.ok) {
+                throw new Error('Failed to load components data');
+            }
+            const data = await response.json();
+            this.allPlugins = data.plugins || [];
+        } catch (error) {
+            console.error('Error loading components:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Find plugin by name
+     */
+    findPlugin(name) {
+        return this.allPlugins.find(plugin => plugin.name === name);
+    }
+
+    /**
+     * Format name (convert kebab-case to Title Case)
+     */
+    formatPluginName(name) {
+        return this.formatComponentName(name);
+    }
+
+    /**
+     * Format component name (convert kebab-case to Title Case)
+     * Handles both "name" and "category/name" formats
+     */
+    formatComponentName(name) {
+        // Extract just the filename if it includes a category path
+        const displayName = name.includes('/') ? name.split('/').pop() : name;
+
+        return displayName
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+
+    /**
+     * Render plugin details
+     */
+    renderPluginDetails() {
+        const plugin = this.pluginData;
+
+        // Update hero section
+        document.getElementById('pluginName').textContent = this.formatPluginName(plugin.name);
+        document.getElementById('pluginDescription').textContent = plugin.description;
+        document.getElementById('pluginVersion').textContent = `v${plugin.version}`;
+        document.getElementById('pluginAuthor').textContent = plugin.author || 'Claude Code Templates';
+
+        // Render keywords
+        const keywordsContainer = document.getElementById('pluginKeywords');
+        keywordsContainer.innerHTML = plugin.keywords
+            .map(keyword => `<span class="keyword-badge">${keyword}</span>`)
+            .join('');
+
+        // Update installation commands
+        document.getElementById('installPluginCmd').textContent = `/plugin install ${plugin.name}@claude-code-templates`;
+
+        // Render components sections
+        this.renderComponents(plugin);
+
+        // Show content, hide loading
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('pluginContent').style.display = 'block';
+    }
+
+    /**
+     * Render components (commands, agents, MCPs)
+     */
+    renderComponents(plugin) {
+        // Commands
+        if (plugin.commands && plugin.commands > 0) {
+            document.getElementById('commandsSection').style.display = 'block';
+            document.getElementById('commandsCount').textContent = plugin.commands;
+
+            const commandsList = document.getElementById('commandsList');
+            commandsList.innerHTML = this.generateComponentItems(
+                plugin.commandsList || [],
+                'command',
+                'commands'
+            );
+        }
+
+        // Agents
+        if (plugin.agents && plugin.agents > 0) {
+            document.getElementById('agentsSection').style.display = 'block';
+            document.getElementById('agentsCount').textContent = plugin.agents;
+
+            const agentsList = document.getElementById('agentsList');
+            agentsList.innerHTML = this.generateComponentItems(
+                plugin.agentsList || [],
+                'agent',
+                'agents'
+            );
+        }
+
+        // MCPs
+        if (plugin.mcpServers && plugin.mcpServers > 0) {
+            document.getElementById('mcpsSection').style.display = 'block';
+            document.getElementById('mcpsCount').textContent = plugin.mcpServers;
+
+            const mcpsList = document.getElementById('mcpsList');
+            mcpsList.innerHTML = this.generateComponentItems(
+                plugin.mcpServersList || [],
+                'mcp',
+                'mcps'
+            );
+        }
+    }
+
+    /**
+     * Generate component items with install commands
+     */
+    generateComponentItems(componentNames, componentType, pluralType) {
+        if (!componentNames || componentNames.length === 0) {
+            return '<li>No components available</li>';
+        }
+
+        return componentNames.map((name, index) => {
+            const formattedName = this.formatComponentName(name);
+            const installCommand = `npx claude-code-templates@latest --${componentType} ${name}`;
+
+            return `
+                <li class="component-item" data-index="${index}">
+                    <span class="component-name">${formattedName}</span>
+                    <button class="component-install-btn" onclick="window.pluginPageManager.showInstallCommand('${installCommand.replace(/'/g, "\\'")}', event)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                        </svg>
+                        Install
+                    </button>
+                </li>
+            `;
+        }).join('');
+    }
+
+    /**
+     * Show install command in a modal
+     */
+    showInstallCommand(command, event) {
+        event.stopPropagation();
+
+        // Store current command
+        this.currentCommand = command;
+
+        // Update modal content
+        document.getElementById('modalCommand').textContent = command;
+
+        // Show modal
+        const modal = document.getElementById('installModal');
+        modal.style.display = 'flex';
+
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+    }
+
+    /**
+     * Close install modal
+     */
+    closeInstallModal() {
+        const modal = document.getElementById('installModal');
+        modal.style.display = 'none';
+
+        // Restore body scroll
+        document.body.style.overflow = 'auto';
+    }
+
+    /**
+     * Copy command from modal
+     */
+    copyModalCommand() {
+        const command = this.currentCommand;
+
+        navigator.clipboard.writeText(command).then(() => {
+            const button = document.querySelector('.modal-copy-btn');
+            const originalHTML = button.innerHTML;
+
+            button.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
+                </svg>
+                Copied!
+            `;
+
+            setTimeout(() => {
+                button.innerHTML = originalHTML;
+            }, 2000);
+        }).catch(err => {
+            console.error('Failed to copy:', err);
+            alert('Failed to copy to clipboard');
+        });
+    }
+
+    /**
+     * Render related plugins (based on shared keywords)
+     */
+    renderRelatedPlugins() {
+        const currentPlugin = this.pluginData;
+        const relatedPlugins = this.findRelatedPlugins(currentPlugin);
+
+        const container = document.getElementById('relatedPlugins');
+
+        if (relatedPlugins.length === 0) {
+            container.innerHTML = '<p style="color: var(--text-secondary);">No related plugins found.</p>';
+            return;
+        }
+
+        container.innerHTML = relatedPlugins
+            .map(plugin => this.createRelatedPluginCard(plugin))
+            .join('');
+    }
+
+    /**
+     * Find related plugins based on shared keywords
+     */
+    findRelatedPlugins(currentPlugin) {
+        const currentKeywords = new Set(currentPlugin.keywords);
+
+        return this.allPlugins
+            .filter(plugin => plugin.name !== currentPlugin.name)
+            .map(plugin => {
+                // Count shared keywords
+                const sharedKeywords = plugin.keywords.filter(k => currentKeywords.has(k)).length;
+                return { plugin, sharedKeywords };
+            })
+            .filter(item => item.sharedKeywords > 0)
+            .sort((a, b) => b.sharedKeywords - a.sharedKeywords)
+            .slice(0, 3) // Show top 3 related plugins
+            .map(item => item.plugin);
+    }
+
+    /**
+     * Create related plugin card HTML
+     */
+    createRelatedPluginCard(plugin) {
+        return `
+            <a href="/plugin/${plugin.name}" class="related-plugin-card">
+                <h3>${this.formatPluginName(plugin.name)}</h3>
+                <p>${plugin.description}</p>
+                <div class="related-plugin-stats">
+                    ${plugin.commands > 0 ? `<span class="related-plugin-stat"><span class="stat-icon">⚡</span>${plugin.commands}</span>` : ''}
+                    ${plugin.agents > 0 ? `<span class="related-plugin-stat"><span class="stat-icon">🤖</span>${plugin.agents}</span>` : ''}
+                    ${plugin.mcpServers > 0 ? `<span class="related-plugin-stat"><span class="stat-icon">🔌</span>${plugin.mcpServers}</span>` : ''}
+                </div>
+            </a>
+        `;
+    }
+
+    /**
+     * Show error state
+     */
+    showError() {
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('error').style.display = 'flex';
+    }
+}
+
+/**
+ * Copy command to clipboard
+ */
+function copyCommand(elementId, event) {
+    const element = document.getElementById(elementId);
+    const text = element.textContent;
+
+    navigator.clipboard.writeText(text).then(() => {
+        // Show feedback - find the button that was clicked
+        let button = null;
+        if (event && event.target) {
+            button = event.target.closest('.copy-btn');
+        }
+
+        // If we can't find the button through event, try to find it near the element
+        if (!button) {
+            const parentContainer = element.closest('.command-box');
+            if (parentContainer) {
+                button = parentContainer.querySelector('.copy-btn');
+            }
+        }
+
+        if (button) {
+            const originalHTML = button.innerHTML;
+
+            button.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
+                </svg>
+                Copied!
+            `;
+
+            setTimeout(() => {
+                button.innerHTML = originalHTML;
+            }, 2000);
+        }
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+    });
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.pluginPageManager = new PluginPageManager();
+    window.pluginPageManager.init();
+});

package/docs/js/script.js

@@ -1454,15 +1454,19 @@ function createComponentCard(component) {
     // Get download count for this component
     const downloadCount = getDownloadCount(component.name, component.type);
     const downloadBadge = createDownloadBadge(downloadCount);
-    
+
+    // Get validation badge
+    const validationBadge = createValidationBadge(component.security);
+
     // Create category label for all components (use "General" if no category)
     const categoryName = component.category || 'general';
     const categoryLabel = `<div class="category-label">${formatComponentName(categoryName)}</div>`;
-    
+
     card.innerHTML = `
         <div class="card-inner">
             <div class="card-front">
                 ${downloadBadge}
+                ${validationBadge}
                 ${categoryLabel}
                 <div class="framework-logo" style="color: ${config.color}">
                     <span class="component-icon">${config.icon}</span>
@@ -2157,7 +2161,7 @@ function getDownloadCount(componentName, componentType) {
  */
 function createDownloadBadge(count) {
     if (count === 0) return '';
-    
+
     return `<div class="download-badge" title="${count} downloads">
         <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
             <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
@@ -2165,3 +2169,46 @@ function createDownloadBadge(count) {
         ${formatNumber(count)}
     </div>`;
 }
+
+/**
+ * Create validation badge HTML
+ */
+function createValidationBadge(validation) {
+    if (!validation || !validation.validated) return '';
+
+    const score = validation.score || 0;
+    const isValid = validation.valid;
+
+    // Debug logging
+    console.log('Validation badge:', { score, isValid, validation });
+
+    // Perfect score (100%) - Show Twitter-style verified badge
+    if (score === 100 && isValid) {
+        console.log('✓ Showing verified badge for score 100');
+        return `<div class="validation-badge verified-badge" title="100% Validated - Perfect Security Score">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="#1DA1F2">
+                <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"/>
+            </svg>
+            <span class="verified-text">Verified</span>
+        </div>`;
+    }
+
+    // Determine color based on score
+    let badgeColor = '#48bb78'; // Green
+    let statusIcon = '✓';
+
+    if (!isValid || score < 70) {
+        badgeColor = '#f56565'; // Red
+        statusIcon = '✗';
+    } else if (score < 85) {
+        badgeColor = '#ed8936'; // Orange
+        statusIcon = '⚠';
+    }
+
+    return `<div class="validation-badge" style="background-color: ${badgeColor}" title="Quality Score: ${score}/100 - Validated">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
+        </svg>
+        <span>${statusIcon} ${score}</span>
+    </div>`;
+}

package/docs/js/search-functionality.js

@@ -139,8 +139,8 @@ async function loadComponentsForSearch() {
             
             if (data) {
                 // Process each category for search
-                const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
-                
+                const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills'];
+
                 for (const category of categories) {
                     if (data[category] && Array.isArray(data[category])) {
                         // Process components to make them search-friendly
@@ -175,10 +175,10 @@ async function loadComponentsForSearch() {
         const response = await fetch('components.json');
         if (response.ok) {
             const data = await response.json();
-            
+
             // Process each category for search
-            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
-            
+            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills'];
+
             for (const category of categories) {
                 if (data[category] && Array.isArray(data[category])) {
                     // Process components to make them search-friendly
@@ -212,7 +212,7 @@ async function loadComponentsForSearch() {
         
         // Fallback: try to use cached data if available
         if (window.getSearchData) {
-            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
+            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills'];
             for (const category of categories) {
                 const data = window.getSearchData(category);
                 if (data && data.length > 0) {
@@ -260,20 +260,20 @@ function updateURLWithFilter(filter) {
 function getFilterFromURL() {
     const path = window.location.pathname;
     const segments = path.split('/').filter(segment => segment);
-    
+
     // Check if first segment is a valid filter
-    const validFilters = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'templates'];
+    const validFilters = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills', 'templates', 'plugins'];
     const firstSegment = segments[0];
-    
+
     if (firstSegment && validFilters.includes(firstSegment)) {
         return firstSegment;
     }
-    
+
     // If no valid filter found and we're on root, default to agents
     if (path === '/' || path === '') {
         return 'agents';
     }
-    
+
     return 'agents'; // Default fallback
 }
 
@@ -423,7 +423,8 @@ function updateSearchResults(results, categoryMatches = new Set()) {
             commands: '⚡',
             settings: '⚙️',
             hooks: '🪝',
-            mcps: '🔌'
+            mcps: '🔌',
+            skills: '🎨'
         };
         
         const tags = Array.from(categoryMatches).map(category => {
@@ -480,8 +481,8 @@ function displaySearchResults(results) {
     
     // Render grouped results in specific order
     let html = '';
-    const categoryOrder = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
-    
+    const categoryOrder = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills'];
+
     categoryOrder.forEach(category => {
         if (!groupedResults[category]) return;
         const categoryResults = groupedResults[category];
@@ -519,7 +520,8 @@ function getCategoryIcon(category) {
         commands: '⚡',
         settings: '⚙️',
         hooks: '🪝',
-        mcps: '🔌'
+        mcps: '🔌',
+        skills: '🎨'
     };
     return icons[category] || '📦';
 }
@@ -541,7 +543,8 @@ function generateComponentCard(component, category) {
         command: { icon: '⚡', color: '#4ecdc4' },
         mcp: { icon: '🔌', color: '#45b7d1' },
         setting: { icon: '⚙️', color: '#9c88ff' },
-        hook: { icon: '🪝', color: '#ff8c42' }
+        hook: { icon: '🪝', color: '#ff8c42' },
+        skill: { icon: '🎨', color: '#f59e0b' }
     };
     
     const config = typeConfig[component.type];