@portosaur/theme 0.1.4 → 0.2.0

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 { createPortal } from "react-dom";
 import styles from "./styles.module.css";
+
 export default function Tooltip({
   children,
   msg,
@@ -17,9 +18,11 @@ 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 containerRef = useRef(null);
+
   const tooltipStyle = {
     ...(bg && { "--tooltip-color": bg }),
     ...(color && { "--tooltip-text-color": color }),
@@ -27,6 +30,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();
@@ -54,51 +58,36 @@ export default function Tooltip({
     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,
-          ),
+          <span
+            className={`${styles.tooltip} ${styles[position]}`}
+            style={{ ...tooltipStyle, top: coords.top, left: coords.left }}
+            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}`}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+      style={{ display: "contents" }}
+    >
+      {children}
+      {tooltip}
+    </div>
   );
 }

package/theme/pages/index.jsx

@@ -1,12 +1,13 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import UpdateTitle from "../utils/updateTitle.js";
-import HeroSection from "../components/HeroSection/index.js";
-import AboutSection from "../components/AboutSection/index.js";
-import ProjectsSection from "../components/ProjectsSection/index.js";
-import ContactSection from "../components/ContactSection/index.js";
-import ExperienceSection from "../components/ExperienceSection/index.js";
-import NavArrow from "../components/NavArrow/index.js";
+import UpdateTitle from "../utils/updateTitle.jsx";
+import HeroSection from "../components/HeroSection/index.jsx";
+import AboutSection from "../components/AboutSection/index.jsx";
+import ProjectsSection from "../components/ProjectsSection/index.jsx";
+import ContactSection from "../components/ContactSection/index.jsx";
+import ExperienceSection from "../components/ExperienceSection/index.jsx";
+import NavArrow from "../components/NavArrow/index.jsx";
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
 
@@ -17,88 +18,23 @@ export default function Home() {
     experience: `Experience | ${siteConfig.title}`,
     contact: `Contact | ${siteConfig.title}`,
   };
+
   const customStyles = `
   /* For future */
   `;
-  return jsxDEV_7x81h0kn(
-    Layout,
-    {
-      title: "Me",
-      description: "My portfolio website",
-      children: [
-        jsxDEV_7x81h0kn(
-          "style",
-          { children: customStyles },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          UpdateTitle,
-          { sections: sectionTitles, defaultTitle: siteConfig.title },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "main",
-          {
-            children: [
-              jsxDEV_7x81h0kn(
-                HeroSection,
-                { id: "me" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                AboutSection,
-                { id: "about" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ProjectsSection,
-                { id: "projects" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ExperienceSection,
-                { id: "experience" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ContactSection,
-                { id: "contact" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(NavArrow, {}, undefined, false, undefined, this),
-            ],
-          },
-          undefined,
-          true,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  return (
+    <Layout title="Me" description="My portfolio website">
+      <style>{customStyles}</style>
+      <UpdateTitle sections={sectionTitles} defaultTitle={siteConfig.title} />
+      <main>
+        <HeroSection id="me" />
+        <AboutSection id="about" />
+        <ProjectsSection id="projects" />
+        <ExperienceSection id="experience" />
+        <ContactSection id="contact" />
+        <NavArrow />
+      </main>
+    </Layout>
   );
 }

package/theme/pages/notes.jsx

@@ -1,8 +1,9 @@
 import Layout from "@theme/Layout";
-import NoteCards from "../components/NoteIndex/index.js";
+import NoteCards from "../components/NoteIndex/index.jsx";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import NavArrow from "../components/NavArrow/index.js";
-import HashNavigation from "../utils/HashNavigation.js";
+import NavArrow from "../components/NavArrow/index.jsx";
+import HashNavigation from "../utils/HashNavigation.jsx";
+
 const style = {
   notesContainer: { padding: "2rem 0", maxWidth: "1200px", margin: "0 auto" },
   pageTitle: {
@@ -19,113 +20,34 @@ const style = {
     marginBottom: "2rem",
     animation: "slideUp 0.5s ease-out 0.2s forwards",
   },
-  "@keyframes slideUp": {
-    from: { opacity: 0, transform: "translateY(20px)" },
-    to: { opacity: 1, transform: "translateY(0)" },
-  },
-  "@media (prefers-reduced-motion: reduce)": {
-    notesContainer: { animation: "none !important" },
-    pageTitle: { animation: "none !important" },
-    pageDescription: { animation: "none !important", opacity: 1 },
-  },
 };
+
 export default function Notes() {
   const { path: docsBasePath } = usePluginData(
     "docusaurus-plugin-content-docs",
   );
   const pathName = docsBasePath.replace("/", "");
   const pageTitle = pathName.charAt(0).toUpperCase() + pathName.slice(1);
-  return jsxDEV_7x81h0kn(
-    Layout,
-    {
-      title: pageTitle,
-      description: `My ${pageTitle}`,
-      children: jsxDEV_7x81h0kn(
-        "main",
-        {
-          style: style.notesContainer,
-          children: jsxDEV_7x81h0kn(
-            "div",
-            {
-              className: "container",
-              children: [
-                jsxDEV_7x81h0kn(
-                  "header",
-                  {
-                    className: "text-center mb-4",
-                    children: [
-                      jsxDEV_7x81h0kn(
-                        "h1",
-                        { style: style.pageTitle, children: "My Notes" },
-                        undefined,
-                        false,
-                        undefined,
-                        this,
-                      ),
-                      jsxDEV_7x81h0kn(
-                        "p",
-                        {
-                          style: style.pageDescription,
-                          children:
-                            "A collection of my self written notes & reference guides",
-                        },
-                        undefined,
-                        false,
-                        undefined,
-                        this,
-                      ),
-                    ],
-                  },
-                  undefined,
-                  true,
-                  undefined,
-                  this,
-                ),
-                jsxDEV_7x81h0kn(
-                  NoteCards,
-                  {},
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-                jsxDEV_7x81h0kn(
-                  NavArrow,
-                  {},
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-                jsxDEV_7x81h0kn(
-                  HashNavigation,
-                  {
-                    elementPrefix: "note-",
-                    elementSelector: ".note-card",
-                    effectDuration: 6000,
-                  },
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-              ],
-            },
-            undefined,
-            true,
-            undefined,
-            this,
-          ),
-        },
-        undefined,
-        false,
-        undefined,
-        this,
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <Layout title={pageTitle} description={`My ${pageTitle}`}>
+      <main style={style.notesContainer}>
+        <div className="container">
+          <header className="text-center mb-4">
+            <h1 style={style.pageTitle}>My Notes</h1>
+            <p style={style.pageDescription}>
+              A collection of my self written notes &amp; reference guides
+            </p>
+          </header>
+          <NoteCards />
+          <NavArrow />
+          <HashNavigation
+            elementPrefix="note-"
+            elementSelector=".note-card"
+            effectDuration={6000}
+          />
+        </div>
+      </main>
+    </Layout>
   );
 }