jekyll-theme-zer0 0.2.1 → 0.5.0

data/_layouts/stats.html

@@ -0,0 +1,178 @@
+---
+layout: root
+---
+<!--
+  ===================================================================
+  STATS LAYOUT - Statistics dashboard layout
+  ===================================================================
+  
+  File: stats.html
+  Path: _layouts/stats.html
+  Inherits: root.html
+  Purpose: Dedicated layout for statistics and analytics dashboards
+  
+  Template Logic:
+  - Creates a full-width responsive layout optimized for data visualization
+  - Includes specialized components for statistics display
+  - Uses card-based layout for metric organization
+  - Responsive design that adapts to different screen sizes
+  - Integrates with Jekyll data files for dynamic content
+  
+  Layout Structure:
+  1. Container wrapper with Bootstrap responsive classes
+  2. Page header with title and metadata
+  3. Statistics overview cards section
+  4. Detailed analytics sections
+  5. Interactive components and charts
+  
+  Dependencies:
+  - stats/stats-header.html: Page header and navigation
+  - stats/stats-overview.html: Overview metrics cards
+  - stats/stats-categories.html: Category analysis
+  - stats/stats-tags.html: Tag cloud and analysis
+  - stats/stats-metrics.html: Additional metrics and facts
+  
+  Bootstrap Classes Used:
+  - container-fluid: Full-width container
+  - row/col: Grid system for responsive layout
+  - card: Card components for metric display
+  - badge: Badges for counts and labels
+  ===================================================================
+-->
+
+<!-- ================================================ -->
+<!-- STATS LAYOUT CONTAINER                          -->
+<!-- Full-width responsive container for dashboard    -->
+<!-- ================================================ -->
+<div class="container-fluid py-4">
+  
+  <!-- ================================================ -->
+  <!-- STATS HEADER SECTION                            -->
+  <!-- Page title, description, and metadata           -->
+  <!-- ================================================ -->
+  {% include stats/stats-header.html %}
+  
+  <!-- ================================================ -->
+  <!-- STATS VALIDATION CHECK                          -->
+  <!-- Verify data availability before rendering        -->
+  <!-- ================================================ -->
+  {% if site.data.content_statistics %}
+    
+    <!-- ================================================ -->
+    <!-- OVERVIEW METRICS SECTION                        -->
+    <!-- High-level statistics cards                     -->
+    <!-- ================================================ -->
+    {% include stats/stats-overview.html %}
+    
+    <!-- ================================================ -->
+    <!-- DETAILED ANALYTICS SECTIONS                     -->
+    <!-- Categories, tags, and metrics breakdown         -->
+    <!-- ================================================ -->
+    <div class="row g-4 mb-5">
+      <!-- Categories Analysis -->
+      <div class="col-lg-6">
+        {% include stats/stats-categories.html %}
+      </div>
+      
+      <!-- Tags Analysis -->
+      <div class="col-lg-6">
+        {% include stats/stats-tags.html %}
+      </div>
+    </div>
+    
+    <!-- ================================================ -->
+    <!-- ADDITIONAL METRICS SECTION                      -->
+    <!-- Quick facts and summary information             -->
+    <!-- ================================================ -->
+    {% include stats/stats-metrics.html %}
+    
+  {% else %}
+    
+    <!-- ================================================ -->
+    <!-- NO DATA AVAILABLE SECTION                       -->
+    <!-- Error state when statistics are not generated   -->
+    <!-- ================================================ -->
+    {% include stats/stats-no-data.html %}
+    
+  {% endif %}
+  
+  <!-- ================================================ -->
+  <!-- MAIN CONTENT AREA                               -->
+  <!-- Additional page content below statistics        -->
+  <!-- ================================================ -->
+  {% if content and content != empty %}
+    <div class="row mt-5">
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            {{ content }}
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+</div>
+
+<!-- ================================================ -->
+<!-- STATS-SPECIFIC JAVASCRIPT                       -->
+<!-- Initialize charts and interactive components    -->
+<!-- ================================================ -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize tooltips for stats elements
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+  
+  // Add smooth scroll behavior for stats navigation
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+      const target = document.querySelector(this.getAttribute('href'));
+      if (target) {
+        target.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
+    });
+  });
+  
+  // Animate progress bars
+  setTimeout(function() {
+    document.querySelectorAll('.progress-bar').forEach(function(bar) {
+      const width = bar.getAttribute('data-width');
+      if (width) {
+        bar.style.width = width;
+      }
+    });
+  }, 500);
+  
+  // Add fade-in animation to cards
+  setTimeout(function() {
+    document.querySelectorAll('.stats-card').forEach(function(card, index) {
+      setTimeout(function() {
+        card.classList.add('fade-in');
+      }, index * 100);
+    });
+  }, 200);
+  
+  // Add intersection observer for animations
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('slide-up');
+        }
+      });
+    }, {
+      threshold: 0.1
+    });
+    
+    document.querySelectorAll('.card:not(.stats-card)').forEach(function(card) {
+      observer.observe(card);
+    });
+  }
+});
+</script>

data/assets/css/stats.css

@@ -0,0 +1,392 @@
+/*
+  ===================================================================
+  STATISTICS PAGE STYLES - BOOTSTRAP 5 OPTIMIZED
+  ===================================================================
+  
+  File: stats.css
+  Purpose: Custom styles for the statistics dashboard that cannot be 
+           achieved with Bootstrap 5 utility classes alone.
+  
+  Philosophy: Bootstrap 5 First Approach
+  - Use Bootstrap 5 utility classes for all standard styling
+  - Custom CSS only for:
+    * Animations and transitions
+    * Shimmer effects and loading states
+    * Complex visual effects not available in Bootstrap
+    * Print styles for accessibility
+    * Icon animations and custom dimensions
+  
+  Dependencies:
+  - Bootstrap 5.3.3 (primary framework)
+  - Bootstrap Icons (for iconography)
+  
+  Note: This file should remain minimal. Most styling is handled
+        through Bootstrap 5 utility classes in the HTML components.
+  ===================================================================
+*/
+
+/* ========================================== */
+/* PROGRESS BAR ENHANCEMENTS                 */
+/* ========================================== */
+
+/* Custom progress bar animations */
+.stats-progress {
+  height: 1.25rem;
+  background-color: var(--bs-gray-200);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.stats-progress .progress-bar {
+  transition: width 1.5s ease-in-out;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+/* Progress bar animation on load */
+.stats-progress-animate .progress-bar {
+  animation: progress-fill 2s ease-in-out;
+}
+
+@keyframes progress-fill {
+  0% { width: 0% !important; }
+  100% { width: var(--progress-width, 0%); }
+}
+
+/* ========================================== */
+/* TAG CLOUD STYLES                          */
+/* ========================================== */
+
+/* Tag cloud interactive effects */
+.tag-cloud .badge {
+  transition: all 0.3s ease;
+  cursor: pointer;
+  margin: 0.25rem;
+}
+
+.tag-cloud .badge:hover {
+  transform: scale(1.1);
+  background-color: var(--bs-success) !important;
+  color: white !important;
+}
+
+/* Outline badge style for tags */
+.bg-outline-success {
+  background-color: transparent;
+  border: 1px solid var(--bs-success);
+  color: var(--bs-success);
+}
+
+/* Tag size variations */
+.tag-cloud .fs-xl { font-size: 1.5rem; }
+.tag-cloud .fs-lg { font-size: 1.25rem; }
+.tag-cloud .fs-md { font-size: 1rem; }
+.tag-cloud .fs-sm { font-size: 0.875rem; }
+
+/* ========================================== */
+/* CUSTOM ICON DIMENSIONS & ANIMATIONS       */
+/* ========================================== */
+
+/* Header icon container - specific dimensions needed */
+.stats-header-icon {
+  width: 100px !important;
+  height: 100px !important;
+}
+
+/* Icon rotation animation for visual appeal */
+.stats-icon-rotate {
+  animation: gentle-rotate 3s ease-in-out infinite;
+}
+
+@keyframes gentle-rotate {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(5deg); }
+}
+
+/* ========================================== */
+/* SHIMMER LOADING ANIMATIONS                 */
+/* ========================================== */
+
+/* Shimmer effect for loading placeholders */
+.stats-shimmer {
+  background: linear-gradient(90deg, 
+    var(--bs-gray-200) 25%, 
+    var(--bs-gray-100) 50%, 
+    var(--bs-gray-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* ========================================== */
+/* ENHANCED VISUAL EFFECTS                   */
+/* ========================================== */
+
+/* Subtle hover animations for interactive elements */
+.stats-card-hover {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.stats-card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Pulse animation for important metrics */
+.stats-pulse {
+  animation: subtle-pulse 2s infinite;
+}
+
+@keyframes subtle-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+
+/* ========================================== */
+/* RESPONSIVE ENHANCEMENTS                   */
+/* ========================================== */
+
+/* Enhanced mobile spacing for better touch targets */
+@media (max-width: 576px) {
+  .stats-mobile-spacing .btn-group {
+    gap: 0.5rem !important;
+  }
+  
+  .stats-mobile-spacing .btn {
+    min-height: 44px; /* Accessibility touch target */
+  }
+}
+
+/* ========================================== */
+/* ACCESSIBILITY ENHANCEMENTS                */
+/* ========================================== */
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .stats-shimmer {
+    background: linear-gradient(90deg, 
+      var(--bs-gray-600) 25%, 
+      var(--bs-gray-400) 50%, 
+      var(--bs-gray-600) 75%
+    );
+  }
+}
+
+/* Reduced motion preference support */
+@media (prefers-reduced-motion: reduce) {
+  .stats-icon-rotate,
+  .stats-shimmer,
+  .stats-pulse,
+  .stats-card-hover {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* Focus indicators for keyboard navigation */
+.btn:focus-visible,
+.breadcrumb-item a:focus-visible {
+  outline: 2px solid var(--bs-primary) !important;
+  outline-offset: 2px !important;
+}
+
+/* ========================================== */
+/* PRINT STYLES                              */
+/* ========================================== */
+
+@media print {
+  /* Hide interactive elements */
+  .btn, .alert .btn {
+    display: none !important;
+  }
+  
+  /* Optimize spacing for print */
+  .container-fluid {
+    max-width: 100% !important;
+    padding: 0 !important;
+  }
+  
+  /* Ensure proper page breaks */
+  .stats-section {
+    page-break-inside: avoid;
+  }
+  
+  /* Print-friendly colors */
+  .bg-primary, .bg-success, .bg-info, .bg-warning {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  
+  /* Typography adjustments for print */
+  .display-1, .display-2, .display-3 {
+    font-size: 2rem !important;
+  }
+  
+  /* Remove shadows and gradients for print clarity */
+  .shadow, .shadow-sm, .shadow-lg,
+  .bg-gradient {
+    box-shadow: none !important;
+    background-image: none !important;
+  }
+}
+
+/* ================================================ */
+/* CUSTOM ANIMATIONS - NOT AVAILABLE IN BOOTSTRAP */
+/* ================================================ */
+
+/* Card hover animations */
+@keyframes cardHover {
+  from {
+    transform: translateY(0) scale(1);
+  }
+  to {
+    transform: translateY(-8px) scale(1.02);
+  }
+}
+
+.stats-card-hover:hover {
+  animation: cardHover 0.3s ease-out forwards;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
+}
+
+/* Icon rotation on hover */
+.stats-icon-rotate:hover {
+  transform: rotate(10deg) scale(1.1);
+  transition: transform 0.3s ease;
+}
+
+/* Progress bar shimmer effect */
+@keyframes shimmer {
+  0% { 
+    background-position: -200px 0; 
+  }
+  100% { 
+    background-position: calc(200px + 100%) 0; 
+  }
+}
+
+.progress-shimmer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  background-size: 200px 100%;
+  animation: shimmer 2s infinite;
+}
+
+/* Tag cloud shimmer on hover */
+@keyframes tagShimmer {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+.tag-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.tag-shimmer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+  transition: left 0.5s;
+}
+
+.tag-shimmer:hover::before {
+  animation: tagShimmer 0.6s ease-out;
+}
+
+/* ================================================ */
+/* INTERSECTION OBSERVER ANIMATIONS                */
+/* ================================================ */
+
+.fade-in-up {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.fade-in-up.animate {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Staggered animation delays */
+.fade-in-up:nth-child(1) { transition-delay: 0.1s; }
+.fade-in-up:nth-child(2) { transition-delay: 0.2s; }
+.fade-in-up:nth-child(3) { transition-delay: 0.3s; }
+.fade-in-up:nth-child(4) { transition-delay: 0.4s; }
+
+/* ================================================ */
+/* RESPONSIVE ADJUSTMENTS FOR MOBILE              */
+/* Only needed where Bootstrap classes aren't enough */
+/* ================================================ */
+
+@media (max-width: 575.98px) {
+  /* Ensure cards don't have excessive padding on mobile */
+  .stats-mobile-compact {
+    padding: 1rem !important;
+  }
+  
+  /* Adjust tag cloud spacing for mobile */
+  .tag-cloud-mobile .badge {
+    margin: 0.2rem 0.3rem !important;
+    font-size: 0.75rem !important;
+  }
+}
+
+/* ================================================ */
+/* PRINT STYLES                                    */
+/* Optimize for printing - Bootstrap doesn't handle this */
+/* ================================================ */
+@media print {
+  .stats-card-hover:hover {
+    animation: none !important;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+  
+  .btn,
+  .modal,
+  .progress-shimmer::before,
+  .tag-shimmer::before {
+    display: none !important;
+  }
+  
+  .progress-bar {
+    print-color-adjust: exact;
+  }
+}
+
+/* ================================================ */
+/* ACCESSIBILITY ENHANCEMENTS                      */
+/* For users with reduced motion preferences        */
+/* ================================================ */
+@media (prefers-reduced-motion: reduce) {
+  .stats-card-hover:hover,
+  .stats-icon-rotate:hover,
+  .fade-in-up,
+  .progress-shimmer::before,
+  .tag-shimmer::before {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-zer0
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.5.0
 platform: ruby
 authors:
 - Amr Abdel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2025-10-01 00:00:00.000000000 Z
+date: 2025-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -78,8 +78,11 @@ files:
 - LICENSE
 - README.md
 - _data/README.md
+- _data/content_statistics.yml
+- _data/generate_statistics.rb
 - _data/navigation/about.yml
 - _data/navigation/docs.yml
+- _data/navigation/home.yml
 - _data/navigation/main.yml
 - _data/navigation/posts.yml
 - _data/navigation/quickstart.yml
@@ -91,6 +94,7 @@ files:
 - _includes/components/halfmoon.html
 - _includes/components/info-section.html
 - _includes/components/js-cdn.html
+- _includes/components/mermaid.html
 - _includes/components/powered-by.html
 - _includes/components/quick-index.html
 - _includes/components/searchbar.html
@@ -115,6 +119,13 @@ files:
 - _includes/navigation/sidebar-folders.html
 - _includes/navigation/sidebar-left.html
 - _includes/navigation/sidebar-right.html
+- _includes/stats/README.md
+- _includes/stats/stats-categories.html
+- _includes/stats/stats-header.html
+- _includes/stats/stats-metrics.html
+- _includes/stats/stats-no-data.html
+- _includes/stats/stats-overview.html
+- _includes/stats/stats-tags.html
 - _layouts/README.md
 - _layouts/blog.html
 - _layouts/collection.html
@@ -124,6 +135,8 @@ files:
 - _layouts/journals.html
 - _layouts/landing.html
 - _layouts/root.html
+- _layouts/sitemap-collection.html
+- _layouts/stats.html
 - _sass/custom.scss
 - _sass/it-journey/_docs.scss
 - _sass/it-journey/_syntax.scss
@@ -133,6 +146,7 @@ files:
 - assets/.DS_Store
 - assets/css/custom.css
 - assets/css/main.scss
+- assets/css/stats.css
 - assets/images/favicon_gpt_computer_retro.png
 - assets/images/gravatar-small.png
 - assets/images/gravatar.png
@@ -172,7 +186,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.6.0
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="