@rspress/plugin-preview 1.43.13 → 1.45.0

package/dist/index.d.ts

@@ -11,7 +11,7 @@ declare type IframeOptions = {
      * position of the iframe
      * @default 'follow'
      */
-    position?: 'fixed' | 'follow';
+    position?: 'fixed' | 'follow' | 'fixed-with-per-comp';
     /**
      * dev server port for the iframe
      * @default 7890

package/dist/index.js

@@ -1,10 +1,14 @@
 "use strict";
 var __webpack_modules__ = {
     "@rsbuild/plugin-less": function(module) {
-        module.exports = import("@rsbuild/plugin-less");
+        module.exports = import("@rsbuild/plugin-less").then(function(module) {
+            return module;
+        });
     },
     "@rsbuild/plugin-sass": function(module) {
-        module.exports = import("@rsbuild/plugin-sass");
+        module.exports = import("@rsbuild/plugin-sass").then(function(module) {
+            return module;
+        });
     }
 };
 var __webpack_module_cache__ = {};
@@ -18,12 +22,8 @@ function __webpack_require__(moduleId) {
     return module.exports;
 }
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -31,7 +31,7 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -39,12 +39,10 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -83,60 +81,63 @@ var __webpack_exports__ = {};
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-    function generateEntry(demos, framework, position) {
+    function generateEntryForPerComponent(demos, entryCssPath, framework) {
         const sourceEntry = {};
-        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
-        if ('follow' === position) Object.values(demos).forEach((routes)=>{
+        Object.values(demos).forEach((routes)=>{
             routes.forEach((route)=>{
                 const { id, path: demoPath } = route;
                 const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
                 const solidEntry = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        render(() => <Demo />, document.getElementById('root'));
-        `;
+      import { render } from 'solid-js/web';
+      import ${JSON.stringify(entryCssPath)};
+      import Demo from ${JSON.stringify(demoPath)};
+      render(() => <Demo />, document.getElementById('root'));
+      `;
                 const reactEntry = `
-        import { render } from 'react-dom';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        render(<Demo />, document.getElementById('root'));
-        `;
+      import { render } from 'react-dom';
+      import ${JSON.stringify(entryCssPath)};
+      import Demo from ${JSON.stringify(demoPath)};
+      render(<Demo />, document.getElementById('root'));
+      `;
                 const entryContent = 'react' === framework ? reactEntry : solidEntry;
                 (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
                 sourceEntry[id] = entry;
             });
         });
-        else Object.entries(demos).forEach(([key, routes])=>{
+        return sourceEntry;
+    }
+    function generateEntryForPage(demos, entryCssPath, framework) {
+        const sourceEntry = {};
+        Object.entries(demos).forEach(([key, routes])=>{
             if (0 === routes.length) return;
             const reactContent = `
-        import { render } from 'react-dom';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
-        function App() {
-          return (
-            <div className="preview-container">
-              <div className="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
-            </div>
-          )
-        }
-        render(<App /> , document.getElementById('root'));
-      `;
+      import { render } from 'react-dom';
+      import ${JSON.stringify(entryCssPath)};
+      ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
+      function App() {
+        return (
+          <div className="preview-container">
+            <div className="preview-nav">{"${routes[0].title}"}</div>
+            ${routes.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
+          </div>
+        )
+      }
+      render(<App /> , document.getElementById('root'));
+    `;
             const solidContent = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
-        function App() {
-          return (
-            <div class="preview-container">
-              <div class="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_, index)=>`<Demo_${index} />`).join('\n')}
-            </div>
-          )
-        }
-        render(() => <App /> , document.getElementById('root'));
-      `;
+      import { render } from 'solid-js/web';
+      import ${JSON.stringify(entryCssPath)};
+      ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
+      function App() {
+        return (
+          <div class="preview-container">
+            <div class="preview-nav">{"${routes[0].title}"}</div>
+            ${routes.map((_, index)=>`<Demo_${index} />`).join('\n')}
+          </div>
+        )
+      }
+      render(() => <App /> , document.getElementById('root'));
+    `;
             const renderContent = 'solid' === framework ? solidContent : reactContent;
             const id = `_${toValidVarName(key)}`;
             const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
@@ -145,6 +146,23 @@ var __webpack_exports__ = {};
         });
         return sourceEntry;
     }
+    function generateEntry(demos, framework, position) {
+        const sourceEntry = {};
+        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
+        if ('follow' === position) {
+            const entries = generateEntryForPerComponent(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+        } else if ('fixed' === position) {
+            const entries = generateEntryForPage(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+        } else if ('fixed-with-per-comp' === position) {
+            const entries = generateEntryForPerComponent(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+            const perPageEntries = generateEntryForPage(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, perPageEntries);
+        }
+        return sourceEntry;
+    }
     const node_utils_namespaceObject = require("@rspress/shared/node-utils");
     const convert = function(test) {
         if (null == test) return ok;
@@ -361,7 +379,7 @@ var __webpack_exports__ = {};
                 if (isMobileMode && 'fixed' === position) void 0 !== externalDemoIndex && Object.assign(currentNode, getExternalDemoContent(tempVar));
                 else Object.assign(currentNode, {
                     type: 'mdxJsxFlowElement',
-                    name: 'Container',
+                    name: 'fixed-with-per-comp' === position ? 'ContainerFixedPerComp' : 'Container',
                     attributes: [
                         {
                             type: 'mdxJsxAttribute',
@@ -411,12 +429,12 @@ var __webpack_exports__ = {};
                 if ('hasVisited' in node) return;
                 if (node.lang && previewLanguages.includes(node.lang)) {
                     var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
-                    if ((null === (_node_meta = node.meta) || void 0 === _node_meta ? void 0 : _node_meta.includes('pure')) || !(null === (_node_meta1 = node.meta) || void 0 === _node_meta1 ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
+                    if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
                     const value = injectDemoBlockImport(previewCodeTransform({
                         language: node.lang,
                         code: node.value
                     }), demoBlockComponentPath);
-                    const isMobileMode = (null === (_node_meta2 = node.meta) || void 0 === _node_meta2 ? void 0 : _node_meta2.includes('mobile')) || (null === (_node_meta3 = node.meta) || void 0 === _node_meta3 ? void 0 : _node_meta3.includes('iframe')) || !(null === (_node_meta4 = node.meta) || void 0 === _node_meta4 ? void 0 : _node_meta4.includes('web')) && !(null === (_node_meta5 = node.meta) || void 0 === _node_meta5 ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
+                    const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
                     const id = generateId(pageName, index++);
                     const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.tsx`);
                     constructDemoNode(id, virtualModulePath, node, isMobileMode);
@@ -431,7 +449,7 @@ var __webpack_exports__ = {};
             if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
         };
     };
-    let src_rslib_entry_routeMeta;
+    let src_routeMeta;
     const DEFAULT_PREVIEW_LANGUAGES = [
         'jsx',
         'tsx'
@@ -440,10 +458,7 @@ var __webpack_exports__ = {};
         const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
         const previewMode = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
         const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
-        const globalUIComponents = 'fixed' === position ? [
-            (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
-        ] : [];
-        const getRouteMeta = ()=>src_rslib_entry_routeMeta;
+        const getRouteMeta = ()=>src_routeMeta;
         let lastDemos;
         let devServer;
         let clientConfig;
@@ -456,7 +471,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
+                src_routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -480,7 +495,7 @@ var __webpack_exports__ = {};
                 var _devServer_server;
                 if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin_demos, lastDemos)) return;
                 lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin_demos);
-                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                 devServer = void 0;
                 const sourceEntry = generateEntry(remarkPlugin_demos, framework, position);
                 const outDir = (0, external_node_path_namespaceObject.join)(config.outDir ?? 'doc_build', '~demo');
@@ -515,6 +530,7 @@ var __webpack_exports__ = {};
                     plugins: null == config ? void 0 : config.builderPlugins
                 }, builderConfig);
                 const rsbuildInstance = await (0, core_namespaceObject.createRsbuild)({
+                    callerName: 'rspress',
                     rsbuildConfig
                 });
                 const { pluginSass } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-sass"));
@@ -558,11 +574,11 @@ var __webpack_exports__ = {};
                         setup: (api)=>{
                             api.modifyRsbuildConfig((config)=>{
                                 var _config_output;
-                                if ((null === (_config_output = config.output) || void 0 === _config_output ? void 0 : _config_output.target) === 'web') clientConfig = config;
+                                if ((null == (_config_output = config.output) ? void 0 : _config_output.target) === 'web') clientConfig = config;
                             });
                             api.onCloseDevServer(async ()=>{
                                 var _devServer_server;
-                                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                                 devServer = void 0;
                             });
                         }
@@ -588,16 +604,23 @@ var __webpack_exports__ = {};
                     ]
                 ],
                 globalComponents: [
-                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx')
+                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx'),
+                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'ContainerFixedPerComp.tsx')
                 ]
             },
-            globalUIComponents,
+            globalUIComponents: 'fixed-with-per-comp' === position ? [
+                (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'DeviceFixedPerComp.tsx')
+            ] : 'fixed' === position ? [
+                (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
+            ] : [],
             globalStyles: (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', `${previewMode}.css`)
         };
     }
 })();
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.pluginPreview = __webpack_exports__.pluginPreview;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "pluginPreview"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -9,12 +9,10 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -44,8 +42,16 @@ const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.generateId = __webpack_exports__.generateId;
+exports.injectDemoBlockImport = __webpack_exports__.injectDemoBlockImport;
+exports.normalizeId = __webpack_exports__.normalizeId;
+exports.toValidVarName = __webpack_exports__.toValidVarName;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "generateId",
+    "injectDemoBlockImport",
+    "normalizeId",
+    "toValidVarName"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "1.43.13",
+  "version": "1.45.0",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -17,7 +17,7 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.17",
+    "@rsbuild/core": "~1.3.18",
     "@rsbuild/plugin-babel": "~1.0.5",
     "@rsbuild/plugin-less": "~1.2.4",
     "@rsbuild/plugin-react": "~1.3.1",
@@ -25,11 +25,11 @@
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^3.2.0",
-    "@rspress/shared": "1.43.13",
-    "@rspress/theme-default": "1.43.13"
+    "@rspress/shared": "1.45.0",
+    "@rspress/theme-default": "1.45.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.5.2",
+    "@rslib/core": "~0.6.9",
     "@types/lodash": "^4.17.15",
     "@types/mdast": "^3.0.15",
     "@types/node": "^18.11.17",
@@ -45,7 +45,7 @@
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
-    "@rspress/core": "^1.43.13",
+    "@rspress/core": "^1.45.0",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/Container.tsx

@@ -45,7 +45,7 @@ const Container: React.FC<ContainerProps> = props => {
     <NoSSR>
       <div className="rspress-preview">
         {isMobile === 'true' ? (
-          <div className="rspress-preview-wrapper flex">
+          <div className="rspress-preview-wrapper">
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>

package/static/global-components/ContainerFixedPerComp.tsx

@@ -0,0 +1,101 @@
+import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
+import { type MouseEvent, useCallback, useState } from 'react';
+import IconCode from './icons/Code';
+import { publishIframeUrl } from './useIframeUrlPerComp';
+
+type ContainerProps = {
+  children: React.ReactNode[];
+  isMobile: 'true' | 'false';
+  demoId: string;
+};
+
+const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
+  const { children, demoId } = props;
+  const { page } = usePageData();
+  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 setIframeUrl = () => {
+    const url = getPageUrl();
+    const fixedIframe = document.querySelector('.rspress-fixed-iframe');
+    fixedIframe?.setAttribute('src', url);
+    publishIframeUrl(url);
+  };
+
+  return (
+    <div className="rspress-preview-code" onClick={setIframeUrl}>
+      {children}
+    </div>
+  );
+};
+
+const ContainerFixedPerComp = (props: ContainerProps) => {
+  const { children, isMobile } = props;
+  const [showCode, setShowCode] = useState(false);
+  const lang = useLang();
+
+  const toggleCode = useCallback(
+    (ev: MouseEvent<HTMLButtonElement>) => {
+      if (!showCode) {
+        ev.currentTarget.blur();
+      }
+      setShowCode(!showCode);
+    },
+    [showCode],
+  );
+
+  return (
+    <>
+      {isMobile === 'true' ? (
+        <MobileContainerFixedPerComp {...props} />
+      ) : (
+        <NoSSR>
+          <div className="rspress-preview">
+            <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 ContainerFixedPerComp;

package/static/global-components/Device.scss

@@ -1,11 +1,11 @@
-.fixed-device {
+.rspress-fixed-device {
   display: none;
   position: fixed;
   top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
   overflow: hidden;
 }
 
-.fixed-iframe {
+.rspress-fixed-iframe {
   height: var(--rp-device-height);
   max-height: calc(
     100vh - var(--rp-preview-padding) * 2 - var(--rp-nav-height)
@@ -17,7 +17,7 @@
   border: var(--rp-device-border);
 }
 
-.fixed-operation {
+.rspress-fixed-operation {
   border: var(--rp-device-border);
   border-top: 0;
   border-radius: 0 0 var(--rp-device-border-radius)
@@ -32,7 +32,7 @@
 }
 
 @media (min-width: 960px) {
-  .fixed-device {
+  .rspress-fixed-device {
     display: inline;
     left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
     right: auto;
@@ -40,7 +40,7 @@
 }
 
 @media (min-width: 1280px) {
-  .fixed-device {
+  .rspress-fixed-device {
     display: inline;
     right: var(--rp-preview-padding);
     left: auto;

package/static/global-components/Device.tsx

@@ -72,18 +72,18 @@ export default () => {
   }, [haveDemos, asideWidth, innerWidth]);
 
   return haveDemos ? (
-    <div className="fixed-device">
+    <div className="rspress-fixed-device">
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR
           src={getPageUrl(url)}
-          className="fixed-iframe"
+          className="rspress-fixed-iframe"
           key={iframeKey}
         ></iframe>
       </NoSSR>
       <MobileOperation
         url={getPageUrl(url)}
-        className="fixed-operation"
+        className="rspress-fixed-operation"
         refresh={refresh}
       />
     </div>

package/static/global-components/DeviceFixedPerComp.tsx

@@ -0,0 +1,106 @@
+import {
+  NoSSR,
+  usePageData,
+  useWindowSize,
+  withBase,
+} from '@rspress/core/runtime';
+import { useCallback, useEffect, useState } from 'react';
+// @ts-ignore
+import { normalizeId } from '../../dist/utils';
+import MobileOperation from './common/mobile-operation';
+import { publishIframeUrl, useIframeUrlPerComp } from './useIframeUrlPerComp';
+import './Device.scss';
+
+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 initialUrl = getPageUrl(url);
+
+  const iframeUrl = useIframeUrlPerComp() ?? initialUrl;
+
+  const resetIframeUrl = useCallback(() => {
+    publishIframeUrl(initialUrl);
+  }, [initialUrl, url]);
+
+  useEffect(() => {
+    publishIframeUrl(initialUrl);
+  }, []);
+
+  const [asideWidth, setAsideWidth] = useState('0px');
+  const { width: innerWidth } = useWindowSize();
+  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('--rp-aside-width');
+      setAsideWidth(defaultAsideWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    const node = document.querySelector('.rspress-doc-container');
+    const { style } = document.documentElement;
+    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');
+      }
+      style.setProperty('--rp-aside-width', '0px');
+    } else {
+      node?.removeAttribute('style');
+      style.setProperty('--rp-aside-width', asideWidth);
+    }
+  }, [haveDemos, asideWidth, innerWidth]);
+
+  return haveDemos ? (
+    <div className="rspress-fixed-device">
+      <NoSSR>
+        <iframe
+          // refresh when load the iframe, then remove NoSSR
+          src={iframeUrl}
+          className="rspress-fixed-iframe"
+          key={iframeKey}
+        ></iframe>
+      </NoSSR>
+      <MobileOperation
+        url={iframeUrl}
+        className="rspress-fixed-operation"
+        refresh={refresh}
+        goBack={iframeUrl !== initialUrl ? resetIframeUrl : undefined}
+      />
+    </div>
+  ) : null;
+};

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

@@ -12,6 +12,7 @@
   padding: 16px 0;
 
   &-wrapper {
+    display: flex;
     border: 1px solid var(--rp-container-details-border);
     border-radius: var(--rp-radius-small);
   }

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

@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import IconBack from '../icons/Back';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
@@ -15,21 +16,24 @@ import './index.scss';
 const locales = {
   zh: {
     refresh: '刷新页面',
+    goBack: '返回',
     open: '在新页面打开',
   },
   en: {
     refresh: 'Refresh',
+    goBack: 'Go back',
     open: 'Open in new page',
   },
 };
 
-export default (props: {
+const MobileOperation = (props: {
   url: string;
   className?: string;
-  refresh: () => void;
+  refresh?: () => void;
+  goBack?: () => void;
 }) => {
+  const { url, className = '', refresh, goBack } = props;
   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;
@@ -80,22 +84,46 @@ export default (props: {
 
   return (
     <div className={`rspress-preview-operations mobile ${className}`}>
-      <button onClick={refresh} aria-label={t.refresh}>
-        <IconRefresh />
-      </button>
+      {goBack && (
+        <button
+          onClick={goBack}
+          aria-label={t.goBack}
+          className="rspress-preview-operations-back"
+        >
+          <IconBack />
+        </button>
+      )}
+      {refresh && (
+        <button
+          onClick={refresh}
+          aria-label={t.refresh}
+          className="rspress-preview-operations-refresh"
+        >
+          <IconRefresh />
+        </button>
+      )}
       <div className="relative" ref={triggerRef}>
         {showQRCode && (
           <div className="rspress-preview-qrcode">
             <QRCodeSVG value={url} size={96} />
           </div>
         )}
-        <button onClick={toggleQRCode}>
+        <button
+          onClick={toggleQRCode}
+          className="rspress-preview-operations-qrcode"
+        >
           <IconQrcode />
         </button>
       </div>
-      <button onClick={openNewPage} aria-label={t.open}>
+      <button
+        onClick={openNewPage}
+        aria-label={t.open}
+        className="rspress-preview-operations-open"
+      >
         <IconLaunch />
       </button>
     </div>
   );
 };
+
+export default MobileOperation;

package/static/global-components/icons/Back.tsx

@@ -0,0 +1,31 @@
+const Back = ({ color = 'currentColor', ...props }) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      strokeWidth="4"
+      {...props}
+    >
+      <path
+        d="M12.9998 8L6 14L12.9998 21"
+        stroke="#333"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984"
+        stroke="#333"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Back;

package/static/global-components/useIframeUrlPerComp.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useForceRefresh = () => {
+  const [_, setKey] = useState(0);
+
+  const forceRefresh = useCallback(() => {
+    return setKey(prevKey => prevKey + 1);
+  }, [setKey]);
+
+  return forceRefresh;
+};
+
+let iframeUrl: string | undefined;
+
+const observer = new Map<string, () => void>();
+
+const publishIframeUrl = (url: string) => {
+  iframeUrl = url;
+  for (const [, refresh] of observer) {
+    refresh();
+  }
+};
+
+const useIframeUrlPerComp = () => {
+  const forceRefresh = useForceRefresh();
+
+  useEffect(() => {
+    const id = Math.random().toString(36).slice(5);
+    observer.set(id, forceRefresh);
+
+    return () => {
+      observer.delete(id);
+    };
+  }, []);
+
+  return iframeUrl;
+};
+
+export { useIframeUrlPerComp, publishIframeUrl };