From c965e9f80a96304ba758d20f956d996563384b6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A3=E5=90=92?= Date: Mon, 25 Apr 2022 14:30:10 +0800 Subject: [PATCH] Feat/mobile preview (#332) * feat: mobile preview --- examples/package/build.config.ts | 4 +- examples/package/docs/02-Foo/01-Basic.md | 24 +- examples/package/docs/02-Foo/02-Complex.md | 5 +- examples/package/docs/02-Foo/index.css | 3 + examples/package/package.json | 1 + packages/plugin-docusaurus/package.json | 1 + .../src/Previewer/Mobile.tsx | 64 ++ .../plugin-docusaurus/src/Previewer/Pc.tsx | 98 +++ .../plugin-docusaurus/src/Previewer/index.tsx | 72 +- .../src/Previewer/iphoneX.png | Bin 0 -> 15422 bytes .../src/Previewer/styles.css | 7 + .../src/Previewer/styles.module.css | 50 ++ .../plugin-docusaurus/src/Previewer/svgs.tsx | 10 +- .../src/configureDocusaurus.mts | 10 + packages/plugin-docusaurus/src/index.mts | 5 + .../src/remark/extractCode.js | 24 +- .../src/template/docusaurus.hbs | 10 +- pnpm-lock.yaml | 766 +++++++++--------- 18 files changed, 712 insertions(+), 442 deletions(-) create mode 100644 examples/package/docs/02-Foo/index.css create mode 100644 packages/plugin-docusaurus/src/Previewer/Mobile.tsx create mode 100644 packages/plugin-docusaurus/src/Previewer/Pc.tsx create mode 100644 packages/plugin-docusaurus/src/Previewer/iphoneX.png create mode 100644 packages/plugin-docusaurus/src/Previewer/styles.css diff --git a/examples/package/build.config.ts b/examples/package/build.config.ts index 26c0ce80..7d828c1b 100644 --- a/examples/package/build.config.ts +++ b/examples/package/build.config.ts @@ -2,7 +2,9 @@ import { defineConfig } from '@ice/pkg'; export default defineConfig({ plugins: [ - // '@ice/pkg-plugin-docusaurus', + ['@ice/pkg-plugin-docusaurus', { + mobilePreview: true, + }], // './plugin.js', ], sourceMaps: 'inline', diff --git a/examples/package/docs/02-Foo/01-Basic.md b/examples/package/docs/02-Foo/01-Basic.md index 2d7054de..0f0b8f88 100644 --- a/examples/package/docs/02-Foo/01-Basic.md +++ b/examples/package/docs/02-Foo/01-Basic.md @@ -1,3 +1,7 @@ +--- +hide_table_of_contents: true +--- + ## 今天、明天 import Button from './Button.tsx'; @@ -9,8 +13,9 @@ import React, { useState } from 'react'; import Button from './Button'; export default function App () { + const str = 'abc'; const [state, setState] = useState(0); - + const [testStr] = useState(`${str}-0`); const add = () => { setState(c => c + 1) } @@ -20,6 +25,23 @@ export default function App () { {state} // 我这里加点东西,再加地阿内容个,这是真的真的可以随便 +

在这里多加一点内容吧 { testStr}

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

+

在这里多加一点内容吧

在这里多加一点内容吧

+

在这里多加一点内容吧

+ 跳转 ) diff --git a/examples/package/docs/02-Foo/index.css b/examples/package/docs/02-Foo/index.css new file mode 100644 index 00000000..f30a1dde --- /dev/null +++ b/examples/package/docs/02-Foo/index.css @@ -0,0 +1,3 @@ +* { + color: red; +} \ No newline at end of file diff --git a/examples/package/package.json b/examples/package/package.json index 6ea37388..7733a57f 100644 --- a/examples/package/package.json +++ b/examples/package/package.json @@ -25,6 +25,7 @@ "license": "ISC", "dependencies": { "@docusaurus/preset-classic": "2.0.0-beta.17", + "@swc/helpers": "^0.3.8", "core-js": "^3.21.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/packages/plugin-docusaurus/package.json b/packages/plugin-docusaurus/package.json index d3699067..774ad59d 100644 --- a/packages/plugin-docusaurus/package.json +++ b/packages/plugin-docusaurus/package.json @@ -36,6 +36,7 @@ "fs-extra": "^10.0.0", "handlebars": "^4.7.7", "hast-util-find-and-replace": "3", + "prism-react-renderer": "^1.3.1", "react-tooltip": "^4.2.21", "unist-util-remove": "2.1.0", "unist-util-visit": "2.0.3" diff --git a/packages/plugin-docusaurus/src/Previewer/Mobile.tsx b/packages/plugin-docusaurus/src/Previewer/Mobile.tsx new file mode 100644 index 00000000..f103e112 --- /dev/null +++ b/packages/plugin-docusaurus/src/Previewer/Mobile.tsx @@ -0,0 +1,64 @@ +import React, { useRef } from 'react'; +import CodeBlock from '@theme-original/CodeBlock'; +import styles from './styles.module.css'; +import './styles.css'; + +function ReloadSvg(props) { + return ( + + ); +} + +function FullScreenSvg(props) { + return ( + + ); +} + +function MobilePreview({ code, url }) { + const iframe = useRef(null); + const redirctFullScreen = () => { + window.open(url); + }; + const reloadIframe = () => { + iframe?.current?.contentWindow.location.reload(); + }; + + return ( +
+
+ +
+ +
+
+
 刷新
+
 全屏模式
+
+
+