jekyll-theme-zer0 0.22.0 → 0.22.19

data/assets/js/theme-customizer.js

@@ -0,0 +1,102 @@
+/**
+ * theme-customizer.js
+ * Powers the Theme Customizer admin page.
+ * - Skin preview: clicking a card swaps data-bs-theme for page-level preview
+ * - Color editor: syncs color picker ↔ text inputs
+ * - YAML export: builds theme_skin + theme_color YAML from current selections
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+  'use strict';
+
+  /* ── Skin Preview ─────────────────────────────────────────── */
+  const skinGrid = document.getElementById('skin-grid');
+  let selectedSkin = document.querySelector('.skin-card.border-primary');
+
+  if (skinGrid) {
+    skinGrid.addEventListener('click', function (e) {
+      const card = e.target.closest('.skin-card');
+      if (!card) return;
+
+      // Visual: deselect previous, select new
+      if (selectedSkin) {
+        selectedSkin.classList.replace('border-primary', 'border-secondary');
+        const prev = selectedSkin.querySelector('.badge');
+        if (prev) prev.outerHTML = '<small class="text-body-tertiary">Click to preview</small>';
+        const prevIcon = selectedSkin.querySelector('.bi-circle-fill');
+        if (prevIcon) { prevIcon.classList.remove('text-primary'); prevIcon.classList.add('text-body-secondary'); }
+      }
+
+      card.classList.replace('border-secondary', 'border-primary');
+      const label = card.querySelector('small');
+      if (label) label.outerHTML = '<span class="badge bg-primary"><i class="bi bi-check-circle me-1"></i>Selected</span>';
+      const icon = card.querySelector('.bi-circle-fill');
+      if (icon) { icon.classList.remove('text-body-secondary'); icon.classList.add('text-primary'); }
+
+      selectedSkin = card;
+      rebuildYaml();
+    });
+  }
+
+  /* ── Color Editor ─────────────────────────────────────────── */
+  document.querySelectorAll('[data-color-key]').forEach(function (picker) {
+    picker.addEventListener('input', function () {
+      const key = this.dataset.colorKey;
+      const textInput = document.querySelector('[data-color-text="' + key + '"]');
+      if (textInput) textInput.value = this.value;
+      rebuildYaml();
+    });
+  });
+
+  /* ── YAML Export ──────────────────────────────────────────── */
+  function rebuildYaml() {
+    // If palette-generator.js provides a full YAML builder, use it
+    if (typeof rebuildFullYaml === 'function') {
+      rebuildFullYaml();
+      return;
+    }
+    var lines = [];
+    // Skin
+    var skin = selectedSkin ? selectedSkin.dataset.skin : 'dark';
+    lines.push('theme_skin: "' + skin + '"');
+    lines.push('');
+    // Colors
+    lines.push('theme_color:');
+    document.querySelectorAll('[data-color-key]').forEach(function (el) {
+      var key = el.dataset.colorKey;
+      var val = el.value;
+      lines.push('  ' + key + ': ' + val);
+    });
+    var yaml = lines.join('\n');
+    var output = document.getElementById('theme-yaml-output');
+    if (output) output.textContent = yaml;
+  }
+
+  // Initial build
+  rebuildYaml();
+
+  /* ── Copy / Download Buttons ──────────────────────────────── */
+  var copyBtn = document.getElementById('theme-copy-yaml');
+  if (copyBtn) {
+    copyBtn.addEventListener('click', function () {
+      var text = document.getElementById('theme-yaml-output').textContent;
+      navigator.clipboard.writeText(text).then(function () {
+        copyBtn.innerHTML = '<i class="bi bi-check me-1"></i> Copied';
+        setTimeout(function () { copyBtn.innerHTML = '<i class="bi bi-clipboard me-1"></i> Copy'; }, 2000);
+      });
+    });
+  }
+
+  var dlBtn = document.getElementById('theme-download-yaml');
+  if (dlBtn) {
+    dlBtn.addEventListener('click', function () {
+      var text = document.getElementById('theme-yaml-output').textContent;
+      var blob = new Blob([text], { type: 'text/yaml' });
+      var a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'theme-config.yml';
+      a.click();
+      URL.revokeObjectURL(a.href);
+    });
+  }
+});

data/assets/js/ui-enhancements.js

@@ -12,6 +12,16 @@
   /**
    * Initialize scroll animations for elements with animate-on-scroll class
    */
+  /**
+   * True if any part of the element is in the viewport (avoids hiding above-the-fold
+   * content until IntersectionObserver runs — that caused layout “jumps” on the landing hero).
+   */
+  function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    return rect.bottom > 0 && rect.top < vh;
+  }
+
   function initScrollAnimations() {
     if (prefersReducedMotion) return;
 
@@ -35,6 +45,9 @@
     }, observerOptions);
 
     animatedElements.forEach(el => {
+      if (isInViewport(el)) {
+        return;
+      }
       el.style.opacity = '0';
       el.style.transform = 'translateY(30px)';
       el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
@@ -42,29 +55,6 @@
     });
   }
 
-  /**
-   * Smooth scroll for anchor links
-   */
-  function initSmoothScroll() {
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-      anchor.addEventListener('click', function(e) {
-        const href = this.getAttribute('href');
-        if (href === '#' || href === '') return;
-        
-        const target = document.querySelector(href);
-        if (target) {
-          e.preventDefault();
-          const offsetTop = target.offsetTop - 80; // Account for fixed navbar
-          
-          window.scrollTo({
-            top: offsetTop,
-            behavior: prefersReducedMotion ? 'auto' : 'smooth'
-          });
-        }
-      });
-    });
-  }
-
   /**
    * Add loading state to images
    */
@@ -152,7 +142,8 @@
     }
 
     initScrollAnimations();
-    initSmoothScroll();
+    // Note: Smooth scrolling for anchor links is handled entirely by CSS
+    // (scroll-behavior: smooth + scroll-padding-top: 80px in custom.scss)
     initImageLoading();
     initButtonRipples();
     initScrollSpy();