ultimate-jekyll-manager 0.0.145 → 0.0.146

package/dist/assets/css/pages/extension/installed/index.scss

@@ -0,0 +1,240 @@
+// Extension Installed Page Styles
+// Only custom styles that cannot be achieved with Bootstrap
+
+// Success icon animation
+.extension-success-icon {
+  animation: success-appear 0.6s ease-out;
+}
+
+body {
+  color: red !important;
+}
+
+@keyframes success-appear {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Arrow container positioning and animation
+.extension-arrow-container {
+  top: 80px;
+  right: 40px;
+  animation: arrow-container-appear 0.5s ease-out 0.3s both;
+
+  @media (max-width: 991px) {
+    right: 20px;
+    top: 70px;
+  }
+
+  @media (max-width: 576px) {
+    right: 10px;
+    top: 60px;
+
+    .extension-arrow svg {
+      width: 50px;
+      height: 70px;
+    }
+  }
+}
+
+@keyframes arrow-container-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Arrow bounce animation
+.extension-arrow {
+  animation: arrow-bounce 1.5s ease-in-out infinite;
+}
+
+@keyframes arrow-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+// Label glow animation
+.extension-arrow-label {
+  animation: label-glow 2s ease-in-out infinite;
+}
+
+@keyframes label-glow {
+  0%, 100% {
+    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
+  }
+  50% {
+    box-shadow: 0 4px 25px rgba(var(--bs-primary-rgb), 0.7);
+  }
+}
+
+// URL bar min width
+.extension-url-bar {
+  min-width: 100px;
+}
+
+// Extension dropdown width
+.extension-dropdown {
+  width: 280px;
+
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+}
+
+// Icon/brandmark sizing
+.extension-item-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.extension-brandmark {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+// ============================================================================
+// Click Indicator Animation (same pattern as download page)
+// ============================================================================
+
+.click-indicator {
+  pointer-events: none;
+
+  .pointer-icon {
+    width: 48px;
+    height: 48px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .click-pulse {
+    width: 30px;
+    height: 30px;
+    top: -2px;
+    left: -2px;
+    opacity: 0;
+  }
+}
+
+// Step 1: Puzzle piece - mouse moves to target, clicks, snaps back
+.extension-puzzle-target {
+  .click-indicator {
+    .pointer-icon {
+      animation: puzzle-mouse-move 2.5s ease-out infinite;
+    }
+
+    .click-pulse {
+      animation: puzzle-click-pulse 2.5s ease-out infinite;
+    }
+  }
+}
+
+@keyframes puzzle-mouse-move {
+  // Start off-screen (bottom-right)
+  0% {
+    transform: translate(40px, 30px);
+  }
+  // Arrive at target (cursor tip on button)
+  30% {
+    transform: translate(-5px, -12px);
+  }
+  // Stay on target during clicks
+  70% {
+    transform: translate(-5px, -12px);
+  }
+  // Snap back instantly
+  70.1%, 100% {
+    transform: translate(40px, 30px);
+  }
+}
+
+@keyframes puzzle-click-pulse {
+  0%, 35% {
+    opacity: 0;
+    transform: translate(-5px, -12px) scale(0.5);
+  }
+  40%, 50% {
+    opacity: 0.8;
+    transform: translate(-5px, -12px) scale(1.3);
+  }
+  55%, 65% {
+    opacity: 0.8;
+    transform: translate(-5px, -12px) scale(1.3);
+  }
+  70%, 100% {
+    opacity: 0;
+    transform: translate(-5px, -12px) scale(0.5);
+  }
+}
+
+// Step 2: Pin button - mouse moves to target, clicks, snaps back (delayed)
+.extension-pin-target {
+  .click-indicator {
+    .pointer-icon {
+      animation: pin-mouse-move 2.5s ease-out infinite 1.5s;
+    }
+
+    .click-pulse {
+      animation: pin-click-pulse 2.5s ease-out infinite 1.5s;
+    }
+  }
+}
+
+@keyframes pin-mouse-move {
+  // Start off-screen (bottom-right)
+  0% {
+    transform: translate(35px, 25px);
+  }
+  // Arrive at target (cursor tip on button)
+  30% {
+    transform: translate(-5px, -12px);
+  }
+  // Stay on target during clicks
+  70% {
+    transform: translate(-5px, -12px);
+  }
+  // Snap back instantly
+  70.1%, 100% {
+    transform: translate(35px, 25px);
+  }
+}
+
+@keyframes pin-click-pulse {
+  0%, 35% {
+    opacity: 0;
+    transform: translate(-5px, -12px) scale(0.5);
+  }
+  40%, 50% {
+    opacity: 0.8;
+    transform: translate(-5px, -12px) scale(1.3);
+  }
+  55%, 65% {
+    opacity: 0.8;
+    transform: translate(-5px, -12px) scale(1.3);
+  }
+  70%, 100% {
+    opacity: 0;
+    transform: translate(-5px, -12px) scale(0.5);
+  }
+}

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

@@ -0,0 +1,174 @@
+/**
+ * Status Page Styles
+ *
+ * Uses Bootstrap semantic colors:
+ * - success for operational (green)
+ * - warning for degraded (amber)
+ * - danger for major outage (red)
+ * - info for maintenance (blue)
+ */
+
+// Status Pulse - size for the blinking dot (uses global animation-pulse class)
+.status-pulse {
+  width: 8px;
+  height: 8px;
+}
+
+// Status Banner - gradient backgrounds based on status
+.status-banner {
+  &.status-operational {
+    background: linear-gradient(135deg, rgba(var(--bs-success-rgb), 0.1) 0%, rgba(var(--bs-success-rgb), 0.05) 100%);
+    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%);
+    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%);
+    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%);
+    border-left: 4px solid var(--bs-info) !important;
+  }
+}
+
+// Uptime Bars - custom component, no Bootstrap equivalent
+// Responsive: Show 30 bars on mobile, 60 on tablet, 90 on desktop
+.uptime-bars {
+  height: 32px;
+  flex-wrap: nowrap;
+
+  @media (max-width: 767.98px) {
+    height: 24px;
+    gap: 1px !important;
+
+    // Hide first 60 bars on mobile (show last 30)
+    .uptime-bar:nth-child(-n+60) {
+      display: none;
+    }
+  }
+
+  @media (min-width: 768px) and (max-width: 991.98px) {
+    height: 28px;
+
+    // Hide first 30 bars on tablet (show last 60)
+    .uptime-bar:nth-child(-n+30) {
+      display: none;
+    }
+  }
+}
+
+.uptime-bar {
+  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); }
+
+  &:hover {
+    transform: scaleY(1.2);
+    opacity: 0.8;
+  }
+}
+
+// Uptime Bar Legend
+.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-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; }
+}
+
+// Incident Timeline - custom component
+.incident-timeline {
+  position: relative;
+  padding-left: 1.5rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--bs-border-color);
+  }
+
+  .timeline-item {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -1.5rem;
+      top: 0.5rem;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--bs-secondary-bg);
+      border: 2px solid var(--bs-border-color);
+      transform: translateX(-3px);
+    }
+
+    &.status-investigating::before {
+      background-color: var(--bs-warning);
+      border-color: var(--bs-warning);
+    }
+    &.status-identified::before {
+      background-color: var(--bs-danger);
+      border-color: var(--bs-danger);
+    }
+    &.status-monitoring::before {
+      background-color: var(--bs-info);
+      border-color: var(--bs-info);
+    }
+    &.status-resolved::before {
+      background-color: var(--bs-success);
+      border-color: var(--bs-success);
+    }
+  }
+}
+
+// Tooltip for uptime bars - custom floating element
+.uptime-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
+  box-shadow: var(--bs-box-shadow);
+  pointer-events: none;
+  white-space: nowrap;
+
+  .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/css/pages/updates/index.scss

@@ -0,0 +1,13 @@
+/**
+ * Updates Listing Page Styles
+ */
+
+// Update cards - hover effect
+.update-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--bs-box-shadow);
+  }
+}

package/dist/assets/css/pages/updates/update.scss

@@ -0,0 +1,46 @@
+/**
+ * Individual Update Page Styles
+ */
+
+// Update content - markdown styling
+.update-content {
+  h2 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--bs-border-color);
+  }
+
+  h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  ul, ol {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    background-color: var(--bs-body-tertiary-bg);
+    border-radius: var(--bs-border-radius-sm);
+    font-size: 0.875em;
+  }
+
+  pre {
+    padding: 1rem;
+    background-color: var(--bs-body-tertiary-bg);
+    border-radius: var(--bs-border-radius);
+    overflow-x: auto;
+
+    code {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,160 @@
+/**
+ * Extension 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();
+
+    setupBrowserDetection();
+    setupInstallTracking();
+
+    // Expose test function globally
+    window.triggerExtensionInstall = triggerInstall;
+
+    /* @dev-only:start */
+    // {
+    //   window.triggerExtensionInstall('chrome');
+    // }
+    /* @dev-only:end */
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Configuration
+const config = {
+  selectors: {
+    browserButtons: '.browser-btn',
+    browserPanes: '[data-browser]',
+    installButtons: '.tab-pane[data-browser] .btn-primary',
+  },
+};
+
+// Browser detection mapping
+const browserMap = {
+  chrome: /chrome|chromium|crios/i,
+  firefox: /firefox|fxios/i,
+  safari: /safari/i,
+  edge: /edg/i,
+  opera: /opera|opr/i,
+};
+
+// Setup browser detection and auto-select
+function setupBrowserDetection() {
+  const detectedBrowser = detectBrowser();
+  console.log('Detected browser:', detectedBrowser);
+
+  // Show loading state initially, then switch to detected browser
+  setTimeout(() => {
+    // Activate the detected browser tab using Bootstrap's tab API
+    const $detectedTab = document.querySelector(`#${detectedBrowser}-tab`);
+    if ($detectedTab) {
+      const tab = new bootstrap.Tab($detectedTab);
+      tab.show();
+    }
+  }, 800);
+}
+
+// Detect user's browser from user agent
+function detectBrowser() {
+  const userAgent = navigator.userAgent;
+
+  // Edge must be checked before Chrome (Edge includes "Chrome" in UA)
+  if (browserMap.edge.test(userAgent)) {
+    return 'edge';
+  }
+
+  // Opera must be checked before Chrome (Opera includes "Chrome" in UA)
+  if (browserMap.opera.test(userAgent)) {
+    return 'opera';
+  }
+
+  // Chrome
+  if (browserMap.chrome.test(userAgent)) {
+    return 'chrome';
+  }
+
+  // Firefox
+  if (browserMap.firefox.test(userAgent)) {
+    return 'firefox';
+  }
+
+  // Safari must be checked last (Chrome and other browsers include "Safari" in UA)
+  if (browserMap.safari.test(userAgent) && !browserMap.chrome.test(userAgent)) {
+    return 'safari';
+  }
+
+  // Default to Chrome
+  return 'chrome';
+}
+
+// Setup install button tracking
+function setupInstallTracking() {
+  const $installButtons = document.querySelectorAll(config.selectors.installButtons);
+
+  $installButtons.forEach($button => {
+    $button.addEventListener('click', function() {
+      const $browserPane = this.closest('[data-browser]');
+      const browserId = $browserPane ? $browserPane.dataset.browser : 'unknown';
+      const installUrl = this.getAttribute('href');
+
+      trackInstallClick(browserId, installUrl);
+    });
+  });
+}
+
+// Tracking function
+function trackInstallClick(browser, installUrl) {
+  console.log('Extension install clicked:', browser, installUrl);
+
+  gtag('event', 'extension_install', {
+    browser: browser,
+    install_url: installUrl,
+  });
+
+  fbq('trackCustom', 'ExtensionInstall', {
+    content_name: `${browser} extension`,
+    content_category: browser,
+    content_type: 'extension',
+  });
+
+  ttq.track('Download', {
+    content_id: `extension-${browser}`,
+    content_type: 'product',
+    content_name: `${browser} extension`,
+  });
+}
+
+// Trigger install for testing (simulates clicking the install button)
+function triggerInstall(browser) {
+  const browserId = browser || detectBrowser();
+  const $button = document.querySelector(`.tab-pane[data-browser="${browserId}"] .btn-primary`);
+
+  if (!$button) {
+    console.error(`No install button found for browser: ${browserId}`);
+    return;
+  }
+
+  const installUrl = $button.getAttribute('href');
+
+  if (!installUrl) {
+    console.error(`No install URL configured for browser: ${browserId}`);
+    return;
+  }
+
+  // Track the click
+  trackInstallClick(browserId, installUrl);
+
+  // Open the extension store in a new tab
+  window.open(installUrl, '_blank');
+}