portosaurus 0.14.0

package/src/theme/staticLink/docusaurus-snippet.css

@@ -0,0 +1,3 @@
+.hide-lines {
+  display: none;
+}

package/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/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/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/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];
+  });
+};

package/src/utils/generateFavicon.js

@@ -0,0 +1,256 @@
+const fs = require('fs');
+const path = require('path');
+
+const { favicons } = require('favicons');
+const { downloadImage } = require('./imageDownloader');
+const { reshapeImage } = require('./imageProcessor');
+const { getCssVar } = require('./cssUtils');
+const { extractSvg } = require('./iconExtractor');
+
+function createDirectoryIfNotExists(dir) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+    return true;
+  }
+  return false;
+}
+
+function cleanupFile(filePath) {
+  if (fs.existsSync(filePath)) {
+    try { 
+      fs.unlinkSync(filePath); 
+      return true;
+    } catch (e) {
+      console.warn(`[WARNING] Failed to clean up file ${filePath}:`, e.message);
+    }
+  }
+  return false;
+}
+
+function processManifest(manifestFile, outputDir, appVersion) {
+  try {
+    const manifest = JSON.parse(manifestFile.contents);
+    manifest.version = appVersion;
+    
+    fs.writeFileSync(
+      path.join(outputDir, manifestFile.name), 
+      JSON.stringify(manifest, null, 2)
+    );
+    return true;
+  } catch (err) {
+    console.error('[ERROR] Failed to process manifest:', err.message);
+    fs.writeFileSync(path.join(outputDir, manifestFile.name), manifestFile.contents);
+    return false;
+  }
+}
+
+async function generateFavicons(context, options = {}) {
+  console.log('\n[INFO] Generating favicons...');
+  
+  const {siteConfig} = context;
+  const profilePicUrl = options.imagePath || siteConfig.customFields.heroSection.profilePic;
+  const appVersion = siteConfig.customFields.version || '1.0';
+  const circular = options.circular !== false;
+  const shape = options.shape || 'circle';
+  
+  const staticBaseDir = path.resolve(context.siteDir, 'static');
+  const imgDir = path.join(staticBaseDir, 'img', 'svg');
+  const imgStaticPath = '/img/svg'; 
+  const outputDir = path.join(staticBaseDir, options.outputPath || 'favicon');
+  
+  const tempDir = path.resolve(context.siteDir);
+  const reshapedImagePath = path.join(tempDir, 'temp_reshaped_pic.png');
+  
+  const tempFiles = [];
+  
+  try {
+    const iconColor = { color: getCssVar('--ifm-color-primary') };
+    const iconsToGenerate = ['note', 'blog'];
+    
+    for (const icon of iconsToGenerate) {
+      await extractSvg(icon, imgDir, iconColor);
+    }
+
+    const configuration = {
+      path: `/${options.outputPath || 'favicon'}/`,
+      appName: siteConfig.title || 'Portfolio',
+      appDescription: siteConfig.tagline || 'Portfolio',
+      background: getCssVar('--ifm-background-color'),
+      theme_color: getCssVar('--ifm-color-primary'),
+      appleStatusBarStyle: 'black-translucent',
+      display: 'standalone',
+      scope: '/',
+      start_url: '/',
+      version: appVersion,
+      orientation: 'natural',
+      logging: false,
+      loadManifestWithCredentials: true,
+      manifestMaskable: true,
+      icons: {
+        android: {
+          offset: 0,
+          background: false,
+          mask: true,
+          overlayGlow: false,
+          androidPlayStore: true,
+        },
+        favicons: true,
+        appleIcon: true,
+        appleStartup: false,
+        windows: false,
+        yandex: false,
+      },
+      shortcuts: [
+        {
+          name: "Notes",
+          short_name: "Notes",
+          description: "View my collection of notes",
+          url: "/notes",
+          icons: [
+            { 
+              src: `${imgStaticPath}/icon-note.svg`,
+              sizes: "any",
+              type: "image/svg+xml",
+              purpose: "any" 
+            },
+            { 
+              src: "/img/project-blank.png", 
+              sizes: "192x192", 
+              type: "image/png",
+              purpose: "any"
+            }
+          ]
+        },
+        {
+          name: "Blog",
+          short_name: "Blog",
+          description: "Read my latest blog posts",
+          url: "/blog",
+          icons: [
+            { 
+              src: `${imgStaticPath}/icon-blog.svg`,
+              sizes: "any",
+              type: "image/svg+xml",
+              purpose: "any" 
+            },
+            { 
+              src: "/favicon/android-chrome-192x192.png", 
+              sizes: "192x192", 
+              type: "image/png",
+              purpose: "any"
+            }
+          ]
+        }
+      ]
+    };
+    
+    const downloadedImage = await downloadImage(profilePicUrl, context.siteDir, 'temp_profile_pic.png');
+
+    tempFiles.push(downloadedImage);
+    
+    let finalImagePath = downloadedImage;
+    if (circular) {
+      finalImagePath = await reshapeImage(downloadedImage, reshapedImagePath, shape);
+      tempFiles.push(finalImagePath);
+      cleanupFile(downloadedImage);
+    }
+    
+    createDirectoryIfNotExists(outputDir);
+    
+    console.log(`[INFO] Generating favicon assets from ${finalImagePath}`);
+    const response = await favicons(finalImagePath, configuration);
+    
+    let imageCount = 0, fileCount = 0;
+    
+    if (Array.isArray(response.images) && response.images.length > 0) {
+      for (const image of response.images) {
+        if (!image || !image.name || !image.contents) continue;
+        
+        try {
+          fs.writeFileSync(path.join(outputDir, image.name), image.contents);
+          imageCount++;
+        } catch (err) {
+          console.error(`[ERROR] Failed to write image ${image.name}:`, err.message);
+        }
+      }
+    }
+    
+    if (Array.isArray(response.files) && response.files.length > 0) {
+      for (const file of response.files) {
+        if (!file || !file.name || !file.contents) continue;
+        
+        try {
+          if (file.name.includes('manifest')) {
+            processManifest(file, outputDir, appVersion);
+          } else {
+            fs.writeFileSync(path.join(outputDir, file.name), file.contents);
+          }
+          fileCount++;
+        } catch (err) {
+          console.error(`[ERROR] Failed to write file ${file.name}:`, err.message);
+        }
+      }
+    }
+    
+    tempFiles.forEach(cleanupFile);
+    
+    console.log(`[SUCCESS] Generated ${imageCount} favicon images and ${fileCount} support files\n`);
+    return true;
+    
+  } catch (error) {
+    console.error('[ERROR] Error generating favicons:', error.message);
+    tempFiles.forEach(cleanupFile);
+    throw error;
+  }
+}
+
+module.exports = {
+  generateFavicons,
+  default: function(context, options = {}) {
+    const {
+      imagePath = null,
+      outputPath = 'favicon',
+      circular = true,
+      shape = 'circle',
+      generateOnDev = true,
+    } = options;
+
+    return {
+      name: 'favicon-generator',
+      
+      async loadContent() {
+        const shouldGenerate = 
+          process.env.NODE_ENV === 'production' || 
+          process.env.GENERATE_FAVICONS || 
+          generateOnDev;
+          
+        if (shouldGenerate) {
+          try {
+            await generateFavicons(context, {
+              imagePath,
+              outputPath,
+              circular,
+              shape,
+            });
+          } catch (error) {
+            console.error('[FATAL] Favicon generation failed:', error);
+            process.exit(1);
+          }
+        }
+      }
+    };
+  }
+};
+
+if (require.main === module) {
+  const siteDir = path.resolve(__dirname, '../..');
+  const siteConfig = require('../../docusaurus.config.js').default;
+  
+  generateFavicons({
+    siteDir,
+    siteConfig
+  }).catch(error => {
+    console.error('[FATAL] Error in CLI mode:', error);
+    process.exit(1);
+  });
+}