@portosaur/theme 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portosaur/theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Theme components for Portosaur - React components, static assets etc.",
   "license": "GPL-3.0-only",
   "author": "soymadip",
@@ -31,7 +31,9 @@
     "@docusaurus/plugin-pwa": "^3.10.1",
     "@docusaurus/preset-classic": "^3.10.1",
     "@easyops-cn/docusaurus-search-local": "^0.55.1",
-    "@portosaur/core": "^0.2.0",
+    "@fontsource-variable/lexend": "^5.2.11",
+    "@fontsource/alata": "^5.2.8",
+    "@portosaur/core": "^0.3.0",
     "chalk": "^5.6.2",
     "clsx": "^2.1.1",
     "favicons": "^7.2.0",

package/theme/DocCategoryGeneratedIndexPage/index.jsx

@@ -1,5 +1,5 @@
 import DocCategoryGeneratedIndexPage from "@theme-original/DocCategoryGeneratedIndexPage";
-import NoteCards from "@portosaur/theme/theme/components/NoteIndex/index.jsx";
+import NoteCards from "@portosaur/theme/theme/components/NoteCards/index.jsx";
 
 export default function DocCategoryGeneratedIndexPageWrapper(props) {
   if (props.categoryGeneratedIndex?.title === "Notes") {

package/theme/MDXComponents.jsx

@@ -4,7 +4,8 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import { Pv, SrcPv } from "./components/Preview/index.js";
 import Tooltip from "./components/Tooltip/index.js";
-import NoteCards, { TopicList } from "./components/NoteIndex/index.js";
+import NoteCards from "./components/NoteCards/index.jsx";
+import TopicList from "./components/TopicList/index.jsx";
 const components = {
   ...MDXComponents,
   Pv,

package/theme/components/Indent/index.jsx

@@ -0,0 +1,10 @@
+export default function Indent({ level = 1 }) {
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: `${level * 2}em`,
+      }}
+    />
+  );
+}

package/theme/components/{NoteIndex → NoteCards}/index.jsx

@@ -4,7 +4,6 @@ import Link from "@docusaurus/Link";
 import { FaBook, FaChevronRight } from "react-icons/fa";
 import Tooltip from "../Tooltip/index.jsx";
 import { iconMap } from "../../config/iconMappings.jsx";
-import DocCardList from "@theme/DocCardList";
 import styles from "./styles.module.css";
 
 function useNotes() {
@@ -13,7 +12,9 @@ function useNotes() {
   return context
     .keys()
     .filter((path) => {
-      if (path === "./index.md" || path === "./index.mdx") return false;
+      if (path === "./index.md" || path === "./index.mdx") {
+        return false;
+      }
       const pathParts = path.split("/");
       const isTopLevelFile =
         pathParts.length === 2 && !path.match(/index\.mdx?$/);
@@ -87,14 +88,19 @@ export default function NoteCards() {
     "docusaurus-plugin-content-docs",
   );
 
-  if (!notes.length) return null;
+  if (!notes.length) {
+    return null;
+  }
 
   return (
     <div className={styles.notesGrid} role="list">
       {notes.map((note, index) => (
         <NoteCard
           key={note.slug}
-          {...note}
+          title={note.title}
+          language={note.language}
+          slug={note.slug}
+          desc={note.desc}
           index={index}
           docsBasePath={docsBasePath}
         />
@@ -102,15 +108,3 @@ export default function NoteCards() {
     </div>
   );
 }
-
-export function TopicList({
-  desc = "Click on the links below to explore the topics.",
-  style = { marginTop: "-2.5rem", marginBottom: "2.5rem", textAlign: "center" },
-}) {
-  return (
-    <div style={style}>
-      <p dangerouslySetInnerHTML={{ __html: desc }} />
-      <DocCardList />
-    </div>
-  );
-}

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/Tooltip/index.jsx

@@ -1,4 +1,4 @@
-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";
 
@@ -20,8 +20,10 @@ export default function Tooltip({
   }
 
   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 }),
@@ -55,18 +57,68 @@ 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(
           <span
+            ref={tooltipRef}
             className={`${styles.tooltip} ${styles[position]}`}
-            style={{ ...tooltipStyle, top: coords.top, left: coords.left }}
+            style={{
+              ...tooltipStyle,
+              top: coords.top,
+              left: coords.left,
+              "--arrow-offset": `${arrowOffset}px`,
+            }}
             role="tooltip"
           >
             {msg}
@@ -79,11 +131,12 @@ export default function Tooltip({
   return (
     <div
       ref={containerRef}
-      className={`${styles.tooltipContainer} ${underline ? styles.hasUnderline : ""} ${className}`}
+      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}

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