npm - ultimate-jekyll-manager - Versions diffs - 0.0.189 → 0.0.191 - Mend

ultimate-jekyll-manager 0.0.189 → 0.0.191

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 (30) 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/css/core/_verts.scss ADDED Viewed

@@ -0,0 +1,14 @@
+// Core Verts Styles
+// Styles for ad units (verts) and print visibility
+// ============================================
+// Print Styles
+// ============================================
+// Hide all vert units when printing
+@media print {
+  vert-unit,
+  .uj-vert-unit {
+    display: none !important;
+  }
+}

package/dist/assets/css/ultimate-jekyll-manager.scss CHANGED Viewed

@@ -20,6 +20,7 @@
 @use 'core/_animations' as *;
 @use 'core/_alert' as *;
 @use 'core/_exit-popup' as *;
+@use 'core/_verts' as *;
 // Import page-specific styles
 @use '_page-specific' as *;

package/dist/assets/js/core/exit-popup.js CHANGED Viewed

@@ -28,9 +28,9 @@ export default function (Manager, options) {
   // Register showExitPopup on the UJ library for programmatic access
   // Usage: webManager.uj().showExitPopup()
-  if (webManager._ujLibrary) {
-    webManager._ujLibrary.showExitPopup = showExitPopup;
-  }
+  console.log('---1');
+  webManager._ujLibrary.showExitPopup = showExitPopup;
   function updateModalContent($modal, effectiveConfig) {
     // Update title

package/dist/assets/themes/bootstrap/_theme.scss CHANGED Viewed

@@ -1,232 +1,11 @@
-// Import the theme entry point
-@use './scss/bootstrap.scss' as *;
-// Add any custom code here
-// ...
-// Adaptive button that uses light styles in light mode and dark styles in dark mode
-.btn-adaptive {
-  @extend .btn-dark;
-}
-[data-bs-theme="dark"] .btn-adaptive {
-  @extend .btn-light;
-}
-// Do the same for btn-outline-light, btn-outline-dark,
-.btn-outline-adaptive {
-  @extend .btn-outline-dark;
-}
-[data-bs-theme="dark"] .btn-outline-adaptive {
-  @extend .btn-outline-light;
-}
-// If nav-link is active, give it an underline
-.nav-link.active {
-  text-decoration: underline !important;
-}
-// Make a link-muted class that looks like text-muted
-.link-muted {
-  --bs-text-opacity: 1;
-  color: var(--bs-secondary-color) !important;
-  text-decoration: none;
-  transition: opacity 0.15s ease-in-out;
-  &:hover,
-  &:focus {
-    color: var(--bs-secondary-color) !important;
-    text-decoration: underline;
-    opacity: 0.75;
-  }
-}
-// Padding - Extend to p-8
-$spacer: 1rem;
-@for $i from 6 through 8 {
-  $size: if($i == 6, 4, if($i == 7, 4.5, 5));
-  .p-#{$i} { padding: $spacer * $size !important; }
-  .pt-#{$i} { padding-top: $spacer * $size !important; }
-  .pb-#{$i} { padding-bottom: $spacer * $size !important; }
-  .ps-#{$i} { padding-left: $spacer * $size !important; }
-  .pe-#{$i} { padding-right: $spacer * $size !important; }
-  .px-#{$i} {
-    padding-left: $spacer * $size !important;
-    padding-right: $spacer * $size !important;
-  }
-  .py-#{$i} {
-    padding-top: $spacer * $size !important;
-    padding-bottom: $spacer * $size !important;
-  }
-}
-// Avatar sizes map
-$avatar-sizes: (
-  null: 3rem,    // default
-  xs: 1.5rem,
-  sm: 2rem,
-  md: 2.5rem,
-  lg: 3.5rem,
-  xl: 5rem,
-  xxl: 7.5rem
-);
-// Avatar base styles
-.avatar {
-  display: inline-block;
-  height: map-get($avatar-sizes, null);
-  position: relative;
-  width: map-get($avatar-sizes, null);
-  img {
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-    width: 100%;
-  }
-}
-// Generate avatar size classes
-@each $size, $dimension in $avatar-sizes {
-  @if $size != null {
-    .avatar-#{$size} {
-      height: $dimension;
-      width: $dimension;
-    }
-  }
-}
-// Soft color utilities for all theme colors
-$theme-colors: (
-  "primary": var(--bs-primary),
-  "secondary": var(--bs-secondary),
-  "success": var(--bs-success),
-  "info": var(--bs-info),
-  "warning": var(--bs-warning),
-  "danger": var(--bs-danger),
-  "light": var(--bs-light),
-  "dark": var(--bs-dark)
-);
-@each $color-name, $color-value in $theme-colors {
-  // Soft background colors (10% opacity)
-  .bg-#{$color-name}-soft {
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.5) !important;
-  }
+// =============================================================================
+// UJ Bootstrap Theme
+// =============================================================================
+// Base Bootstrap theme with universal overrides.
+// All UJ themes that extend Bootstrap inherit these utilities.
-  // Soft text colors (more vibrant for readability)
-  .text-#{$color-name}-soft {
-    color: rgba(var(--bs-#{$color-name}-rgb), 0.8) !important;
-  }
-  // Soft border colors
-  .border-#{$color-name}-soft {
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2) !important;
-  }
-  // Soft buttons - background with hover states
-  .btn-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    &:hover {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-    }
-    &:focus,
-    &:active,
-    &.active {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.25);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.25);
-      box-shadow: 0 0 0 0.25rem rgba(var(--bs-#{$color-name}-rgb), 0.15);
-    }
-    &:disabled,
-    &.disabled {
-      color: rgba(var(--bs-#{$color-name}-rgb), 0.5);
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.05);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.05);
-    }
-  }
-  // Soft outline buttons
-  .btn-outline-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: transparent;
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.3);
-    &:hover {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.4);
-    }
-    &:focus,
-    &:active,
-    &.active {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.15);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.5);
-      box-shadow: 0 0 0 0.25rem rgba(var(--bs-#{$color-name}-rgb), 0.15);
-    }
-  }
-  // Soft badges
-  .badge-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-  }
-  // Soft alerts
-  .alert-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-    .alert-link {
-      color: var(--bs-#{$color-name});
-      text-decoration: underline;
-    }
-  }
-}
-/* Blog post card image height only - using Bootstrap's object-fit-cover class */
-.blog-post-card-image {
-  height: 240px;
-  width: 100%;
-}
-@media (max-width: 991.98px) {
-  .blog-post-card-image {
-    height: 240px;
-  }
-}
-@media (max-width: 575.98px) {
-  .blog-post-card-image {
-    height: 200px;
-  }
-}
-/* Blog post image height only - using Bootstrap's object-fit-cover class */
-.blog-post-image {
-  max-height: 480px;
-  width: 100%;
-}
+// Import Bootstrap
+@use './scss/bootstrap.scss' as *;
-@media (max-width: 991.98px) {
-  .blog-post-image {
-    max-height: 360px;
-  }
-}
-@media (max-width: 575.98px) {
-  .blog-post-image {
-    max-height: 240px;
-  }
-}
+// Import UJ universal overrides
+@use './overrides' as *;

package/dist/assets/themes/bootstrap/overrides/_accordion.scss ADDED Viewed

@@ -0,0 +1,21 @@
+// =============================================================================
+// Accordion Enhancements
+// =============================================================================
+// Theme-aware accordion icons (plus/minus style).
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Light Mode Accordion Icons
+// ============================================
+.accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}
+// ============================================
+// Dark Mode Accordion Icons
+// ============================================
+[data-bs-theme="dark"] .accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}

package/dist/assets/themes/{classy/css/components → bootstrap/overrides}/_avatars.scss RENAMED Viewed

@@ -1,6 +1,21 @@
-// Classy Avatar Components
-// Circular profile images with responsive sizing
-// Uses $avatar-sizes map from config
+// =============================================================================
+// Avatar Components
+// =============================================================================
+// Circular profile images with responsive sizing.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Avatar Size Map
+// ============================================
+$avatar-sizes: (
+  null: 3rem,    // default
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3.5rem,
+  xl: 5rem,
+  xxl: 7.5rem
+) !default;
 // ============================================
 // Base Avatar Styles

package/dist/assets/themes/bootstrap/overrides/_blog-images.scss ADDED Viewed

@@ -0,0 +1,45 @@
+// =============================================================================
+// Blog Image Sizing
+// =============================================================================
+// Default blog post image dimensions.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Blog Post Card Image
+// ============================================
+.blog-post-card-image {
+  height: 240px;
+  width: 100%;
+}
+@media (max-width: 991.98px) {
+  .blog-post-card-image {
+    height: 240px;
+  }
+}
+@media (max-width: 575.98px) {
+  .blog-post-card-image {
+    height: 200px;
+  }
+}
+// ============================================
+// Blog Post Image
+// ============================================
+.blog-post-image {
+  max-height: 480px;
+  width: 100%;
+}
+@media (max-width: 991.98px) {
+  .blog-post-image {
+    max-height: 360px;
+  }
+}
+@media (max-width: 575.98px) {
+  .blog-post-image {
+    max-height: 240px;
+  }
+}

package/dist/assets/themes/bootstrap/overrides/_buttons-adaptive.scss ADDED Viewed

@@ -0,0 +1,122 @@
+// =============================================================================
+// Adaptive Theme Buttons
+// =============================================================================
+// Buttons that automatically flip between light/dark styles based on theme.
+// These are universal utilities available to all UJ themes.
+// Note: Cannot use @extend with Bootstrap classes due to module scoping,
+// so we use CSS custom properties directly.
+// ============================================
+// Button Style Mixins (DRY)
+// ============================================
+@mixin btn-dark-styles {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #1c1c1c;
+  --bs-btn-hover-border-color: #1a1a1a;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #1a1a1a;
+  --bs-btn-active-border-color: #181818;
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--bs-dark);
+  --bs-btn-disabled-border-color: var(--bs-dark);
+}
+@mixin btn-light-styles {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e9ecef;
+  --bs-btn-hover-border-color: #e2e6ea;
+  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e2e6ea;
+  --bs-btn-active-border-color: #dae0e5;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: var(--bs-light);
+  --bs-btn-disabled-border-color: var(--bs-light);
+}
+@mixin btn-outline-dark-styles {
+  --bs-btn-color: var(--bs-dark);
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark);
+  --bs-btn-hover-border-color: var(--bs-dark);
+  --bs-btn-focus-shadow-rgb: 33, 37, 41;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark);
+  --bs-btn-active-border-color: var(--bs-dark);
+  --bs-btn-disabled-color: var(--bs-dark);
+  --bs-btn-disabled-border-color: var(--bs-dark);
+}
+@mixin btn-outline-light-styles {
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light);
+  --bs-btn-hover-border-color: var(--bs-light);
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light);
+  --bs-btn-active-border-color: var(--bs-light);
+  --bs-btn-disabled-color: var(--bs-light);
+  --bs-btn-disabled-border-color: var(--bs-light);
+}
+// ============================================
+// Solid Adaptive Buttons
+// ============================================
+// Dark button in light mode, light button in dark mode
+.btn-adaptive {
+  @include btn-dark-styles;
+}
+[data-bs-theme="dark"] .btn-adaptive {
+  @include btn-light-styles;
+}
+// ============================================
+// Outline Adaptive Buttons
+// ============================================
+.btn-outline-adaptive {
+  @include btn-outline-dark-styles;
+}
+[data-bs-theme="dark"] .btn-outline-adaptive {
+  @include btn-outline-light-styles;
+}
+// ============================================
+// Inverse Adaptive Buttons
+// ============================================
+// The opposite of adaptive - light in light mode, dark in dark mode
+.btn-adaptive-inverse {
+  @include btn-light-styles;
+}
+[data-bs-theme="dark"] .btn-adaptive-inverse {
+  @include btn-dark-styles;
+}
+.btn-outline-adaptive-inverse {
+  @include btn-outline-light-styles;
+}
+[data-bs-theme="dark"] .btn-outline-adaptive-inverse {
+  @include btn-outline-dark-styles;
+}
+// ============================================
+// Ghost Button
+// ============================================
+// Transparent background, no shadow - useful for subtle actions
+.btn-ghost {
+  background: transparent;
+  box-shadow: none;
+}

package/dist/assets/themes/bootstrap/overrides/_cursor-utilities.scss ADDED Viewed

@@ -0,0 +1,13 @@
+// =============================================================================
+// Cursor Utilities
+// =============================================================================
+// Cursor style utilities for interactive elements.
+// These are universal utilities available to all UJ themes.
+.cursor-default { cursor: default !important; }
+.cursor-pointer { cursor: pointer !important; }
+.cursor-help { cursor: help !important; }
+.cursor-move { cursor: move !important; }
+.cursor-grab { cursor: grab !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-crosshair { cursor: crosshair !important; }

package/dist/assets/themes/bootstrap/overrides/_index.scss ADDED Viewed

@@ -0,0 +1,29 @@
+// =============================================================================
+// UJ Bootstrap Overrides - Index
+// =============================================================================
+// Universal utilities and components that extend Bootstrap.
+// All themes inheriting from Bootstrap will get these automatically.
+// Buttons
+@use 'buttons-adaptive';
+// Colors
+@use 'soft-colors';
+// Components
+@use 'avatars';
+@use 'accordion';
+@use 'spinners';
+// Spacing & Layout
+@use 'spacing-extended';
+// Typography
+@use 'typography-utilities';
+// Utilities
+@use 'cursor-utilities';
+@use 'links';
+// Blog
+@use 'blog-images';