jekyll-theme-zer0 0.5.0 → 0.7.0

data/_includes/components/cookie-consent.html

@@ -0,0 +1,382 @@
+<!--
+  ===================================================================
+  COOKIE CONSENT - GDPR/CCPA Compliant Privacy Management
+  ===================================================================
+  
+  File: cookie-consent.html
+  Path: _includes/components/cookie-consent.html
+  Purpose: Privacy-compliant cookie consent banner and management modal
+           with granular user permission controls
+  
+  Template Logic:
+  - Displays consent banner for new visitors after 1-second delay
+  - Provides granular consent options (Essential, Analytics, Marketing)
+  - Stores user preferences in localStorage with 365-day expiry
+  - Integrates with PostHog analytics for consent-based tracking
+  
+  Dependencies:
+  - PostHog analytics integration
+  - Bootstrap 5 modal and form components
+  - Bootstrap Icons for UI elements
+  - site.posthog configuration from _config.yml
+  
+  Privacy Features:
+  - GDPR/CCPA compliance with explicit user consent
+  - Granular permission controls with persistent storage
+  - Automatic consent expiry and re-consent after 365 days
+  - Integration with PostHog opt-in/opt-out mechanisms
+  
+  Accessibility:
+  - ARIA labels for screen readers
+  - Keyboard navigation support
+  - High contrast design for visibility
+  - Semantic HTML structure
+  ===================================================================
+-->
+
+{% comment %}
+Cookie Consent Banner for Zer0-Mistakes Jekyll Theme
+
+Features:
+- GDPR/CCPA compliance
+- Granular consent options (essential, analytics, marketing)
+- PostHog analytics integration
+- Local storage for preferences
+- Bootstrap 5 styling
+- Accessibility compliant
+
+Usage: Include in root.html layout
+Configuration: Uses site.posthog settings from _config.yml
+{% endcomment %}
+
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg" style="z-index: 9999; transform: translateY(100%); transition: transform 0.3s ease-in-out;">
+  <div class="container-fluid">
+    <div class="row align-items-center">
+      <div class="col-12 col-lg-8">
+        <h6 class="mb-2 mb-lg-0">
+          <i class="bi bi-shield-check me-2"></i>
+          We value your privacy
+        </h6>
+        <p class="mb-2 mb-lg-0 small">
+          This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content. 
+          <a href="/privacy-policy/" class="text-light text-decoration-underline">Learn more in our Privacy Policy</a>.
+        </p>
+      </div>
+      <div class="col-12 col-lg-4">
+        <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
+          <button type="button" class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#cookieSettingsModal">
+            <i class="bi bi-gear me-1"></i>
+            Manage Cookies
+          </button>
+          <button type="button" class="btn btn-sm btn-secondary" id="rejectAllCookies">
+            Reject All
+          </button>
+          <button type="button" class="btn btn-sm btn-primary" id="acceptAllCookies">
+            Accept All
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Cookie Settings Modal -->
+<div class="modal fade" id="cookieSettingsModal" tabindex="-1" aria-labelledby="cookieSettingsModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="cookieSettingsModalLabel">
+          <i class="bi bi-shield-check me-2"></i>
+          Cookie Preferences
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p class="text-muted">
+          Customize your cookie preferences below. You can change these settings at any time by clicking the cookie preferences link in our footer.
+        </p>
+        
+        <div class="cookie-category mb-4">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">
+              <i class="bi bi-shield-fill-check text-success me-2"></i>
+              Essential Cookies
+            </h6>
+            <span class="badge bg-success">Always Active</span>
+          </div>
+          <p class="small text-muted mb-0">
+            These cookies are necessary for the website to function properly. They enable core functionality such as navigation, security, and accessibility features.
+          </p>
+        </div>
+
+        <div class="cookie-category mb-4">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">
+              <i class="bi bi-graph-up me-2"></i>
+              Analytics Cookies
+            </h6>
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="analyticsCookies" checked>
+              <label class="form-check-label" for="analyticsCookies">Enable</label>
+            </div>
+          </div>
+          <p class="small text-muted mb-0">
+            These cookies help us understand how visitors interact with our website by collecting anonymous information about page visits, time spent, and user behavior patterns.
+          </p>
+          <details class="mt-2">
+            <summary class="small text-primary cursor-pointer">View analytics providers</summary>
+            <ul class="small text-muted mt-2 ps-3">
+              <li>PostHog Analytics - Website usage analytics and session recording (when enabled)</li>
+              <li>Google Analytics - Traffic analysis and user demographics</li>
+            </ul>
+          </details>
+        </div>
+
+        <div class="cookie-category mb-4">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">
+              <i class="bi bi-megaphone me-2"></i>
+              Marketing Cookies
+            </h6>
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="marketingCookies">
+              <label class="form-check-label" for="marketingCookies">Enable</label>
+            </div>
+          </div>
+          <p class="small text-muted mb-0">
+            These cookies are used to deliver personalized advertisements and marketing content based on your interests and browsing behavior.
+          </p>
+          <p class="small text-muted mt-2">
+            <em>Note: We currently do not use marketing cookies, but this option is provided for future enhancements.</em>
+          </p>
+        </div>
+
+        <div class="bg-light p-3 rounded">
+          <h6 class="text-dark mb-2">
+            <i class="bi bi-info-circle me-2"></i>
+            Your Privacy Rights
+          </h6>
+          <ul class="small text-dark mb-0 ps-3">
+            <li>You can withdraw consent at any time by updating your cookie preferences</li>
+            <li>Essential cookies cannot be disabled as they are necessary for site functionality</li>
+            <li>Disabling analytics cookies will prevent us from improving your experience</li>
+            <li>Your preferences are stored locally and will be remembered for future visits</li>
+          </ul>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" id="rejectAllModal">
+          Reject All
+        </button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button type="button" class="btn btn-primary" id="saveCookiePreferences">
+          Save Preferences
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Cookie Consent Management
+  (function() {
+    'use strict';
+
+    const STORAGE_KEY = 'zer0-cookie-consent';
+    const CONSENT_EXPIRY_DAYS = 365;
+    
+    // Default consent state
+    const defaultConsent = {
+      essential: true,
+      analytics: false,
+      marketing: false,
+      timestamp: Date.now(),
+      version: '1.0'
+    };
+
+    // Get current consent state
+    function getConsentState() {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          const consent = JSON.parse(stored);
+          // Check if consent is expired (365 days)
+          const isExpired = (Date.now() - consent.timestamp) > (CONSENT_EXPIRY_DAYS * 24 * 60 * 60 * 1000);
+          if (!isExpired) {
+            return consent;
+          }
+        }
+      } catch (e) {
+        console.warn('Error reading cookie consent:', e);
+      }
+      return null;
+    }
+
+    // Save consent state
+    function saveConsentState(consent) {
+      try {
+        consent.timestamp = Date.now();
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
+        applyConsent(consent);
+      } catch (e) {
+        console.warn('Error saving cookie consent:', e);
+      }
+    }
+
+    // Apply consent decisions
+    function applyConsent(consent) {
+      // Analytics consent
+      if (consent.analytics && window.posthog) {
+        window.posthog.opt_in_capturing();
+        console.log('PostHog analytics enabled via consent');
+      } else if (window.posthog) {
+        window.posthog.opt_out_capturing();
+        console.log('PostHog analytics disabled via consent');
+      }
+
+      // Set global consent flags for other scripts
+      window.cookieConsent = consent;
+      
+      // Dispatch consent event for other scripts to listen to
+      document.dispatchEvent(new CustomEvent('cookieConsentChanged', {
+        detail: consent
+      }));
+    }
+
+    // Show consent banner
+    function showConsentBanner() {
+      const banner = document.getElementById('cookieConsent');
+      if (banner) {
+        setTimeout(() => {
+          banner.style.transform = 'translateY(0)';
+        }, 1000); // Show after 1 second
+      }
+    }
+
+    // Hide consent banner
+    function hideConsentBanner() {
+      const banner = document.getElementById('cookieConsent');
+      if (banner) {
+        banner.style.transform = 'translateY(100%)';
+      }
+    }
+
+    // Update modal UI with current preferences
+    function updateModalUI(consent) {
+      document.getElementById('analyticsCookies').checked = consent.analytics;
+      document.getElementById('marketingCookies').checked = consent.marketing;
+    }
+
+    // Get consent from modal UI
+    function getModalConsent() {
+      return {
+        essential: true, // Always true
+        analytics: document.getElementById('analyticsCookies').checked,
+        marketing: document.getElementById('marketingCookies').checked,
+        version: '1.0'
+      };
+    }
+
+    // Initialize on DOM content loaded
+    document.addEventListener('DOMContentLoaded', function() {
+      const existingConsent = getConsentState();
+      
+      if (existingConsent) {
+        // Apply existing consent
+        applyConsent(existingConsent);
+        updateModalUI(existingConsent);
+      } else {
+        // Show consent banner for new visitors
+        showConsentBanner();
+      }
+
+      // Accept all cookies
+      document.getElementById('acceptAllCookies')?.addEventListener('click', function() {
+        const consent = {
+          essential: true,
+          analytics: true,
+          marketing: false, // Keep false until we implement marketing
+          version: '1.0'
+        };
+        saveConsentState(consent);
+        hideConsentBanner();
+      });
+
+      // Reject all cookies
+      document.getElementById('rejectAllCookies')?.addEventListener('click', function() {
+        saveConsentState(defaultConsent);
+        hideConsentBanner();
+      });
+
+      // Reject all from modal
+      document.getElementById('rejectAllModal')?.addEventListener('click', function() {
+        saveConsentState(defaultConsent);
+        updateModalUI(defaultConsent);
+        hideConsentBanner();
+        bootstrap.Modal.getInstance(document.getElementById('cookieSettingsModal')).hide();
+      });
+
+      // Save preferences from modal
+      document.getElementById('saveCookiePreferences')?.addEventListener('click', function() {
+        const consent = getModalConsent();
+        saveConsentState(consent);
+        hideConsentBanner();
+        bootstrap.Modal.getInstance(document.getElementById('cookieSettingsModal')).hide();
+      });
+
+      // Update modal when opened
+      document.getElementById('cookieSettingsModal')?.addEventListener('show.bs.modal', function() {
+        const currentConsent = getConsentState() || defaultConsent;
+        updateModalUI(currentConsent);
+      });
+    });
+
+    // Expose functions globally for external use
+    window.cookieManager = {
+      getConsent: getConsentState,
+      setConsent: saveConsentState,
+      showBanner: showConsentBanner,
+      hideBanner: hideConsentBanner,
+      hasConsent: function(type) {
+        const consent = getConsentState();
+        return consent ? consent[type] : false;
+      }
+    };
+  })();
+</script>
+
+<style>
+  .cookie-consent-banner {
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  
+  .cookie-category {
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 1rem;
+  }
+  
+  .form-check-input:checked {
+    background-color: var(--bs-success);
+    border-color: var(--bs-success);
+  }
+  
+  @media (max-width: 768px) {
+    .cookie-consent-banner .btn {
+      width: 100%;
+      margin-bottom: 0.5rem;
+    }
+    
+    .cookie-consent-banner .btn:last-child {
+      margin-bottom: 0;
+    }
+  }
+</style>

data/_includes/components/info-section.html

@@ -21,6 +21,11 @@
                   {% include navigation/breadcrumbs.html %}
                   {% include components/searchbar.html %}
 
+                  <!-- Theme and System Information -->
+                  <div class="my-4">
+                    {% include components/theme-info.html %}
+                  </div>
+
                   <!-- Shortcuts to source bode -->
                   {% include components/dev-shortcuts.html %}
                   <!-- Dark Mode Switch -->

data/_includes/components/js-cdn.html

@@ -1,24 +1,29 @@
-<!-- 
-    Javascript CDN
-    sources:
-    - Bootstrap 4.0.0
-    - jQuery 3.2.1
-    - Popper.js 1.12.9
-  sources: https://getbootstrap.com/docs/5.3/getting-started/contents/#css-files
- -->
+<!--
+  ===================================================================
+  JAVASCRIPT CDN - External JavaScript Library Loading
+  ===================================================================
+  
+  File: js-cdn.html
+  Path: _includes/components/js-cdn.html
+  Purpose: Load JavaScript libraries from CDN for site functionality
+  
+  Libraries:
+  - jQuery 3.7.1 - DOM manipulation and AJAX
+  - Bootstrap 5.3.3 Bundle - UI components (includes Popper.js)
+  
+  Note: Bootstrap 5 bundle includes Popper.js, so separate Popper
+  loading is not needed and can cause conflicts.
+  
+  Source: https://getbootstrap.com/docs/5.3/getting-started/contents/
+  ===================================================================
+-->
 
- <!-- Jquery -->
-<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
-<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+<!-- jQuery 3.7.1 -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js" 
+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
+        crossorigin="anonymous"></script>
 
-
-<!-- bootstrap js -->
-<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-
-<!-- Popper -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> -->
-
-<!-- TODO: Install local bootstrap -->
-<!-- <script src="/assets/js/bootstrap.js"></script> -->
+<!-- Bootstrap 5.3.3 Bundle (includes Popper.js) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
+        crossorigin="anonymous"></script>

data/_includes/components/post-card.html

@@ -0,0 +1,176 @@
+<!--
+  ===================================================================
+  POST CARD COMPONENT - Reusable blog post card
+  ===================================================================
+  
+  File: post-card.html
+  Path: _includes/components/post-card.html
+  Purpose: Consistent post card display across blog, category, and archive pages
+  
+  Parameters:
+  - post (required): The post object to display
+  - show_category (optional): Show category badge (default: true)
+  - show_excerpt (optional): Show post excerpt (default: true)
+  - show_author (optional): Show author name (default: true)
+  - show_reading_time (optional): Show reading time (default: true)
+  - card_class (optional): Additional CSS classes for the card
+  
+  Usage:
+    {% include components/post-card.html post=post %}
+    {% include components/post-card.html post=post show_category=false %}
+    {% include components/post-card.html post=post card_class="shadow-lg" %}
+  
+  Features:
+  - Breaking news badge (red, top-left)
+  - Featured badge (gold star, top-right)
+  - Preview image with fallback
+  - Category badge
+  - Reading time calculation
+  - Author attribution
+  - Publication date
+  - Responsive design
+  
+  Dependencies:
+  - Bootstrap 5 card components
+  - Bootstrap Icons
+  - site.public_folder for image paths
+  - site.teaser for fallback image
+  ===================================================================
+-->
+
+{% comment %} Parameter defaults {% endcomment %}
+{% assign show_category = include.show_category | default: true %}
+{% assign show_excerpt = include.show_excerpt | default: true %}
+{% assign show_author = include.show_author | default: true %}
+{% assign show_reading_time = include.show_reading_time | default: true %}
+{% assign card_class = include.card_class | default: "" %}
+
+{% comment %} 
+   Reading time: Use estimated_reading_time from front matter if available,
+   otherwise skip to avoid accessing post.content which causes nesting issues
+{% endcomment %}
+{% if include.post.estimated_reading_time %}
+  {% assign reading_time = include.post.estimated_reading_time %}
+{% else %}
+  {% assign reading_time = "2 min" %}
+{% endif %}
+
+<div class="col">
+  <div class="card h-100 post-card border-0 shadow-sm {{ card_class }}">
+    
+    <!-- ====================== -->
+    <!-- CARD IMAGE & BADGES    -->
+    <!-- ====================== -->
+    <div class="position-relative">
+      <!-- Breaking News Badge -->
+      {% if include.post.breaking %}
+        <span class="badge bg-danger position-absolute top-0 start-0 m-2 z-1">
+          <i class="bi bi-lightning-fill me-1"></i>Breaking
+        </span>
+      {% endif %}
+      
+      <!-- Featured Badge -->
+      {% if include.post.featured %}
+        <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2 z-1">
+          <i class="bi bi-star-fill me-1"></i>Featured
+        </span>
+      {% endif %}
+      
+      <!-- Preview Image -->
+      <a href="{{ include.post.url | relative_url }}" class="text-decoration-none">
+        {% if include.post.preview %}
+          <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ include.post.preview }}" 
+               class="card-img-top" 
+               alt="Preview image for {{ include.post.title }}"
+               loading="lazy">
+        {% else %}
+          <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}" 
+               class="card-img-top" 
+               alt="Default preview image"
+               loading="lazy">
+        {% endif %}
+      </a>
+    </div>
+    
+    <!-- ====================== -->
+    <!-- CARD BODY              -->
+    <!-- ====================== -->
+    <div class="card-body d-flex flex-column">
+      
+      <!-- Category Badge -->
+      {% if show_category and include.post.categories.size > 0 %}
+        <div class="mb-2">
+          {% assign primary_category = include.post.categories | first %}
+          <a href="{{ site.baseurl }}/posts/{{ primary_category | slugify }}/" 
+             class="badge bg-primary text-decoration-none">
+            {{ primary_category }}
+          </a>
+        </div>
+      {% endif %}
+      
+      <!-- Post Title -->
+      <h5 class="card-title mb-2">
+        <a href="{{ include.post.url | relative_url }}" 
+           class="text-decoration-none text-body-emphasis stretched-link">
+          {{ include.post.title }}
+        </a>
+      </h5>
+      
+      <!-- Subtitle if available -->
+      {% if include.post.sub-title %}
+        <p class="card-subtitle text-muted small mb-2">
+          {{ include.post.sub-title }}
+        </p>
+      {% endif %}
+      
+      <!-- Post Excerpt -->
+      {% if show_excerpt %}
+        <p class="card-text text-muted small flex-grow-1">
+          {{ include.post.excerpt | strip_html | truncate: 120 }}
+        </p>
+      {% endif %}
+      
+    </div>
+    
+    <!-- ====================== -->
+    <!-- CARD FOOTER            -->
+    <!-- ====================== -->
+    <div class="card-footer bg-transparent border-top-0">
+      <div class="d-flex justify-content-between align-items-center small text-muted">
+        
+        <!-- Left: Author & Date -->
+        <div>
+          {% if show_author and include.post.author %}
+            <span class="me-2">
+              <i class="bi bi-person me-1"></i>{{ include.post.author }}
+            </span>
+          {% endif %}
+          <span>
+            <i class="bi bi-calendar me-1"></i>{{ include.post.date | date: "%b %d, %Y" }}
+          </span>
+        </div>
+        
+        <!-- Right: Reading Time -->
+        {% if show_reading_time %}
+          <span>
+            <i class="bi bi-clock me-1"></i>{{ reading_time }}
+          </span>
+        {% endif %}
+        
+      </div>
+      
+      <!-- Tags (compact) -->
+      {% if include.post.tags.size > 0 %}
+        <div class="mt-2">
+          {% for tag in include.post.tags limit: 3 %}
+            <span class="badge bg-light text-dark border me-1">{{ tag }}</span>
+          {% endfor %}
+          {% if include.post.tags.size > 3 %}
+            <span class="badge bg-light text-muted border">+{{ include.post.tags.size | minus: 3 }}</span>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
+    
+  </div>
+</div>