ultimate-jekyll-manager 0.0.193 → 0.0.194

package/dist/assets/css/pages/status/index.scss

@@ -1,11 +1,11 @@
 /**
  * Status Page Styles
  *
- * Uses Bootstrap semantic colors:
- * - success for operational (green)
- * - warning for degraded (amber)
- * - danger for major outage (red)
- * - info for maintenance (blue)
+ * Uses Bootstrap semantic colors via bg-* classes:
+ * - bg-success for operational (green)
+ * - bg-warning for degraded (amber)
+ * - bg-danger for major outage (red)
+ * - bg-info for maintenance (blue)
  */
 
 // Status Pulse - size for the blinking dot (uses global animation-pulse class)
@@ -14,25 +14,25 @@
   height: 8px;
 }
 
-// Status Banner - gradient backgrounds based on status
+// Status Banner - gradient backgrounds based on Bootstrap color classes
 .status-banner {
-  &.status-operational {
-    background: linear-gradient(135deg, rgba(var(--bs-success-rgb), 0.1) 0%, rgba(var(--bs-success-rgb), 0.05) 100%);
+  &.bg-success {
+    background: linear-gradient(135deg, rgba(var(--bs-success-rgb), 0.1) 0%, rgba(var(--bs-success-rgb), 0.05) 100%) !important;
     border-left: 4px solid var(--bs-success) !important;
   }
 
-  &.status-degraded {
-    background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), 0.1) 0%, rgba(var(--bs-warning-rgb), 0.05) 100%);
+  &.bg-warning {
+    background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), 0.1) 0%, rgba(var(--bs-warning-rgb), 0.05) 100%) !important;
     border-left: 4px solid var(--bs-warning) !important;
   }
 
-  &.status-major {
-    background: linear-gradient(135deg, rgba(var(--bs-danger-rgb), 0.1) 0%, rgba(var(--bs-danger-rgb), 0.05) 100%);
+  &.bg-danger {
+    background: linear-gradient(135deg, rgba(var(--bs-danger-rgb), 0.1) 0%, rgba(var(--bs-danger-rgb), 0.05) 100%) !important;
     border-left: 4px solid var(--bs-danger) !important;
   }
 
-  &.status-maintenance {
-    background: linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.1) 0%, rgba(var(--bs-info-rgb), 0.05) 100%);
+  &.bg-info {
+    background: linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.1) 0%, rgba(var(--bs-info-rgb), 0.05) 100%) !important;
     border-left: 4px solid var(--bs-info) !important;
   }
 }
@@ -67,11 +67,7 @@
   flex: 1 1 0;
   min-width: 0;
 
-  &.status-operational { background-color: var(--bs-success); }
-  &.status-degraded { background-color: var(--bs-warning); }
-  &.status-major { background-color: var(--bs-danger); }
-  &.status-maintenance { background-color: var(--bs-info); }
-  &.status-unknown { background-color: var(--bs-secondary-bg); }
+  // Uses Bootstrap bg-* classes for colors
 
   &:hover {
     transform: scaleY(1.2);
@@ -79,27 +75,21 @@
   }
 }
 
-// Uptime Bar Legend
+// Uptime Bar Legend - uses Bootstrap bg-* classes for colors
 .uptime-bar-legend {
   width: 16px;
   height: 16px;
-
-  &.status-operational { background-color: var(--bs-success); }
-  &.status-degraded { background-color: var(--bs-warning); }
-  &.status-major { background-color: var(--bs-danger); }
-  &.status-maintenance { background-color: var(--bs-info); }
 }
 
-// Incident & Maintenance Cards - border colors
+// Incident & Maintenance Cards - border colors based on Bootstrap classes
 .incident-card,
 .maintenance-card {
   border-left: 4px solid var(--bs-border-color) !important;
 
-  &.status-operational,
-  &.status-resolved { border-left-color: var(--bs-success) !important; }
-  &.status-degraded { border-left-color: var(--bs-warning) !important; }
-  &.status-major { border-left-color: var(--bs-danger) !important; }
-  &.status-maintenance { border-left-color: var(--bs-info) !important; }
+  &.border-success { border-left-color: var(--bs-success) !important; }
+  &.border-warning { border-left-color: var(--bs-warning) !important; }
+  &.border-danger { border-left-color: var(--bs-danger) !important; }
+  &.border-info { border-left-color: var(--bs-info) !important; }
 }
 
 // Incident Timeline - custom component
@@ -133,19 +123,20 @@
       transform: translateX(-3px);
     }
 
-    &.status-investigating::before {
+    // Uses data attributes for timeline dot colors
+    &[data-status="warning"]::before {
       background-color: var(--bs-warning);
       border-color: var(--bs-warning);
     }
-    &.status-identified::before {
+    &[data-status="danger"]::before {
       background-color: var(--bs-danger);
       border-color: var(--bs-danger);
     }
-    &.status-monitoring::before {
+    &[data-status="info"]::before {
       background-color: var(--bs-info);
       border-color: var(--bs-info);
     }
-    &.status-resolved::before {
+    &[data-status="success"]::before {
       background-color: var(--bs-success);
       border-color: var(--bs-success);
     }
@@ -162,13 +153,9 @@
   pointer-events: none;
   white-space: nowrap;
 
+  // Status dot uses Bootstrap bg-* classes
   .status-dot {
     width: 8px;
     height: 8px;
-
-    &.status-operational { background-color: var(--bs-success); }
-    &.status-degraded { background-color: var(--bs-warning); }
-    &.status-major { background-color: var(--bs-danger); }
-    &.status-maintenance { background-color: var(--bs-info); }
   }
 }

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

@@ -28,7 +28,6 @@ export default function (Manager, options) {
 
   // Register showExitPopup on the UJ library for programmatic access
   // Usage: webManager.uj().showExitPopup()
-  console.log('---1');
 
   webManager._ujLibrary.showExitPopup = showExitPopup;
 

package/dist/assets/js/pages/status/index.js

@@ -30,7 +30,7 @@ export default (Manager) => {
   });
 };
 
-// Configuration
+// Configuration - maps status levels to Bootstrap classes
 const config = {
   selectors: {
     statusBanner: '#status-banner',
@@ -42,11 +42,30 @@ const config = {
     incidentsEmpty: '#incidents-empty',
     subscribeForm: '#status-subscribe-form',
   },
+  // Maps status levels to Bootstrap bg-* classes
   statusClasses: {
-    operational: 'status-operational',
-    degraded: 'status-degraded',
-    major: 'status-major',
-    maintenance: 'status-maintenance',
+    operational: 'bg-success',
+    degraded: 'bg-warning',
+    major: 'bg-danger',
+    maintenance: 'bg-info',
+  },
+  // Maps status levels to Bootstrap border-* classes
+  borderClasses: {
+    operational: 'border-success',
+    degraded: 'border-warning',
+    major: 'border-danger',
+    maintenance: 'border-info',
+    resolved: 'border-success',
+    investigating: 'border-warning',
+    identified: 'border-danger',
+    monitoring: 'border-info',
+  },
+  // Maps incident status to data-status attribute values
+  dataStatusMap: {
+    investigating: 'warning',
+    identified: 'danger',
+    monitoring: 'info',
+    resolved: 'success',
   },
   statusLabels: {
     operational: 'Operational',
@@ -81,13 +100,13 @@ function showUptimeTooltip(e, $bar, index, totalDays) {
   const date = new Date();
   date.setDate(date.getDate() - daysAgo);
 
-  // Get status from the bar's class
+  // Get status from the bar's Bootstrap bg-* class
   let status = 'operational';
-  if ($bar.classList.contains('status-degraded')) {
+  if ($bar.classList.contains('bg-warning')) {
     status = 'degraded';
-  } else if ($bar.classList.contains('status-major')) {
+  } else if ($bar.classList.contains('bg-danger')) {
     status = 'major';
-  } else if ($bar.classList.contains('status-maintenance')) {
+  } else if ($bar.classList.contains('bg-info')) {
     status = 'maintenance';
   }
 
@@ -360,7 +379,7 @@ function updateMaintenance(maintenanceItems) {
 
   // Build maintenance cards
   const html = maintenanceItems.map(item => `
-    <div class="card maintenance-card border-0 bg-body-tertiary mb-3 status-maintenance">
+    <div class="card maintenance-card border-0 bg-body-tertiary mb-3 border-info">
       <div class="card-body p-4">
         <div class="d-flex justify-content-between align-items-start mb-2">
           <h4 class="h5 fw-semibold mb-0">${escapeHtml(item.title)}</h4>
@@ -409,7 +428,7 @@ function updateIncidents(incidents) {
 
   // Build incident cards
   const html = incidents.map(incident => `
-    <div class="card incident-card border-0 bg-body-tertiary mb-3 status-${incident.status}">
+    <div class="card incident-card border-0 bg-body-tertiary mb-3 ${config.borderClasses[incident.status] || ''}">
       <div class="card-body p-4">
         <div class="d-flex justify-content-between align-items-start mb-2 flex-wrap gap-2">
           <h4 class="h5 fw-semibold mb-0">${escapeHtml(incident.title)}</h4>
@@ -421,7 +440,7 @@ function updateIncidents(incidents) {
         ${incident.updates && incident.updates.length > 0 ? `
           <div class="incident-timeline mt-3">
             ${incident.updates.map(update => `
-              <div class="timeline-item status-${update.status} pb-3">
+              <div class="timeline-item pb-3" data-status="${config.dataStatusMap[update.status] || ''}">
                 <div class="small text-muted mb-1">${formatDateTime(update.created_at)}</div>
                 <div class="small">${escapeHtml(update.message)}</div>
               </div>

package/dist/commands/setup.js

@@ -826,8 +826,7 @@ async function migrateHooksToNestedStructure() {
 
     // Check if new file already exists
     if (jetpack.exists(newPath)) {
-      logger.warn(`⚠️  Cannot migrate ${migration.old}: ${migration.new} already exists`);
-      continue;
+      logger.warn(`⚠️  Migrate ${migration.old}: ${migration.new} already exists`);
     }
 
     // Move the file

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/status.html

@@ -80,7 +80,7 @@ incidents:
     <!-- Overall Status Banner -->
     <div class="row justify-content-center">
       <div class="col-lg-10">
-        <div id="status-banner" class="card border-0 shadow-lg status-banner status-operational" data-lazy="@class animation-slide-up">
+        <div id="status-banner" class="card border-0 shadow-lg status-banner bg-success" data-lazy="@class animation-slide-up">
           <div class="card-body p-4">
             <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
               <div class="d-flex align-items-center gap-3">
@@ -111,7 +111,7 @@ incidents:
             <div class="service-item py-3 border-bottom {% if forloop.last %}border-bottom-0{% endif %}" data-service-id="{{ service.id }}" data-lazy="@class animation-slide-up">
               <div class="d-flex align-items-center justify-content-between mb-2">
                 <div class="d-flex align-items-center gap-2">
-                  <span class="service-status-dot status-operational" data-service-status="{{ service.id }}">
+                  <span class="service-status-dot" data-service-status="{{ service.id }}">
                     {% uj_icon "circle-check", "text-success" %}
                   </span>
                   {% iftruthy service.url %}
@@ -130,7 +130,7 @@ incidents:
               </div>
               <div class="uptime-bars d-flex gap-1 cursor-pointer" data-service-bars="{{ service.id }}" title="Uptime history for the last {{ page.resolved.status.days }} days">
                 {% for i in (1..90) %}
-                  <div class="uptime-bar rounded-1 status-operational" data-day="{{ i }}"></div>
+                  <div class="uptime-bar rounded-1 bg-success" data-day="{{ i }}"></div>
                 {% endfor %}
               </div>
             </div>
@@ -141,19 +141,19 @@ incidents:
         <div class="mt-4 d-flex align-items-center justify-content-between flex-wrap gap-2 text-muted small" data-lazy="@class animation-slide-up">
           <div class="d-flex align-items-center flex-wrap gap-2 gap-md-4">
             <div class="d-flex align-items-center gap-1">
-              <div class="uptime-bar-legend rounded-1 status-operational"></div>
+              <div class="uptime-bar-legend rounded-1 bg-success"></div>
               <span>Operational</span>
             </div>
             <div class="d-flex align-items-center gap-1">
-              <div class="uptime-bar-legend rounded-1 status-degraded"></div>
+              <div class="uptime-bar-legend rounded-1 bg-warning"></div>
               <span>Degraded</span>
             </div>
             <div class="d-flex align-items-center gap-1">
-              <div class="uptime-bar-legend rounded-1 status-major"></div>
+              <div class="uptime-bar-legend rounded-1 bg-danger"></div>
               <span>Outage</span>
             </div>
             <div class="d-flex align-items-center gap-1">
-              <div class="uptime-bar-legend rounded-1 status-maintenance"></div>
+              <div class="uptime-bar-legend rounded-1 bg-info"></div>
               <span>Maintenance</span>
             </div>
           </div>

package/dist/gulp/tasks/sass.js

@@ -13,6 +13,7 @@ const { template } = require('node-powertools');
 const yaml = require('js-yaml');
 const postcss = require('gulp-postcss');
 const purgeCss = require('@fullhuman/postcss-purgecss').default;
+const through2 = require('through2');
 
 // Load package
 const package = Manager.getPackage('main');
@@ -125,6 +126,7 @@ function sass(complete) {
   // Apply PurgeCSS if enabled
   if (ENABLE_PURGECSS) {
     logger.log('PurgeCSS enabled - removing unused CSS');
+    const purgeCssStartTime = performance.now();
 
     // Define content patterns for PurgeCSS
     const contentPatterns = [
@@ -193,109 +195,125 @@ function sass(complete) {
     // });
 
     // Apply PurgeCSS
-    stream = stream.pipe(postcss([
-      purgeCss({
-        content: contentPatterns,
-        // Safelist patterns for dynamic classes
-        safelist: {
-          standard: [
-            // Bootstrap JavaScript components
-            /^modal-/,
-            /^bs-/,
-            /^data-bs-/,
-            /^carousel-/,
-            /^collapse/,
-            /^dropdown-/,
-            /^offcanvas-/,
-            /^tooltip-/,
-            /^popover-/,
-            /^toast-/,
-            /^show$/,
-            /^showing$/,
-            /^hide$/,
-            /^fade$/,
-            /^active$/,
-            /^disabled$/,
-
-            // Accordion specific
-            /^accordion/,
-            /^collapsed$/,
-            /^collapsing$/,
-
-            // Common dynamic classes
-            /^is-/,
-            /^has-/,
-            /^was-/,
-
-            // Animations
-            /^animation-/,
-
-            // Utilities that might be added dynamically
-            /^[mp][trblxy]?-[0-9]+$/,
-            /^text-/,
-            /^bg-/,
-            /^border-/,
-            /^rounded-/,
-            /^shadow-/,
-            /^d-/,
-            /^flex-/,
-            /^justify-/,
-            /^align-/,
-            /^order-/,
-            /^overflow-/,
-            /^position-/,
-            /^w-/,
-            /^h-/,
-            /^mw-/,
-            /^mh-/,
-            /^min-/,
-            /^max-/,
-
-            // Utilities
-            /^ratio-/,
-            /^object-/,
-
-            // Libraries
-            // Cookies
-            /^cookie-consent-/,
-
-            // Font Awesome
-            /^fa-/,
-
-            // Lazy
-            /^lazy-/,
-
-            // Social
-            /^social-share-/,
-          ],
-          deep: [
-            // Preserve input state pseudo-selectors (checkbox, radio, etc.)
-            /:checked/,
-            /:disabled/,
-            /:enabled/,
-            /:focus/,
-            /:hover/,
-            /:valid/,
-            /:invalid/,
-          ],
-          greedy: [],
-          // Preserve keyframe animations
-          keyframes: [
-            /^spinner-/,
-            // /^accordion/,
-            // /^fade-/,
-            // /^slide-/,
-            // /^collapse/
-          ]
+    const purgeCssPlugin = purgeCss({
+      content: contentPatterns,
+      // Safelist patterns for dynamic classes
+      safelist: {
+        standard: [
+          // Bootstrap JavaScript components
+          /^modal-/,
+          /^bs-/,
+          /^data-bs-/,
+          /^carousel-/,
+          /^collapse/,
+          /^dropdown-/,
+          /^offcanvas-/,
+          /^tooltip-/,
+          /^popover-/,
+          /^toast-/,
+          /^show$/,
+          /^showing$/,
+          /^hide$/,
+          /^fade$/,
+          /^active$/,
+          /^disabled$/,
+
+          // Accordion specific
+          /^accordion/,
+          /^collapsed$/,
+          /^collapsing$/,
+
+          // Common dynamic classes
+          /^is-/,
+          /^has-/,
+          /^was-/,
+
+          // Animations
+          /^animation-/,
+
+          // Utilities that might be added dynamically
+          /^[mp][trblxy]?-[0-9]+$/,
+          /^text-/,
+          /^bg-/,
+          /^border-/,
+          /^rounded-/,
+          /^shadow-/,
+          /^d-/,
+          /^flex-/,
+          /^justify-/,
+          /^align-/,
+          /^order-/,
+          /^overflow-/,
+          /^position-/,
+          /^w-/,
+          /^h-/,
+          /^mw-/,
+          /^mh-/,
+          /^min-/,
+          /^max-/,
+
+          // Utilities
+          /^ratio-/,
+          /^object-/,
+
+          // Libraries
+          // Cookies
+          /^cookie-consent-/,
+
+          // Font Awesome
+          /^fa-/,
+
+          // Lazy
+          /^lazy-/,
+
+          // Social
+          /^social-share-/,
+        ],
+        deep: [
+          // Preserve input state pseudo-selectors (checkbox, radio, etc.)
+          /:checked/,
+          /:disabled/,
+          /:enabled/,
+          /:focus/,
+          /:hover/,
+          /:valid/,
+          /:invalid/,
+        ],
+        greedy: [],
+        // Preserve keyframe animations
+        keyframes: [
+          /^spinner-/,
+          // /^accordion/,
+          // /^fade-/,
+          // /^slide-/,
+          // /^collapse/
+        ]
+      },
+      // Don't remove CSS variables
+      variables: true,
+      // Keep keyframes
+      keyframes: true,
+      // Keep font-face rules
+      fontFace: true
+    });
+
+    // Pipe postcss and log timing when all files complete
+    let purgeCssLogged = false;
+    stream = stream
+      .pipe(postcss([purgeCssPlugin]))
+      .pipe(through2.obj(
+        function (file, enc, cb) {
+          cb(null, file);
         },
-        // Don't remove CSS variables
-        variables: true,
-        // Keep keyframes
-        keyframes: true,
-        // Keep font-face rules
-        fontFace: true
-      })
-    ]));
+        function (cb) {
+          if (!purgeCssLogged) {
+            purgeCssLogged = true;
+            const purgeCssTime = ((performance.now() - purgeCssStartTime) / 1000).toFixed(2);
+            logger.log(`PurgeCSS completed in ${purgeCssTime}s`);
+          }
+          cb();
+        }
+      ));
   }
 
   // Process

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.193",
+  "version": "0.0.194",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {