@portosaur/theme 0.1.0

package/theme/components/Preview/components/Triggers/SrcPv.jsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import Pv, { normalizeSources } from "./Pv";
+import styles from "../../styles.module.css";
+export default function SrcPv(props) {
+  const { prefixText = "Source file: " } = props;
+  const srcList = useMemo(() => normalizeSources(props), [props]);
+  if (srcList.length === 0) return null;
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.sourceFooter,
+      children: [
+        jsxDEV_7x81h0kn(
+          "span",
+          { className: styles.sourceFooterLabel, children: prefixText },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        srcList.map((src, idx) =>
+          jsxDEV_7x81h0kn(
+            React.Fragment,
+            {
+              children: [
+                jsxDEV_7x81h0kn(
+                  Pv,
+                  {
+                    ...props,
+                    sources: srcList,
+                    activeIdx: idx,
+                    children: src.label,
+                  },
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+                idx < srcList.length - 1 ? ", " : "",
+              ],
+            },
+            idx,
+            true,
+            undefined,
+            this,
+          ),
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/components/Triggers/index.jsx

@@ -0,0 +1,2 @@
+export { default as Pv } from "./Pv";
+export { default as SrcPv } from "./SrcPv";

package/theme/components/Preview/components/ViewerWindow.jsx

@@ -0,0 +1,489 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useLocation } from "@docusaurus/router";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Rnd } from "react-rnd";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePreview } from "../state/index.js";
+import { classify, getExt, resolveUrl } from "../utils/index.js";
+import { useFileFetch } from "../hooks/useFileFetch.js";
+import { useDockLayout } from "../hooks/useDockLayout.js";
+import { useDeepLinkHash } from "../hooks/useDeepLinkHash.js";
+import { useAdaptiveSizing } from "../hooks/useAdaptiveSizing.js";
+import { useTouchZoom } from "../hooks/useTouchZoom.js";
+import PreviewHeader from "./PreviewHeader.js";
+import FileTabs from "./FileTabs.js";
+import PreviewContent from "./PreviewContent.js";
+import styles from "../styles.module.css";
+export default function PreviewViewer() {
+  const {
+    isOpen,
+    mode,
+    sources,
+    activeIndex,
+    baseSlug,
+    dockWidth,
+    peekHeight,
+    modeSwitch,
+    closePreview,
+    toggleMode,
+    setActiveIndex,
+    setDockWidth,
+    setPeekHeight,
+    floatingState,
+    setFloatingState,
+  } = usePreview();
+  const { siteConfig } = useDocusaurusContext();
+  const customFields = siteConfig?.customFields;
+  const corsProxyList = customFields?.corsProxyList || [];
+  const location = useLocation();
+  const [mounted, setMounted] = useState(typeof window !== "undefined");
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isOnline, setIsOnline] = useState(
+    typeof window !== "undefined" ? window.navigator.onLine : true,
+  );
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? document.documentElement.clientWidth : 1200,
+  );
+  const [isInteracting, setIsInteracting] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const popupBodyRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+    const handleResize = () =>
+      setWindowWidth(document.documentElement.clientWidth);
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      setMounted(false);
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  const layout = useAdaptiveSizing({
+    mode,
+    windowWidth,
+    floatingState,
+    dockWidth,
+    peekHeight,
+    setFloatingState,
+  });
+  const { isDockMode, showAsPeek, isPipMode, isPopupMode } = layout;
+  useTouchZoom({ containerRef: popupBodyRef, isOpen, zoomLevel, setZoomLevel });
+  useDockLayout({
+    isOpen,
+    isPopupMode,
+    isSidebarDock: isDockMode,
+    isPeekDock: showAsPeek,
+    dockWidth,
+    peekHeight,
+  });
+  useDeepLinkHash(isOpen, sources, activeIndex, mode, baseSlug);
+  const prevPathRef = useRef(location.pathname);
+  useEffect(() => {
+    if (prevPathRef.current !== location.pathname) {
+      prevPathRef.current = location.pathname;
+      if (isOpen) closePreview();
+    }
+  }, [location.pathname, isOpen, closePreview]);
+  useEffect(() => {
+    if (isOpen) setZoomLevel(1);
+  }, [mode, isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") closePreview();
+    };
+    window.addEventListener("keydown", handler, { capture: true });
+    return () =>
+      window.removeEventListener("keydown", handler, { capture: true });
+  }, [isOpen, closePreview]);
+  const currentFile = sources[activeIndex] ?? sources[0] ?? null;
+  const fileType = currentFile ? classify(currentFile.url) : null;
+  const ext = currentFile ? getExt(currentFile.url) : "";
+  const fileUrl = currentFile ? resolveUrl(currentFile.url) : "";
+  const {
+    content: textContent,
+    loading: textLoading,
+    errors: fetchErrors,
+    retry: retryFetch,
+    setError,
+  } = useFileFetch(currentFile?.url, fileType, isOpen);
+  const handleDownload = useCallback(async () => {
+    if (!fileUrl) return;
+    setIsDownloading(true);
+    try {
+      const downloadName =
+        currentFile.title || currentFile.url.split("/").pop() || "download";
+      const triggerBlobDownload = async (url) => {
+        const resp = await fetch(url, { mode: "cors", cache: "no-cache" });
+        if (!resp.ok) throw new Error("Fetch failed");
+        const blob = await resp.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = blobUrl;
+        a.download = downloadName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
+      };
+      try {
+        const bustUrl = fileUrl.includes("?")
+          ? `${fileUrl}&cb=${Date.now()}`
+          : `${fileUrl}?cb=${Date.now()}`;
+        await triggerBlobDownload(bustUrl);
+      } catch (e1) {
+        let proxySuccess = false;
+        for (const proxyBaseUrl of corsProxyList) {
+          try {
+            const proxyUrl = `${proxyBaseUrl}${encodeURIComponent(fileUrl)}`;
+            await triggerBlobDownload(proxyUrl);
+            proxySuccess = true;
+            break;
+          } catch (pE) {}
+        }
+        if (!proxySuccess) {
+          const link = document.createElement("a");
+          link.href = fileUrl;
+          link.target = "_blank";
+          link.setAttribute("download", downloadName);
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      }
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [fileUrl, currentFile, corsProxyList]);
+  if (!mounted || !currentFile) return null;
+  const displayTitle =
+    currentFile.title ||
+    (fileType === "web"
+      ? currentFile.url.replace(/^https?:\/\//, "").split("/")[0]
+      : currentFile.url.split("/").pop() || "File");
+  const header = jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.headerWrapper,
+      children: [
+        showAsPeek &&
+          jsxDEV_7x81h0kn(
+            "div",
+            { className: styles.peekHandle },
+            undefined,
+            false,
+            undefined,
+            this,
+          ),
+        jsxDEV_7x81h0kn(
+          PreviewHeader,
+          {
+            displayTitle,
+            fileType,
+            fileUrl,
+            mode,
+            zoomLevel,
+            onZoomChange: setZoomLevel,
+            onToggleMode: toggleMode,
+            onClose: closePreview,
+            onDownload: handleDownload,
+            isDownloading,
+            modeSwitch,
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+  const innerContent = jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.windowContent,
+      children: [
+        jsxDEV_7x81h0kn(
+          FileTabs,
+          { sources, activeIndex, onSelect: setActiveIndex },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: `${styles.popupBody} ${fileType === "code" ? styles.isText : styles.isGrabbable}`,
+            ref: (el) => {
+              popupBodyRef.current = el;
+              if (el && isOpen) el.focus({ preventScroll: true });
+            },
+            tabIndex: -1,
+            children: jsxDEV_7x81h0kn(
+              PreviewContent,
+              {
+                currentFile,
+                fileType,
+                fileUrl,
+                isOnline,
+                fetchErrors,
+                textLoading,
+                textContent,
+                zoomLevel,
+                ext,
+                retryFetch,
+                setError,
+              },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+  const rndEnableResizing = isDockMode
+    ? { left: true }
+    : showAsPeek
+      ? { top: true }
+      : true;
+  const rndResizeHandleStyles = showAsPeek
+    ? {
+        top: {
+          height: "24px",
+          top: "-12px",
+          cursor: "row-resize",
+          zIndex: 100,
+        },
+      }
+    : isDockMode
+      ? { left: { width: "20px", left: "-10px" } }
+      : isPipMode
+        ? {
+            bottom: { height: "20px", bottom: "-10px" },
+            right: { width: "20px", right: "-10px" },
+            left: { width: "20px", left: "-10px" },
+            top: { height: "20px", top: "-10px" },
+            bottomRight: {
+              width: "30px",
+              height: "30px",
+              bottom: "-15px",
+              right: "-15px",
+            },
+            bottomLeft: {
+              width: "30px",
+              height: "30px",
+              bottom: "-15px",
+              left: "-15px",
+            },
+            topRight: {
+              width: "30px",
+              height: "30px",
+              top: "-15px",
+              right: "-15px",
+            },
+            topLeft: {
+              width: "30px",
+              height: "30px",
+              top: "-15px",
+              left: "-15px",
+            },
+          }
+        : {};
+  const rndMinWidth = isDockMode ? 380 : showAsPeek ? windowWidth : 380;
+  const rndMinHeight = showAsPeek ? 150 : isDockMode ? undefined : 60;
+  const rndMaxWidth = isDockMode
+    ? windowWidth * 0.8
+    : showAsPeek
+      ? windowWidth
+      : undefined;
+  const rndMaxHeight = showAsPeek ? layout.vh * 0.85 : undefined;
+  return createPortal(
+    jsxDEV_7x81h0kn(
+      AnimatePresence,
+      {
+        children:
+          isOpen &&
+          jsxDEV_7x81h0kn(
+            motion.div,
+            {
+              id: "pv-viewer",
+              "data-mode": mode,
+              className: `${styles.previewSystem} ${showAsPeek ? styles.modePeek : ""} ${isDockMode ? styles.modeDock : ""} ${isPipMode ? styles.modePip : ""} ${isPopupMode ? styles.modePopup : ""}`,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.2 },
+              onWheel: (e) => e.stopPropagation(),
+              children: [
+                isPopupMode &&
+                  jsxDEV_7x81h0kn(
+                    "div",
+                    {
+                      className: styles.previewBackdrop,
+                      onClick: closePreview,
+                    },
+                    undefined,
+                    false,
+                    undefined,
+                    this,
+                  ),
+                isPopupMode
+                  ? jsxDEV_7x81h0kn(
+                      motion.div,
+                      {
+                        className: styles.windowFrame,
+                        initial: {
+                          opacity: 0,
+                          scale: 0.9,
+                          y: "-45%",
+                          x: "-50%",
+                        },
+                        animate: { opacity: 1, scale: 1, y: "-50%", x: "-50%" },
+                        exit: { opacity: 0, scale: 0.9, y: "-45%", x: "-50%" },
+                        transition: {
+                          type: "spring",
+                          damping: 25,
+                          stiffness: 300,
+                        },
+                        onClick: (e) => e.stopPropagation(),
+                        children: [
+                          jsxDEV_7x81h0kn(
+                            "div",
+                            {
+                              className: styles.dragHandleWrapper,
+                              children: header,
+                            },
+                            undefined,
+                            false,
+                            undefined,
+                            this,
+                          ),
+                          innerContent,
+                        ],
+                      },
+                      "desktop-popup",
+                      true,
+                      undefined,
+                      this,
+                    )
+                  : jsxDEV_7x81h0kn(
+                      Rnd,
+                      {
+                        position: layout.rndPosition,
+                        size: layout.rndSize,
+                        disableDragging: isDockMode || showAsPeek,
+                        enableResizing: rndEnableResizing,
+                        dragHandleClassName: styles.dragHandleWrapper,
+                        minWidth: rndMinWidth,
+                        minHeight: rndMinHeight,
+                        maxWidth: rndMaxWidth,
+                        maxHeight: rndMaxHeight,
+                        bounds: layout.rndBounds,
+                        resizeHandleStyles: rndResizeHandleStyles,
+                        onDragStart: () => setIsInteracting(true),
+                        onDragStop: (_e, d) => {
+                          setIsInteracting(false);
+                          if (!isDockMode && !showAsPeek)
+                            setFloatingState({ x: d.x, y: d.y });
+                        },
+                        onResizeStart: () => setIsInteracting(true),
+                        onResizeStop: (
+                          _e,
+                          _direction,
+                          ref,
+                          _delta,
+                          position,
+                        ) => {
+                          setIsInteracting(false);
+                          const newWidth = parseInt(ref.style.width, 10);
+                          const newHeight = parseInt(ref.style.height, 10);
+                          if (isDockMode) setDockWidth(newWidth);
+                          else if (showAsPeek) setPeekHeight(newHeight);
+                          else
+                            setFloatingState({
+                              width: newWidth,
+                              height: newHeight,
+                              ...position,
+                            });
+                        },
+                        className: styles.rndWrapper,
+                        style: {
+                          zIndex: 10,
+                          transition: isInteracting
+                            ? "none"
+                            : "all 0.4s cubic-bezier(0.22, 1, 0.36, 1)",
+                        },
+                        children: jsxDEV_7x81h0kn(
+                          "div",
+                          {
+                            className: `${styles.windowFrame} ${isInteracting ? styles.windowInteracting : ""}`,
+                            style: {
+                              width: "100%",
+                              height: "100%",
+                              position: "relative",
+                            },
+                            onClick: (e) => e.stopPropagation(),
+                            children: [
+                              jsxDEV_7x81h0kn(
+                                "div",
+                                {
+                                  className: styles.dragHandleWrapper,
+                                  children: header,
+                                },
+                                undefined,
+                                false,
+                                undefined,
+                                this,
+                              ),
+                              innerContent,
+                            ],
+                          },
+                          undefined,
+                          true,
+                          undefined,
+                          this,
+                        ),
+                      },
+                      `${mode}-${showAsPeek}`,
+                      false,
+                      undefined,
+                      this,
+                    ),
+              ],
+            },
+            undefined,
+            true,
+            undefined,
+            this,
+          ),
+      },
+      undefined,
+      false,
+      undefined,
+      this,
+    ),
+    document.body,
+  );
+}

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

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from "react";
+export function useAdaptiveSizing({
+  mode,
+  windowWidth,
+  floatingState,
+  dockWidth,
+  peekHeight,
+  setFloatingState,
+}) {
+  const isPhone = windowWidth <= 480;
+  const isMobile = windowWidth <= 768;
+  const isTablet = windowWidth > 480 && windowWidth <= 996;
+  const isDesktop = windowWidth > 996;
+  const isPopupMode = mode === "popup";
+  const isDockMode = mode === "dock" && isDesktop;
+  const showAsPeek = mode === "dock" && !isDesktop;
+  const isPipMode = mode === "pip";
+  const prevWidthRef = useRef(windowWidth);
+  useEffect(() => {
+    if (floatingState.x !== null && !isDockMode && !isMobile) {
+      const wasOnRight = floatingState.x > prevWidthRef.current / 2;
+      if (wasOnRight) {
+        const delta = windowWidth - prevWidthRef.current;
+        setFloatingState((prev) => ({ ...prev, x: prev.x + delta }));
+      }
+    }
+    prevWidthRef.current = windowWidth;
+  }, [windowWidth, isDockMode, isMobile, floatingState.x, setFloatingState]);
+  const vh =
+    typeof window !== "undefined" ? document.documentElement.clientHeight : 800;
+  const pipWidth = isPhone
+    ? windowWidth
+    : isTablet
+      ? Math.min(600, windowWidth - 60)
+      : floatingState.width;
+  const pipHeight = isPhone
+    ? Math.min(floatingState.height, vh * 0.7)
+    : isTablet
+      ? Math.min(450, vh * 0.6)
+      : floatingState.height;
+  const marginX = isPhone ? 0 : 20;
+  const marginY = isPhone ? 0 : 20;
+  const defaultPipX = isTablet
+    ? (windowWidth - pipWidth) / 2
+    : isPhone
+      ? 0
+      : Math.max(16, windowWidth - pipWidth - marginX);
+  const defaultPipY = isPhone
+    ? vh - pipHeight
+    : Math.max(16, vh - pipHeight - marginY);
+  let rndX = floatingState.x ?? defaultPipX;
+  let rndY = floatingState.y ?? defaultPipY;
+  if (!isDockMode && !isPhone && floatingState.x !== null) {
+    rndX = Math.min(rndX, windowWidth - pipWidth - 10);
+    rndX = Math.max(10, rndX);
+    rndY = Math.min(rndY, vh - pipHeight - 10);
+    rndY = Math.max(10, rndY);
+  }
+  const rndPosition = isDockMode
+    ? { x: windowWidth - dockWidth, y: 0 }
+    : showAsPeek
+      ? { x: 0, y: Math.max(0, vh - peekHeight) }
+      : { x: rndX, y: rndY };
+  const rndSize = isDockMode
+    ? { width: dockWidth, height: vh }
+    : showAsPeek
+      ? { width: windowWidth, height: peekHeight }
+      : { width: pipWidth, height: pipHeight };
+  const rndBounds = isPhone
+    ? { left: 0, top: 0, right: windowWidth, bottom: vh }
+    : isDockMode
+      ? { left: 0, top: 0, right: windowWidth, bottom: vh }
+      : "parent";
+  return {
+    isPhone,
+    isMobile,
+    isTablet,
+    isDesktop,
+    isPopupMode,
+    isDockMode,
+    showAsPeek,
+    isPipMode,
+    rndPosition,
+    rndSize,
+    rndBounds,
+    pipWidth,
+    pipHeight,
+    vh,
+  };
+}

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

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { generatePvSlug, generatePvHash } from "../utils";
+export function useDeepLinkHash(isOpen, sources, activeIndex, mode, baseSlug) {
+  useEffect(() => {
+    if (!isOpen) return;
+    let slug = baseSlug;
+    if (sources && sources.length > 1) {
+      const src = sources[activeIndex];
+      if (src) {
+        const rawLabel =
+          src.label ||
+          (src.path ? src.path.split(/[?#]/)[0].split("/").pop() : "tab");
+        const tabSlug = generatePvSlug(rawLabel);
+        slug = baseSlug ? `${baseSlug}-${tabSlug}` : tabSlug;
+      }
+    }
+    if (slug) {
+      const newHash = generatePvHash(slug, mode);
+      if (window.location.hash !== `#${newHash}`) {
+        window.history.replaceState(null, "", `#${newHash}`);
+      }
+    }
+  }, [activeIndex, isOpen, sources, mode, baseSlug]);
+}