@portosaur/theme 0.1.5 → 0.3.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/NoteCards/index.jsx

@@ -0,0 +1,110 @@
+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.jsx";
+import { iconMap } from "../../config/iconMappings.jsx";
+import styles from "./styles.module.css";
+
+function useNotes() {
+  const context = require.context(`@site/notes`, true, /index\.mdx?$|\.mdx?$/);
+
+  return context
+    .keys()
+    .filter((path) => {
+      if (path === "./index.md" || path === "./index.mdx") {
+        return false;
+      }
+      const pathParts = path.split("/");
+      const isTopLevelFile =
+        pathParts.length === 2 && !path.match(/index\.mdx?$/);
+      const isTopLevelDir =
+        pathParts.length === 3 && path.match(/index\.mdx?$/);
+      return isTopLevelFile || isTopLevelDir;
+    })
+    .map((path) => {
+      const { frontMatter } = context(path);
+      const pathParts = path.split("/");
+      const isTopLevelFile = pathParts.length === 2;
+      const fileSlug = isTopLevelFile
+        ? path.replace("./", "").replace(/\.mdx?$/, "")
+        : pathParts[1];
+      const slug = frontMatter.slug || frontMatter.id || fileSlug;
+      const rawTitle = frontMatter.title || frontMatter.language || fileSlug;
+      const title = rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1);
+      const language = frontMatter.language
+        ? frontMatter.language
+            .toLowerCase()
+            .replace(/ /g, "")
+            .replace(/[\s-]/g, "")
+        : slug.toLowerCase() || title.toLowerCase();
+
+      return {
+        title,
+        language,
+        slug,
+        desc: frontMatter.desc || "",
+        position: frontMatter.sidebar_position || 999,
+      };
+    })
+    .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 = (
+    <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
+  );
+}
+
+export default function NoteCards() {
+  const notes = useNotes();
+  const { path: docsBasePath } = usePluginData(
+    "docusaurus-plugin-content-docs",
+  );
+
+  if (!notes.length) {
+    return null;
+  }
+
+  return (
+    <div className={styles.notesGrid} role="list">
+      {notes.map((note, index) => (
+        <NoteCard
+          key={note.slug}
+          title={note.title}
+          language={note.language}
+          slug={note.slug}
+          desc={note.desc}
+          index={index}
+          docsBasePath={docsBasePath}
+        />
+      ))}
+    </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>
   );
 }

package/theme/components/Preview/components/PreviewContent.jsx

@@ -5,6 +5,7 @@ import ImageRenderer from "../renderers/ImageRenderer";
 import PdfRenderer from "../renderers/PdfRenderer";
 import WebRenderer from "../renderers/WebRenderer";
 import CodeRenderer from "../renderers/CodeRenderer";
+
 export default function PreviewContent({
   currentFile,
   fileType,
@@ -20,84 +21,58 @@ export default function PreviewContent({
 }) {
   const path = currentFile?.path;
   const isExternal = path?.startsWith("http") || path?.startsWith("//");
+
   if (!isOnline && isExternal) {
-    return jsxDEV_7x81h0kn(
-      OfflineState,
-      { onRetry: retryFetch },
-      undefined,
-      false,
-      undefined,
-      this,
-    );
+    return <OfflineState onRetry={retryFetch} />;
   }
+
   const errorMsg = fetchErrors?.[path];
   if (errorMsg) {
-    return jsxDEV_7x81h0kn(
-      ErrorState,
-      { path, message: errorMsg, fileType, fileUrl, onRetry: retryFetch },
-      undefined,
-      false,
-      undefined,
-      this,
+    return (
+      <ErrorState
+        path={path}
+        message={errorMsg}
+        fileType={fileType}
+        fileUrl={fileUrl}
+        onRetry={retryFetch}
+      />
     );
   }
+
   if (textLoading && fileType === "text") {
-    return jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this);
+    return <LoadingState />;
   }
+
   switch (fileType) {
     case "image":
-      return jsxDEV_7x81h0kn(
-        ImageRenderer,
-        {
-          fileUrl,
-          label: currentFile.label,
-          zoomLevel,
-          onError: (msg) => setError(path, msg),
-        },
-        fileUrl,
-        false,
-        undefined,
-        this,
+      return (
+        <ImageRenderer
+          fileUrl={fileUrl}
+          label={currentFile.label}
+          zoomLevel={zoomLevel}
+          onError={(msg) => setError(path, msg)}
+        />
       );
     case "pdf":
-      return jsxDEV_7x81h0kn(
-        PdfRenderer,
-        { fileUrl, zoomLevel, onError: (msg) => setError(path, msg) },
-        fileUrl,
-        false,
-        undefined,
-        this,
+      return (
+        <PdfRenderer
+          fileUrl={fileUrl}
+          zoomLevel={zoomLevel}
+          onError={(msg) => setError(path, msg)}
+        />
       );
     case "web":
-      return jsxDEV_7x81h0kn(
-        WebRenderer,
-        {
-          fileUrl,
-          label: currentFile.label,
-          onError: (msg) => setError(path, msg),
-        },
-        fileUrl,
-        false,
-        undefined,
-        this,
+      return (
+        <WebRenderer
+          fileUrl={fileUrl}
+          label={currentFile.label}
+          onError={(msg) => setError(path, msg)}
+        />
       );
     default: {
-      if (!textContent)
-        return jsxDEV_7x81h0kn(
-          LoadingState,
-          {},
-          undefined,
-          false,
-          undefined,
-          this,
-        );
-      return jsxDEV_7x81h0kn(
-        CodeRenderer,
-        { code: textContent, language: ext, zoomLevel },
-        undefined,
-        false,
-        undefined,
-        this,
+      if (!textContent) return <LoadingState />;
+      return (
+        <CodeRenderer code={textContent} language={ext} zoomLevel={zoomLevel} />
       );
     }
   }