@portosaur/theme 0.1.5 → 0.3.0

package/theme/components/ScrollToTop/index.jsx

@@ -0,0 +1,93 @@
+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/theme/components/ScrollToTop/styles.module.css

@@ -0,0 +1,97 @@
+.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: var(--ifm-global-shadow-md);
+  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/theme/components/SocialLinks/index.jsx

@@ -5,20 +5,27 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import Tooltip from "../Tooltip";
 import { iconMap } from "../../config/iconMappings";
+
 const DEFAULT_ICON = FaQuestionCircle;
 const DEFAULT_COLOR = "var(--ifm-color-primary)";
+
 export default function SocialIcons({ showAll = false, links = null }) {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
   const isBrowser = useIsBrowser();
   const [animationDelays, setAnimationDelays] = useState({});
-  const allSocialLinks = customFields.socialLinks.links || [];
+
+  const allSocialLinks = customFields.socialSection?.links || [];
   const socialLinks = useMemo(() => {
     if (links) return links;
     return showAll ? allSocialLinks : allSocialLinks.filter((link) => link.pin);
   }, [allSocialLinks, showAll, links]);
+
   const calculateDelays = useCallback(() => {
-    if (!isBrowser) return {};
+    if (!isBrowser) {
+      return {};
+    }
+
     const isTablet = window.innerWidth <= 768;
     const isMobile = window.innerWidth <= 480;
     const delays = {};
@@ -29,15 +36,15 @@ export default function SocialIcons({ showAll = false, links = null }) {
     });
     return delays;
   }, [isBrowser, socialLinks]);
+
   useEffect(() => {
     if (!isBrowser) return;
     setAnimationDelays(calculateDelays());
-    const handleResize = () => {
-      setAnimationDelays(calculateDelays());
-    };
+    const handleResize = () => setAnimationDelays(calculateDelays());
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [isBrowser, calculateDelays]);
+
   const getIconDetails = (iconName) => {
     if (!iconName) {
       return { icon: DEFAULT_ICON, color: DEFAULT_COLOR };
@@ -52,64 +59,45 @@ export default function SocialIcons({ showAll = false, links = null }) {
       color: iconDetails.color || DEFAULT_COLOR,
     };
   };
+
   if (socialLinks.length === 0) {
     return null;
   }
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.socialIcons,
-      children: socialLinks.map((social, index) => {
+
+  return (
+    <div className={styles.socialIcons}>
+      {socialLinks.map((social, index) => {
         const { icon: IconComponent, color: iconColor } = getIconDetails(
           social.icon || social.name,
         );
         const href = social.url || "#";
         const displayColor = social.color || iconColor;
-        return jsxDEV_7x81h0kn(
-          Tooltip,
-          {
-            msg: social.desc || social.name || social.icon || "Link",
-            position: "top",
-            bg: displayColor,
-            underline: false,
-            gap: 17,
-            children: jsxDEV_7x81h0kn(
-              "a",
-              {
-                href,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: styles.socialLink,
-                style: {
-                  "--hover-color": displayColor,
-                  animationDelay: animationDelays[index] || "0s",
-                },
-                "aria-label": social.name || social.icon || "social link",
-                children: jsxDEV_7x81h0kn(
-                  IconComponent,
-                  { size: 24 },
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-              },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          },
-          index,
-          false,
-          undefined,
-          this,
+
+        return (
+          <Tooltip
+            key={index}
+            msg={social.desc || social.name || social.icon || "Link"}
+            position="top"
+            bg={displayColor}
+            underline={false}
+            gap={17}
+          >
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.socialLink}
+              style={{
+                "--hover-color": displayColor,
+                animationDelay: animationDelays[index] || "0s",
+              }}
+              aria-label={social.name || social.icon || "social link"}
+            >
+              <IconComponent size={24} />
+            </a>
+          </Tooltip>
         );
-      }),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+      })}
+    </div>
   );
 }

package/theme/components/Tooltip/index.jsx

@@ -1,6 +1,7 @@
-import React, { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import styles from "./styles.module.css";
+
 export default function Tooltip({
   children,
   msg,
@@ -17,9 +18,13 @@ export default function Tooltip({
       "Tooltip: 'msg' prop is required to display tooltip content.",
     );
   }
+
   const [isVisible, setIsVisible] = useState(false);
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const [coords, setCoords] = useState({ top: 0, left: 0, originalLeft: 0 });
+  const [arrowOffset, setArrowOffset] = useState(0);
   const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+
   const tooltipStyle = {
     ...(bg && { "--tooltip-color": bg }),
     ...(color && { "--tooltip-text-color": color }),
@@ -27,6 +32,7 @@ export default function Tooltip({
       bg && { "--tooltip-text-color": "var(--ifm-font-color-base-inverse)" }),
     ...(shadow && { "--tooltip-shadow": shadow }),
   };
+
   const show = useCallback(() => {
     if (!containerRef.current || !containerRef.current.children[0]) return;
     const rect = containerRef.current.children[0].getBoundingClientRect();
@@ -51,54 +57,90 @@ export default function Tooltip({
         left = rect.left + rect.width / 2;
         break;
     }
-    setCoords({ top, left });
+    setCoords({ top, left, originalLeft: left });
+    setArrowOffset(0);
     setIsVisible(true);
   }, [position, gap]);
-  const hide = useCallback(() => setIsVisible(false), []);
+
+  const hide = useCallback(() => {
+    setIsVisible(false);
+    if (
+      typeof document !== "undefined" &&
+      containerRef.current &&
+      containerRef.current.contains(document.activeElement)
+    ) {
+      document.activeElement.blur();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener("scroll", hide, { passive: true });
+      return () => window.removeEventListener("scroll", hide);
+    }
+  }, [isVisible, hide]);
+
+  useEffect(() => {
+    if (
+      isVisible &&
+      tooltipRef.current &&
+      (position === "top" || position === "bottom")
+    ) {
+      const rect = tooltipRef.current.getBoundingClientRect();
+      const padding = 12;
+      let newLeft = coords.originalLeft;
+      const halfWidth = rect.width / 2;
+
+      if (coords.originalLeft - halfWidth < padding) {
+        newLeft = halfWidth + padding;
+      } else if (
+        coords.originalLeft + halfWidth >
+        window.innerWidth - padding
+      ) {
+        newLeft = window.innerWidth - halfWidth - padding;
+      }
+
+      if (newLeft !== coords.left) {
+        setCoords((prev) => ({ ...prev, left: newLeft }));
+        setArrowOffset(newLeft - coords.originalLeft);
+      }
+    }
+  }, [isVisible, coords.originalLeft, coords.left, position]);
+
   const tooltip =
     isVisible && typeof document !== "undefined"
       ? createPortal(
-          jsxDEV_7x81h0kn(
-            "span",
-            {
-              className: `${styles.tooltip} ${styles[position]}`,
-              style: { ...tooltipStyle, top: coords.top, left: coords.left },
-              role: "tooltip",
-              children: [
-                msg,
-                jsxDEV_7x81h0kn(
-                  "span",
-                  { className: styles.arrow },
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-              ],
-            },
-            undefined,
-            true,
-            undefined,
-            this,
-          ),
+          <span
+            ref={tooltipRef}
+            className={`${styles.tooltip} ${styles[position]}`}
+            style={{
+              ...tooltipStyle,
+              top: coords.top,
+              left: coords.left,
+              "--arrow-offset": `${arrowOffset}px`,
+            }}
+            role="tooltip"
+          >
+            {msg}
+            <span className={styles.arrow} />
+          </span>,
           document.body,
         )
       : null;
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      ref: containerRef,
-      className: `${styles.tooltipContainer} ${underline ? styles.hasUnderline : ""} ${className}`,
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      style: { display: "contents" },
-      children: [children, tooltip],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${styles.tooltipContainer} ${underline ? styles.hasUnderline : ""} ${className} ${isVisible ? styles.isActive : ""}`}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+      onClick={() => (isVisible ? hide() : show())}
+      style={{ display: "contents" }}
+    >
+      {children}
+      {tooltip}
+    </div>
   );
 }

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

@@ -21,7 +21,17 @@
   transition: background-image 0.2s ease;
 }
 
-.hasUnderline:hover {
+@media (hover: hover) {
+  .hasUnderline:hover {
+    background-image: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--ifm-color-primary-darker), transparent 10%) 1.2px,
+      transparent 1.5px
+    );
+  }
+}
+
+.hasUnderline.isActive {
   background-image: radial-gradient(
     circle,
     color-mix(in srgb, var(--ifm-color-primary-darker), transparent 10%) 1.2px,
@@ -83,7 +93,7 @@
 
 .top .arrow {
   top: 100%;
-  left: 50%;
+  left: calc(50% - var(--arrow-offset, 0px));
   transform: translateX(-50%) rotate(45deg);
   margin-top: -5.5px;
   border-right: 1px solid var(--ifm-color-emphasis-300);
@@ -92,7 +102,7 @@
 
 .bottom .arrow {
   bottom: 100%;
-  left: 50%;
+  left: calc(50% - var(--arrow-offset, 0px));
   transform: translateX(-50%) rotate(45deg);
   margin-bottom: -5.5px;
   border-left: 1px solid var(--ifm-color-emphasis-300);

package/theme/components/TopicList/index.jsx

@@ -0,0 +1,31 @@
+import DocCardList from "@theme/DocCardList";
+import { useCurrentSidebarCategory } from "@docusaurus/plugin-content-docs/client";
+
+// List Topics inside Individual Notes
+export default function TopicList({
+  children,
+  description = "Click on the links below to explore the topics.",
+  style = {
+    marginTop: "-2.5rem",
+    marginBottom: "2.5rem",
+    textAlign: "center",
+  },
+}) {
+  let items;
+  try {
+    const category = useCurrentSidebarCategory();
+    items = category.items;
+  } catch (e) {
+    // Fallback if not on a category page
+  }
+
+  return (
+    <>
+      <br />
+      {(children || description) && (
+        <p style={style}>{children || description}</p>
+      )}
+      <DocCardList items={items} />
+    </>
+  );
+}

package/theme/css/animations.css

@@ -0,0 +1,61 @@
+/* === Global Entrance Animations === */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes skillAppear {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}