npm - ultimate-jekyll-manager - Versions diffs - 0.0.188 → 0.0.190 - Mend

ultimate-jekyll-manager 0.0.188 → 0.0.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CLAUDE.md CHANGED Viewed

@@ -558,6 +558,70 @@ data-lazy="@type value"
 **Implementation:** `src/assets/js/core/lazy-loading.js`
+## Appearance Switching System
+Ultimate Jekyll supports dark/light/system theme switching with user preference persistence.
+### Supported Modes
+- `dark` - Force dark mode
+- `light` - Force light mode
+- `system` - Auto-detect from OS preference (`prefers-color-scheme`)
+### JavaScript API
+```javascript
+// Get/set preference
+webManager.uj().appearance.get();        // Returns 'dark', 'light', 'system', or null
+webManager.uj().appearance.set('dark');  // Save and apply preference
+webManager.uj().appearance.getResolved(); // Returns actual theme: 'dark' or 'light'
+// Utilities
+webManager.uj().appearance.toggle();     // Toggle between dark/light
+webManager.uj().appearance.cycle();      // Cycle: dark → light → system → dark
+webManager.uj().appearance.clear();      // Clear saved preference
+```
+### HTML Data Attributes
+```html
+<!-- Buttons to set appearance (auto-gets 'active' class) -->
+<button data-appearance-set="light">Light</button>
+<button data-appearance-set="dark">Dark</button>
+<button data-appearance-set="system">System</button>
+<!-- Display current mode as text -->
+<span data-appearance-current></span>
+<!-- Show/hide icons based on current mode -->
+<span data-appearance-icon="light" hidden>☀️</span>
+<span data-appearance-icon="dark" hidden>🌙</span>
+<span data-appearance-icon="system" hidden>💻</span>
+```
+### Dropdown Example
+```html
+<div class="dropdown">
+  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <span data-appearance-icon="light" hidden>{% uj_icon "sun", "fa-md me-2" %}</span>
+    <span data-appearance-icon="dark" hidden>{% uj_icon "moon-stars", "fa-md me-2" %}</span>
+    <span data-appearance-icon="system" hidden>{% uj_icon "circle-half-stroke", "fa-md me-2" %}</span>
+    <span data-appearance-current></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#" data-appearance-set="light">Light</a></li>
+    <li><a class="dropdown-item" href="#" data-appearance-set="dark">Dark</a></li>
+    <li><a class="dropdown-item" href="#" data-appearance-set="system">System</a></li>
+  </ul>
+</div>
+```
+### Implementation
+- **Inline script:** `src/defaults/dist/_includes/core/body.html` - Runs immediately to prevent flash
+- **Module:** `src/assets/js/core/appearance.js` - API and UI handling
+- **Storage:** Saved under `_manager.appearance.preference` in localStorage
+- **Test page:** `/test/libraries/appearance`
 ## JavaScript Libraries
 ### WebManager

package/README.md CHANGED Viewed

@@ -256,6 +256,35 @@ The `<html>` element has data attributes for JavaScript/CSS targeting:
 | `data-runtime` | `web`, `extension`, `electron`, `node` |
 | `aria-busy` | `true` (loading), `false` (ready) |
+### Appearance Switching
+Ultimate Jekyll supports dark/light/system theme switching with user preference persistence.
+**JavaScript API:**
+```javascript
+webManager.uj().appearance.get();        // Returns 'dark', 'light', 'system', or null
+webManager.uj().appearance.set('dark');  // Save and apply preference
+webManager.uj().appearance.toggle();     // Toggle dark/light
+webManager.uj().appearance.cycle();      // Cycle: dark → light → system
+```
+**HTML Dropdown Example:**
+```html
+<div class="dropdown">
+  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <span data-appearance-icon="light" hidden>{% uj_icon "sun" %}</span>
+    <span data-appearance-icon="dark" hidden>{% uj_icon "moon-stars" %}</span>
+    <span data-appearance-icon="system" hidden>{% uj_icon "circle-half-stroke" %}</span>
+    <span data-appearance-current></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a href="#" data-appearance-set="light">Light</a></li>
+    <li><a href="#" data-appearance-set="dark">Dark</a></li>
+    <li><a href="#" data-appearance-set="system">System</a></li>
+  </ul>
+</div>
+```
 ### Page Loading Protection System
 Ultimate Jekyll includes an automatic protection system that prevents users from clicking buttons before JavaScript is fully loaded, eliminating race conditions and errors.

package/TODO.md CHANGED Viewed

@@ -8,6 +8,8 @@ NEW TODO
 - form manager should NOT submit if the button that was clicked is disabled (class or attribute)
 - GLOBAL FIXES FOR ALL UJM PROJECTS: nav.json should ahve class only not color
+/authentication-required
+* ithink this is leftover from Electron Manager auth system??? but lots on proxifly. need to make a version of it for UJM2.0
 Make an admin dashboard backend

package/dist/assets/js/core/appearance.js ADDED Viewed

@@ -0,0 +1,197 @@
+/**
+ * Appearance Module
+ * Handles theme appearance switching (dark, light, system)
+ */
+// Constants
+const STORAGE_KEY = 'appearance.preference';
+const VALID_VALUES = ['dark', 'light', 'system'];
+// Module state
+let webManager = null;
+let mediaQuery = null;
+// Module
+export default (Manager) => {
+  // Shortcuts
+  webManager = Manager.webManager;
+  // Create appearance API
+  const appearanceAPI = {
+    /**
+     * Get the current saved preference
+     * @returns {string|null} 'dark', 'light', 'system', or null if not set
+     */
+    get: () => webManager.storage().get(STORAGE_KEY) || null,
+    /**
+     * Get the resolved (actual) theme being displayed
+     * @returns {string} 'dark' or 'light'
+     */
+    getResolved: () => document.documentElement.getAttribute('data-bs-theme') || 'dark',
+    /**
+     * Set the appearance preference
+     * @param {string} value - 'dark', 'light', or 'system'
+     */
+    set: (value) => {
+      // Validate
+      if (!VALID_VALUES.includes(value)) {
+        console.warn(`Invalid appearance value: ${value}. Must be one of: ${VALID_VALUES.join(', ')}`);
+        return;
+      }
+      // Save preference
+      webManager.storage().set(STORAGE_KEY, value);
+      // Apply theme
+      applyTheme(value);
+      // Update UI elements
+      updateUI(value);
+      // Setup or teardown system preference listener
+      setupSystemListener(value === 'system');
+    },
+    /**
+     * Toggle between dark and light (skips system)
+     */
+    toggle() {
+      const current = this.getResolved();
+      const next = current === 'dark' ? 'light' : 'dark';
+      this.set(next);
+    },
+    /**
+     * Cycle through all three modes: dark → light → system → dark
+     */
+    cycle() {
+      const current = this.get() || this.getResolved();
+      const order = ['dark', 'light', 'system'];
+      const currentIndex = order.indexOf(current);
+      const nextIndex = (currentIndex + 1) % order.length;
+      this.set(order[nextIndex]);
+    },
+    /**
+     * Clear saved preference (revert to site default)
+     */
+    clear: () => {
+      webManager.storage().remove(STORAGE_KEY);
+      updateUI(null);
+      setupSystemListener(false);
+    }
+  };
+  // Register on UJ library
+  webManager._ujLibrary.appearance = appearanceAPI;
+  // Initialize UI event listeners
+  initializeUI();
+  // Setup system listener if current preference is 'system'
+  const currentPreference = appearanceAPI.get();
+  if (currentPreference === 'system') {
+    setupSystemListener(true);
+  }
+  // Update UI with current state
+  updateUI(currentPreference);
+  console.log('Appearance module loaded');
+};
+/**
+ * Apply theme to the document
+ * @param {string} preference - 'dark', 'light', or 'system'
+ */
+const applyTheme = (preference) => {
+  let theme = preference;
+  // Resolve system preference
+  if (preference === 'system') {
+    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  // Apply to document
+  document.documentElement.setAttribute('data-bs-theme', theme);
+};
+/**
+ * Setup or teardown the system preference change listener
+ * @param {boolean} enable - Whether to enable the listener
+ */
+const setupSystemListener = (enable) => {
+  // Clean up existing listener
+  if (mediaQuery) {
+    mediaQuery.removeEventListener('change', handleSystemChange);
+    mediaQuery = null;
+  }
+  // Setup new listener if needed
+  if (enable) {
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', handleSystemChange);
+  }
+};
+/**
+ * Handle system preference change
+ * @param {MediaQueryListEvent} event
+ */
+const handleSystemChange = (event) => {
+  const theme = event.matches ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-bs-theme', theme);
+  updateUI('system');
+};
+/**
+ * Initialize UI event listeners
+ */
+const initializeUI = () => {
+  // Use event delegation for appearance controls
+  document.addEventListener('click', (event) => {
+    const $target = event.target.closest('[data-appearance-set]');
+    if (!$target) {
+      return;
+    }
+    event.preventDefault();
+    const value = $target.getAttribute('data-appearance-set');
+    webManager.uj().appearance.set(value);
+  });
+};
+/**
+ * Update UI elements to reflect current state
+ * @param {string|null} preference - Current preference
+ */
+const updateUI = (preference) => {
+  const resolved = document.documentElement.getAttribute('data-bs-theme');
+  const displayValue = preference || resolved;
+  // Update [data-appearance-current] elements with the preference
+  document.querySelectorAll('[data-appearance-current]').forEach(($el) => {
+    const format = $el.getAttribute('data-appearance-current') || 'preference';
+    $el.textContent = format === 'resolved' ? resolved : displayValue;
+  });
+  // Update [data-appearance-icon] elements - show/hide based on current mode
+  // Icons should have data-appearance-icon="light|dark|system" attribute
+  document.querySelectorAll('[data-appearance-icon]').forEach(($el) => {
+    const iconMode = $el.getAttribute('data-appearance-icon');
+    $el.hidden = iconMode !== displayValue;
+  });
+  // Update active state on [data-appearance-set] elements
+  document.querySelectorAll('[data-appearance-set]').forEach(($el) => {
+    const value = $el.getAttribute('data-appearance-set');
+    const isActive = value === preference || (!preference && value === resolved);
+    $el.classList.toggle('active', isActive);
+    $el.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+  });
+};

package/dist/assets/js/pages/test/libraries/appearance/index.js ADDED Viewed

@@ -0,0 +1,214 @@
+/**
+ * Appearance Test Page JavaScript
+ */
+// Libraries
+let webManager = null;
+// Module
+export default (Manager) => {
+  return new Promise(async function (resolve) {
+    // Shortcuts
+    webManager = Manager.webManager;
+    // Initialize when DOM is ready
+    await webManager.dom().ready();
+    // Initialize debug panel
+    initDebugPanel();
+    // Initialize programmatic controls
+    initControls();
+    // Initialize event logging
+    initEventLog();
+    // Resolve after initialization
+    return resolve();
+  });
+};
+/**
+ * Initialize debug panel with live values
+ */
+function initDebugPanel() {
+  const $debugSaved = document.getElementById('debug-saved');
+  const $debugResolved = document.getElementById('debug-resolved');
+  const $debugAttr = document.getElementById('debug-attr');
+  const $debugLocalStorage = document.getElementById('debug-localstorage');
+  const $debugSystem = document.getElementById('debug-system');
+  const $btnRefresh = document.getElementById('btn-refresh');
+  // Update function
+  function updateDebug() {
+    const appearance = webManager.uj().appearance;
+    // Saved preference via API
+    const saved = appearance.get();
+    $debugSaved.textContent = saved !== null ? `"${saved}"` : 'null (not set)';
+    // Resolved theme via API
+    const resolved = appearance.getResolved();
+    $debugResolved.textContent = `"${resolved}"`;
+    // Raw HTML attribute
+    const attr = document.documentElement.getAttribute('data-bs-theme');
+    $debugAttr.textContent = `"${attr}"`;
+    // Raw localStorage value (stored under _manager.appearance.preference)
+    let rawStorage = null;
+    try {
+      const managerData = localStorage.getItem('_manager');
+      const parsedData = managerData ? JSON.parse(managerData) : null;
+      rawStorage = parsedData?.appearance?.preference || null;
+    } catch (e) {
+      rawStorage = '(error reading)';
+    }
+    $debugLocalStorage.textContent = rawStorage !== null ? `"${rawStorage}"` : 'null';
+    // System preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const systemPref = prefersDark ? 'dark' : 'light';
+    $debugSystem.textContent = `"${systemPref}" (prefers-color-scheme: ${prefersDark ? 'dark' : 'light'})`;
+    console.log('[Appearance Test] Debug updated:', {
+      saved,
+      resolved,
+      attr,
+      rawStorage,
+      systemPref,
+    });
+  }
+  // Initial update
+  updateDebug();
+  // Refresh button
+  $btnRefresh.addEventListener('click', updateDebug);
+  // Auto-update when theme changes (observe attribute changes)
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'data-bs-theme') {
+        updateDebug();
+      }
+    });
+  });
+  observer.observe(document.documentElement, { attributes: true });
+  // Also listen for system preference changes
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQuery.addEventListener('change', updateDebug);
+  // Export for console access
+  window.updateAppearanceDebug = updateDebug;
+}
+/**
+ * Initialize programmatic control buttons
+ */
+function initControls() {
+  const appearance = webManager.uj().appearance;
+  // Toggle button
+  document.getElementById('btn-toggle').addEventListener('click', () => {
+    console.log('[Appearance Test] Toggle clicked');
+    appearance.toggle();
+  });
+  // Cycle button
+  document.getElementById('btn-cycle').addEventListener('click', () => {
+    console.log('[Appearance Test] Cycle clicked');
+    appearance.cycle();
+  });
+  // Clear button
+  document.getElementById('btn-clear').addEventListener('click', () => {
+    console.log('[Appearance Test] Clear clicked');
+    appearance.clear();
+    // Trigger debug update
+    window.updateAppearanceDebug?.();
+  });
+  // Quick set buttons
+  document.getElementById('btn-set-light').addEventListener('click', () => {
+    console.log('[Appearance Test] set("light") clicked');
+    appearance.set('light');
+  });
+  document.getElementById('btn-set-dark').addEventListener('click', () => {
+    console.log('[Appearance Test] set("dark") clicked');
+    appearance.set('dark');
+  });
+  document.getElementById('btn-set-system').addEventListener('click', () => {
+    console.log('[Appearance Test] set("system") clicked');
+    appearance.set('system');
+  });
+}
+/**
+ * Initialize event logging
+ */
+function initEventLog() {
+  const $log = document.getElementById('event-log');
+  const $clearBtn = document.getElementById('btn-clear-log');
+  let logLines = [];
+  function addLogEntry(message) {
+    const timestamp = new Date().toLocaleTimeString();
+    const entry = `[${timestamp}] ${message}`;
+    logLines.push(entry);
+    // Keep last 50 entries
+    if (logLines.length > 50) {
+      logLines = logLines.slice(-50);
+    }
+    $log.textContent = logLines.join('\n');
+    $log.scrollTop = $log.scrollHeight;
+  }
+  // Clear log button
+  $clearBtn.addEventListener('click', () => {
+    logLines = [];
+    $log.textContent = 'Log cleared...';
+  });
+  // Observe data-bs-theme changes
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'data-bs-theme') {
+        const oldValue = mutation.oldValue;
+        const newValue = document.documentElement.getAttribute('data-bs-theme');
+        addLogEntry(`Theme changed: "${oldValue}" -> "${newValue}"`);
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ['data-bs-theme'],
+  });
+  // Log system preference changes
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQuery.addEventListener('change', (event) => {
+    const systemPref = event.matches ? 'dark' : 'light';
+    addLogEntry(`System preference changed: "${systemPref}"`);
+  });
+  // Log click events on appearance controls
+  document.addEventListener('click', (event) => {
+    const $target = event.target.closest('[data-appearance-set]');
+    if ($target) {
+      const value = $target.getAttribute('data-appearance-set');
+      addLogEntry(`User clicked: set("${value}")`);
+    }
+  });
+  // Initial log entry
+  addLogEntry('Appearance test page loaded');
+  addLogEntry(`Initial theme: "${document.documentElement.getAttribute('data-bs-theme')}"`);
+  addLogEntry(`Saved preference: ${webManager.uj().appearance.get() || '(none)'}`);
+}

package/dist/assets/js/ultimate-jekyll-manager.js CHANGED Viewed

@@ -4,6 +4,7 @@ import authModule from '__main_assets__/js/core/auth.js';
 import lazyLoadingModule from '__main_assets__/js/core/lazy-loading.js';
 import queryStringsModule from '__main_assets__/js/core/query-strings.js';
 import serviceWorkerModule from '__main_assets__/js/core/service-worker.js';
+import appearanceModule from '__main_assets__/js/core/appearance.js';
 import completeModule from '__main_assets__/js/core/complete.js';
 // Ultimate Jekyll Manager Module
@@ -32,6 +33,7 @@ export default async function (Manager, options) {
   lazyLoadingModule(Manager, options);
   queryStringsModule(Manager, options);
   serviceWorkerModule(Manager, options);
+  appearanceModule(Manager, options);
   // Conditionally loaded modules based on config (keep as dynamic imports)
   const conditionalModules = [