portosaurus 2.0.3 → 2.1.0

package/src/{components → theme/components}/ProjectsSection/styles.module.css

@@ -1,4 +1,3 @@
-
 /* Animations */
 @keyframes fadeIn {
   from {
@@ -95,7 +94,10 @@
   opacity: 0;
   animation: fadeIn 0.5s ease-out forwards;
   height: 100%;
-  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    border-color 0.3s ease;
   border: 1px solid var(--ifm-shadow-color);
   width: 100%;
 }
@@ -181,7 +183,7 @@
 }
 
 .projectStateLabel {
-  font-size: 0.65rem; 
+  font-size: 0.65rem;
   font-weight: 500;
   padding: 1px 4px;
   border-radius: var(--ifm-global-radius);
@@ -329,7 +331,9 @@
   justify-content: center;
   cursor: pointer;
   z-index: 5;
-  transition: opacity 0.2s ease, background-color 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
   padding: 0;
   box-shadow: var(--ifm-global-shadow-md);
 }
@@ -408,12 +412,12 @@
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none; 
-  -ms-overflow-style: none; 
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   display: flex;
   justify-content: center;
   padding: 0.8rem 0;
-  max-width: 60vw; 
+  max-width: 60vw;
   scroll-padding: 0 20px;
   margin: 0 5px;
   position: relative;
@@ -459,7 +463,7 @@
 /* Center alignment for dots */
 .centerDots {
   display: flex !important;
-  justify-content: center !important; 
+  justify-content: center !important;
   text-align: center !important;
   margin: 0 auto;
 }
@@ -586,7 +590,7 @@
     display: flex;
     justify-content: center;
   }
-  
+
   .mobileNavigationControls .centerDots {
     margin: 0 auto;
   }
@@ -598,7 +602,7 @@
     width: 40px;
     height: 40px;
     flex-shrink: 0;
-    z-index: 10; 
+    z-index: 10;
   }
 
   .mobileNavigationControls .carouselControl:hover {
@@ -628,25 +632,25 @@
   }
 
   .mobileNavigationControls .dotsScrollContainer {
-    justify-content: flex-start; 
+    justify-content: flex-start;
     padding-left: 10px;
-    min-height: 40px; 
+    min-height: 40px;
     align-items: center;
   }
-  
+
   .mobileNavigationControls .centerDots {
     justify-content: center !important;
     padding-left: 0;
   }
-  
+
   .mobileNavigationControls .navDot:first-child {
     margin-left: 2px;
   }
-  
+
   .mobileNavigationControls .activeDot {
     transform: scale(1.6);
     opacity: 1;
-    box-shadow: 0 0 0 2px rgba(var(--ifm-color-primary-rgb), 0.5); 
+    box-shadow: 0 0 0 2px rgba(var(--ifm-color-primary-rgb), 0.5);
   }
 }
 
@@ -799,7 +803,7 @@
 
   .mobileNavigationControls .activeDot {
     box-shadow: 0 0 0 1.5px rgba(var(--ifm-color-primary-rgb), 0.4);
-    transform: scale(1.5); 
+    transform: scale(1.5);
   }
 }
 

package/src/{components → theme/components}/ScrollToTop/index.js

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
-import { IoIosArrowUp } from 'react-icons/io';
-import styles from './styles.module.css';
+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);
@@ -9,12 +9,11 @@ export default function ScrollToTop({ hideDelay = 1500 }) {
   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(() => {
@@ -24,23 +23,21 @@ export default function ScrollToTop({ hideDelay = 1500 }) {
   };
 
   useEffect(() => {
-
     const handleScroll = () => {
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      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);
         }
@@ -48,11 +45,11 @@ export default function ScrollToTop({ hideDelay = 1500 }) {
     };
 
     // Set up event listener
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
     // Clean up
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -60,7 +57,6 @@ export default function ScrollToTop({ hideDelay = 1500 }) {
   }, [hideDelay, isHovering]);
 
   const handleMouseEnter = () => {
-
     setIsHovering(true);
 
     if (timeoutRef.current) {
@@ -69,23 +65,24 @@ export default function ScrollToTop({ hideDelay = 1500 }) {
   };
 
   const handleMouseLeave = () => {
-
     setIsHovering(false);
     startHideTimer();
   };
 
   const scrollToTop = () => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+
     window.scrollTo({
       top: 0,
-      behavior: prefersReducedMotion ? 'auto' : 'smooth'
+      behavior: prefersReducedMotion ? "auto" : "smooth",
     });
   };
 
   return (
     <button
-      className={`${styles.scrollToTop} ${isVisible ? styles.visible : ''}`}
+      className={`${styles.scrollToTop} ${isVisible ? styles.visible : ""}`}
       onClick={scrollToTop}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

package/src/{components → theme/components}/ScrollToTop/styles.module.css

@@ -17,7 +17,10 @@
   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;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease,
+    background-color 0.3s ease;
 }
 
 .scrollToTop.visible {
@@ -46,14 +49,13 @@
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-
   .scrollToTop {
     width: 45px;
     height: 45px;
     bottom: 25px;
     right: 25px;
   }
-  
+
   .scrollToTop svg {
     width: 24px;
     height: 24px;
@@ -61,27 +63,26 @@
 }
 
 @media (max-width: 480px) {
-
   .scrollToTop {
-    width: 40px; 
+    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;

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

@@ -0,0 +1,125 @@
+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 "../Tooltip";
+import { iconMap } from "../../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}
+            msg={social.desc || social.icon || "Link"}
+            position="top"
+            color={displayColor}
+            underline={false}
+          >
+            <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/{components → theme/components}/SocialLinks/styles.module.css

@@ -1,11 +1,13 @@
-
 /* Animation */
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-
 .socialIcons {
   display: flex;
   align-items: center;
@@ -18,7 +20,9 @@
   align-items: center;
   justify-content: center;
   color: var(--ifm-color-primary);
-  transition: color 0.3s, transform 0.2s;
+  transition:
+    color 0.3s,
+    transform 0.2s;
   position: relative;
   animation: fadeIn 0.3s ease-out forwards;
   opacity: 0;
@@ -31,7 +35,6 @@
   color: var(--hover-color, var(--ifm-color-primary-dark));
 }
 
-
 /* Responsive */
 @media (max-width: 768px) {
   .socialIcons {
@@ -42,7 +45,6 @@
   .socialLink {
     margin: 0 9px;
   }
-
 }
 
 /* Accessibility */

package/src/{components → theme/components}/Tooltip/index.js

@@ -14,7 +14,10 @@ export default function Tooltip({
   const containerRef = useRef(null);
 
   const tooltipStyle = color
-    ? { "--tooltip-color": color, "--tooltip-text-color": "var(--ifm-font-color-base-inverse)" }
+    ? {
+        "--tooltip-color": color,
+        "--tooltip-text-color": "var(--ifm-font-color-base-inverse)",
+      }
     : {};
 
   const show = useCallback(() => {