@rspress/plugin-preview 2.0.0-rc.1 → 2.0.0-rc.3

package/static/global-components/Container.tsx

@@ -1,92 +0,0 @@
-import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
-import { type MouseEvent, useCallback, useState } from 'react';
-import MobileOperation from './common/mobile-operation';
-import IconCode from './icons/Code';
-
-type ContainerProps = {
-  children: React.ReactNode[];
-  isMobile: 'true' | 'false';
-  demoId: string;
-};
-
-const Container: React.FC<ContainerProps> = props => {
-  const { children, isMobile, demoId } = props;
-  const { page } = usePageData();
-  const [showCode, setShowCode] = useState(false);
-  const lang = useLang();
-  const url = `/~demo/${demoId}`;
-
-  const getPageUrl = () => {
-    if (page?.devPort) {
-      return `http://localhost:${page.devPort}/${demoId}`;
-    }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
-  };
-  const toggleCode = useCallback(
-    (ev: MouseEvent<HTMLButtonElement>) => {
-      if (!showCode) {
-        ev.currentTarget.blur();
-      }
-      setShowCode(!showCode);
-    },
-    [showCode],
-  );
-
-  const [iframeKey, setIframeKey] = useState(0);
-  const refresh = useCallback(() => {
-    setIframeKey(Math.random());
-  }, []);
-
-  return (
-    <NoSSR>
-      <div className="rspress-preview rp-not-doc">
-        {isMobile === 'true' ? (
-          <div className="rspress-preview-wrapper" style={{ display: 'flex' }}>
-            <div className="rspress-preview-code">{children?.[0]}</div>
-            <div className="rspress-preview-device">
-              <iframe src={getPageUrl()} key={iframeKey}></iframe>
-              <MobileOperation url={getPageUrl()} refresh={refresh} />
-            </div>
-          </div>
-        ) : (
-          <div>
-            <div className="rspress-preview-card">
-              <div
-                style={{
-                  overflow: 'auto',
-                  flex: 'auto',
-                }}
-              >
-                {children?.[1]}
-              </div>
-              <div className="rspress-preview-operations web">
-                <button
-                  onClick={toggleCode}
-                  aria-label={lang === 'zh' ? '收起代码' : 'Collapse Code'}
-                  className={showCode ? 'button-expanded' : ''}
-                >
-                  <IconCode />
-                </button>
-              </div>
-            </div>
-            <div
-              className={`${
-                showCode
-                  ? 'rspress-preview-code-show'
-                  : 'rspress-preview-code-hide'
-              }`}
-            >
-              {children?.[0]}
-            </div>
-          </div>
-        )}
-      </div>
-    </NoSSR>
-  );
-};
-
-export default Container;

package/static/global-components/DemoBlock.css

@@ -1,23 +0,0 @@
-:root {
-  --rp-demo-block-bg: #f7f8fa;
-}
-
-.dark {
-  --rp-demo-block-bg: #1a1a1a;
-}
-
-.rspress-demo-block {
-  padding-bottom: 12px;
-  background-color: var(--rp-demo-block-bg);
-}
-
-.rspress-demo-block-title {
-  padding: 12px 12px 8px;
-  color: #697b8c;
-  font-size: 14px;
-}
-
-.rspress-demo-block-main {
-  border-right: none;
-  border-left: none;
-}

package/static/global-components/DemoBlock.tsx

@@ -1,16 +0,0 @@
-import './DemoBlock.css';
-
-interface Props {
-  title: string;
-  children?: React.ReactNode;
-}
-
-export default (props: Props) => {
-  const { title, children } = props;
-  return (
-    <div className="rspress-demo-block">
-      <div className="rspress-demo-block-title">{title}</div>
-      <div className="rspress-demo-block-main">{children}</div>
-    </div>
-  );
-};

package/static/global-components/Device.tsx

@@ -1,76 +0,0 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
-import { useCallback, useEffect, useState } from 'react';
-// @ts-expect-error
-import { normalizeId } from '../../dist/utils';
-import MobileOperation from './common/mobile-operation';
-import './Device.css';
-
-export default () => {
-  const { page } = usePageData();
-  const pageName = `${normalizeId(page.pagePath)}`;
-  const demoId = `_${pageName}`;
-  const url = `~demo/${demoId}`;
-  const { haveDemos } = page;
-
-  const getPageUrl = (url: string) => {
-    if (page?.devPort) {
-      return `http://localhost:${page.devPort}/${demoId}`;
-    }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
-  };
-  const { width: innerWidth } = useWindowSize();
-  const [iframeKey, setIframeKey] = useState(0);
-  const refresh = useCallback(() => {
-    setIframeKey(Math.random());
-  }, []);
-
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    if (haveDemos) {
-      if (innerWidth > 1280) {
-        node?.setAttribute(
-          'style',
-          'padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2)',
-        );
-      } else if (innerWidth > 960) {
-        node?.setAttribute(
-          'style',
-          `padding-right: calc(${
-            innerWidth - 1280
-          }px + var(--rp-device-width) + var(--rp-preview-padding) * 2)`,
-        );
-      } else {
-        node?.removeAttribute('style');
-      }
-    } else {
-      node?.removeAttribute('style');
-    }
-  }, [haveDemos, innerWidth]);
-
-  return haveDemos ? (
-    <div className="fixed-device">
-      <NoSSR>
-        <iframe
-          // refresh when load the iframe, then remove NoSSR
-          src={getPageUrl(url)}
-          className="fixed-iframe"
-          key={iframeKey}
-        ></iframe>
-      </NoSSR>
-      <MobileOperation
-        url={getPageUrl(url)}
-        className="fixed-operation"
-        refresh={refresh}
-      />
-    </div>
-  ) : null;
-};

package/static/global-components/common/index.css

@@ -1,103 +0,0 @@
-:root {
-  --rp-preview-button-hover-bg: #e5e6eb;
-  --rp-preview-button-bg: #e5e6eb;
-}
-
-.dark {
-  --rp-preview-button-hover-bg: #c5c5c5;
-  --rp-preview-button-bg: #c5c5c5;
-}
-
-.rspress-preview {
-  padding: 16px 0;
-}
-
-.rspress-preview-wrapper {
-  border: 1px solid var(--rp-container-details-border);
-  border-radius: var(--rp-radius-small);
-}
-
-.rspress-preview-card {
-  padding: 16px;
-  position: relative;
-  border: 1px solid var(--rp-container-details-border);
-  border-radius: var(--rp-radius-small);
-  display: flex;
-}
-
-.rspress-preview-qrcode {
-  background-color: #fff;
-  width: 120px;
-  height: 120px;
-  position: absolute;
-  top: -132px;
-  right: -46px;
-  padding: 12px;
-}
-
-.rspress-preview-code {
-  position: relative;
-  overflow: hidden;
-  flex: 1 1;
-  max-height: 700px;
-}
-
-.rspress-preview-code-hide {
-  position: relative;
-  overflow: hidden;
-  display: none;
-}
-
-.rspress-preview-code-show {
-  margin-top: 16px;
-  display: block;
-}
-
-.rspress-preview-device {
-  position: relative;
-  flex: 0 0;
-  border-left: 1px solid #e6e6e6;
-  display: flex;
-  flex-direction: column;
-}
-
-.rspress-preview-device iframe {
-  border-bottom: 1px solid #e6e6e6;
-  width: 360px;
-  height: 100%;
-  flex: auto;
-}
-
-.rspress-preview-operations button {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  text-align: center;
-  border-radius: 50%;
-  border: 1px solid transparent;
-  background-color: var(--rp-c-bg-soft);
-  margin-left: 14px;
-}
-
-.rspress-preview-operations button:hover {
-  background-color: var(--rp-preview-button-hover-bg);
-}
-
-.rspress-preview-operations svg {
-  display: inline-block;
-  vertical-align: -2px;
-}
-
-.rspress-preview-operations.mobile {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 6px;
-}
-
-.rspress-preview-operations.web {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: none;
-}

package/static/global-styles/iframe.css

@@ -1,31 +0,0 @@
-:root .rspress-preview div[class*='language-'] {
-  margin: 0;
-  border-radius: 0;
-  height: 100%;
-}
-
-:root {
-  --rp-preview-padding: 32px;
-}
-
-@media (min-width: 1280px) {
-  .rspress-doc-layout {
-    width: calc(100% - var(--rp-preview-padding));
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-sidebar {
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc-nav-container {
-    max-width: 100%;
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc {
-    width: 100%;
-    padding-left: var(--rp-preview-padding);
-    padding-right: var(--rp-preview-padding);
-  }
-}

package/static/global-styles/internal.css

@@ -1,5 +0,0 @@
-:root .rspress-preview div[class*='language-'] {
-  margin: 0;
-  border-radius: 0;
-  height: 100%;
-}