From f7e44cb012b16bc05edf5dc2245698c273b4eeee Mon Sep 17 00:00:00 2001 From: zthxxx Date: Thu, 2 May 2024 00:55:00 +0800 Subject: [PATCH] docs: replace demo preview gif to video --- .github/workflows/build.yml | 1 + .github/workflows/release.yml | 1 + README.md | 2 +- docs/components/features/style.module.css | 2 +- docs/components/landing-page/home.global.css | 15 +- docs/components/landing-page/landing-page.tsx | 25 +- docs/components/show-page/show-page.tsx | 6 +- docs/global.d.ts | 7 + docs/images/inspector.mp4 | 3 + docs/next.config.mjs | 16 + docs/package.json | 2 + docs/pages/docs/index.mdx | 21 +- docs/pages/docs/inspector-component.mdx | 10 +- .../src/ShowPage/ShowPage.tsx | 6 +- .../components/ShowPage/ShowPage.tsx | 6 +- examples/rspack/src/ShowPage/ShowPage.tsx | 6 +- examples/umi4/src/ShowPage/ShowPage.tsx | 6 +- examples/vite2/src/ShowPage/ShowPage.tsx | 6 +- examples/vite3/src/ShowPage/ShowPage.tsx | 6 +- examples/vite4/src/ShowPage/ShowPage.tsx | 6 +- packages/inspector/README.md | 2 +- .../inspector/src/Inspector/utils/editor.ts | 34 +- pnpm-lock.yaml | 2698 ++++------------- 23 files changed, 740 insertions(+), 2147 deletions(-) create mode 100644 docs/global.d.ts create mode 100644 docs/images/inspector.mp4 diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 00a6377b..99fa3425 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -27,6 +27,7 @@ jobs: with: # Number of commits to fetch. 0 indicates all history. fetch-depth: 1 + lfs: true - name: Prepare for building uses: ./.github/actions/prepare diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2b4b8eba..c3e64d27 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -27,6 +27,7 @@ jobs: with: # Number of commits to fetch. 0 indicates all history. fetch-depth: 1 + lfs: true - name: Prepare for building uses: ./.github/actions/prepare diff --git a/README.md b/README.md index 7c672949..5cdca525 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Just check out this demo below and you'll get it in a snap. Showcase: https://react-dev-inspector.zthxxx.me/showcase -[![inspector-gif](https://github.com/zthxxx/react-dev-inspector/raw/master/docs/images/inspect.gif)](https://react-dev-inspector.zthxxx.me/showcase) +[![inspector-preview](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/inspector.mp4)](https://react-dev-inspector.zthxxx.me/showcase) Wanna try out the demo right now? Sure, here is the online demo: diff --git a/docs/components/features/style.module.css b/docs/components/features/style.module.css index 8aeb4913..850f205f 100644 --- a/docs/components/features/style.module.css +++ b/docs/components/features/style.module.css @@ -12,7 +12,7 @@ color: #000; background-color: white; overflow: hidden; - border-radius: 1.78em; + border-radius: 1.5em; box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%), 0 0 0 1px rgb(0 0 0 / 3%); diff --git a/docs/components/landing-page/home.global.css b/docs/components/landing-page/home.global.css index 7b7305ac..2dcb15a7 100644 --- a/docs/components/landing-page/home.global.css +++ b/docs/components/landing-page/home.global.css @@ -57,14 +57,15 @@ } #preview-card { - aspect-ratio: 125/70; + aspect-ratio: 567/311; color: #fff; text-shadow: 0 0 1rem rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; - padding: 1rem; + padding: 0; background-color: #fefcfe; + overflow: hidden; .docs-img-wrapper { display: flex; @@ -76,7 +77,13 @@ min-width: 95%; border-radius: 20px; } + + .docs-preview-video { + max-width: 100%; + max-height: 100%; + } } + #preview-card img { position: absolute; object-fit: cover; @@ -125,14 +132,14 @@ letter-spacing: -.08rem; } } - @media screen and (max-width: 1024px) { + /* @media screen and (max-width: 1024px) { #preview-card { padding: 0; .docs-img-wrapper { width: 96%; } } - } + } */ @media screen and (max-width: 640px) { #online-editor-demo { diff --git a/docs/components/landing-page/landing-page.tsx b/docs/components/landing-page/landing-page.tsx index 0149fd2b..a52a854c 100644 --- a/docs/components/landing-page/landing-page.tsx +++ b/docs/components/landing-page/landing-page.tsx @@ -2,9 +2,8 @@ import { useState } from 'react' import dynamic from 'next/dynamic' import Image from 'next/image' import Link from 'next/link' -import inspectPreview from '@images/inspect.gif' +import inspectorPreview from '@images/inspector.mp4' import workingPipeline from '@images/working-pipeline.svg' -import { isDev } from '@utils' import { Feature, Features } from '@components/features' import { StackBlitz } from '@components/stack-blitz' import { Marquee } from '@components/marquee' @@ -58,15 +57,19 @@ export const LandingPage = () => { centered href='/showcase' > - - {!isDev && ( - Background - )} - +