portosaurus 1.14.0

package/internal/src/utils/HashNavigation.js

@@ -0,0 +1,250 @@
+import { useEffect, useRef } from 'react';
+
+// AI Generated (partially)
+
+/**
+ * <HashNavigation/> Component to handle hash-based navigation with visual effects
+ * Should be added at the bottom of the page
+ * 
+ * @param {Object} props Component props
+ * @param {string} props.elementPrefix Prefix for element IDs (default: 'card-')
+ * @param {string} props.elementSelector Selector for all elements in the group (default: '.content-card')
+ * @param {string} props.containerSelector Selector for the container element (default: '.container')
+ * @param {number} props.effectDuration Duration of the visual effect in ms (default: 6000)
+ * @param {number} props.scrollDelay Delay before scrolling in ms (default: 300)
+ * @param {Object} props.scrollOptions Options for scrollIntoView (default: { behavior: 'smooth', block: 'center' })
+ * @param {boolean} props.enabled Whether the component is enabled (default: true)
+ * @param {Object} props.styles Custom styling options
+ * @param {string} props.styles.overlayColor Background color for the overlay (default: 'rgba(var(--ifm-color-emphasis-200-rgb), 0.5)')
+ * @param {string} props.styles.highlightShadow Shadow for highlighted element (default: '0 0 30px 10px var(--ifm-color-primary)')
+ * @param {string} props.styles.highlightScale Scale for highlighted element (default: '1.05')
+ * @param {string} props.styles.blurAmount Blur amount for non-highlighted elements (default: '4px')
+ * @param {string} props.styles.blurOpacity Opacity for blurred elements (default: '0.3')
+ */
+export default function HashNavigation({ 
+  elementPrefix = 'card-',
+  elementSelector = '.content-card',
+  containerSelector = '.container',
+  effectDuration = 6000,
+  scrollDelay = 300,
+  scrollOptions = { behavior: 'smooth', block: 'center' },
+  enabled = true,
+  styles = {}
+}) {
+  const styleId = 'hash-navigation-styles';
+  const highlightClass = 'hash-nav-highlight';
+  const blurClass = 'hash-nav-blur';
+  const containerActiveClass = 'hash-nav-active';
+  
+  // Default styles
+  const {
+    overlayColor = 'rgba(var(--ifm-color-emphasis-200-rgb), 0.5)',
+    highlightShadow = '0 0 30px 10px var(--ifm-color-primary)',
+    highlightScale = '1.05',
+    blurAmount = '4px',
+    blurOpacity = '0.3'
+  } = styles;
+  
+  // Reference to track if styles have been injected
+  const stylesInjected = useRef(false);
+  
+  // Inject the component styles
+  useEffect(() => {
+
+    // Don't inject styles if already present
+    if (document.getElementById(styleId) || stylesInjected.current) {
+      return;
+    }
+    
+    const styleElement = document.createElement('style');
+
+    styleElement.id = styleId;
+
+    styleElement.innerHTML = `
+      
+      ${containerSelector}.${containerActiveClass} {
+        position: relative;
+      }
+      
+      ${containerSelector}.${containerActiveClass}::after {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: ${overlayColor};
+        z-index: 10;
+        pointer-events: none;
+      }
+      
+      .${highlightClass} {
+        position: relative;
+        z-index: 20;
+        transform: scale(${highlightScale});
+        box-shadow: ${highlightShadow};
+        transition: all 0.3s ease;
+      }
+      
+      .${blurClass} {
+        filter: blur(${blurAmount}) grayscale(70%) brightness(0.8);
+        opacity: ${blurOpacity};
+        transition: all 0.3s ease;
+        background-color: rgba(var(--ifm-color-emphasis-200-rgb), 0.15);
+        pointer-events: none; 
+      }
+      
+      /* Clickable overlay for dismissing effects */
+      .hash-nav-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 15; 
+        cursor: pointer;
+      }
+      
+      /* Reduced motion support */
+      @media (prefers-reduced-motion: reduce) {
+        .${highlightClass}, 
+        .${blurClass} {
+          transition: none !important;
+        }
+        
+        .${highlightClass} {
+          transform: none !important;
+        }
+        
+        .${blurClass} {
+          filter: opacity(${blurOpacity});
+          background-color: rgba(var(--ifm-color-emphasis-200-rgb), 0.15);
+        }
+      }
+    `;
+    
+    document.head.appendChild(styleElement);
+    stylesInjected.current = true;
+    
+    // Clean up on unmount
+    return () => {
+      const existingStyle = document.getElementById(styleId);
+      if (existingStyle) {
+        document.head.removeChild(existingStyle);
+      }
+      stylesInjected.current = false;
+    };
+  }, [containerSelector, overlayColor, highlightShadow, highlightScale, blurAmount, blurOpacity]);
+  
+
+  // Main hash navigation logic
+  useEffect(() => {
+    if (!enabled) return;
+
+    if (window.location.hash) {
+      const hashValue = window.location.hash.substring(1);
+      const targetElement = document.getElementById(`${elementPrefix}${hashValue}`);
+
+      if (targetElement) {
+
+        // Wait a moment for the page to fully render
+        setTimeout(() => {
+
+          // Scroll to the element
+          targetElement.scrollIntoView(scrollOptions);
+          
+          // Get the container to add the overlay effect
+          const container = document.querySelector(containerSelector);
+          if (container) {
+            container.classList.add(containerActiveClass);
+          }
+
+          // Add visual effects
+          const allElements = document.querySelectorAll(elementSelector);
+
+          // Add highlight class to the target element
+          targetElement.classList.add(highlightClass);
+
+          // Add blur to all other elements
+          allElements.forEach(element => {
+            if (element !== targetElement) {
+              element.classList.add(blurClass);
+            }
+          });
+
+          // Create clickable overlay for dismissing effects
+          const overlay = document.createElement('div');
+          overlay.className = 'hash-nav-overlay';
+
+          document.body.appendChild(overlay);
+
+          let effectTimeoutId = null;
+
+          // remove effects
+          const removeEffects = () => {
+
+            if (effectTimeoutId) {
+              clearTimeout(effectTimeoutId);
+              effectTimeoutId = null;
+            }
+
+            // Remove effects
+            allElements.forEach(element => {
+              element.classList.remove(blurClass);
+            });
+
+            targetElement.classList.remove(highlightClass);
+            
+            // Remove the container overlay
+            if (container) {
+              container.classList.remove(containerActiveClass);
+            }
+            
+            // Remove clickable overlay
+            if (overlay && overlay.parentNode) {
+              overlay.parentNode.removeChild(overlay);
+            }
+
+            // Remove event listeners after effects are cleared
+            overlay.removeEventListener('click', removeEffects);
+            overlay.removeEventListener('touchstart', removeEffects);
+            document.removeEventListener('keydown', handleKeyDown);
+          };
+          
+          // Add keyboard escape handler
+          const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+              removeEffects();
+            }
+          };
+
+          // Add event listeners to dismiss effects
+          overlay.addEventListener('click', removeEffects);
+          overlay.addEventListener('touchstart', removeEffects);
+          document.addEventListener('keydown', handleKeyDown);
+
+          // Set timeout to automatically remove effects after duration
+          effectTimeoutId = setTimeout(removeEffects, effectDuration);
+
+        }, scrollDelay);
+      }
+    }
+
+    // Cleanup
+    return () => {
+      const container = document.querySelector(containerSelector);
+      const overlay = document.querySelector('.hash-nav-overlay');
+
+      if (container) {
+        container.classList.remove(containerActiveClass);
+      }
+
+      // Remove any overlay element that might exist
+      if (overlay && overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+    };
+  }, [enabled, elementPrefix, elementSelector, containerSelector, effectDuration, scrollDelay, scrollOptions]);
+
+  return null;
+}

package/internal/src/utils/appVersion.js

@@ -0,0 +1,27 @@
+const fs = require('fs');
+const path = require('path');
+
+let cachedVersion = null;
+
+function appVersion() {
+
+  if (cachedVersion) {
+    return cachedVersion;
+  }
+
+  try {
+    const pkgPath = path.resolve(__dirname, '../../package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+    cachedVersion = pkg.version || '0.0.0';
+  } catch (err) {
+
+    cachedVersion = '0.0.0';
+    console.warn('Could not read package.json version:', err.message);
+  }
+
+  console.info('\n[INFO] App version:', cachedVersion);
+  return cachedVersion;
+}
+
+module.exports = { appVersion };

package/internal/src/utils/compileConfig.js

@@ -0,0 +1,82 @@
+
+// Import the config
+const rawConfig = require('../../config.js');
+
+function resolvePath(obj, path) {
+  const parts = path.split('.');
+  let current = obj;
+
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== 'object') {
+      return undefined;
+    }
+    current = current[part];
+  }
+
+  return current;
+}
+
+function parseStringValue(value, config) {
+
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  // Find all ${...} references
+  return value.replace(/\${([^}]+)}/g, (match, path) => {
+    const resolvedValue = resolvePath(config, path);
+    
+    if (resolvedValue === undefined) {
+      console.warn(`Warning: Could not resolve reference "${path}" in config value "${value}"`);
+      return match;
+    }
+    
+    if (typeof resolvedValue === 'string' && resolvedValue.includes('${')) {
+      return parseStringValue(resolvedValue, config);
+    }
+    
+    return resolvedValue;
+  });
+}
+
+
+function parseConfigObject(obj, config) {
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => parseConfigObject(item, config));
+  }
+  
+  if (obj !== null && typeof obj === 'object') {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = parseConfigObject(value, config);
+    }
+    return result;
+  }
+  
+  if (typeof obj === 'string') {
+    return parseStringValue(obj, config);
+  }
+  
+  return obj;
+}
+
+
+function parseConfig(config) {
+
+  const parsedConfig = JSON.parse(JSON.stringify(config));
+  return parseConfigObject(parsedConfig, config);
+}
+
+// Parse the raw config
+const parsedExports = {};
+for (const key in rawConfig) {
+  parsedExports[key] = parseConfig(rawConfig[key]);
+}
+
+module.exports = {
+    ...parsedExports,
+    parseConfig,
+    parseStringValue,
+    resolvePath,
+}

package/internal/src/utils/cssUtils.js

@@ -0,0 +1,99 @@
+const fs = require('fs');
+const path = require('path');
+
+// AI generated
+
+// Cache for CSS content and parsed variables
+const cssCache = new Map();
+const varCache = new Map();
+
+// Debug flag - set to true to enable debug logs
+const DEBUG = false;
+
+function getCssVar(varName) {
+  // Return cached value if exists
+  if (varCache.has(varName)) {
+    DEBUG && console.log(`[CSS-DEBUG] Using cached value for ${varName}: ${varCache.get(varName)}`);
+    return varCache.get(varName);
+  }
+
+  DEBUG && console.log(`[CSS-DEBUG] Looking for CSS variable: ${varName}`);
+  
+  // Try to find variable in CSS files
+  const cssFiles = [
+    path.resolve(__dirname, '../css/custom.css'),
+    path.resolve(__dirname, '../css/catppuccin.css')
+  ];
+
+  for (const cssPath of cssFiles) {
+    try {
+      DEBUG && console.log(`[CSS-DEBUG] Checking file: ${cssPath}`);
+      
+      if (!fs.existsSync(cssPath)) {
+        DEBUG && console.log(`[CSS-DEBUG] File not found: ${cssPath}`);
+        continue;
+      }
+      
+      let cssContent = cssCache.get(cssPath);
+      if (!cssContent) {
+        cssContent = fs.readFileSync(cssPath, 'utf8');
+        cssCache.set(cssPath, cssContent);
+        DEBUG && console.log(`[CSS-DEBUG] Loaded CSS file: ${cssPath}`);
+      }
+
+      // Find all occurrences of the variable
+      const regex = new RegExp(`${varName}:\\s*([^;]+);`, 'g');
+      let lastValue = null;
+      let match;
+      let matchCount = 0;
+
+      // Find all matches and keep the last one
+      while ((match = regex.exec(cssContent)) !== null) {
+        matchCount++;
+        lastValue = match[1].replace(/!important/g, '').trim();
+        DEBUG && console.log(`[CSS-DEBUG] Found match #${matchCount} for ${varName}: ${lastValue}`);
+      }
+      
+      if (matchCount > 0) {
+        DEBUG && console.log(`[CSS-DEBUG] Using last of ${matchCount} matches for ${varName}: ${lastValue}`);
+      }
+
+      // Process nested variables
+      if (lastValue && lastValue.startsWith('var(')) {
+        const nestedMatch = lastValue.match(/var\((--[^)]+)\)/);
+        if (nestedMatch) {
+          const nestedVar = nestedMatch[1];
+          DEBUG && console.log(`[CSS-DEBUG] Found nested variable in ${varName}: ${nestedVar}`);
+          
+          try {
+            const resolvedValue = getCssVar(nestedVar);
+            DEBUG && console.log(`[CSS-DEBUG] Resolved nested ${nestedVar} to: ${resolvedValue}`);
+            varCache.set(varName, resolvedValue);
+            return resolvedValue;
+          } catch (err) {
+            DEBUG && console.log(`[CSS-DEBUG] Could not resolve nested variable: ${err.message}`);
+            throw new Error(`Failed to resolve nested variable ${nestedVar} in ${varName}: ${err.message}`);
+          }
+        }
+      }
+
+      if (lastValue) {
+        DEBUG && console.log(`[CSS-DEBUG] Caching and returning value for ${varName}: ${lastValue}`);
+        varCache.set(varName, lastValue);
+        return lastValue;
+      }
+    } catch (err) {
+      DEBUG && console.log(`[CSS-DEBUG] Error processing ${cssPath}: ${err.message}`);
+      if (err.message.includes('Failed to resolve nested variable')) {
+        throw err; 
+      }
+    }
+  }
+
+  // Variable not found - throw error
+  const errorMsg = `CSS variable ${varName} not found in any CSS files`;
+  DEBUG && console.error(`[CSS-DEBUG] ${errorMsg}`);
+  throw new Error(errorMsg);
+}
+
+module.exports = { getCssVar };

package/internal/src/utils/filterEnabledItems.js

@@ -0,0 +1,21 @@
+/**
+ * Filters an array of items that can be either:
+ * 1. Regular items (included as-is)
+ * 2. Conditional items with enable/value properties (included only if enabled)
+ *
+**/
+export const useEnabled = (items) => {
+  if (!Array.isArray(items)) {
+    console.warn('useEnabled: Expected an array, received:', typeof items);
+    return [];
+  }
+
+  return items.flatMap(item => {
+    // If item has enable property, it's a conditional item
+    if (item && typeof item === 'object' && 'enable' in item && 'value' in item) {
+      return item.enable === true ? [item.value] : [];
+    }
+    // Otherwise it's a regular item that's always included
+    return [item];
+  });
+};