claude-code-templates 1.21.1 → 1.21.3

package/docs/js/stack-router.js

@@ -1,561 +0,0 @@
-// Stack Router - Handles company and technology specific stack pages
-class StackRouter {
-    constructor() {
-        this.routes = new Map();
-        this.currentRoute = null;
-        this.init();
-    }
-
-    init() {
-        // Listen for hash changes and initial load
-        window.addEventListener('hashchange', () => this.handleRouteChange());
-        window.addEventListener('load', () => this.handleRouteChange());
-        
-        // Check for path-based routes on load
-        this.handleRouteChange();
-    }
-
-    // Get company info from data loader
-    getCompanyInfo(slug) {
-        return window.dataLoader.getCompanyInfo(slug);
-    }
-
-    // Get technology info from data loader
-    getTechnologyInfo(slug) {
-        return window.dataLoader.getTechnologyInfo(slug);
-    }
-
-    // Handle route changes
-    handleRouteChange() {
-        const path = window.location.pathname;
-        const hash = window.location.hash;
-        
-        // Check for company routes (/company/epic-games)
-        const companyMatch = path.match(/\/company\/([^\/]+)/);
-        if (companyMatch) {
-            this.loadCompanyStack(companyMatch[1]);
-            return;
-        }
-
-        // Check for technology routes (/technology/unity)
-        const technologyMatch = path.match(/\/technology\/([^\/]+)/);
-        if (technologyMatch) {
-            this.loadTechnologyStack(technologyMatch[1]);
-            return;
-        }
-
-        // Check for hash-based routes for development
-        if (hash.startsWith('#/company/')) {
-            const company = hash.replace('#/company/', '');
-            this.loadCompanyStack(company);
-            return;
-        }
-
-        if (hash.startsWith('#/technology/')) {
-            const technology = hash.replace('#/technology/', '');
-            this.loadTechnologyStack(technology);
-            return;
-        }
-
-        if (hash === '#/companies') {
-            this.loadAllCompaniesPage();
-            return;
-        }
-
-        // Return to main page
-        this.loadMainPage();
-    }
-
-    // Load company-specific stack page
-    async loadCompanyStack(companySlug) {
-        console.log('Loading company stack:', companySlug);
-        
-        const companyInfo = this.getCompanyInfo(companySlug);
-        if (!companyInfo) {
-            console.error('Company not found:', companySlug);
-            return;
-        }
-
-        this.currentRoute = { type: 'company', slug: companySlug, info: companyInfo };
-        
-        // Wait for data to be loaded
-        if (!window.dataLoader.componentsData) {
-            await window.dataLoader.loadAllComponents();
-        }
-        
-        // Get company stack components
-        const stackComponents = window.dataLoader.getCompanyStack(companySlug);
-        
-        // Update page content
-        this.renderStackPage(companyInfo, stackComponents, 'company');
-        
-        // Update page title and meta
-        document.title = `${companyInfo.name} Stack - Claude Code Templates`;
-        this.updateMetaTags(companyInfo, 'company');
-    }
-
-    // Load technology-specific stack page
-    async loadTechnologyStack(techSlug) {
-        console.log('Loading technology stack:', techSlug);
-        
-        const techInfo = this.getTechnologyInfo(techSlug);
-        if (!techInfo) {
-            console.error('Technology not found:', techSlug);
-            return;
-        }
-
-        this.currentRoute = { type: 'technology', slug: techSlug, info: techInfo };
-        
-        // Wait for data to be loaded
-        if (!window.dataLoader.componentsData) {
-            await window.dataLoader.loadAllComponents();
-        }
-        
-        // Get technology stack components
-        const stackComponents = window.dataLoader.getTechnologyStack(techSlug);
-        
-        // Update page content
-        this.renderStackPage(techInfo, stackComponents, 'technology');
-        
-        // Update page title and meta
-        document.title = `${techInfo.name} Stack - Claude Code Templates`;
-        this.updateMetaTags(techInfo, 'technology');
-    }
-
-    // Render stack page content
-    renderStackPage(stackInfo, components, type) {
-        const main = document.querySelector('main.terminal');
-        if (!main) return;
-        
-        // Hide original content
-        const originalSections = main.querySelectorAll('section:not(.stack-page)');
-        originalSections.forEach(section => section.style.display = 'none');
-        
-        // Remove existing stack page if any
-        const existingStackPage = main.querySelector('.stack-page');
-        if (existingStackPage) {
-            existingStackPage.remove();
-        }
-        
-        // Create stack page
-        const stackPageHTML = this.generateStackPageHTML(stackInfo, components, type);
-        main.insertAdjacentHTML('afterbegin', stackPageHTML);
-        
-        // Initialize cart functionality for the new page
-        if (window.initializeCartForStackPage) {
-            window.initializeCartForStackPage();
-        }
-        
-        // Update header to show back button
-        this.updateHeaderForStack(stackInfo);
-    }
-
-    // Generate stack page HTML
-    generateStackPageHTML(stackInfo, components, type) {
-        const totalComponents = Object.values(components).reduce((sum, arr) => sum + arr.length, 0);
-        
-        return `
-        <section class="stack-page">
-            <!-- Stack Header -->
-            <div class="stack-header">
-                <div class="stack-info">
-                    <div class="stack-logo">${stackInfo.logo}</div>
-                    <div class="stack-details">
-                        <h1>${stackInfo.name} Development Stack</h1>
-                        <p class="stack-description">${stackInfo.description}</p>
-                        <div class="stack-stats">
-                            <div class="stack-stat">
-                                <span class="stat-number">${totalComponents}</span>
-                                <span class="stat-label">Components</span>
-                            </div>
-                            <div class="stack-stat">
-                                <span class="stat-number">${components.agents.length}</span>
-                                <span class="stat-label">Agents</span>
-                            </div>
-                            <div class="stack-stat">
-                                <span class="stat-number">${components.commands.length}</span>
-                                <span class="stat-label">Commands</span>
-                            </div>
-                            <div class="stack-stat">
-                                <span class="stat-number">${components.mcps.length}</span>
-                                <span class="stat-label">MCPs</span>
-                            </div>
-                        </div>
-                        ${stackInfo.website ? `<a href="${stackInfo.website}" target="_blank" class="stack-website">Visit ${stackInfo.name} →</a>` : ''}
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Stack Components -->
-            <div class="stack-components">
-                ${this.generateStackComponentsHTML(components)}
-            </div>
-            
-            <!-- Install All Section -->
-            <div class="stack-install-all">
-                <h3>🚀 Install Complete ${stackInfo.name} Stack</h3>
-                <p>Get all ${totalComponents} components with a single command:</p>
-                <div class="command-line">
-                    <span class="prompt">$</span>
-                    <code class="command" id="stackInstallCommand">${this.generateStackInstallCommand(components)}</code>
-                    <button class="copy-btn" onclick="copyToClipboard(document.getElementById('stackInstallCommand').textContent)">Copy</button>
-                </div>
-            </div>
-        </section>
-        `;
-    }
-
-    // Generate components sections HTML
-    generateStackComponentsHTML(components) {
-        let html = '';
-        
-        const sections = [
-            { type: 'agents', title: 'AI Agents', icon: '🤖', description: 'Specialized AI assistants for your workflow' },
-            { type: 'commands', title: 'Commands', icon: '⚡', description: 'Ready-to-use automation commands' },
-            { type: 'mcps', title: 'MCPs', icon: '🔌', description: 'Model Context Protocol integrations' }
-        ];
-        
-        sections.forEach(section => {
-            const items = components[section.type] || [];
-            if (items.length > 0) {
-                html += `
-                <div class="stack-section">
-                    <div class="stack-section-header">
-                        <h3>${section.icon} ${section.title}</h3>
-                        <p>${section.description}</p>
-                        <span class="component-count">${items.length} ${items.length === 1 ? section.type.slice(0, -1) : section.type}</span>
-                    </div>
-                    <div class="stack-grid">
-                        ${items.map(component => this.generateComponentCardHTML(component)).join('')}
-                    </div>
-                </div>
-                `;
-            }
-        });
-        
-        return html;
-    }
-
-    // Generate component card HTML
-    generateComponentCardHTML(component) {
-        const { tags, companies, technologies } = window.dataLoader.getComponentMetadata(component.name);
-        
-        return `
-        <div class="component-card stack-component" data-name="${component.name}" data-type="${component.type}">
-            <div class="component-header">
-                <h4>${component.name}</h4>
-                <div class="component-actions">
-                    <button class="add-to-cart-btn" onclick="addToCart('${component.name}', '${component.type}')">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M19,7H18V6A6,6 0 0,0 6,6V7H5A1,1 0 0,0 4,8V19A3,3 0 0,0 7,22H17A3,3 0 0,0 20,19V8A1,1 0 0,0 19,7M12,2A4,4 0 0,1 16,6V7H8V6A4,4 0 0,1 12,2M7,20A1,1 0 0,1 6,19V9H8V11A1,1 0 0,0 10,11A1,1 0 0,0 10,9V9H14V11A1,1 0 0,0 16,11A1,1 0 0,0 16,9V9H18V19A1,1 0 0,1 17,20H7M12,13A1,1 0 0,0 11,14A1,1 0 0,0 12,15A1,1 0 0,0 13,14A1,1 0 0,0 12,13Z"/>
-                        </svg>
-                        Add
-                    </button>
-                </div>
-            </div>
-            <div class="component-content">
-                ${this.extractDescription(component.content)}
-            </div>
-            ${tags.length > 0 || technologies.length > 0 ? `
-            <div class="component-tags">
-                ${[...tags.slice(0, 3), ...technologies.slice(0, 2)].map(tag => 
-                    `<span class="component-tag">${tag}</span>`
-                ).join('')}
-            </div>
-            ` : ''}
-        </div>
-        `;
-    }
-
-    // Extract description from component content
-    extractDescription(content) {
-        const descMatch = content.match(/description:\s*(.+?)(?:\n|$)/);
-        if (descMatch) {
-            return descMatch[1].replace(/^['"]|['"]$/g, '').substring(0, 150) + '...';
-        }
-        return 'No description available';
-    }
-
-    // Generate install command for entire stack
-    generateStackInstallCommand(components) {
-        const allComponents = [...components.agents, ...components.commands, ...components.mcps];
-        const componentArgs = allComponents.map(c => `--${c.type} ${c.name}`).join(' ');
-        return `npx claude-code-templates@latest ${componentArgs}`;
-    }
-
-    // Update header for stack page
-    updateHeaderForStack(stackInfo) {
-        const header = document.querySelector('.header');
-        if (!header) return;
-        
-        // Add back button
-        let backButton = header.querySelector('.back-button');
-        if (!backButton) {
-            backButton = document.createElement('button');
-            backButton.className = 'back-button';
-            backButton.innerHTML = `
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"/>
-                </svg>
-                Back to Main
-            `;
-            backButton.onclick = () => this.goBack();
-            
-            const headerContent = header.querySelector('.header-content');
-            if (headerContent) {
-                headerContent.insertBefore(backButton, headerContent.firstChild);
-            }
-        }
-    }
-
-    // Update meta tags for SEO
-    updateMetaTags(stackInfo, type) {
-        // Update Open Graph tags
-        const ogTitle = document.querySelector('meta[property="og:title"]');
-        const ogDescription = document.querySelector('meta[property="og:description"]');
-        
-        if (ogTitle) {
-            ogTitle.content = `${stackInfo.name} Development Stack - Claude Code Templates`;
-        }
-        
-        if (ogDescription) {
-            ogDescription.content = stackInfo.description;
-        }
-        
-        // Update Twitter tags
-        const twitterTitle = document.querySelector('meta[property="twitter:title"]');
-        const twitterDescription = document.querySelector('meta[property="twitter:description"]');
-        
-        if (twitterTitle) {
-            twitterTitle.content = `${stackInfo.name} Development Stack - Claude Code Templates`;
-        }
-        
-        if (twitterDescription) {
-            twitterDescription.content = stackInfo.description;
-        }
-    }
-
-    // Navigate back to main page
-    goBack() {
-        // Remove stack page
-        const stackPage = document.querySelector('.stack-page');
-        if (stackPage) {
-            stackPage.remove();
-        }
-        
-        // Show original content
-        const main = document.querySelector('main.terminal');
-        if (main) {
-            const originalSections = main.querySelectorAll('section:not(.stack-page)');
-            originalSections.forEach(section => section.style.display = '');
-        }
-        
-        // Remove back button
-        const backButton = document.querySelector('.back-button');
-        if (backButton) {
-            backButton.remove();
-        }
-        
-        // Reset route
-        this.currentRoute = null;
-        window.history.pushState({}, '', window.location.pathname);
-        
-        // Reset page title and meta
-        document.title = 'Claude Code Templates';
-        this.resetMetaTags();
-    }
-
-    // Load main page (reset everything)
-    loadMainPage() {
-        if (this.currentRoute) {
-            this.goBack();
-        }
-    }
-
-    // Reset meta tags to original values
-    resetMetaTags() {
-        const ogTitle = document.querySelector('meta[property="og:title"]');
-        const ogDescription = document.querySelector('meta[property="og:description"]');
-        
-        if (ogTitle) {
-            ogTitle.content = 'Claude Code Templates - Ready-to-use configurations';
-        }
-        
-        if (ogDescription) {
-            ogDescription.content = 'Browse and install Claude Code configuration templates for different languages and frameworks. Includes 100+ agents, 159+ commands, 23+ MCPs, and 14+ templates.';
-        }
-    }
-
-    // Load all companies page
-    async loadAllCompaniesPage() {
-        console.log('Loading all companies page');
-        
-        this.currentRoute = { type: 'companies', slug: 'all' };
-        
-        // Wait for data to be loaded
-        if (!window.dataLoader.componentsData) {
-            await window.dataLoader.loadAllComponents();
-        }
-        
-        // Update page content
-        this.renderAllCompaniesPage();
-        
-        // Update page title and meta
-        document.title = 'All Development Stacks - Claude Code Templates';
-        this.updateMetaTagsForAllCompanies();
-    }
-
-    // Render all companies page
-    renderAllCompaniesPage() {
-        const main = document.querySelector('main.terminal');
-        if (!main) return;
-        
-        // Hide original content
-        const originalSections = main.querySelectorAll('section:not(.stack-page)');
-        originalSections.forEach(section => section.style.display = 'none');
-        
-        // Remove existing stack page if any
-        const existingStackPage = main.querySelector('.stack-page');
-        if (existingStackPage) {
-            existingStackPage.remove();
-        }
-        
-        // Get all companies from metadata
-        const allCompanies = window.dataLoader.metadataData?.companies || {};
-        
-        // Create all companies page
-        const allCompaniesHTML = this.generateAllCompaniesPageHTML(allCompanies);
-        main.insertAdjacentHTML('afterbegin', allCompaniesHTML);
-        
-        // Update header to show back button
-        this.updateHeaderForStack({ name: 'All Development Stacks' });
-    }
-
-    // Generate all companies page HTML
-    generateAllCompaniesPageHTML(companies) {
-        const companiesArray = Object.entries(companies);
-        
-        // Group companies by category
-        const categories = {
-            'AI & Machine Learning': ['openai', 'anthropic'],
-            'Payments & E-commerce': ['stripe', 'shopify', 'shopify'],
-            'CRM & Business': ['salesforce', 'hubspot', 'airtable', 'linear'],
-            'Communication': ['twilio', 'slack', 'discord', 'sendgrid'],
-            'Cloud & Infrastructure': ['aws', 'vercel', 'netlify', 'cloudflare', 'firebase', 'supabase'],
-            'Databases': ['mongodb', 'planetscale'],
-            'Development Tools': ['github', 'figma', 'adobe', 'atlassian', 'notion'],
-            'Entertainment & Media': ['spotify', 'youtube', 'twitter'],
-            'Game Development': ['unity-technologies', 'epic-games'],
-            'Marketing': ['mailchimp', 'hubspot']
-        };
-        
-        let categorizedHTML = '';
-        let uncategorizedCompanies = [...companiesArray];
-        
-        // Generate categorized sections
-        Object.entries(categories).forEach(([categoryName, companyIds]) => {
-            const categoryCompanies = companyIds
-                .map(id => companiesArray.find(([key]) => key === id))
-                .filter(Boolean);
-            
-            if (categoryCompanies.length > 0) {
-                categorizedHTML += `
-                <div class="companies-category">
-                    <h3 class="category-title">${categoryName}</h3>
-                    <div class="companies-grid">
-                        ${categoryCompanies.map(([key, company]) => {
-                            // Remove from uncategorized list
-                            uncategorizedCompanies = uncategorizedCompanies.filter(([k]) => k !== key);
-                            return this.generateCompanyCardHTML(key, company);
-                        }).join('')}
-                    </div>
-                </div>
-                `;
-            }
-        });
-        
-        // Add uncategorized companies if any
-        if (uncategorizedCompanies.length > 0) {
-            categorizedHTML += `
-            <div class="companies-category">
-                <h3 class="category-title">Other Platforms</h3>
-                <div class="companies-grid">
-                    ${uncategorizedCompanies.map(([key, company]) => 
-                        this.generateCompanyCardHTML(key, company)
-                    ).join('')}
-                </div>
-            </div>
-            `;
-        }
-        
-        return `
-        <section class="stack-page all-companies-page">
-            <div class="stack-header">
-                <div class="stack-info">
-                    <div class="stack-logo">🏢</div>
-                    <div class="stack-details">
-                        <h1>All Development Stacks</h1>
-                        <p class="stack-description">Complete list of companies and platforms with development APIs, SDKs, and integration opportunities</p>
-                        <div class="stack-stats">
-                            <div class="stack-stat">
-                                <span class="stat-number">${companiesArray.length}</span>
-                                <span class="stat-label">Companies</span>
-                            </div>
-                            <div class="stack-stat">
-                                <span class="stat-number">${Object.keys(categories).length}</span>
-                                <span class="stat-label">Categories</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="all-companies-content">
-                ${categorizedHTML}
-            </div>
-        </section>
-        `;
-    }
-
-    // Generate individual company card for all companies page
-    generateCompanyCardHTML(companyKey, company) {
-        return `
-        <a href="#/company/${companyKey}" class="all-company-card" onclick="window.stackRouter?.navigateTo('#/company/${companyKey}')">
-            <div class="company-card-logo">${company.logo}</div>
-            <div class="company-card-info">
-                <h4>${company.name}</h4>
-                <p>${company.description}</p>
-            </div>
-            <div class="company-card-arrow">→</div>
-        </a>
-        `;
-    }
-
-    // Update meta tags for all companies page
-    updateMetaTagsForAllCompanies() {
-        const ogTitle = document.querySelector('meta[property="og:title"]');
-        const ogDescription = document.querySelector('meta[property="og:description"]');
-        
-        if (ogTitle) {
-            ogTitle.content = 'All Development Stacks - Claude Code Templates';
-        }
-        
-        if (ogDescription) {
-            ogDescription.content = 'Browse all available development stacks for major companies and platforms. Find agents, commands, and MCPs for APIs like OpenAI, Stripe, Shopify, AWS, and more.';
-        }
-    }
-
-    // Navigate programmatically
-    navigateTo(path) {
-        window.history.pushState({}, '', path);
-        this.handleRouteChange();
-    }
-}
-
-// Initialize router when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    window.stackRouter = new StackRouter();
-});
-
-// Make it available globally
-window.StackRouter = StackRouter;