Skip to content

Commit

Permalink
Merge branch 'feat/whole-bundle' into docs
Browse files Browse the repository at this point in the history
  • Loading branch information
wqcstrong committed Sep 27, 2024
2 parents e815473 + bdc810d commit 69de3ec
Show file tree
Hide file tree
Showing 14 changed files with 179 additions and 12 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@huolala-tech/page-spy-browser": "^1.9.10",
"@huolala-tech/page-spy-plugin-data-harbor": "^1.3.7",
"@huolala-tech/page-spy-plugin-data-harbor": "^1.3.8",
"@huolala-tech/page-spy-plugin-rrweb": "^1.2.7",
"@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.2",
"@huolala-tech/page-spy-types": "^1.9.6",
"@huolala-tech/react-json-view": "^1.2.5",
"@huolala-tech/request": "^1.1.2",
Expand Down
3 changes: 3 additions & 0 deletions scripts/public-files.sh
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ cp "${root}/node_modules/@huolala-tech/page-spy-plugin-rrweb/dist/iife/index.min
# @huolala-tech/page-spy-plugin-data-harbor
mkdir -p "${target_plugin}/data-harbor"
cp "${root}/node_modules/@huolala-tech/page-spy-plugin-data-harbor/dist/iife/index.min.js" "${root}/public/plugin/data-harbor/index.min.js"
# @huolala-tech/page-spy-plugin-whole-bundle
mkdir -p "${target_plugin}/whole-bundle"
cp "${root}/node_modules/@huolala-tech/page-spy-plugin-whole-bundle/dist/iife/index.min.js" "${root}/public/plugin/whole-bundle/index.min.js"

# source-map
target_sourcemap="${root}/public/source-map"
Expand Down
34 changes: 34 additions & 0 deletions src/assets/image/producthunt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/assets/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
"confirm": "Confirm",
"copied": "Copied",
"prev": "Previous",
"next": "Next"
"next": "Next",
"replay-labs": "Replay Labs"
},
"error": {
"oops": "Oops! Errors happened~",
Expand Down
3 changes: 2 additions & 1 deletion src/assets/locales/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
"confirm": "確認",
"copied": "コピーされました",
"prev": "前のページ",
"next": "次のページ"
"next": "次のページ",
"replay-labs": "リプレイラボ"
},
"error": {
"oops": "おっと!エラーが発生しました。",
Expand Down
3 changes: 2 additions & 1 deletion src/assets/locales/ko.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
"confirm": "확인",
"copied": "복사되었습니다",
"prev": "이전 페이지",
"next": "다음 페이지"
"next": "다음 페이지",
"replay-labs": "리플레이 연구소"
},
"error": {
"oops": "이런! 오류가 발생했습니다.",
Expand Down
3 changes: 2 additions & 1 deletion src/assets/locales/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
"confirm": "确认",
"copied": "已复制",
"prev": "上一页",
"next": "下一页"
"next": "下一页",
"replay-labs": "回放实验室"
},
"error": {
"oops": " 哎呀!发生错误~",
Expand Down
12 changes: 11 additions & 1 deletion src/pages/Layouts/NavMenu/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isClient } from '@/utils/constants';
import { isClient, isDoc } from '@/utils/constants';
import { langType, useLanguage } from '@/utils/useLanguage';
import Icon, { GithubOutlined } from '@ant-design/icons';
import { Space, Divider, MenuProps, Dropdown, ConfigProvider } from 'antd';
Expand Down Expand Up @@ -61,6 +61,16 @@ export const NavMenuOnPc = () => {
'is-dark': isDark,
})}
>
{/* Replay labs */}
{isDoc && (
<Link to="/replay-labs" className="menu-item labs">
<Space align="center">
<Icon component={ReplaySvg} style={{ fontSize: 18 }} />
<span>{t('common.replay-labs')}</span>
</Space>
</Link>
)}
<Divider type="vertical" className="divider-bg" />
{/* Docs */}
<Link to="/docs" className="menu-item doc">
<Space align="center">
Expand Down
6 changes: 5 additions & 1 deletion src/pages/Layouts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { NavMenuOnPc, NavMenuOnMobile } from './NavMenu';
import { useDarkTheme } from '@/utils/useDarkTheme';
import { version } from '../../../package.json';
import { isClient, isDoc } from '@/utils/constants';
import phSvg from '@/assets/image/producthunt.svg';

const { Header, Content } = Layout;
const { Title } = Typography;
Expand Down Expand Up @@ -42,7 +43,10 @@ export const Layouts = () => {
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=429852&theme=light"
alt="PageSpy - Remote&#0032;debugging&#0032;as&#0032;seamless&#0032;as&#0032;local&#0032;debugging&#0046; | Product Hunt"
onError={(e) => {
(e.target as HTMLImageElement).src = phSvg;
}}
alt="PageSpy | Product Hunt"
height="36"
/>
</a>
Expand Down
44 changes: 44 additions & 0 deletions src/pages/ReplayLabs/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.replay-labs {
padding: 40px 80px 400px;
height: 100%;
color: white;
text-align: center;
background: linear-gradient(-45deg, #ee7752, #e33d7d, #6d25e0, #23d5ab);
background-size: 400% 400%;
animation: gradient 30s ease infinite;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
overflow: auto;
h1 {
font-size: 58px;
}
h2 {
font-size: 42px;
color: #e0e0e0;
}
.code-block {
display: inline-block;
margin-block: 40px;
code * {
font-size: 18px;
}
}
.statement {
text-align: right;
&:before {
content: '*';
margin-right: 4px;
}
}
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
49 changes: 49 additions & 0 deletions src/pages/ReplayLabs/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { CodeBlock } from '@/components/CodeBlock';
import './index.less';
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

export const ReplayLabs = () => {
return (
<div className="replay-labs">
<h1 style={{ textAlign: 'right' }}>欢迎来到回放实验室!</h1>
<div className="statement">
您的日志数据不会经过服务器传输、完全在您本地客户端运行,可放心使用
</div>
<h2 style={{ marginTop: 150 }}>一行代码,</h2>
<h2>在项目中接入 PageSpy</h2>
<CodeBlock code='<script src="https://pagespy.org/plugin/whole-bundle/index.min.js" crossorigin="anonymous"></script>' />

<h2 style={{ marginTop: '50vh' }}>接入之后,</h2>
<h2>页面会出现右下角所示的 &quot;问题反馈&quot; 组件</h2>
<h2>试着玩一下~</h2>

<h2 style={{ marginTop: '50vh' }}>一切就绪,</h2>
<h2>点击下方按钮,上传导出的文件</h2>
<Upload
accept=".json"
maxCount={1}
customRequest={async (file) => {
const url = URL.createObjectURL(file.file as File);
const replayURL = `https://pagespy.org/#/replay?url=${url}#Console`;
setTimeout(() => {
window.open(replayURL);
}, 50);
return null;
}}
itemRender={() => null}
>
<Button
size="large"
icon={<UploadOutlined />}
style={{ marginTop: 40 }}
>
上传文件
</Button>
</Upload>

<h2 style={{ marginTop: '50vh' }}>开发者,祝你好运!</h2>
<h2>Talk is cheap, the code is shown.</h2>
</div>
);
};
5 changes: 5 additions & 0 deletions src/routes/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { RoomList } from '@/pages/RoomList';
import { Docs } from '@/pages/Docs';
import { Replay } from '@/pages/Replay';
import { LogList } from '@/pages/LogList';
import { ReplayLabs } from '@/pages/ReplayLabs';

const Devtools = React.lazy(() => import('@/pages/Devtools'));

Expand Down Expand Up @@ -50,6 +51,10 @@ const routes: RouteObject[] = [
path: '/replay',
element: <Replay />,
},
{
path: '/replay-labs',
element: <ReplayLabs />,
},
],
},
{
Expand Down
6 changes: 5 additions & 1 deletion src/utils/useDarkTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { useLocation } from 'react-router-dom';
export const useDarkTheme = () => {
const { pathname } = useLocation();
const isDark = useMemo(() => {
if (pathname === '/' || pathname.startsWith('/docs')) return true;
if (
pathname === '/' ||
['/docs', '/replay-labs'].some((i) => pathname.startsWith(i))
)
return true;
return false;
}, [pathname]);

Expand Down
17 changes: 13 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -752,10 +752,10 @@
"@huolala-tech/page-spy-types" "^1.9.6"
copy-to-clipboard "^3.3.1"

"@huolala-tech/page-spy-plugin-data-harbor@^1.3.7":
version "1.3.7"
resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-data-harbor/-/page-spy-plugin-data-harbor-1.3.7.tgz#d76ea6ee3c4c9b7dd3f6a56304eb948aeda9ba5b"
integrity sha512-SQpL0qhFfcX9e3YVkF/2wMRaVBA6+a9u9xi1qCM3UPtqtAvqqtnmr3QUVwGHHXfTwQg+00qIhRmE5HDuBlZEfw==
"@huolala-tech/page-spy-plugin-data-harbor@^1.3.8":
version "1.3.8"
resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-data-harbor/-/page-spy-plugin-data-harbor-1.3.8.tgz#23cb04a26dbed1b6141e60022f81baa068e1a583"
integrity sha512-SoG5JOP8Ka6/ND0MEvbrKhJNv+c2IjLyOcN4k1KbgXm4k7b2tXXJoYlVu6z2IFci8ROFNHpmybDSlw2MLkQkuQ==
dependencies:
"@babel/runtime" "^7.13.0"
"@huolala-tech/page-spy-base" "^1.0.6"
Expand All @@ -771,6 +771,15 @@
"@huolala-tech/page-spy-types" "^1.9.6"
rrweb "^2.0.0-alpha.4"

"@huolala-tech/page-spy-plugin-whole-bundle@^0.0.2":
version "0.0.2"
resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-whole-bundle/-/page-spy-plugin-whole-bundle-0.0.2.tgz#a40c05f913e7412abe48596aea8baf9b65b8fd80"
integrity sha512-jkSiGdUfYQzSmUvzzPR1x0WJknPY22czDSVDKqaUljiavHDpXedDTRXpqrPIwITLN+jxaYMrOLQWP6gJ8Y6oFw==
dependencies:
"@huolala-tech/page-spy-browser" "^1.9.10"
"@huolala-tech/page-spy-plugin-data-harbor" "^1.3.8"
"@huolala-tech/page-spy-plugin-rrweb" "^1.2.7"

"@huolala-tech/page-spy-types@^1.9.6":
version "1.9.6"
resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-types/-/page-spy-types-1.9.6.tgz#5e4df9618c6ebe5c567f53e3ad60715f1fb77141"
Expand Down

0 comments on commit 69de3ec

Please sign in to comment.