claude-code-templates 1.21.11 → 1.21.13

package/docs/js/component-page.js

@@ -0,0 +1,808 @@
+// Component Page JavaScript
+class ComponentPageManager {
+    constructor() {
+        this.component = null;
+        this.dataLoader = null;
+        this.init();
+    }
+
+    async init() {
+        console.log('Initializing Component Page Manager...');
+        
+        // Initialize data loader
+        this.dataLoader = window.dataLoader || new DataLoader();
+        
+        // Load component from URL parameters
+        await this.loadComponentFromURL();
+        
+        // Setup event listeners
+        this.setupEventListeners();
+    }
+
+    async loadComponentFromURL() {
+        let componentType, componentName, componentPath;
+        
+        // Check if we're using SEO-friendly URLs: /component/type/name
+        const pathParts = window.location.pathname.split('/').filter(part => part);
+        if (pathParts.length >= 3 && pathParts[0] === 'component') {
+            componentType = decodeURIComponent(pathParts[1]);
+            componentName = decodeURIComponent(pathParts[2]);
+            console.log('SEO URL Parameters:', { componentType, componentName });
+        } else {
+            // Fallback to query parameters
+            const urlParams = new URLSearchParams(window.location.search);
+            componentType = urlParams.get('type');
+            componentName = urlParams.get('name');
+            componentPath = urlParams.get('path');
+            console.log('Query Parameters:', { componentType, componentName, componentPath });
+        }
+
+        if (!componentType || (!componentName && !componentPath)) {
+            this.showError('Missing component parameters in URL');
+            return;
+        }
+
+        try {
+            // Load all components data
+            const componentsData = await this.dataLoader.loadAllComponents();
+            
+            if (!componentsData) {
+                throw new Error('Failed to load components data');
+            }
+
+            // Find the component
+            const categoryKey = componentType + 's'; // Convert 'agent' to 'agents'
+            const components = componentsData[categoryKey] || [];
+            
+            let component = null;
+            
+            // Try to find by name first, then by path
+            if (componentName) {
+                component = components.find(c => c.name === componentName);
+                
+                // If not found, try to find by path that ends with the component name
+                if (!component) {
+                    component = components.find(c => {
+                        // Check if path ends with componentName.md or componentName.json
+                        const pathEnd = `${componentName}.md`;
+                        const pathEndJson = `${componentName}.json`;
+                        return c.path && (c.path.endsWith(pathEnd) || c.path.endsWith(pathEndJson));
+                    });
+                }
+            }
+            
+            if (!component && componentPath) {
+                component = components.find(c => c.path === componentPath);
+            }
+
+            if (!component) {
+                throw new Error(`Component not found: ${componentType}/${componentName || componentPath}`);
+            }
+
+            this.component = {
+                ...component,
+                type: componentType
+            };
+
+            await this.renderComponent();
+
+        } catch (error) {
+            console.error('Error loading component:', error);
+            this.showError(error.message);
+        }
+    }
+
+    async renderComponent() {
+        if (!this.component) {
+            this.showError('No component data available');
+            return;
+        }
+
+        console.log('Rendering component:', this.component);
+
+        // Hide loading state
+        document.getElementById('loadingState').style.display = 'none';
+        
+        // Show component content
+        document.getElementById('componentContent').style.display = 'block';
+
+        // Render component header
+        this.renderComponentHeader();
+        
+        // Render component description
+        this.renderComponentDescription();
+        
+        // Render installation section
+        this.renderInstallationSection();
+        
+        // Render component code
+        await this.renderComponentCode();
+        
+        // Render GitHub link
+        this.renderGitHubLink();
+        
+        // Update page metadata
+        this.updatePageMetadata();
+    }
+
+
+    renderComponentHeader() {
+        const typeConfig = {
+            agent: { icon: '🤖', color: '#ff6b6b', badge: 'AGENT' },
+            command: { icon: '⚡', color: '#4ecdc4', badge: 'COMMAND' },
+            mcp: { icon: '🔌', color: '#45b7d1', badge: 'MCP' },
+            setting: { icon: '⚙️', color: '#9c88ff', badge: 'SETTING' },
+            hook: { icon: '🪝', color: '#ff8c42', badge: 'HOOK' },
+            template: { icon: '📦', color: '#f9a825', badge: 'TEMPLATE' }
+        };
+
+        const config = typeConfig[this.component.type] || typeConfig.template;
+        const formattedName = this.formatComponentName(this.component.name);
+
+        // Update icon with null check
+        const iconElement = document.getElementById('componentIcon');
+        if (iconElement) {
+            iconElement.textContent = config.icon;
+        }
+        
+        // Update title with null check
+        const titleElement = document.getElementById('componentTitle');
+        if (titleElement) {
+            titleElement.textContent = formattedName;
+        }
+        
+        // Update type badge with null check
+        const typeBadge = document.getElementById('componentTypeBadge');
+        if (typeBadge) {
+            typeBadge.textContent = config.badge;
+            typeBadge.style.backgroundColor = config.color;
+        }
+        
+        // Update category - restored for original design
+        const category = this.component.category || 'General';
+        const categoryElement = document.getElementById('componentCategory');
+        if (categoryElement) {
+            categoryElement.textContent = category.charAt(0).toUpperCase() + category.slice(1);
+        }
+
+        // Update download badge
+        const downloadBadge = document.getElementById('componentDownloadBadge');
+        const downloadCount = document.getElementById('downloadCount');
+        if (downloadBadge && downloadCount) {
+            const downloads = this.component.downloads || 0;
+            if (downloads > 0) {
+                downloadBadge.style.display = 'inline-flex';
+                downloadCount.textContent = this.formatNumber(downloads);
+                downloadBadge.title = `${downloads.toLocaleString()} downloads`;
+            } else {
+                downloadBadge.style.display = 'none';
+            }
+        }
+
+        // Add to cart button is set up in setupEventListeners()
+    }
+
+    renderComponentDescription() {
+        const description = this.getComponentDescription();
+        const descriptionElement = document.getElementById('componentDescription');
+        if (descriptionElement) {
+            descriptionElement.textContent = description;
+        }
+    }
+
+    renderInstallationSection() {
+        const componentPath = this.getCleanPath();
+        const basicInstallCommand = `npx claude-code-templates@latest --${this.component.type}=${componentPath} --yes`;
+        
+        // Update basic installation command
+        const basicInstallElement = document.getElementById('basicInstallCommand');
+        if (basicInstallElement) {
+            basicInstallElement.textContent = basicInstallCommand;
+        }
+
+        // Handle agent-specific sections
+        if (this.component.type === 'agent') {
+            this.renderGlobalAgentSection(componentPath);
+            this.renderE2BSandboxSection(componentPath);
+        } else {
+            // Hide agent-specific sections for non-agents
+            const globalAgentSection = document.getElementById('globalAgentSection');
+            const e2bSandboxSection = document.getElementById('e2bSandboxSection');
+            
+            if (globalAgentSection) globalAgentSection.style.display = 'none';
+            if (e2bSandboxSection) e2bSandboxSection.style.display = 'none';
+        }
+    }
+
+    renderGlobalAgentSection(componentPath) {
+        const globalAgentSection = document.getElementById('globalAgentSection');
+        const globalAgentCommand = `npx claude-code-templates@latest --create-agent ${componentPath}`;
+        const globalUsageCommand = `${componentPath.split('/').pop()} "your prompt here"`;
+
+        const globalAgentCommandElement = document.getElementById('globalAgentCommand');
+        const globalUsageCommandElement = document.getElementById('globalUsageCommand');
+        
+        if (globalAgentCommandElement) {
+            globalAgentCommandElement.textContent = globalAgentCommand;
+        }
+        if (globalUsageCommandElement) {
+            globalUsageCommandElement.textContent = globalUsageCommand;
+        }
+        
+        if (globalAgentSection) {
+            globalAgentSection.style.display = 'block';
+        }
+    }
+
+    renderE2BSandboxSection(componentPath) {
+        const e2bSandboxSection = document.getElementById('e2bSandboxSection');
+        const e2bSandboxCommand = `npx claude-code-templates@latest --sandbox e2b --agent=${componentPath} --prompt "your development task"`;
+
+        const e2bSandboxCommandElement = document.getElementById('e2bSandboxCommand');
+        if (e2bSandboxCommandElement) {
+            e2bSandboxCommandElement.textContent = e2bSandboxCommand;
+        }
+        
+        if (e2bSandboxSection) {
+            e2bSandboxSection.style.display = 'block';
+        }
+    }
+
+    async renderComponentCode() {
+        try {
+            let content = this.component.content || 'No content available.';
+            let language = 'plaintext';
+
+            // Determine language based on file extension
+            if (this.component.path) {
+                const extension = this.component.path.split('.').pop();
+                switch (extension) {
+                    case 'md':
+                        language = 'markdown';
+                        break;
+                    case 'json':
+                        language = 'json';
+                        // Pretty print JSON
+                        try {
+                            content = JSON.stringify(JSON.parse(content), null, 2);
+                        } catch (e) { 
+                            console.warn('Could not parse JSON content:', e);
+                        }
+                        break;
+                    case 'js':
+                        language = 'javascript';
+                        break;
+                    case 'yml':
+                    case 'yaml':
+                        language = 'yaml';
+                        break;
+                }
+            }
+
+            // Update code language indicator
+            const codeLanguageElement = document.getElementById('codeLanguage');
+            if (codeLanguageElement) {
+                codeLanguageElement.textContent = language;
+            }
+
+            // Render code with syntax highlighting
+            const codeElement = document.querySelector('#codeContent code');
+            if (codeElement) {
+                codeElement.innerHTML = this.highlightCode(content, language);
+                codeElement.className = `language-${language}`;
+            }
+
+            // Generate line numbers
+            const lines = content.split('\n');
+            const lineNumbers = lines.map((_, index) => `<span>${index + 1}</span>`).join('');
+            const lineNumbersElement = document.getElementById('lineNumbers');
+            if (lineNumbersElement) {
+                lineNumbersElement.innerHTML = lineNumbers;
+            }
+
+        } catch (error) {
+            console.error('Error rendering component code:', error);
+            const codeElement = document.querySelector('#codeContent code');
+            if (codeElement) {
+                codeElement.textContent = 'Error loading component content.';
+            }
+        }
+    }
+
+    renderGitHubLink() {
+        const githubUrl = this.generateGitHubURL();
+        const githubLinkElement = document.getElementById('githubLink');
+        if (githubLinkElement) {
+            githubLinkElement.href = githubUrl;
+        }
+    }
+
+    generateGitHubURL() {
+        let githubUrl = 'https://github.com/davila7/claude-code-templates/';
+        
+        if (this.component.type === 'template') {
+            githubUrl += `tree/main/cli-tool/templates/${this.component.folderPath || ''}`;
+        } else {
+            const componentPath = this.component.path || this.component.name;
+            githubUrl += `blob/main/cli-tool/components/${this.component.type}s/${componentPath}`;
+        }
+        
+        return githubUrl;
+    }
+
+
+
+    setupEventListeners() {
+        // Handle browser back/forward buttons
+        window.addEventListener('popstate', () => {
+            this.loadComponentFromURL();
+        });
+        
+        // Handle Add to Stack button
+        const addToCartBtn = document.getElementById('addToCartBtn');
+        if (addToCartBtn) {
+            addToCartBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (this.component) {
+                    // Debug logging for production
+                    console.log('=== Add to Cart Debug ===');
+                    console.log('Component object:', this.component);
+                    console.log('Component type:', this.component.type);
+                    console.log('Component name:', this.component.name);
+                    console.log('Component path:', this.component.path);
+                    
+                    // Check if cartManager exists
+                    if (typeof addToCart === 'function') {
+                        // Convert component type to plural format
+                        const componentType = this.getComponentTypePlural();
+                        
+                        console.log('Plural type for cart:', componentType);
+                        
+                        if (!componentType) {
+                            console.error('Failed to get component type plural');
+                            alert('Unable to determine component type. Please refresh the page.');
+                            return;
+                        }
+                        
+                        if (this.component.name && this.component.path) {
+                            // Create component object that matches cart manager expectations
+                            // Clean component name (remove .md extension and format properly)
+                            const cleanName = this.getCleanComponentName();
+                            const componentItem = {
+                                name: cleanName,
+                                path: this.component.path,
+                                category: this.component.category
+                            };
+                            console.log('Sending to cart:', componentItem, componentType);
+                            addToCart(componentItem, componentType);
+                        } else {
+                            console.error('Missing component name or path:', this.component);
+                            alert('Unable to add component: missing component information');
+                        }
+                    } else {
+                        console.error('Cart functionality not available');
+                        console.log('typeof addToCart:', typeof addToCart);
+                        console.log('window.addToCart:', window.addToCart);
+                        // Fallback: show a message or redirect to main page
+                        alert('Cart functionality not available. Please return to the main page to add components to your stack.');
+                    }
+                } else {
+                    console.error('No component data available');
+                    alert('Component data not loaded. Please refresh the page.');
+                }
+            });
+        }
+    }
+    
+    getComponentType() {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get('type');
+    }
+    
+    getComponentTypePlural() {
+        // Get type from the component object itself
+        const type = this.component?.type;
+        
+        if (!type) {
+            console.error('Component type not found in component object');
+            return null;
+        }
+        
+        // Convert singular type to plural for cart manager
+        const typeMapping = {
+            'agent': 'agents',
+            'command': 'commands',
+            'setting': 'settings',
+            'hook': 'hooks',
+            'mcp': 'mcps',
+            'template': 'templates'
+        };
+        
+        return typeMapping[type] || type + 's';
+    }
+    
+    getComponentFromURL() {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get('name') || urlParams.get('path');
+    }
+    
+    getCleanComponentName() {
+        if (!this.component || !this.component.name) {
+            return 'Unknown Component';
+        }
+        
+        let cleanName = this.component.name;
+        
+        // Remove .md extension if present
+        if (cleanName.endsWith('.md')) {
+            cleanName = cleanName.slice(0, -3);
+        }
+        
+        // Convert kebab-case or snake_case to Title Case
+        cleanName = cleanName
+            .replace(/[-_]/g, ' ')
+            .split(' ')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join(' ');
+            
+        return cleanName;
+    }
+
+    updatePageMetadata() {
+        const cleanName = this.getCleanComponentName(this.component.name);
+        const description = this.getComponentDescription();
+        const typeCapitalized = this.component.type.charAt(0).toUpperCase() + this.component.type.slice(1);
+        const category = this.component.category || 'Development';
+        
+        // Enhanced page title with component type and category
+        const pageTitle = `${cleanName} ${typeCapitalized} - Claude Code Templates`;
+        const enhancedDescription = `${description} | ${typeCapitalized} for ${category} | Claude Code Templates - AI-powered development tools`;
+        
+        // Generate proper canonical URL for SEO
+        const canonicalURL = this.generateCanonicalURL();
+
+        // Update page title
+        document.title = pageTitle;
+        const pageTitleElement = document.getElementById('page-title');
+        if (pageTitleElement) {
+            pageTitleElement.textContent = pageTitle;
+        }
+
+        // Update meta description
+        const metaDescription = document.querySelector('meta[name="description"]');
+        if (metaDescription) {
+            metaDescription.content = enhancedDescription;
+        }
+
+        // Update keywords
+        const metaKeywords = document.querySelector('meta[name="keywords"]');
+        if (metaKeywords) {
+            metaKeywords.content = `${cleanName}, ${this.component.type}, ${category}, Claude Code, AI development, automation, ${this.component.type}s, templates`;
+        }
+
+        // Update canonical URL
+        const canonicalLink = document.getElementById('canonical-url');
+        if (canonicalLink) {
+            canonicalLink.href = canonicalURL;
+        }
+
+        // Update Open Graph meta tags
+        const ogUrl = document.getElementById('og-url');
+        const ogTitle = document.getElementById('og-title');
+        const ogDescription = document.getElementById('og-description');
+        
+        if (ogUrl) ogUrl.content = canonicalURL;
+        if (ogTitle) ogTitle.content = pageTitle;
+        if (ogDescription) ogDescription.content = enhancedDescription;
+
+        // Update Twitter meta tags
+        const twitterUrl = document.getElementById('twitter-url');
+        const twitterTitle = document.getElementById('twitter-title');
+        const twitterDescription = document.getElementById('twitter-description');
+        
+        if (twitterUrl) twitterUrl.content = canonicalURL;
+        if (twitterTitle) twitterTitle.content = pageTitle;
+        if (twitterDescription) twitterDescription.content = enhancedDescription;
+
+        // Add structured data for better SEO
+        this.addStructuredData(cleanName, description, typeCapitalized, category, canonicalURL);
+    }
+
+    generateCanonicalURL() {
+        // Generate SEO-friendly canonical URL
+        const isLocal = window.location.hostname === 'localhost' || 
+                       window.location.hostname === '127.0.0.1' ||
+                       window.location.hostname.includes('5500');
+        
+        if (!isLocal && this.component.type && this.component.name) {
+            // Use SEO-friendly URL for production
+            let cleanName = this.component.name;
+            if (cleanName.endsWith('.md')) {
+                cleanName = cleanName.slice(0, -3);
+            }
+            if (cleanName.endsWith('.json')) {
+                cleanName = cleanName.slice(0, -5);
+            }
+            
+            const baseUrl = window.location.origin;
+            return `${baseUrl}/component/${encodeURIComponent(this.component.type)}/${encodeURIComponent(cleanName)}`;
+        }
+        
+        // Fallback to current URL
+        return window.location.href;
+    }
+
+    addStructuredData(name, description, type, category, url) {
+        // Remove existing structured data
+        const existingScript = document.getElementById('component-structured-data');
+        if (existingScript) {
+            existingScript.remove();
+        }
+
+        // Add new structured data
+        const structuredData = {
+            "@context": "https://schema.org",
+            "@type": "SoftwareApplication",
+            "name": name,
+            "applicationCategory": "DeveloperApplication",
+            "applicationSubCategory": `${type} Component`,
+            "description": description,
+            "operatingSystem": ["Windows", "macOS", "Linux"],
+            "url": url,
+            "author": {
+                "@type": "Organization",
+                "name": "Claude Code Templates Community"
+            },
+            "offers": {
+                "@type": "Offer",
+                "price": "0",
+                "priceCurrency": "USD"
+            },
+            "keywords": `${name}, ${type}, ${category}, Claude Code, AI development`,
+            "programmingLanguage": type === "command" ? "Shell" : "Configuration",
+            "relatedLink": "https://www.anthropic.com/claude-code"
+        };
+
+        const script = document.createElement('script');
+        script.id = 'component-structured-data';
+        script.type = 'application/ld+json';
+        script.textContent = JSON.stringify(structuredData, null, 2);
+        document.head.appendChild(script);
+    }
+
+
+    // Utility methods
+    formatComponentName(name) {
+        return name.split('-').map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1)
+        ).join(' ');
+    }
+
+    formatNumber(num) {
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+        }
+        if (num >= 1000) {
+            return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+        }
+        return num.toString();
+    }
+
+    getComponentDescription() {
+        let description = this.component.description || '';
+        
+        if (!description && this.component.content) {
+            const descMatch = this.component.content.match(/description:\s*(.+?)(?:\n|$)/);
+            if (descMatch) {
+                description = descMatch[1].trim().replace(/^["']|["']$/g, '');
+            } else {
+                const lines = this.component.content.split('\n');
+                const firstParagraph = lines.find(line => 
+                    line.trim() && !line.startsWith('---') && !line.startsWith('#')
+                );
+                if (firstParagraph) {
+                    description = firstParagraph.trim();
+                }
+            }
+        }
+        
+        if (!description) {
+            description = `A ${this.component.type} component for enhanced development workflow.`;
+        }
+        
+        return description;
+    }
+
+    getCleanPath() {
+        let componentPath = this.component.path || this.component.name;
+        
+        // Remove file extensions
+        if (componentPath.endsWith('.md') || componentPath.endsWith('.json')) {
+            componentPath = componentPath.replace(/\.(md|json)$/, '');
+        }
+        
+        return componentPath;
+    }
+
+    highlightCode(content, language) {
+        // Basic syntax highlighting (same as modal)
+        let highlighted = content
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        
+        if (language === 'markdown' || language === 'yaml') {
+            // Highlight YAML/Markdown frontmatter keys (blue)
+            highlighted = highlighted.replace(/^([a-zA-Z_-]+):/gm, '<span style="color: #569cd6;">$1</span>:');
+            
+            // Highlight strings in quotes (orange)
+            highlighted = highlighted.replace(/&quot;([^&]+?)&quot;/g, '<span style="color: #ce9178;">&quot;$1&quot;</span>');
+            
+            // Highlight important keywords (light blue)
+            highlighted = highlighted.replace(/\b(hackathon|strategy|AI|solution|ideation|evaluation|projects|feedback|concepts|feasibility|guidance|agent|specialist|brainstorming|winning|judge|feedback|Context|User|Examples)\b/gi, '<span style="color: #4fc1ff;">$1</span>');
+            
+            // Highlight markdown headers (blue)
+            highlighted = highlighted.replace(/^(#+)\s*(.+)$/gm, '<span style="color: #569cd6;">$1</span> <span style="color: #dcdcaa;">$2</span>');
+            
+            // Highlight code in backticks
+            highlighted = highlighted.replace(/`([^`]+)`/g, '<span style="color: #ce9178;">$1</span>');
+            
+            // Highlight YAML separators
+            highlighted = highlighted.replace(/^---$/gm, '<span style="color: #808080;">---</span>');
+        }
+        
+        return highlighted;
+    }
+
+    showError(message) {
+        console.error('Component page error:', message);
+        
+        document.getElementById('loadingState').style.display = 'none';
+        document.getElementById('componentContent').style.display = 'none';
+        document.getElementById('errorState').style.display = 'block';
+        
+        // Update error message if needed
+        const errorElement = document.querySelector('#errorState p');
+        if (errorElement && message !== 'Missing component parameters in URL') {
+            errorElement.textContent = message;
+        }
+    }
+
+    // Static method to create URL for component
+    static createComponentURL(type, name, path) {
+        // Detect if we're in local development
+        const isLocal = window.location.hostname === 'localhost' || 
+                       window.location.hostname === '127.0.0.1' ||
+                       window.location.hostname.includes('5500');
+        
+        if (!isLocal && type && name) {
+            // Use SEO-friendly URL structure for production: /component/type/name
+            let cleanName = name;
+            if (cleanName.endsWith('.md')) {
+                cleanName = cleanName.slice(0, -3);
+            }
+            if (cleanName.endsWith('.json')) {
+                cleanName = cleanName.slice(0, -5);
+            }
+            
+            return `component/${encodeURIComponent(type)}/${encodeURIComponent(cleanName)}`;
+        }
+        
+        // Use query parameters for local development or fallback
+        const params = new URLSearchParams();
+        params.set('type', type);
+        if (name) params.set('name', name);
+        if (path) params.set('path', path);
+        
+        return `component.html?${params.toString()}`;
+    }
+}
+
+// Global function for creating component URLs (used by other scripts)
+function createComponentURL(type, name, path) {
+    return ComponentPageManager.createComponentURL(type, name, path);
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    window.componentPageManager = new ComponentPageManager();
+});
+
+// Export for other scripts
+window.ComponentPageManager = ComponentPageManager;
+
+// Component Share functionality
+function toggleComponentShareDropdown() {
+    const shareDropdown = document.getElementById('componentShareDropdown');
+    if (shareDropdown) {
+        shareDropdown.classList.toggle('open');
+    }
+}
+
+function shareComponentOnTwitter() {
+    const componentManager = window.componentPageManager;
+    let message;
+    
+    if (componentManager && componentManager.component) {
+        const cleanName = componentManager.getCleanComponentName(componentManager.component.name);
+        const type = componentManager.component.type.charAt(0).toUpperCase() + componentManager.component.type.slice(1);
+        const category = componentManager.component.category || 'Development';
+        const canonicalURL = componentManager.generateCanonicalURL();
+        
+        message = `🚀 Found this amazing ${cleanName} ${type} for Claude Code!
+
+Perfect for ${category.toLowerCase()} workflows with AI-powered automation.
+
+${canonicalURL}
+
+#ClaudeCode #AI #Development #${category.replace(/\s+/g, '')} #Automation`;
+    } else {
+        // Fallback message
+        const componentTitle = document.getElementById('componentTitle')?.textContent || 'Claude Code Component';
+        const currentURL = window.location.href;
+        message = `🚀 Check out this ${componentTitle} for Claude Code!
+
+Perfect for AI-powered development workflows.
+
+${currentURL}
+
+#ClaudeCode #AI #Development`;
+    }
+    
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}`;
+    window.open(twitterUrl, '_blank');
+    
+    // Close dropdown after sharing
+    const shareDropdown = document.getElementById('componentShareDropdown');
+    if (shareDropdown) {
+        shareDropdown.classList.remove('open');
+    }
+}
+
+function shareComponentOnThreads() {
+    const componentManager = window.componentPageManager;
+    let message;
+    
+    if (componentManager && componentManager.component) {
+        const cleanName = componentManager.getCleanComponentName(componentManager.component.name);
+        const type = componentManager.component.type.charAt(0).toUpperCase() + componentManager.component.type.slice(1);
+        const category = componentManager.component.category || 'Development';
+        const canonicalURL = componentManager.generateCanonicalURL();
+        
+        message = `🚀 Found this amazing ${cleanName} ${type} for Claude Code!
+
+Perfect for ${category.toLowerCase()} workflows with AI-powered automation.
+
+${canonicalURL}
+
+#ClaudeCode #AI #Development #${category.replace(/\s+/g, '')} #Automation`;
+    } else {
+        // Fallback message
+        const componentTitle = document.getElementById('componentTitle')?.textContent || 'Claude Code Component';
+        const currentURL = window.location.href;
+        message = `🚀 Check out this ${componentTitle} for Claude Code!
+
+Perfect for AI-powered development workflows.
+
+${currentURL}
+
+#ClaudeCode #AI #Development`;
+    }
+    
+    const threadsUrl = `https://threads.net/intent/post?text=${encodeURIComponent(message)}`;
+    window.open(threadsUrl, '_blank');
+    
+    // Close dropdown after sharing
+    const shareDropdown = document.getElementById('componentShareDropdown');
+    if (shareDropdown) {
+        shareDropdown.classList.remove('open');
+    }
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+    const shareDropdown = document.getElementById('componentShareDropdown');
+    if (shareDropdown && !shareDropdown.contains(e.target)) {
+        shareDropdown.classList.remove('open');
+    }
+});