@portosaur/theme 0.1.0

package/theme/components/Preview/hooks/useDockLayout.jsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+export function useDockLayout({
+  isOpen,
+  isPopupMode,
+  isSidebarDock,
+  isPeekDock,
+  dockWidth,
+  peekHeight,
+}) {
+  const weCollapsedSidebar = useRef(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (isOpen && isPopupMode) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    if (isSidebarDock) {
+      document.body.classList.add("pv-dock-active");
+      document.body.style.setProperty("--pv-dock-width", `${dockWidth}px`);
+    } else {
+      document.body.classList.remove("pv-dock-active");
+      document.body.style.setProperty("--pv-dock-width", "0px");
+    }
+    if (isPeekDock) {
+      document.body.classList.add("pv-peek-active");
+      document.body.style.setProperty(
+        "--mobile-peek-height",
+        `${peekHeight}px`,
+      );
+    } else {
+      document.body.classList.remove("pv-peek-active");
+      document.body.style.setProperty("--mobile-peek-height", "0px");
+    }
+    const sidebarToggleBtn = document.querySelector(
+      '[class*="collapseSidebarButton"]',
+    );
+    const isCollapsed = !!document.querySelector(
+      '[aria-label="Expand sidebar"]',
+    );
+    if (isSidebarDock) {
+      if (sidebarToggleBtn && !isCollapsed) {
+        weCollapsedSidebar.current = true;
+        sidebarToggleBtn.click();
+      }
+    } else {
+      if (weCollapsedSidebar.current && isCollapsed && sidebarToggleBtn) {
+        weCollapsedSidebar.current = false;
+        sidebarToggleBtn.click();
+      }
+    }
+    const updateNavOffset = () => {
+      const nav = document.querySelector(".navbar");
+      if (nav) {
+        document.documentElement.style.setProperty(
+          "--ifm-navbar-height",
+          `${nav.offsetHeight}px`,
+        );
+      }
+    };
+    if (isSidebarDock) {
+      updateNavOffset();
+      window.addEventListener("resize", updateNavOffset, { passive: true });
+    }
+    return () => {
+      document.body.classList.remove("pv-dock-active");
+      document.body.classList.remove("pv-peek-active");
+      document.body.style.overflow = "";
+      document.body.style.removeProperty("--pv-dock-width");
+      document.body.style.removeProperty("--mobile-peek-height");
+      if (weCollapsedSidebar.current) {
+        const sidebarToggleBtn = document.querySelector(
+          '[class*="collapseSidebarButton"]',
+        );
+        const isCollapsed = !!document.querySelector(
+          '[aria-label="Expand sidebar"]',
+        );
+        if (sidebarToggleBtn && isCollapsed) {
+          sidebarToggleBtn.click();
+        }
+        weCollapsedSidebar.current = false;
+      }
+      window.removeEventListener("resize", updateNavOffset);
+    };
+  }, [isOpen, isPopupMode, isSidebarDock, isPeekDock, dockWidth, peekHeight]);
+}

package/theme/components/Preview/hooks/useFileFetch.jsx

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from "react";
+import { resolveUrl } from "../utils";
+export function useFileFetch(path, fileType, isActive) {
+  const [cache, setCache] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+  useEffect(() => {
+    if (!isActive || !path || fileType !== "text") return;
+    if (cache[path] || errors[path]) return;
+    setLoading(true);
+    fetch(resolveUrl(path))
+      .then((r) => {
+        if (!r.ok) throw new Error(r.statusText);
+        return r.text();
+      })
+      .then((text) => setCache((prev) => ({ ...prev, [path]: text })))
+      .catch((err) => setErrors((prev) => ({ ...prev, [path]: err.message })))
+      .finally(() => setLoading(false));
+  }, [isActive, path, fileType]);
+  const retry = useCallback(() => {
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next[path];
+      return next;
+    });
+  }, [path]);
+  const setError = useCallback((p, msg) => {
+    setErrors((prev) => ({ ...prev, [p]: msg }));
+  }, []);
+  return {
+    content: cache[path] || null,
+    loading,
+    error: errors[path] || null,
+    errors,
+    retry,
+    setError,
+  };
+}

package/theme/components/Preview/hooks/useTouchZoom.jsx

@@ -0,0 +1,98 @@
+import { useEffect } from "react";
+import styles from "../styles.module.css";
+export function useTouchZoom({
+  containerRef,
+  isOpen,
+  zoomLevel,
+  setZoomLevel,
+}) {
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !isOpen) return;
+    let initialDistance = null;
+    let initialZoom = zoomLevel;
+    const getDistance = (touches) => {
+      return Math.hypot(
+        touches[0].clientX - touches[1].clientX,
+        touches[0].clientY - touches[1].clientY,
+      );
+    };
+    const handleWheel = (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        const delta = -e.deltaY * 0.01;
+        setZoomLevel((prev) => Math.min(Math.max(0.5, prev + delta), 3));
+      }
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        initialDistance = getDistance(e.touches);
+        setZoomLevel((prev) => {
+          initialZoom = prev;
+          return prev;
+        });
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && initialDistance) {
+        e.preventDefault();
+        const currentDistance = getDistance(e.touches);
+        const ratio = currentDistance / initialDistance;
+        setZoomLevel(Math.min(Math.max(0.5, initialZoom * ratio), 3));
+      }
+    };
+    const handleTouchEnd = (e) => {
+      if (e.touches.length < 2) {
+        initialDistance = null;
+      }
+    };
+    let isPanning = false;
+    let startX = 0;
+    let startY = 0;
+    let initialScrollLeft = 0;
+    let initialScrollTop = 0;
+    const handleMouseDown = (e) => {
+      if (e.button !== 0) return;
+      isPanning = true;
+      startX = e.pageX;
+      startY = e.pageY;
+      initialScrollLeft = el.scrollLeft;
+      initialScrollTop = el.scrollTop;
+      el.classList.add(styles.isPanning);
+      document.body.classList.add(styles.isPanning);
+    };
+    const handleMouseMove = (e) => {
+      if (!isPanning) return;
+      e.preventDefault();
+      const x = e.pageX;
+      const y = e.pageY;
+      const walkX = (x - startX) * 1;
+      const walkY = (y - startY) * 1;
+      el.scrollLeft = initialScrollLeft - walkX;
+      el.scrollTop = initialScrollTop - walkY;
+    };
+    const handleMouseUpOrLeave = () => {
+      isPanning = false;
+      el.classList.remove(styles.isPanning);
+      document.body.classList.remove(styles.isPanning);
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    el.addEventListener("touchstart", handleTouchStart, { passive: false });
+    el.addEventListener("touchmove", handleTouchMove, { passive: false });
+    el.addEventListener("touchend", handleTouchEnd);
+    el.addEventListener("mousedown", handleMouseDown);
+    el.addEventListener("mousemove", handleMouseMove);
+    el.addEventListener("mouseup", handleMouseUpOrLeave);
+    el.addEventListener("mouseleave", handleMouseUpOrLeave);
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+      el.removeEventListener("touchstart", handleTouchStart);
+      el.removeEventListener("touchmove", handleTouchMove);
+      el.removeEventListener("touchend", handleTouchEnd);
+      el.removeEventListener("mousedown", handleMouseDown);
+      el.removeEventListener("mousemove", handleMouseMove);
+      el.removeEventListener("mouseup", handleMouseUpOrLeave);
+      el.removeEventListener("mouseleave", handleMouseUpOrLeave);
+    };
+  }, [isOpen, setZoomLevel, containerRef, zoomLevel]);
+}

package/theme/components/Preview/index.jsx

@@ -0,0 +1,3 @@
+export { PreviewProvider, usePreview } from "./state/index.js";
+export { default as ViewerWindow } from "./components/ViewerWindow.js";
+export { Pv, SrcPv } from "./components/Triggers/index.js";

package/theme/components/Preview/renderers/CodeRenderer.jsx

@@ -0,0 +1,124 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Highlight } from "prism-react-renderer";
+export default function CodeRenderer({ code, language, zoomLevel = 1 }) {
+  const { siteConfig } = useDocusaurusContext();
+  const isDark =
+    typeof document !== "undefined" &&
+    document.documentElement.getAttribute("data-theme") === "dark";
+  const prismConfig = siteConfig?.themeConfig?.prism || {};
+  const prismTheme = isDark ? prismConfig.darkTheme : prismConfig.theme;
+  const normalizedLanguage = language === "patch" ? "diff" : language || "text";
+  return jsxDEV_7x81h0kn(
+    Highlight,
+    {
+      code,
+      language: normalizedLanguage,
+      theme: prismTheme,
+      ...(typeof window !== "undefined" && window.Prism
+        ? { prism: window.Prism }
+        : {}),
+      children: ({ className, style, tokens, getLineProps, getTokenProps }) =>
+        jsxDEV_7x81h0kn(
+          "pre",
+          {
+            className,
+            style: {
+              ...style,
+              margin: 0,
+              borderRadius: 0,
+              padding: "14px 0",
+              fontSize: `calc(0.85rem * ${zoomLevel})`,
+              lineHeight: 1.6,
+              minHeight: "100%",
+              background: "var(--ifm-background-color)",
+            },
+            children: tokens.map((line, i) => {
+              const lineProps = getLineProps({ line });
+              const lineContent = line.map((t) => t.content).join("");
+              let diffStyle = {};
+              if (normalizedLanguage === "diff") {
+                if (lineContent.startsWith("+")) {
+                  diffStyle = {
+                    background: "rgba(var(--ifm-color-success-rgb), 0.15)",
+                    borderLeft: "3px solid var(--ifm-color-success)",
+                  };
+                } else if (lineContent.startsWith("-")) {
+                  diffStyle = {
+                    background: "rgba(var(--ifm-color-danger-rgb), 0.15)",
+                    borderLeft: "3px solid var(--ifm-color-danger)",
+                  };
+                }
+              }
+              return jsxDEV_7x81h0kn(
+                "div",
+                {
+                  ...lineProps,
+                  style: {
+                    ...lineProps.style,
+                    ...diffStyle,
+                    display: "flex",
+                    paddingLeft: diffStyle.borderLeft ? "0px" : "3px",
+                  },
+                  children: [
+                    jsxDEV_7x81h0kn(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-block",
+                          width: "1.7em",
+                          textAlign: "right",
+                          marginRight: "12px",
+                          userSelect: "none",
+                          opacity: 0.35,
+                          flexShrink: 0,
+                          fontFamily: "var(--ifm-font-family-monospace)",
+                        },
+                        children: i + 1,
+                      },
+                      undefined,
+                      false,
+                      undefined,
+                      this,
+                    ),
+                    jsxDEV_7x81h0kn(
+                      "span",
+                      {
+                        style: { paddingRight: "14px", flex: 1 },
+                        children: line.map((token, key) =>
+                          jsxDEV_7x81h0kn(
+                            "span",
+                            { ...getTokenProps({ token }) },
+                            key,
+                            false,
+                            undefined,
+                            this,
+                          ),
+                        ),
+                      },
+                      undefined,
+                      false,
+                      undefined,
+                      this,
+                    ),
+                  ],
+                },
+                i,
+                true,
+                undefined,
+                this,
+              );
+            }),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/renderers/ImageRenderer.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { LoadingState } from "../components/FeedbackStates";
+import styles from "../styles.module.css";
+export default function ImageRenderer({ fileUrl, label, zoomLevel, onError }) {
+  const [loading, setLoading] = useState(true);
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.imageView,
+      style: { "--zoom": zoomLevel, position: "relative" },
+      children: [
+        loading &&
+          jsxDEV_7x81h0kn(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 5,
+                display: "flex",
+              },
+              children: jsxDEV_7x81h0kn(
+                LoadingState,
+                {},
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+            },
+            undefined,
+            false,
+            undefined,
+            this,
+          ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.imageScrollArea,
+            style: {
+              opacity: loading ? 0 : 1,
+              transition: "opacity 0.3s ease",
+            },
+            children: jsxDEV_7x81h0kn(
+              "img",
+              {
+                src: fileUrl,
+                alt: label || "",
+                className: styles.image,
+                onLoad: () => setLoading(false),
+                onError: () => {
+                  setLoading(false);
+                  onError?.("Failed to load image.");
+                },
+              },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/renderers/PdfRenderer.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect, useRef } from "react";
+import { LoadingState } from "../components/FeedbackStates";
+import styles from "../styles.module.css";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+let PdfDocument, PdfPage, pdfjs;
+export default function PdfRenderer({ fileUrl, zoomLevel, onError }) {
+  const [pdfReady, setPdfReady] = useState(!!PdfDocument);
+  const [numPages, setNumPages] = useState(null);
+  const [containerWidth, setContainerWidth] = useState(760);
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (PdfDocument) return;
+    import("react-pdf").then((mod) => {
+      PdfDocument = mod.Document;
+      PdfPage = mod.Page;
+      pdfjs = mod.pdfjs;
+      pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+      setPdfReady(true);
+    });
+  }, []);
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+    let timeoutId = null;
+    const observer = new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect;
+      if (width <= 0) return;
+      const diff = Math.abs(width - containerWidth);
+      if (diff < 15) return;
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setContainerWidth(width);
+      }, 150);
+    });
+    observer.observe(wrapperRef.current);
+    return () => {
+      observer.disconnect();
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [pdfReady, containerWidth]);
+  if (!pdfReady || !PdfDocument) {
+    return jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this);
+  }
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.pdfView,
+      ref: wrapperRef,
+      children: jsxDEV_7x81h0kn(
+        PdfDocument,
+        {
+          file: fileUrl,
+          onLoadSuccess: ({ numPages: n }) => setNumPages(n),
+          onLoadError: (err) =>
+            onError?.(err.message || "Invalid or missing PDF file."),
+          loading: jsxDEV_7x81h0kn(
+            LoadingState,
+            {},
+            undefined,
+            false,
+            undefined,
+            this,
+          ),
+          children: Array.from({ length: numPages || 0 }, (_, i) =>
+            jsxDEV_7x81h0kn(
+              PdfPage,
+              {
+                pageNumber: i + 1,
+                width: containerWidth,
+                scale: zoomLevel,
+                className: styles.pdfPage,
+                renderTextLayer: true,
+                renderAnnotationLayer: true,
+              },
+              i,
+              false,
+              undefined,
+              this,
+            ),
+          ),
+        },
+        undefined,
+        false,
+        undefined,
+        this,
+      ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/renderers/WebRenderer.jsx

@@ -0,0 +1,59 @@
+import { useState, useEffect, useRef } from "react";
+import { LoadingState } from "../components/FeedbackStates";
+import styles from "../styles.module.css";
+export default function WebRenderer({ fileUrl, label, onError }) {
+  const [loaded, setLoaded] = useState(false);
+  const loadedRef = useRef(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    setLoaded(false);
+    loadedRef.current = false;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      if (!loadedRef.current) {
+        onError?.(
+          "The page took too long to respond. It may block embedding or you may be offline.",
+        );
+      }
+    }, 1e4);
+    return () => clearTimeout(timeoutRef.current);
+  }, [fileUrl]);
+  const handleLoad = () => {
+    setLoaded(true);
+    loadedRef.current = true;
+    clearTimeout(timeoutRef.current);
+  };
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.webView,
+      children: [
+        !loaded &&
+          jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this),
+        jsxDEV_7x81h0kn(
+          "iframe",
+          {
+            src: fileUrl,
+            title: label,
+            className: styles.webFrame,
+            onLoad: handleLoad,
+            style: { opacity: loaded ? 1 : 0, transition: "opacity 0.3s ease" },
+            allow:
+              "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+            allowFullScreen: true,
+            sandbox:
+              "allow-scripts allow-same-origin allow-popups allow-forms allow-presentation",
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}