@portosaur/theme 0.1.5 → 0.2.0

package/theme/components/NavArrow/index.jsx

@@ -2,11 +2,13 @@ import React, { useState, useEffect, useRef } from "react";
 import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 import Tooltip from "../Tooltip";
 import styles from "./styles.module.css";
+
 export default function NavArrow() {
   const [direction, setDirection] = useState("down");
   const [isVisible, setIsVisible] = useState(false);
   const [isScrolling, setIsScrolling] = useState(false);
   const scrollTimeoutRef = useRef(null);
+
   const getSections = () => {
     const main = document.querySelector("main");
     if (!main) return [];
@@ -14,29 +16,36 @@ export default function NavArrow() {
       .map((el) => el.id)
       .filter((id) => id !== "nav-arrow");
   };
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollTop =
         window.pageYOffset || document.documentElement.scrollTop;
       const windowHeight = window.innerHeight;
       const fullHeight = document.documentElement.scrollHeight;
+
       setIsVisible(scrollTop > 100);
+
       if (scrollTop + windowHeight >= fullHeight - 50) {
         setDirection("up");
       } else {
         setDirection("down");
       }
+
       setIsScrolling(true);
       if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
       scrollTimeoutRef.current = setTimeout(() => setIsScrolling(false), 800);
     };
+
     window.addEventListener("scroll", handleScroll, { passive: true });
     handleScroll();
+
     return () => {
       window.removeEventListener("scroll", handleScroll);
       if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
     };
   }, []);
+
   const handleClick = () => {
     if (direction === "up") {
       window.scrollTo({ top: 0, behavior: "smooth" });
@@ -45,6 +54,7 @@ export default function NavArrow() {
       const windowTop =
         window.pageYOffset || document.documentElement.scrollTop;
       let nextSectionId = null;
+
       for (const id of sections) {
         const element = document.getElementById(id);
         if (element) {
@@ -56,9 +66,11 @@ export default function NavArrow() {
           }
         }
       }
+
       if (nextSectionId) {
-        const element = document.getElementById(nextSectionId);
-        element.scrollIntoView({ behavior: "smooth" });
+        document
+          .getElementById(nextSectionId)
+          .scrollIntoView({ behavior: "smooth" });
       } else {
         window.scrollTo({
           top: document.documentElement.scrollHeight,
@@ -67,58 +79,29 @@ export default function NavArrow() {
       }
     }
   };
-  return jsxDEV_7x81h0kn(
-    "button",
-    {
-      className: `${styles.navArrow} ${isVisible ? styles.visible : ""} ${isScrolling ? styles.scrolling : ""}`,
-      onClick: handleClick,
-      "aria-label":
-        direction === "down" ? "Scroll to next section" : "Scroll to top",
-      children: jsxDEV_7x81h0kn(
-        Tooltip,
-        {
-          msg: direction === "down" ? "Next Section" : "Back to Top",
-          position: "top",
-          gap: 25,
-          underline: false,
-          children: jsxDEV_7x81h0kn(
-            "div",
-            {
-              className: `${styles.iconWrapper} ${styles[direction]}`,
-              children:
-                direction === "down"
-                  ? jsxDEV_7x81h0kn(
-                      FaChevronDown,
-                      { className: styles.chevron },
-                      undefined,
-                      false,
-                      undefined,
-                      this,
-                    )
-                  : jsxDEV_7x81h0kn(
-                      FaChevronUp,
-                      { className: styles.chevron },
-                      undefined,
-                      false,
-                      undefined,
-                      this,
-                    ),
-            },
-            undefined,
-            false,
-            undefined,
-            this,
-          ),
-        },
-        undefined,
-        false,
-        undefined,
-        this,
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <button
+      className={`${styles.navArrow} ${isVisible ? styles.visible : ""} ${isScrolling ? styles.scrolling : ""}`}
+      onClick={handleClick}
+      aria-label={
+        direction === "down" ? "Scroll to next section" : "Scroll to top"
+      }
+    >
+      <Tooltip
+        msg={direction === "down" ? "Next Section" : "Back to Top"}
+        position="top"
+        gap={25}
+        underline={false}
+      >
+        <div className={`${styles.iconWrapper} ${styles[direction]}`}>
+          {direction === "down" ? (
+            <FaChevronDown className={styles.chevron} />
+          ) : (
+            <FaChevronUp className={styles.chevron} />
+          )}
+        </div>
+      </Tooltip>
+    </button>
   );
 }

package/theme/components/NoteIndex/index.jsx

@@ -2,12 +2,14 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import Link from "@docusaurus/Link";
 import { FaBook, FaChevronRight } from "react-icons/fa";
-import Tooltip from "../Tooltip/index.js";
-import { iconMap } from "../../config/iconMappings.js";
+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() {
   const context = require.context(`@site/notes`, true, /index\.mdx?$|\.mdx?$/);
+
   return context
     .keys()
     .filter((path) => {
@@ -35,6 +37,7 @@ function useNotes() {
             .replace(/ /g, "")
             .replace(/[\s-]/g, "")
         : slug.toLowerCase() || title.toLowerCase();
+
       return {
         title,
         language,
@@ -45,138 +48,69 @@ function useNotes() {
     })
     .sort((a, b) => a.position - b.position);
 }
+
 function NoteCard({ title, language, slug, desc, index, docsBasePath }) {
   const noteUrl = useBaseUrl(`${docsBasePath}/${slug}`);
   const { icon: Icon = FaBook, color = "var(--ifm-color-primary)" } =
     iconMap[language] || iconMap[title.toLowerCase()] || {};
   const tooltipContent = desc ? desc : null;
-  const cardInner = jsxDEV_7x81h0kn(
-    Link,
-    {
-      to: noteUrl,
-      className: styles.noteCard,
-      style: { "--card-index": index, "--note-color": color },
-      "aria-label": `Read note: ${title}`,
-      children: [
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.iconWrapper,
-            children: jsxDEV_7x81h0kn(
-              Icon,
-              { className: styles.noteIcon },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.cardContent,
-            children: jsxDEV_7x81h0kn(
-              "h3",
-              { className: styles.noteTitle, children: title },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          FaChevronRight,
-          { className: styles.mobileChevron },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  const cardInner = (
+    <Link
+      to={noteUrl}
+      className={styles.noteCard}
+      style={{ "--card-index": index, "--note-color": color }}
+      aria-label={`Read note: ${title}`}
+    >
+      <div className={styles.iconWrapper}>
+        <Icon className={styles.noteIcon} />
+      </div>
+      <div className={styles.cardContent}>
+        <h3 className={styles.noteTitle}>{title}</h3>
+      </div>
+      <FaChevronRight className={styles.mobileChevron} />
+    </Link>
+  );
+
+  return tooltipContent ? (
+    <Tooltip msg={tooltipContent} position="top" underline={false} gap={-8}>
+      {cardInner}
+    </Tooltip>
+  ) : (
+    cardInner
   );
-  return tooltipContent
-    ? jsxDEV_7x81h0kn(
-        Tooltip,
-        {
-          msg: tooltipContent,
-          position: "top",
-          underline: false,
-          gap: -8,
-          children: cardInner,
-        },
-        undefined,
-        false,
-        undefined,
-        this,
-      )
-    : cardInner;
 }
+
 export default function NoteCards() {
   const notes = useNotes();
   const { path: docsBasePath } = usePluginData(
     "docusaurus-plugin-content-docs",
   );
+
   if (!notes.length) return null;
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.notesGrid,
-      role: "list",
-      children: notes.map((note, index) =>
-        jsxDEV_7x81h0kn(
-          NoteCard,
-          { ...note, index, docsBasePath },
-          note.slug,
-          false,
-          undefined,
-          this,
-        ),
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <div className={styles.notesGrid} role="list">
+      {notes.map((note, index) => (
+        <NoteCard
+          key={note.slug}
+          {...note}
+          index={index}
+          docsBasePath={docsBasePath}
+        />
+      ))}
+    </div>
   );
 }
+
 export function TopicList({
   desc = "Click on the links below to explore the topics.",
   style = { marginTop: "-2.5rem", marginBottom: "2.5rem", textAlign: "center" },
 }) {
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      style,
-      children: [
-        jsxDEV_7x81h0kn(
-          "p",
-          { dangerouslySetInnerHTML: { __html: desc } },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(DocCardList, {}, undefined, false, undefined, this),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+  return (
+    <div style={style}>
+      <p dangerouslySetInnerHTML={{ __html: desc }} />
+      <DocCardList />
+    </div>
   );
 }

package/theme/components/Preview/components/FeedbackStates.jsx

@@ -1,200 +1,55 @@
 import styles from "../styles.module.css";
+
 export function LoadingState() {
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.loading,
-      children: [
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.loadingIcon,
-            children: jsxDEV_7x81h0kn(
-              "div",
-              { className: styles.spinner },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.loadingText,
-            children: [
-              jsxDEV_7x81h0kn(
-                "p",
-                { children: "Preparing preview..." },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                "span",
-                { children: "Fetching content from source" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-            ],
-          },
-          undefined,
-          true,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+  return (
+    <div className={styles.loading}>
+      <div className={styles.loadingIcon}>
+        <div className={styles.spinner} />
+      </div>
+      <div className={styles.loadingText}>
+        <p>Preparing preview...</p>
+        <span>Fetching content from source</span>
+      </div>
+    </div>
   );
 }
+
 export function ErrorState({ path, message, fileType, fileUrl, onRetry }) {
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.errorState,
-      children: [
-        jsxDEV_7x81h0kn(
-          "div",
-          { className: styles.errorIcon, children: "⚠️" },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "p",
-          {
-            children: [
-              "Could not load: ",
-              jsxDEV_7x81h0kn(
-                "code",
-                { children: path?.split("/").pop() },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-            ],
-          },
-          undefined,
-          true,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "p",
-          { className: styles.errorMsg, children: message },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "div",
-          {
-            className: styles.errorActions,
-            children: [
-              jsxDEV_7x81h0kn(
-                "button",
-                {
-                  onClick: onRetry,
-                  className: styles.retryButton,
-                  children: "Retry",
-                },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              fileType === "web" &&
-                jsxDEV_7x81h0kn(
-                  "a",
-                  {
-                    href: fileUrl,
-                    target: "_blank",
-                    rel: "noopener",
-                    className: styles.visitButton,
-                    children: "Visit Website",
-                  },
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-            ],
-          },
-          undefined,
-          true,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+  return (
+    <div className={styles.errorState}>
+      <div className={styles.errorIcon}>⚠️</div>
+      <p>
+        Could not load: <code>{path?.split("/").pop()}</code>
+      </p>
+      <p className={styles.errorMsg}>{message}</p>
+      <div className={styles.errorActions}>
+        <button onClick={onRetry} className={styles.retryButton}>
+          Retry
+        </button>
+        {fileType === "web" && (
+          <a
+            href={fileUrl}
+            target="_blank"
+            rel="noopener"
+            className={styles.visitButton}
+          >
+            Visit Website
+          </a>
+        )}
+      </div>
+    </div>
   );
 }
+
 export function OfflineState({ onRetry }) {
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.errorState,
-      children: [
-        jsxDEV_7x81h0kn(
-          "div",
-          { className: styles.errorIcon, children: "\uD83D\uDCE1" },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "h3",
-          { children: "No Connection" },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "p",
-          { children: "This resource requires an active internet connection." },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "button",
-          {
-            onClick: onRetry,
-            className: styles.retryButton,
-            children: "Try Again",
-          },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+  return (
+    <div className={styles.errorState}>
+      <div className={styles.errorIcon}>📡</div>
+      <h3>No Connection</h3>
+      <p>This resource requires an active internet connection.</p>
+      <button onClick={onRetry} className={styles.retryButton}>
+        Try Again
+      </button>
+    </div>
   );
 }

package/theme/components/Preview/components/FileTabs.jsx

@@ -1,7 +1,9 @@
 import React, { useRef, useEffect } from "react";
 import styles from "../styles.module.css";
+
 export default function FileTabs({ sources, activeIndex, onSelect }) {
   const tabRefs = useRef([]);
+
   useEffect(() => {
     const el = tabRefs.current[activeIndex];
     if (el) {
@@ -12,30 +14,21 @@ export default function FileTabs({ sources, activeIndex, onSelect }) {
       });
     }
   }, [activeIndex]);
+
   if (!sources || sources.length <= 1) return null;
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      className: styles.tabs,
-      children: sources.map((src, i) =>
-        jsxDEV_7x81h0kn(
-          "button",
-          {
-            ref: (el) => (tabRefs.current[i] = el),
-            className: `${styles.tab} ${i === activeIndex ? styles.activeTab : ""}`,
-            onClick: () => onSelect(i),
-            children: src.label || src.path.split("/").pop(),
-          },
-          i,
-          false,
-          undefined,
-          this,
-        ),
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <div className={styles.tabs}>
+      {sources.map((src, i) => (
+        <button
+          key={i}
+          ref={(el) => (tabRefs.current[i] = el)}
+          className={`${styles.tab} ${i === activeIndex ? styles.activeTab : ""}`}
+          onClick={() => onSelect(i)}
+        >
+          {src.label || src.path.split("/").pop()}
+        </button>
+      ))}
+    </div>
   );
 }