portosaurus 0.14.0

package/src/theme/components/ScrollToTop/index.js

@@ -0,0 +1,98 @@
+import { useState, useEffect, useRef } from 'react';
+import { IoIosArrowUp } from 'react-icons/io';
+import styles from './styles.module.css';
+
+export default function ScrollToTop({ hideDelay = 1500 }) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const timeoutRef = useRef(null);
+  const lastScrollTopRef = useRef(0);
+
+  const startHideTimer = () => {
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    // Only start timer if not hovering
+    if (!isHovering) {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(false);
+      }, hideDelay);
+    }
+  };
+
+  useEffect(() => {
+
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const isScrollingUp = scrollTop < lastScrollTopRef.current;
+      
+      // Save the current scroll position
+      lastScrollTopRef.current = scrollTop;
+      
+      // Show button when scrolling up past threshold
+      if (isScrollingUp && scrollTop > 300) {
+
+        setIsVisible(true);
+        startHideTimer();
+      } else {
+
+        setIsVisible(false);
+        
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      }
+    };
+
+    // Set up event listener
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Clean up
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [hideDelay, isHovering]);
+
+  const handleMouseEnter = () => {
+
+    setIsHovering(true);
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+
+  const handleMouseLeave = () => {
+
+    setIsHovering(false);
+    startHideTimer();
+  };
+
+  const scrollToTop = () => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    
+    window.scrollTo({
+      top: 0,
+      behavior: prefersReducedMotion ? 'auto' : 'smooth'
+    });
+  };
+
+  return (
+    <button
+      className={`${styles.scrollToTop} ${isVisible ? styles.visible : ''}`}
+      onClick={scrollToTop}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      aria-label="Scroll to top"
+      title="Scroll to top"
+    >
+      <IoIosArrowUp />
+    </button>
+  );
+}

package/src/theme/components/ScrollToTop/styles.module.css

@@ -0,0 +1,96 @@
+.scrollToTop {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border: none;
+  z-index: 100;
+  opacity: 0;
+  transform: translateY(20px) scale(0.9);
+  pointer-events: none;
+  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
+}
+
+.scrollToTop.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.scrollToTop:hover {
+  background-color: var(--ifm-color-primary-dark);
+  transform: translateY(-3px) scale(1.05);
+}
+
+.scrollToTop:active {
+  transform: translateY(-1px) scale(1.02);
+}
+
+.scrollToTop svg {
+  width: 28px;
+  height: 28px;
+}
+
+.scrollToTop:hover svg {
+  transform: scale(1.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+
+  .scrollToTop {
+    width: 45px;
+    height: 45px;
+    bottom: 25px;
+    right: 25px;
+  }
+  
+  .scrollToTop svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+@media (max-width: 480px) {
+
+  .scrollToTop {
+    width: 40px; 
+    height: 40px;
+    bottom: 20px;
+    right: 50%;
+    transform: translateX(50%) translateY(20px) scale(0.9);
+  }
+  
+  .scrollToTop.visible {
+    transform: translateX(50%) scale(1);
+  }
+  
+  .scrollToTop:hover {
+    transform: translateX(50%) translateY(-3px) scale(1.05);
+  }
+  
+  .scrollToTop:active {
+    transform: translateX(50%) translateY(-1px) scale(1.02);
+  }
+  
+  .scrollToTop svg {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+/* Accessibility preferences */
+@media (prefers-reduced-motion: reduce) {
+  .scrollToTop {
+    transition: none;
+  }
+}

package/src/theme/components/SocialLinks/index.js

@@ -0,0 +1,129 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import styles from './styles.module.css';
+import { FaQuestionCircle } from 'react-icons/fa';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+import Tooltip from '@site/src/components/Tooltip';
+import { iconMap } from '@site/src/config/iconMappings';
+
+
+// Default icon & icon
+const DEFAULT_ICON = FaQuestionCircle;
+const DEFAULT_COLOR = 'var(--ifm-color-primary)';
+
+
+export default function SocialIcons({ showAll = false }) {
+  const { siteConfig } = useDocusaurusContext();
+  const { customFields } = siteConfig;
+  const isBrowser = useIsBrowser();
+
+  const [animationDelays, setAnimationDelays] = useState({});
+
+  const allSocialLinks = customFields.socialLinks.links || [];
+  
+  // FIX: `to prevent unnecessary recalculations`
+  const socialLinks = useMemo(() => {
+    return showAll 
+      ? allSocialLinks 
+      : allSocialLinks.filter(link => link.pin);
+  }, [allSocialLinks, showAll]);
+  
+  // Calculate delays based on screen size
+  const calculateDelays = useCallback(() => {
+    if (!isBrowser) return {};
+    
+    const isTablet = window.innerWidth <= 768;
+    const isMobile = window.innerWidth <= 480;
+    const delays = {};
+    
+    const baseDelay = isMobile ? 0.7 : (isTablet ? 0.9 : 1.3);
+    const incrementDelay = 0.1;
+    
+    socialLinks.forEach((_, index) => {
+      delays[index] = `${baseDelay + (index * incrementDelay)}s`;
+    });
+    
+    return delays;
+  }, [isBrowser, socialLinks]);
+
+  useEffect(() => {
+    if (!isBrowser) return;
+    
+    // Set initial delays
+    setAnimationDelays(calculateDelays());
+    
+    const handleResize = () => {
+      setAnimationDelays(calculateDelays());
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isBrowser, calculateDelays]);
+
+
+  // Get icon component and color
+  const getIconDetails = (iconName) => {
+
+    if (!iconName) {
+      return {
+        icon: DEFAULT_ICON,
+        color: DEFAULT_COLOR
+      };
+    }
+
+    const formattedIconName = iconName.toLowerCase();
+    const iconDetails = iconMap[formattedIconName];
+
+    if (!iconDetails) {
+      return {
+        icon: DEFAULT_ICON,
+        color: DEFAULT_COLOR
+      };
+    }
+
+    return {
+      icon: iconDetails.icon,
+      color: iconDetails.color || DEFAULT_COLOR
+    };
+  };
+  
+  if (socialLinks.length === 0) {
+    return null;
+  }
+  
+  return (
+    <div className={styles.socialIcons}>
+      {
+        socialLinks.map((social, index) => {
+          const { icon: IconComponent, color: iconColor } = getIconDetails(social.icon);
+          const href = social.url || '#';
+          const displayColor = social.color || iconColor;
+
+          return (
+            <Tooltip
+              key={index}
+              content={social.desc || social.icon || 'Link'}
+              position="top"
+              color={displayColor}
+            >
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.socialLink}
+                style={{
+                  '--hover-color': displayColor,
+                  animationDelay: animationDelays[index] || '0s'
+                }}
+                aria-label={social.icon || 'social link'}
+              >
+                <IconComponent size={24} />
+              </a>
+            </Tooltip>
+          );
+      })}
+    </div>
+  );
+}

package/src/theme/components/SocialLinks/styles.module.css

@@ -0,0 +1,55 @@
+
+/* Animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+
+.socialIcons {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  height: 38px;
+}
+
+.socialLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ifm-color-primary);
+  transition: color 0.3s, transform 0.2s;
+  position: relative;
+  animation: fadeIn 0.3s ease-out forwards;
+  opacity: 0;
+}
+
+.socialLink:hover {
+  opacity: 0.9;
+  transform: translateY(-4px) scale(1.15);
+  text-decoration: none;
+  color: var(--hover-color, var(--ifm-color-primary-dark));
+}
+
+
+/* Responsive */
+@media (max-width: 768px) {
+  .socialIcons {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .socialLink {
+    margin: 0 9px;
+  }
+
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .socialLink {
+    animation: none !important;
+    opacity: 1;
+    transition: none;
+  }
+}

package/src/theme/components/Tooltip/index.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+export default function Tooltip({ children, content, position = 'top', color }) {
+  const [isVisible, setIsVisible] = useState(false);
+  
+  const tooltipStyle = color ? { '--tooltip-color': color } : {};
+  
+  return (
+    <div 
+      className={styles.tooltipContainer}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div 
+          className={`${styles.tooltip} ${styles[position]}`}
+          style={tooltipStyle}
+          role="tooltip"
+        >
+          {content}
+          <div className={styles.arrow} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/theme/components/Tooltip/styles.module.css

@@ -0,0 +1,92 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.tooltip {
+  position: absolute;
+  background-color: var(--tooltip-color, var(--ifm-background-surface-color));
+  color: var(--ifm-font-color-base);
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 10;
+  opacity: 0;
+  animation: tooltipFadeIn 0.15s ease-out forwards;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: inherit;
+}
+
+/* Positioning variations */
+.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-10px);
+  margin-bottom: 4px;
+}
+
+.top .arrow {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  margin-top: -4px;
+}
+
+.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(6px);
+}
+
+.bottom .arrow {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  margin-bottom: -4px;
+}
+
+.left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-6px);
+}
+
+.left .arrow {
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(6px);
+}
+
+.right .arrow {
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+@keyframes tooltipFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    animation: none;
+  }
+}

package/src/theme/css/bootstrap.css

@@ -0,0 +1,6 @@
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+