@programinglive/commiter 1.1.9 → 1.1.11

package/web/js/script.js

@@ -0,0 +1,234 @@
+// ===========================
+// Mobile Menu Toggle
+// ===========================
+const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+const navLinks = document.querySelector('.nav-links');
+
+if (mobileMenuToggle) {
+    mobileMenuToggle.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+        mobileMenuToggle.classList.toggle('active');
+    });
+}
+
+// ===========================
+// Copy to Clipboard
+// ===========================
+const copyButtons = document.querySelectorAll('.copy-btn');
+
+copyButtons.forEach(button => {
+    button.addEventListener('click', async () => {
+        const textToCopy = button.getAttribute('data-copy');
+
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+
+            // Visual feedback
+            const originalHTML = button.innerHTML;
+            button.innerHTML = `
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M16.667 5L7.5 14.167L3.333 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
+            button.style.color = '#10b981';
+
+            setTimeout(() => {
+                button.innerHTML = originalHTML;
+                button.style.color = '';
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    });
+});
+
+// ===========================
+// Smooth Scroll with Offset
+// ===========================
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        const href = this.getAttribute('href');
+
+        // Skip if it's just "#"
+        if (href === '#') return;
+
+        e.preventDefault();
+
+        const target = document.querySelector(href);
+        if (target) {
+            const navbarHeight = document.querySelector('.navbar').offsetHeight;
+            const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navbarHeight - 20;
+
+            window.scrollTo({
+                top: targetPosition,
+                behavior: 'smooth'
+            });
+
+            // Close mobile menu if open
+            if (navLinks.classList.contains('active')) {
+                navLinks.classList.remove('active');
+                mobileMenuToggle.classList.remove('active');
+            }
+        }
+    });
+});
+
+// ===========================
+// Navbar Background on Scroll
+// ===========================
+const navbar = document.querySelector('.navbar');
+let lastScroll = 0;
+
+window.addEventListener('scroll', () => {
+    const currentScroll = window.pageYOffset;
+
+    if (currentScroll > 100) {
+        navbar.style.background = 'rgba(10, 10, 15, 0.95)';
+        navbar.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.2)';
+    } else {
+        navbar.style.background = 'rgba(10, 10, 15, 0.8)';
+        navbar.style.boxShadow = 'none';
+    }
+
+    lastScroll = currentScroll;
+});
+
+// ===========================
+// Intersection Observer for Animations
+// ===========================
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateY(0)';
+        }
+    });
+}, observerOptions);
+
+// Observe all feature cards, install cards, and step cards
+const animatedElements = document.querySelectorAll('.feature-card, .install-card, .step-card, .release-item');
+animatedElements.forEach(el => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(20px)';
+    el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+    observer.observe(el);
+});
+
+// ===========================
+// Add Active State to Nav Links
+// ===========================
+const sections = document.querySelectorAll('section[id]');
+const navItems = document.querySelectorAll('.nav-links a[href^="#"]');
+
+window.addEventListener('scroll', () => {
+    let current = '';
+
+    sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.clientHeight;
+        if (pageYOffset >= (sectionTop - 200)) {
+            current = section.getAttribute('id');
+        }
+    });
+
+    navItems.forEach(item => {
+        item.classList.remove('active');
+        if (item.getAttribute('href') === `#${current}`) {
+            item.classList.add('active');
+        }
+    });
+});
+
+// ===========================
+// Terminal Animation
+// ===========================
+const codeLines = document.querySelectorAll('.code-line');
+let delay = 0;
+
+codeLines.forEach((line, index) => {
+    line.style.opacity = '0';
+    line.style.animation = `fadeIn 0.5s ease-out ${delay}s forwards`;
+    delay += 0.3;
+});
+
+// Add fadeIn keyframe animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateX(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+    
+    .nav-links.active {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(10, 10, 15, 0.98);
+        backdrop-filter: blur(20px);
+        padding: var(--spacing-md);
+        border-bottom: 1px solid var(--border);
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(2) {
+        opacity: 0;
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(3) {
+        transform: rotate(-45deg) translate(7px, -6px);
+    }
+    
+    .nav-links a.active {
+        color: var(--primary-light);
+        background: var(--bg-glass);
+    }
+`;
+document.head.appendChild(style);
+
+// ===========================
+// Performance Optimization
+// ===========================
+// Debounce function for scroll events
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Apply debounce to scroll handlers
+const debouncedScroll = debounce(() => {
+    // Scroll handlers are already defined above
+}, 10);
+
+window.addEventListener('scroll', debouncedScroll);
+
+// ===========================
+// Console Easter Egg
+// ===========================
+console.log('%c🚀 Commiter', 'font-size: 24px; font-weight: bold; background: linear-gradient(135deg, #6366f1, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;');
+console.log('%cAutomate your releases with confidence!', 'font-size: 14px; color: #a1a1aa;');
+console.log('%cGitHub: https://github.com/programinglive/commiter', 'font-size: 12px; color: #6366f1;');
+console.log('%cNPM: https://www.npmjs.com/package/@programinglive/commiter', 'font-size: 12px; color: #6366f1;');

package/web/og-image.svg

@@ -0,0 +1,24 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <!-- Background: Very Dark Grey (GitHub/Terminal Style) -->
+    <rect width="1200" height="630" fill="#0D1117"/>
+    
+    <!-- Subtle Background Pattern (Optional Grid) -->
+    <path d="M0 630V0H1200V630" fill="url(#grid)" opacity="0.1"/>
+    <defs>
+        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"/>
+        </pattern>
+    </defs>
+
+    <!-- Central Group -->
+    <g transform="translate(600, 315)" text-anchor="middle">
+        <!-- Rocket Emoji (Using text for consistent vibe) -->
+        <text x="0" y="-20" font-family="Arial, sans-serif" font-size="150" fill="white" text-anchor="middle">🚀</text>
+        
+        <!-- Brand Name -->
+        <text x="0" y="130" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-weight="800" font-size="120" fill="#FFFFFF" text-anchor="middle">Commiter</text>
+        
+        <!-- Tagline -->
+        <text x="0" y="200" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="32" fill="#8B949E" text-anchor="middle">Automated Commit Conventions &amp; Release Management</text>
+    </g>
+</svg>