jekyll-theme-zer0 0.5.0 → 0.7.0

data/_data/authors.yml

@@ -0,0 +1,52 @@
+# Authors Data File
+# =================
+# Define author profiles for blog posts
+#
+# Usage in front matter:
+#   author: johndoe  (references the key below)
+#
+# Fields:
+#   name: Display name (required)
+#   bio: Short biography (optional)
+#   avatar: Path to avatar image (optional)
+#   email: Contact email (optional)
+#   twitter: Twitter handle without @ (optional)
+#   github: GitHub username (optional)
+#   linkedin: LinkedIn profile ID (optional)
+#   website: Personal website URL (optional)
+#   role: Job title or role (optional)
+
+default:
+  name: "Zer0-Mistakes Team"
+  bio: "The collective voice of the Zer0-Mistakes Jekyll theme development team."
+  avatar: "/images/default-avatar.png"
+  github: "bamr87"
+  website: "https://bamr87.github.io/zer0-mistakes/"
+  role: "Development Team"
+
+bamr87:
+  name: "Amr Bakri"
+  bio: "Creator of Zer0-Mistakes Jekyll theme. Developer, automation enthusiast, and Docker advocate."
+  avatar: "/images/authors/bamr87.png"
+  github: "bamr87"
+  twitter: "bamr87"
+  role: "Lead Developer"
+
+guest:
+  name: "Guest Author"
+  bio: "A valued contributor to our community."
+  avatar: "/images/default-avatar.png"
+  role: "Guest Contributor"
+
+# Add more authors as needed:
+#
+# author_key:
+#   name: "Author Full Name"
+#   bio: "Short biography about the author."
+#   avatar: "/images/authors/author.png"
+#   email: "author@example.com"
+#   twitter: "twitterhandle"
+#   github: "githubuser"
+#   linkedin: "linkedinprofile"
+#   website: "https://example.com"
+#   role: "Writer"

data/_data/navigation/posts.yml

@@ -1,19 +1,18 @@
-- icon: world
-  url: /posts/world/
-  title: World
+- title: Development
+  icon: code-slash
+  url: /posts/development/
 - title: Technology
-  icon: tech
-  url: /posts/tech/
+  icon: cpu
+  url: /posts/technology/
+- title: Tutorial
+  icon: journal-code
+  url: /posts/tutorial/
+- title: World
+  icon: globe
+  url: /posts/world/
 - title: Business
-  icon: cash
+  icon: briefcase
   url: /posts/business/
 - title: Science
-  icon: flask
+  icon: mortarboard
   url: /posts/science/
-- title: Health
-  icon: heart
-  url: /posts/health/
-- title: Politics
-  icon: politics
-  url: /posts/politics/
-

data/_includes/analytics/posthog.html

@@ -0,0 +1,281 @@
+<!--
+  ===================================================================
+  POSTHOG ANALYTICS - Privacy-First Web Analytics Integration
+  ===================================================================
+  
+  File: posthog.html
+  Path: _includes/analytics/posthog.html
+  Purpose: Configurable PostHog analytics implementation with comprehensive
+           privacy controls and GDPR/CCPA compliance
+  
+  Template Logic:
+  - Conditionally loads only in production environment
+  - Respects Do Not Track (DNT) browser settings
+  - Integrates with cookie consent management system
+  - Provides Jekyll-specific event tracking and page properties
+  
+  Dependencies:
+  - site.posthog configuration from _config.yml
+  - Cookie consent system for user permission management
+  - Jekyll environment detection for production loading
+  - PostHog CDN and JavaScript library
+  
+  Privacy Features:
+  - Environment-specific loading (production only by default)
+  - Cookie consent integration with opt-in/opt-out mechanisms
+  - Do Not Track respect with automatic analytics disabling
+  - Session recording controls with input masking
+  - IP anonymization options for enhanced privacy
+  
+  Custom Event Tracking:
+  - File downloads (PDFs, documents, archives)
+  - External link clicks and referral tracking
+  - Search queries and site navigation patterns
+  - Scroll depth analysis and reading engagement
+  - Jekyll-specific interactions (TOC, sidebar, code blocks)
+  ===================================================================
+-->
+
+{% comment %}
+PostHog Analytics Integration for Zer0-Mistakes Jekyll Theme
+
+Features:
+- Environment-specific loading (production only by default)
+- Configurable privacy settings
+- Custom event tracking for Jekyll-specific actions
+- GDPR/CCPA compliance options
+- Session recording controls
+- Cookie consent integration
+
+Configuration: Set posthog settings in _config.yml
+Privacy: Respects Do Not Track and provides opt-out mechanisms
+{% endcomment %}
+
+{% if site.posthog.enabled and jekyll.environment == "production" %}
+<script>
+  {% comment %} PostHog Configuration {% endcomment %}
+  window.posthogConfig = {
+    apiKey: '{{ site.posthog.api_key }}',
+    apiHost: '{{ site.posthog.api_host }}',
+    personProfiles: '{{ site.posthog.person_profiles | default: "identified_only" }}',
+    autocapture: {{ site.posthog.autocapture | default: true }},
+    capturePageview: {{ site.posthog.capture_pageview | default: true }},
+    capturePageleave: {{ site.posthog.capture_pageleave | default: true }},
+    disableCookie: {{ site.posthog.disable_cookie | default: false }},
+    respectDnt: {{ site.posthog.respect_dnt | default: true }},
+    crossSubdomainCookie: {{ site.posthog.cross_subdomain_cookie | default: false }},
+    secureCookie: {{ site.posthog.secure_cookie | default: true }},
+    persistence: '{{ site.posthog.persistence | default: "localStorage+cookie" }}',
+    sessionRecording: {
+      enabled: {{ site.posthog.session_recording | default: false }},
+      maskAllText: {{ site.posthog.privacy.mask_all_text | default: false }},
+      maskAllInputs: {{ site.posthog.privacy.mask_all_inputs | default: true }}
+    }
+  };
+
+  {% comment %} Check for Do Not Track before loading {% endcomment %}
+  if (window.posthogConfig.respectDnt && navigator.doNotTrack === '1') {
+    console.log('PostHog: Respecting Do Not Track setting');
+  } else {
+    {% comment %} PostHog Loading Script {% endcomment %}
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Rr Mr fi Or Ar ci Tr Cr capture Mi calculateEventProperties Lr register register_once register_for_session unregister unregister_for_session Hr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ur jr createPersonProfile zr kr Br opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Dr debug M Nr getPageViewId captureTraceFeedback captureTraceMetric $r".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+
+    {% comment %} Initialize PostHog with configuration {% endcomment %}
+    posthog.init(window.posthogConfig.apiKey, {
+      api_host: window.posthogConfig.apiHost,
+      person_profiles: window.posthogConfig.personProfiles,
+      autocapture: window.posthogConfig.autocapture,
+      capture_pageview: window.posthogConfig.capturePageview,
+      capture_pageleave: window.posthogConfig.capturePageleave,
+      disable_cookie: window.posthogConfig.disableCookie,
+      cross_subdomain_cookie: window.posthogConfig.crossSubdomainCookie,
+      secure_cookie: window.posthogConfig.secureCookie,
+      persistence: window.posthogConfig.persistence,
+      session_recording: window.posthogConfig.sessionRecording,
+      {% if site.posthog.privacy.ip_anonymization %}
+      ip: false,
+      {% endif %}
+      loaded: function(posthog) {
+        {% comment %} PostHog loaded successfully {% endcomment %}
+        console.log('PostHog analytics loaded successfully');
+
+        {% comment %} Track Jekyll-specific page properties {% endcomment %}
+        posthog.register({
+          'site_title': '{{ site.title }}',
+          'site_description': '{{ site.description | strip_newlines | strip }}',
+          'jekyll_version': '{{ jekyll.version }}',
+          'theme': '{{ site.remote_theme | default: site.theme }}',
+          'page_layout': '{{ page.layout }}',
+          'page_collection': '{{ page.collection }}',
+          {% if page.categories %}
+          'page_categories': {{ page.categories | jsonify }},
+          {% endif %}
+          {% if page.tags %}
+          'page_tags': {{ page.tags | jsonify }},
+          {% endif %}
+          'page_url': window.location.pathname,
+          'page_title': '{{ page.title | strip_newlines | strip }}',
+          'page_author': '{{ page.author | default: site.author.name }}',
+          {% if page.date %}
+          'page_date': '{{ page.date | date: "%Y-%m-%d" }}',
+          {% endif %}
+          'user_agent': navigator.userAgent,
+          'screen_resolution': screen.width + 'x' + screen.height,
+          'viewport_size': window.innerWidth + 'x' + window.innerHeight
+        });
+
+        {% comment %} Initialize custom event tracking {% endcomment %}
+        initializeCustomTracking();
+      }
+    });
+  }
+
+  {% comment %} Custom Event Tracking Functions {% endcomment %}
+  function initializeCustomTracking() {
+    {% if site.posthog.custom_events.track_downloads %}
+    {% comment %} Track file downloads {% endcomment %}
+    document.addEventListener('click', function(e) {
+      var target = e.target.closest('a');
+      if (target && target.href) {
+        var href = target.href.toLowerCase();
+        var downloadExtensions = ['.pdf', '.zip', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt', '.csv'];
+        var isDownload = downloadExtensions.some(ext => href.includes(ext));
+        
+        if (isDownload) {
+          posthog.capture('file_download', {
+            'file_url': target.href,
+            'file_name': target.innerText || target.href.split('/').pop(),
+            'page_url': window.location.pathname
+          });
+        }
+      }
+    });
+    {% endif %}
+
+    {% if site.posthog.custom_events.track_external_links %}
+    {% comment %} Track external link clicks {% endcomment %}
+    document.addEventListener('click', function(e) {
+      var target = e.target.closest('a');
+      if (target && target.href && target.hostname !== window.location.hostname) {
+        posthog.capture('external_link_click', {
+          'link_url': target.href,
+          'link_text': target.innerText,
+          'page_url': window.location.pathname
+        });
+      }
+    });
+    {% endif %}
+
+    {% if site.posthog.custom_events.track_search %}
+    {% comment %} Track search queries {% endcomment %}
+    var searchInputs = document.querySelectorAll('input[type="search"], .search-input, #search');
+    searchInputs.forEach(function(input) {
+      input.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && this.value.trim()) {
+          posthog.capture('search_query', {
+            'search_term': this.value.trim(),
+            'page_url': window.location.pathname
+          });
+        }
+      });
+    });
+    {% endif %}
+
+    {% if site.posthog.custom_events.track_scroll_depth %}
+    {% comment %} Track scroll depth {% endcomment %}
+    var scrollDepths = [25, 50, 75, 90];
+    var triggeredDepths = [];
+    
+    window.addEventListener('scroll', function() {
+      var scrollPercent = Math.round((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
+      
+      scrollDepths.forEach(function(depth) {
+        if (scrollPercent >= depth && !triggeredDepths.includes(depth)) {
+          triggeredDepths.push(depth);
+          posthog.capture('scroll_depth', {
+            'depth_percentage': depth,
+            'page_url': window.location.pathname,
+            'page_title': document.title
+          });
+        }
+      });
+    });
+    {% endif %}
+
+    {% comment %} Track Jekyll-specific events {% endcomment %}
+    
+    {% comment %} Track code block interactions {% endcomment %}
+    document.addEventListener('click', function(e) {
+      if (e.target.closest('.highlight, pre, code')) {
+        posthog.capture('code_interaction', {
+          'interaction_type': 'click',
+          'page_url': window.location.pathname
+        });
+      }
+    });
+
+    {% comment %} Track table of contents clicks {% endcomment %}
+    document.addEventListener('click', function(e) {
+      if (e.target.closest('.toc, #TableOfContents, .table-of-contents')) {
+        var target = e.target.closest('a');
+        if (target && target.href) {
+          posthog.capture('toc_click', {
+            'toc_link': target.href,
+            'toc_text': target.innerText,
+            'page_url': window.location.pathname
+          });
+        }
+      }
+    });
+
+    {% comment %} Track sidebar navigation {% endcomment %}
+    document.addEventListener('click', function(e) {
+      if (e.target.closest('.sidebar, .bd-sidebar, nav[class*="sidebar"]')) {
+        var target = e.target.closest('a');
+        if (target && target.href) {
+          posthog.capture('sidebar_navigation', {
+            'nav_link': target.href,
+            'nav_text': target.innerText,
+            'page_url': window.location.pathname
+          });
+        }
+      }
+    });
+  }
+
+  {% comment %} Expose PostHog utilities globally for theme usage {% endcomment %}
+  window.zer0Analytics = {
+    track: function(eventName, properties) {
+      if (window.posthog && typeof window.posthog.capture === 'function') {
+        posthog.capture(eventName, properties);
+      }
+    },
+    identify: function(userId, properties) {
+      if (window.posthog && typeof window.posthog.identify === 'function') {
+        posthog.identify(userId, properties);
+      }
+    },
+    reset: function() {
+      if (window.posthog && typeof window.posthog.reset === 'function') {
+        posthog.reset();
+      }
+    }
+  };
+</script>
+{% else %}
+{% comment %} PostHog disabled or not in production environment {% endcomment %}
+<script>
+  {% comment %} Provide no-op analytics functions for development {% endcomment %}
+  window.zer0Analytics = {
+    track: function(eventName, properties) {
+      console.log('Analytics (disabled):', eventName, properties);
+    },
+    identify: function(userId, properties) {
+      console.log('Analytics identify (disabled):', userId, properties);
+    },
+    reset: function() {
+      console.log('Analytics reset (disabled)');
+    }
+  };
+</script>
+{% endif %}

data/_includes/components/author-card.html

@@ -0,0 +1,177 @@
+<!--
+  ===================================================================
+  AUTHOR CARD COMPONENT - Display author information
+  ===================================================================
+  
+  File: author-card.html
+  Path: _includes/components/author-card.html
+  Purpose: Reusable author profile display for posts and author pages
+  
+  Parameters:
+  - author (required): Author key from _data/authors.yml OR author name string
+  - style (optional): "compact" | "full" | "inline" (default: "compact")
+  - show_bio (optional): Show author bio (default: true for full, false for compact)
+  - show_social (optional): Show social links (default: true for full, false for compact)
+  
+  Usage:
+    {% include components/author-card.html author=page.author %}
+    {% include components/author-card.html author="bamr87" style="full" %}
+    {% include components/author-card.html author=page.author style="inline" %}
+  
+  Dependencies:
+  - _data/authors.yml: Author data definitions
+  - Bootstrap 5 card and utility classes
+  - Bootstrap Icons
+  ===================================================================
+-->
+
+{% comment %} Parameter defaults {% endcomment %}
+{% assign style = include.style | default: "compact" %}
+
+{% comment %} 
+   Resolve author: can be a key to _data/authors.yml or a plain name string 
+{% endcomment %}
+{% assign author_key = include.author %}
+{% assign author_data = site.data.authors[author_key] %}
+
+{% comment %} If no match in authors.yml, use string as display name {% endcomment %}
+{% unless author_data %}
+  {% assign author_data = site.data.authors.default %}
+  {% if include.author and include.author != "" %}
+    {% capture author_name %}{{ include.author }}{% endcapture %}
+  {% else %}
+    {% assign author_name = author_data.name %}
+  {% endif %}
+{% else %}
+  {% assign author_name = author_data.name %}
+{% endunless %}
+
+{% comment %} Style-specific defaults {% endcomment %}
+{% if style == "full" %}
+  {% assign show_bio = include.show_bio | default: true %}
+  {% assign show_social = include.show_social | default: true %}
+{% elsif style == "inline" %}
+  {% assign show_bio = false %}
+  {% assign show_social = false %}
+{% else %}
+  {% assign show_bio = include.show_bio | default: false %}
+  {% assign show_social = include.show_social | default: false %}
+{% endif %}
+
+<!-- ========================== -->
+<!-- INLINE STYLE               -->
+<!-- ========================== -->
+{% if style == "inline" %}
+<span class="author-inline d-inline-flex align-items-center">
+  {% if author_data.avatar %}
+    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ author_data.avatar }}" 
+         alt="{{ author_name }}" 
+         class="rounded-circle me-2" 
+         width="24" height="24"
+         style="object-fit: cover;">
+  {% else %}
+    <i class="bi bi-person-circle me-1"></i>
+  {% endif %}
+  <span class="author-name">{{ author_name }}</span>
+</span>
+
+<!-- ========================== -->
+<!-- COMPACT STYLE (default)    -->
+<!-- ========================== -->
+{% elsif style == "compact" %}
+<div class="author-card-compact d-flex align-items-center">
+  {% if author_data.avatar %}
+    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ author_data.avatar }}" 
+         alt="{{ author_name }}" 
+         class="rounded-circle me-3" 
+         width="48" height="48"
+         style="object-fit: cover;">
+  {% else %}
+    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3" 
+         style="width: 48px; height: 48px;">
+      <i class="bi bi-person fs-5"></i>
+    </div>
+  {% endif %}
+  <div>
+    <strong class="d-block">{{ author_name }}</strong>
+    {% if author_data.role %}
+      <small class="text-muted">{{ author_data.role }}</small>
+    {% endif %}
+    {% if show_bio and author_data.bio %}
+      <p class="text-muted small mb-0 mt-1">{{ author_data.bio | truncate: 100 }}</p>
+    {% endif %}
+  </div>
+</div>
+
+<!-- ========================== -->
+<!-- FULL STYLE                 -->
+<!-- ========================== -->
+{% elsif style == "full" %}
+<div class="author-card card border-0 shadow-sm">
+  <div class="card-body">
+    <div class="d-flex align-items-start">
+      {% if author_data.avatar %}
+        <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ author_data.avatar }}" 
+             alt="{{ author_name }}" 
+             class="rounded-circle me-3" 
+             width="80" height="80"
+             style="object-fit: cover;">
+      {% else %}
+        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3" 
+             style="width: 80px; height: 80px;">
+          <i class="bi bi-person fs-1"></i>
+        </div>
+      {% endif %}
+      <div class="flex-grow-1">
+        <h5 class="card-title mb-1">{{ author_name }}</h5>
+        {% if author_data.role %}
+          <p class="text-primary mb-2">{{ author_data.role }}</p>
+        {% endif %}
+        {% if show_bio and author_data.bio %}
+          <p class="card-text text-muted">{{ author_data.bio }}</p>
+        {% endif %}
+        
+        {% if show_social %}
+          <div class="author-social d-flex gap-2 mt-2">
+            {% if author_data.github %}
+              <a href="https://github.com/{{ author_data.github }}" 
+                 class="btn btn-sm btn-outline-secondary" 
+                 target="_blank" rel="noopener" title="GitHub">
+                <i class="bi bi-github"></i>
+              </a>
+            {% endif %}
+            {% if author_data.twitter %}
+              <a href="https://twitter.com/{{ author_data.twitter }}" 
+                 class="btn btn-sm btn-outline-secondary" 
+                 target="_blank" rel="noopener" title="Twitter">
+                <i class="bi bi-twitter"></i>
+              </a>
+            {% endif %}
+            {% if author_data.linkedin %}
+              <a href="https://linkedin.com/in/{{ author_data.linkedin }}" 
+                 class="btn btn-sm btn-outline-secondary" 
+                 target="_blank" rel="noopener" title="LinkedIn">
+                <i class="bi bi-linkedin"></i>
+              </a>
+            {% endif %}
+            {% if author_data.website %}
+              <a href="{{ author_data.website }}" 
+                 class="btn btn-sm btn-outline-secondary" 
+                 target="_blank" rel="noopener" title="Website">
+                <i class="bi bi-globe"></i>
+              </a>
+            {% endif %}
+            {% if author_data.email %}
+              <a href="mailto:{{ author_data.email }}" 
+                 class="btn btn-sm btn-outline-secondary" 
+                 title="Email">
+                <i class="bi bi-envelope"></i>
+              </a>
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}