@portosaur/theme 0.1.0

package/theme/components/SocialLinks/index.jsx

@@ -0,0 +1,115 @@
+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";
+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 socialLinks = useMemo(() => {
+    if (links) return links;
+    return showAll ? allSocialLinks : allSocialLinks.filter((link) => link.pin);
+  }, [allSocialLinks, showAll, links]);
+  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;
+    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 };
+    }
+    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 jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.socialIcons,
+      children: 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,
+        );
+      }),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}

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

@@ -0,0 +1,57 @@
+/* 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/theme/components/Tooltip/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import styles from "./styles.module.css";
+export default function Tooltip({
+  children,
+  msg,
+  position = "top",
+  color,
+  bg,
+  underline = true,
+  gap = 5,
+  shadow,
+  className = "",
+}) {
+  if (!msg) {
+    throw new Error(
+      "Tooltip: 'msg' prop is required to display tooltip content.",
+    );
+  }
+  const [isVisible, setIsVisible] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const containerRef = useRef(null);
+  const tooltipStyle = {
+    ...(bg && { "--tooltip-color": bg }),
+    ...(color && { "--tooltip-text-color": color }),
+    ...(!color &&
+      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();
+    const tooltipGap = gap;
+    let top, left;
+    switch (position) {
+      case "bottom":
+        top = rect.bottom + tooltipGap;
+        left = rect.left + rect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2;
+        left = rect.left - tooltipGap;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2;
+        left = rect.right + tooltipGap;
+        break;
+      case "top":
+      default:
+        top = rect.top - tooltipGap;
+        left = rect.left + rect.width / 2;
+        break;
+    }
+    setCoords({ top, left });
+    setIsVisible(true);
+  }, [position, gap]);
+  const hide = useCallback(() => setIsVisible(false), []);
+  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,
+          ),
+          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,
+  );
+}

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

@@ -0,0 +1,168 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-flex;
+  vertical-align: baseline;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.hasUnderline {
+  cursor: help;
+  text-decoration: none;
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--ifm-color-primary), transparent 40%) 1px,
+    transparent 1.2px
+  );
+  background-position: bottom;
+  background-size: 6px 2.5px;
+  background-repeat: space no-repeat;
+  padding-bottom: 1px;
+  transition: background-image 0.2s ease;
+}
+
+.hasUnderline:hover {
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--ifm-color-primary-darker), transparent 10%) 1.2px,
+    transparent 1.5px
+  );
+}
+
+.tooltip {
+  position: fixed;
+  background-color: var(--tooltip-color, var(--ifm-background-surface-color));
+  color: var(--tooltip-text-color, var(--ifm-font-color-base));
+  padding: 8px 12px;
+  border-radius: var(--ifm-global-radius);
+  font-size: 0.85rem;
+  font-weight: 450;
+  text-align: center;
+  line-height: 1.4;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  max-width: min(240px, 90vw);
+  width: max-content;
+  z-index: 9999;
+  opacity: 0;
+  filter: var(
+    --tooltip-shadow,
+    drop-shadow(0 8px 24px rgba(var(--ifm-color-emphasis-900-rgb), 0.3))
+  );
+  border: 1px solid var(--ifm-color-emphasis-300);
+  pointer-events: none;
+}
+
+.top {
+  transform: translateX(-50%) translateY(-100%);
+  animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.bottom {
+  transform: translateX(-50%);
+  animation: popDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.left {
+  transform: translateX(-100%) translateY(-50%);
+  animation: popLeft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.right {
+  transform: translateY(-50%);
+  animation: popRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: inherit;
+}
+
+.top .arrow {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  margin-top: -5.5px;
+  border-right: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.bottom .arrow {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  margin-bottom: -5.5px;
+  border-left: 1px solid var(--ifm-color-emphasis-300);
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.left .arrow {
+  right: -5.5px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-right: 1px solid var(--ifm-color-emphasis-300);
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.right .arrow {
+  left: -5.5px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-left: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+}
+
+@keyframes popUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-95%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-100%) scale(1);
+  }
+}
+
+@keyframes popDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-5%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes popLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-95%) translateY(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-100%) translateY(-50%) scale(1);
+  }
+}
+
+@keyframes popRight {
+  from {
+    opacity: 0;
+    transform: translateX(5%) translateY(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) translateY(-50%) scale(1);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    animation: none !important;
+    opacity: 1;
+  }
+}