repo-wrapped 0.0.6 → 0.0.9

package/dist/html/shared/scripts/navigation.js

@@ -0,0 +1,156 @@
+// Navigation and Collapsible Sections
+function initNavigation() {
+  // Sidebar navigation - tab switching
+  const sidebarNavItems = document.querySelectorAll('.sidebar .nav-item[data-tab]');
+  const tabButtons = document.querySelectorAll('.tab-button');
+  const tabContents = document.querySelectorAll('.tab-content');
+  
+  // Handle sidebar nav clicks for tab switching
+  sidebarNavItems.forEach(item => {
+    item.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetTab = item.dataset.tab;
+      
+      if (targetTab) {
+        // Update sidebar nav active state
+        sidebarNavItems.forEach(nav => nav.classList.remove('active'));
+        item.classList.add('active');
+        
+        // Update tab button active state
+        tabButtons.forEach(btn => {
+          btn.classList.toggle('active', btn.dataset.tab === targetTab);
+        });
+        
+        // Show target tab content
+        tabContents.forEach(content => {
+          content.classList.toggle('active', content.id === `${targetTab}-content`);
+        });
+      }
+    });
+  });
+  
+  // Keep sidebar nav in sync when tab buttons are clicked
+  tabButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const targetTab = btn.dataset.tab;
+      sidebarNavItems.forEach(nav => {
+        nav.classList.toggle('active', nav.dataset.tab === targetTab);
+      });
+    });
+  });
+  
+  // Quick jump links - handle tab switching and smooth scroll
+  const quickJumpLinks = document.querySelectorAll('.sidebar .nav-item-small[href^="#"]');
+  quickJumpLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const href = link.getAttribute('href');
+      const targetTab = link.dataset.tab;
+      
+      // If link specifies a tab, switch to it first
+      if (targetTab) {
+        // Update sidebar nav active state
+        sidebarNavItems.forEach(nav => nav.classList.remove('active'));
+        const tabNavItem = document.querySelector(`.sidebar .nav-item[data-tab="${targetTab}"]`);
+        if (tabNavItem) tabNavItem.classList.add('active');
+        
+        // Update tab button active state
+        tabButtons.forEach(btn => {
+          btn.classList.toggle('active', btn.dataset.tab === targetTab);
+        });
+        
+        // Show target tab content
+        tabContents.forEach(content => {
+          content.classList.toggle('active', content.id === `${targetTab}-content`);
+        });
+      }
+      
+      // Scroll to section after a short delay to allow tab switch
+      setTimeout(() => {
+        const targetSection = document.querySelector(href);
+        if (targetSection) {
+          targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, targetTab ? 50 : 0);
+    });
+  });
+}
+
+// Collapsible sections
+function initCollapsibleSections() {
+  const sectionHeaders = document.querySelectorAll('.section-header[role="button"]');
+  
+  // Load saved states from localStorage
+  const savedStates = JSON.parse(localStorage.getItem('git-wrapped-sections') || '{}');
+  
+  sectionHeaders.forEach(header => {
+    const section = header.closest('.dashboard-section');
+    const sectionId = section?.id;
+    const content = header.nextElementSibling;
+    const icon = header.querySelector('.collapse-icon');
+    
+    // Restore saved state
+    if (sectionId && savedStates[sectionId] === false) {
+      content.classList.add('collapsed');
+      header.setAttribute('aria-expanded', 'false');
+      if (icon) icon.textContent = '▶';
+    }
+    
+    header.addEventListener('click', () => {
+      const isExpanded = header.getAttribute('aria-expanded') !== 'false';
+      header.setAttribute('aria-expanded', !isExpanded);
+      content.classList.toggle('collapsed');
+      
+      if (icon) {
+        icon.textContent = isExpanded ? '▶' : '▼';
+      }
+      
+      // Save state
+      if (sectionId) {
+        savedStates[sectionId] = !isExpanded;
+        localStorage.setItem('git-wrapped-sections', JSON.stringify(savedStates));
+      }
+    });
+  });
+}
+
+// Mobile hamburger menu
+function initMobileNav() {
+  const hamburger = document.querySelector('.mobile-nav-toggle');
+  const sidebar = document.querySelector('.sidebar');
+  
+  if (hamburger && sidebar) {
+    hamburger.addEventListener('click', () => {
+      sidebar.classList.toggle('open');
+      hamburger.classList.toggle('open');
+    });
+    
+    // Close sidebar when clicking outside on mobile
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth <= 1024) {
+        if (!sidebar.contains(e.target) && !hamburger.contains(e.target)) {
+          sidebar.classList.remove('open');
+          hamburger.classList.remove('open');
+        }
+      }
+    });
+    
+    // Close sidebar when clicking a nav item on mobile
+    const navItems = sidebar.querySelectorAll('.nav-item');
+    navItems.forEach(item => {
+      item.addEventListener('click', () => {
+        if (window.innerWidth <= 1024) {
+          sidebar.classList.remove('open');
+          hamburger.classList.remove('open');
+        }
+      });
+    });
+  }
+}
+
+// Initialize all navigation features
+document.addEventListener('DOMContentLoaded', () => {
+  initNavigation();
+  initCollapsibleSections();
+  initMobileNav();
+});

package/dist/html/shared/scripts/tabs.js

@@ -0,0 +1,18 @@
+// Tab switching functionality
+const tabButtons = document.querySelectorAll('.tab-button');
+const tabContents = document.querySelectorAll('.tab-content');
+
+tabButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    const tabName = button.getAttribute('data-tab');
+    
+    // Remove active class from all buttons and contents
+    tabButtons.forEach(btn => btn.classList.remove('active'));
+    tabContents.forEach(content => content.classList.remove('active'));
+    
+    // Add active class to clicked button and corresponding content
+    button.classList.add('active');
+    const targetContent = document.getElementById(tabName + '-content');
+    if (targetContent) targetContent.classList.add('active');
+  });
+});

package/dist/html/shared/scripts/tooltip.js

@@ -0,0 +1,21 @@
+// Tooltip functionality for contribution graph
+const days = document.querySelectorAll('.day');
+const tooltip = document.getElementById('tooltip');
+
+days.forEach(day => {
+  day.addEventListener('mouseenter', (e) => {
+    const count = day.getAttribute('data-count');
+    const date = day.getAttribute('data-date');
+    tooltip.textContent = `${date}: ${count} contribution${count !== '1' ? 's' : ''}`;
+    tooltip.style.display = 'block';
+  });
+  
+  day.addEventListener('mousemove', (e) => {
+    tooltip.style.left = (e.clientX + 10) + 'px';
+    tooltip.style.top = (e.clientY + 10) + 'px';
+  });
+  
+  day.addEventListener('mouseleave', () => {
+    tooltip.style.display = 'none';
+  });
+});

package/dist/html/shared/styleLoader.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadStyles = loadStyles;
+const fs_1 = require("fs");
+const path_1 = require("path");
+/**
+ * Loads all CSS files and returns them as a concatenated string
+ * for inlining in the HTML output
+ */
+function loadStyles() {
+    const stylesDir = (0, path_1.join)(__dirname, 'styles');
+    const baseCSS = (0, fs_1.readFileSync)((0, path_1.join)(stylesDir, 'base.css'), 'utf-8');
+    const componentsCSS = (0, fs_1.readFileSync)((0, path_1.join)(stylesDir, 'components.css'), 'utf-8');
+    const achievementsCSS = (0, fs_1.readFileSync)((0, path_1.join)(stylesDir, 'achievements.css'), 'utf-8');
+    const knowledgeCSS = (0, fs_1.readFileSync)((0, path_1.join)(stylesDir, 'knowledge.css'), 'utf-8');
+    const strategicInsightsCSS = (0, fs_1.readFileSync)((0, path_1.join)(stylesDir, 'strategic-insights.css'), 'utf-8');
+    return `${baseCSS}\n\n${componentsCSS}\n\n${achievementsCSS}\n\n${knowledgeCSS}\n\n${strategicInsightsCSS}`;
+}

package/dist/html/shared/styles/achievements.css

@@ -0,0 +1,387 @@
+/* === Achievements Section === */
+.achievements-section {
+  margin-top: var(--spacing-xl);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--border-default);
+}
+
+.achievements-section h2 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-md);
+  color: var(--text-primary);
+}
+
+/* === Growth Narrative === */
+.growth-narrative {
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.growth-narrative h3 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.growth-narrative .narrative-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.growth-narrative .narrative-text strong {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.achievement-stats {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  flex-wrap: wrap;
+}
+
+.stat-card {
+  flex: 1;
+  min-width: 200px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--accent-gold);
+  margin-bottom: var(--spacing-xs);
+}
+
+.stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: var(--font-weight-medium);
+}
+
+/* === Progress Ring (SVG) === */
+.progress-ring {
+  display: block;
+}
+
+.achievement-ring-wrapper {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+}
+
+.achievement-ring-wrapper .progress-ring {
+  width: 40px;
+  height: 40px;
+}
+
+.achievement-progress-text {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  margin-top: var(--spacing-xs);
+}
+
+.achievements-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+}
+
+.achievement-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  text-align: center;
+  transition: border-color var(--transition-fast);
+  position: relative;
+}
+
+.achievement-card.unlocked {
+  border-color: var(--accent-gold);
+}
+
+/* Subtle unlock animation */
+@keyframes achievement-unlock {
+  0% { 
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% { 
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.achievement-card.recently-unlocked {
+  animation: achievement-unlock 0.3s ease-out;
+}
+
+.achievement-card.unlocked:hover {
+  border-color: var(--accent-gold-muted);
+}
+
+.achievement-card.locked {
+  opacity: 0.6;
+  filter: grayscale(80%);
+}
+
+.badge-emoji {
+  font-size: 48px;
+  margin-bottom: var(--spacing-sm);
+}
+
+.badge-name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.badge-description {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin-bottom: var(--spacing-sm);
+  min-height: 32px;
+}
+
+.badge-tier {
+  display: inline-block;
+  padding: 3px var(--spacing-sm);
+  border-radius: var(--radius-md);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  margin-top: var(--spacing-xs);
+}
+
+/* Muted Tier Colors */
+.badge-tier.bronze { background: var(--tier-bronze); color: white; }
+.badge-tier.silver { background: var(--tier-silver); color: var(--bg-primary); }
+.badge-tier.gold { background: var(--tier-gold); color: var(--bg-primary); }
+.badge-tier.platinum { background: var(--tier-platinum); color: var(--bg-primary); }
+.badge-tier.legendary { background: var(--tier-legendary); color: white; }
+
+.achievement-progress {
+  margin-top: var(--spacing-sm);
+  height: 4px;
+  background: var(--border-subtle);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.achievement-progress-fill {
+  height: 100%;
+  background: var(--accent-blue);
+  transition: width 0.5s;
+}
+
+/* === Next Milestones === */
+.next-milestones {
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+}
+
+.next-milestones h3 {
+  font-size: var(--font-size-lg);
+  color: var(--accent-gold);
+  margin-bottom: var(--spacing-md);
+}
+
+.milestone-item {
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-sm);
+  border-left: 3px solid var(--accent-gold);
+}
+
+.milestone-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.milestone-emoji {
+  font-size: 24px;
+}
+
+.milestone-name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.milestone-description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.4;
+}
+
+.milestone-progress-bar {
+  height: 20px;
+  background: var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  position: relative;
+}
+
+.milestone-progress-fill {
+  height: 100%;
+  background: var(--accent-green);
+  transition: width 0.5s;
+}
+
+.milestone-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: white;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+}
+
+/* === Achievement Categories === */
+.achievement-categories {
+  margin-top: var(--spacing-lg);
+}
+
+.category-section {
+  margin-bottom: var(--spacing-lg);
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+}
+
+.category-section h3 {
+  font-size: var(--font-size-lg);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.category-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.category-bar {
+  flex: 1;
+  height: 8px;
+  background: var(--border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.category-fill {
+  height: 100%;
+  background: var(--accent-gold);
+  transition: width 0.5s;
+}
+
+.category-count {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.achievement-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--spacing-sm);
+}
+
+.achievement-item {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  text-align: center;
+  transition: border-color var(--transition-fast);
+  position: relative;
+}
+
+.achievement-item.unlocked {
+  border-color: var(--accent-gold);
+}
+
+.achievement-item.unlocked:hover {
+  border-color: var(--accent-gold-muted);
+}
+
+.achievement-item.locked {
+  opacity: 0.6;
+  filter: grayscale(80%);
+}
+
+.achievement-emoji {
+  font-size: 36px;
+  margin-bottom: var(--spacing-sm);
+}
+
+.achievement-name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.achievement-description {
+  font-size: 10px;
+  color: var(--text-secondary);
+  line-height: 1.3;
+  min-height: 26px;
+}
+
+/* === New Badges === */
+.new-badges {
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  border-left: 3px solid var(--accent-gold);
+}
+
+.new-badges h3 {
+  font-size: var(--font-size-md);
+  color: var(--accent-gold);
+  margin-bottom: var(--spacing-sm);
+}
+
+.badge-list {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+.badge-item-mini {
+  background: var(--bg-primary);
+  border: 1px solid var(--accent-gold);
+  border-radius: 20px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}