@rspress/plugin-preview 0.0.0-next-20230816082004

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@rspress/plugin-preview",
+  "version": "0.0.0-next-20230816082004",
+  "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
+  "bugs": "https://github.com/web-infra-dev/rspress/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rspress",
+    "directory": "packages/plugin-preview"
+  },
+  "license": "MIT",
+  "jsnext:source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@mdx-js/mdx": "2.2.1",
+    "@modern-js/utils": "2.30.0",
+    "qrcode.react": "^3.1.0",
+    "remark-gfm": "3.0.1",
+    "@rspress/shared": "0.0.0-next-20230816082004"
+  },
+  "devDependencies": {
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "mdast-util-mdxjs-esm": "^1.3.0",
+    "prettier": "^2.6.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.8.1",
+    "rspack-plugin-virtual-module": "0.1.8",
+    "typescript": "^5",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-router-dom": "^6.8.1",
+    "@rspress/core": "0.0.0-next-20230816082004"
+  },
+  "files": [
+    "dist",
+    "static",
+    "mdx-meta-loader.cjs"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "modern build -w",
+    "build": "modern build",
+    "reset": "rimraf ./**/node_modules",
+    "lint": "modern lint",
+    "change": "modern change",
+    "bump": "modern bump",
+    "pre": "modern pre",
+    "change-status": "modern change-status",
+    "gen-release-note": "modern gen-release-note",
+    "release": "modern release",
+    "new": "modern new",
+    "test": "vitest run --passWithNoTests",
+    "upgrade": "modern upgrade"
+  }
+}

package/static/global-components/Container.scss

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

package/static/global-components/Container.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useState } from 'react';
+import { withBase, useLang, NoSSR } from '@rspress/core/runtime';
+import MobileOperation from './common/mobile-operation';
+import IconCode from './svg/code.svg';
+import './Container.scss';
+
+type ContainerProps = {
+  children: React.ReactNode[];
+  isMobile: 'true' | 'false';
+  url: string;
+};
+
+const Container: React.FC<ContainerProps> = props => {
+  const { children, isMobile, url } = props;
+  const [showCode, setShowCode] = useState(false);
+  const lang = useLang();
+
+  const getPageUrl = () => {
+    if (typeof window !== 'undefined') {
+      return `${window.location.origin}${withBase(url)}`;
+    }
+    // Do nothing in ssr
+    return '';
+  };
+  const toggleCode = (e: any) => {
+    if (!showCode) {
+      e.target.blur();
+    }
+    setShowCode(!showCode);
+  };
+
+  const [iframeKey, setIframeKey] = useState(0);
+  const refresh = useCallback(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  return (
+    <NoSSR>
+      <div className="modern-preview">
+        {isMobile === 'true' ? (
+          <div className="modern-preview-wrapper flex">
+            <div className="modern-preview-code">{children?.[0]}</div>
+            <div className="modern-preview-device">
+              <iframe src={getPageUrl()} key={iframeKey}></iframe>
+              <MobileOperation url={url} refresh={refresh} />
+            </div>
+          </div>
+        ) : (
+          <div>
+            <div className="modern-preview-card">
+              <div
+                style={{
+                  overflow: 'auto',
+                  marginRight: '44px',
+                }}
+              >
+                {children?.[1]}
+              </div>
+              <div className="modern-preview-operations web">
+                <button
+                  onClick={toggleCode}
+                  aria-label={lang === 'zh' ? '收起代码' : ''}
+                  className={showCode ? 'button-expanded' : 'Collapse Code'}
+                >
+                  <IconCode />
+                </button>
+              </div>
+            </div>
+            <div
+              className={`${
+                showCode
+                  ? 'modern-preview-code-show'
+                  : 'modern-preview-code-hide'
+              }`}
+            >
+              {children?.[0]}
+            </div>
+          </div>
+        )}
+      </div>
+    </NoSSR>
+  );
+};
+
+export default Container;

package/static/global-components/DemoBlock.scss

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

package/static/global-components/DemoBlock.tsx

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

package/static/global-components/Device.scss

@@ -0,0 +1,46 @@
+.fixed-device {
+  display: none;
+  position: fixed;
+  top: calc(var(--modern-nav-height) + var(--modern-preview-padding));
+  overflow: hidden;
+}
+
+.fixed-iframe {
+  height: var(--modern-device-height);
+  max-height: calc(100vh - var(--modern-preview-padding) * 2 - var(--modern-nav-height));
+  width: 360px;
+  pointer-events: auto;
+  border-radius: var(--modern-device-border-radius) var(--modern-device-border-radius) 0 0;
+  border: var(--modern-device-border);
+}
+
+.fixed-operation {
+  border: var(--modern-device-border);
+  border-top: 0;
+  border-radius: 0 0 var(--modern-device-border-radius) var(--modern-device-border-radius);
+}
+
+:root {
+  --modern-device-width: 360px;
+  --modern-device-height: 640px;
+  --modern-device-border-radius: 20px;
+  --modern-device-border: 1px solid #e5e6e8;
+}
+
+
+@media (min-width: 960px){
+  .fixed-device {
+    display: inline;
+    left: calc(1280px - var(--modern-device-width) - var(--modern-preview-padding));
+    right: auto;
+  }
+}
+
+@media (min-width: 1280px){
+  .fixed-device {
+    display: inline;
+    right: var(--modern-preview-padding);
+    left: auto;
+  }
+}
+

package/static/global-components/Device.tsx

@@ -0,0 +1,93 @@
+import { usePageData, withBase } from '@rspress/core/runtime';
+import { demos } from 'virtual-meta';
+import { useCallback, useEffect, useState } from 'react';
+import MobileOperation from './common/mobile-operation';
+import './Device.scss';
+
+export default () => {
+  const getPageUrl = (url: string) => {
+    if (typeof window !== 'undefined') {
+      return window.location.origin + withBase(url);
+    }
+    // Do nothing in ssr
+    return '';
+  };
+  const removeLeadingSlash = (url: string) => {
+    return url.charAt(0) === '/' ? url.slice(1) : url;
+  };
+
+  const getPageKey = (route: string) => {
+    const cleanRoute = removeLeadingSlash(route);
+    return cleanRoute.replace(/\//g, '_').replace(/\.[^.]+$/, '') || 'index';
+  };
+  const { page } = usePageData();
+  const pageName = getPageKey(page._relativePath);
+  const url = `~demo/${pageName}`;
+  const haveDemos =
+    demos.flat().filter(item => new RegExp(`${pageName}_\\d+`).test(item.id))
+      .length > 0;
+  const [asideWidth, setAsideWidth] = useState('0px');
+  const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+  const [iframeKey, setIframeKey] = useState(0);
+  const refresh = useCallback(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  // get default value from root
+  // listen resize and re-render
+  useEffect(() => {
+    const root = document.querySelector(':root');
+    if (root) {
+      const defaultAsideWidth = getComputedStyle(root).getPropertyValue(
+        '--modern-aside-width',
+      );
+      setAsideWidth(defaultAsideWidth);
+    }
+    const handleResize = () => {
+      setInnerWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    const node = document.querySelector('.modern-doc-container');
+    const { style } = document.documentElement;
+    if (haveDemos) {
+      if (innerWidth > 1280) {
+        node?.setAttribute(
+          'style',
+          'padding-right: calc(var(--modern-device-width) + var(--modern-preview-padding) * 2)',
+        );
+      } else if (innerWidth > 960) {
+        node?.setAttribute(
+          'style',
+          `padding-right: calc(${
+            innerWidth - 1280
+          }px + var(--modern-device-width) + var(--modern-preview-padding) * 2)`,
+        );
+      } else {
+        node?.removeAttribute('style');
+      }
+      style.setProperty('--modern-aside-width', '0');
+    } else {
+      node?.removeAttribute('style');
+      style.setProperty('--modern-aside-width', asideWidth);
+    }
+  }, [haveDemos, asideWidth, innerWidth]);
+
+  return haveDemos ? (
+    <div className="fixed-device">
+      <iframe
+        src={getPageUrl(url)}
+        className="fixed-iframe"
+        key={iframeKey}
+      ></iframe>
+      <MobileOperation
+        url={url}
+        className="fixed-operation"
+        refresh={refresh}
+      />
+    </div>
+  ) : null;
+};

package/static/global-components/common/mobile-operation.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { withBase, useLang } from '@rspress/core/runtime';
+import IconLaunch from '../svg/launch.svg';
+import IconQrcode from '../svg/qrcode.svg';
+import IconRefresh from '../svg/refresh.svg';
+
+const locales = {
+  zh: {
+    refresh: '刷新页面',
+    open: '在新页面打开',
+  },
+  en: {
+    refresh: 'refresh',
+    open: 'Open in new page',
+  },
+};
+
+export default (props: {
+  url: string;
+  className?: string;
+  refresh: () => void;
+}) => {
+  const [showQRCode, setShowQRCode] = useState(false);
+  const { url, className = '', refresh } = props;
+  const lang = useLang();
+  const triggerRef = useRef(null);
+  const t = lang === 'zh' ? locales.zh : locales.en;
+
+  const getPageUrl = () => {
+    if (typeof window !== 'undefined') {
+      return window.location.origin + withBase(url);
+    }
+    // Do nothing in ssr
+    return '';
+  };
+  const toggleQRCode = (e: any) => {
+    if (!showQRCode) {
+      e.target.blur();
+    }
+    setShowQRCode(!showQRCode);
+  };
+  const openNewPage = () => {
+    window.open(getPageUrl());
+  };
+
+  const contains = function (root: HTMLElement | null, ele: any) {
+    if (!root) {
+      return false;
+    }
+    if (root.contains) {
+      return root.contains(ele);
+    }
+    let node = ele;
+    while (node) {
+      if (node === root) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  };
+
+  const onClickOutside = useCallback(
+    (e: MouseEvent) => {
+      console.log(
+        !contains(triggerRef.current, e.target),
+        triggerRef.current,
+        e.target,
+      );
+      if (!contains(triggerRef.current, e.target)) {
+        setShowQRCode(false);
+      }
+    },
+    [triggerRef],
+  );
+
+  useEffect(() => {
+    if (showQRCode) {
+      document.addEventListener('mousedown', onClickOutside, false);
+    } else {
+      document.removeEventListener('mousedown', onClickOutside, false);
+    }
+  }, [showQRCode]);
+
+  return (
+    <div className={`modern-preview-operations mobile ${className}`}>
+      <button onClick={refresh} aria-label={t.refresh}>
+        <IconRefresh />
+      </button>
+      <div className="relative" ref={triggerRef}>
+        {showQRCode && (
+          <div className="modern-preview-qrcode">
+            <QRCodeSVG value={getPageUrl()} size={96} />
+          </div>
+        )}
+        <button onClick={toggleQRCode}>
+          <IconQrcode />
+        </button>
+      </div>
+      <button onClick={openNewPage} aria-label={t.open}>
+        <IconLaunch />
+      </button>
+    </div>
+  );
+};

package/static/global-components/svg/code.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4">
+<path d="M16.7336 12.6863L5.41992 24L16.7336 35.3137M31.2551 12.6863L42.5688 24L31.2551 35.3137M27.1999 6.28003L20.9486 41.7331" stroke-linecap="butt"></path>
+</svg>

package/static/global-components/svg/launch.svg

@@ -0,0 +1,5 @@
+<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 25.9998V39.9998C41 40.552 40.5523 40.9998 40 40.9998H8C7.44772 40.9998 7 40.552 7 39.9998V7.99976C7 7.44747 7.44772 6.99976 8 6.99976H22" />
+<path d="M19.822 28.1776L39.899 8.09961" />
+<path d="M40.9998 20L41.0002 7H28.0008" />
+</svg>

package/static/global-components/svg/qrcode.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4">
+<path d="M24 30V34M24 37V43M43 24H37M34 24H30M7 7H24V24H7V7ZM7 32H16V41H7V32ZM32 32H41V41H32V32ZM32 7H41V16H32V7ZM14 14H17V17H14V14Z" stroke-linecap="butt"></path>
+</svg>

package/static/global-components/svg/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="4">
+<path d="M38.837 18C36.4634 12.1363 30.7148 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C31.4554 40 37.7198 34.9009 39.4959 28M40 8V18H30" stroke-linecap="butt"></path>
+</svg>

package/static/global-styles/mobile.css

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

package/static/global-styles/web.css

@@ -0,0 +1,11 @@
+:root {
+  --modern-sidebar-width: 210px;
+  --modern-aside-width: 192px;
+  --modern-preview-padding: 32px
+}
+
+:root .preview-code div[class*='language-'] {
+  margin: 0;
+  border-radius: 0;
+  height: 100%
+}

package/static/modern-app-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types='@modern-js/module-tools/types' />
+
+declare module 'virtual-meta' {
+  const demos: any[];
+  export { demos };
+}