docs: replace demo preview gif to video

zthxxx · May 1, 2024 · 0a99ef2 · 0a99ef2
1 parent 633938a
commit 0a99ef2
Show file tree

Hide file tree

Showing 22 changed files with 713 additions and 2,140 deletions.
diff --git 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
@@ -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
@@ -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:/zthxxx/react-dev-inspector/raw/master/docs/images/inspect.gif)](https://react-dev-inspector.zthxxx.me/showcase)
+[![inspector-preview](https:/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
@@ -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
@@ -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
@@ -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'
  >
- <Link
- className='docs-img-wrapper'
- href='/showcase'
- target='_blank'
- >
- {!isDev && (
- <Image src={inspectPreview} alt='Background' loading='eager' />
- )}
- </Link>
+ <video
+ src={inspectorPreview}
+ className='docs-preview-video'
+ loop
+ autoPlay
+ muted
+ disablePictureInPicture
+ disableRemotePlayback
+ playsInline
+ controls
+ controlsList='play timeline nofullscreen nodownload novolume noremoteplayback noplaybackrate'
+ />
+
  </Feature>
 
  <Feature

diff --git a/docs/components/show-page/show-page.tsx b/docs/components/show-page/show-page.tsx
@@ -30,6 +30,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 top-4 left-0 rotate-45
+ sm:max-lg:top-[-100px] sm:max-lg:left-[-200px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -40,6 +41,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 bottom-2 right-6 rotate-[135deg]
+ sm:max-lg:bottom-[-100px] sm:max-lg:right-[-100px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -87,7 +89,9 @@ export const ShowPage = () => {
  <span>
  {defaultHotkeys().join(' + ')}
  </span>
- <S.ButtonIcon>🍭</S.ButtonIcon>
+ <S.ButtonIcon>
+ 🍭
+ </S.ButtonIcon>
  </S.InspectorButton>
  </div>
  </div>

diff --git a/docs/global.d.ts b/docs/global.d.ts
@@ -0,0 +1,7 @@
+/**
+ * bundle by file-loader
+ */
+declare module '*.mp4' {
+ const path: string
+ export default path
+}
diff --git a/docs/images/inspector.mp4 b/docs/images/inspector.mp4
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -38,6 +38,19 @@ export default withNextra({
  test: allowedSvgRegex,
  use: ['@svgr/webpack'],
  })
+
+ config.module.rules.push({
+ test: /\.mp4$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ outputPath: 'static/media',
+ publicPath: '/_next/static/media',
+ name: '[name].[hash].[ext]',
+ },
+ },
+ })
+
  return config
  },
  experimental: {
@@ -46,4 +59,7 @@ export default withNextra({
  },
 })
 
+/**
+ * https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
+ */
 export const runtime = 'nodejs'
diff --git a/docs/package.json b/docs/package.json
@@ -39,12 +39,14 @@
  "@types/react-dom": "18.0.9",
  "@zthxxx/tsconfig": "1.0.5",
  "autoprefixer": "10.4.14",
+ "file-loader": "6.2.0",
  "next": "13.4.19",
  "npm-run-all": "4.1.5",
  "postcss": "8.4.26",
  "postcss-load-config": "4.0.1",
  "react-dev-inspector": "workspace:*",
  "rimraf": "3.0.2",
+ "sharp": "0.33.4",
  "tailwindcss": "3.4.4",
  "typescript": "5.2.2"
  }

diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
@@ -4,7 +4,7 @@ title: Introduction - React Dev Inspector
 
 import Image from 'next/image'
 import { Steps, Callout } from 'nextra/components'
-import previewDemo from '@images/inspect.gif'
+import inspectorPreview from '@images/inspector.mp4'
 import workingPipeline from '@images/working-pipeline.svg'
 import { StackBlitz } from '@components/stack-blitz'
 
@@ -40,11 +40,26 @@ like browser extensions and developer toolkits.
 
 Just check out this demo below and you'll get it in a snap.
 
-<Image
+{/* <Image
  className='relative my-2 sm:my-4 lg:my-6 w-full'
  src={previewDemo}
  alt='Preview Demo'
  loading='eager'
+/> */}
+
+<video
+ src={inspectorPreview}
+ className='relative my-2 sm:my-4 lg:my-6 w-full rounded-xl shadow-xl'
+ loop
+ autoPlay
+ muted
+ disablePictureInPicture
+ disableRemotePlayback
+ playsInline
+ controls
+ controlsList='play timeline nofullscreen nodownload novolume noremoteplayback noplaybackrate'
+ x-webkit-airplay='true'
+ webkit-playsinline='true'
 />
 
 ### Try It Online
@@ -59,7 +74,7 @@ Wanna try out the demo right now? Sure, here is the online demo:
 <div
  className="
  relative -mx-6 md:-ml-12 md:-mr-8 xl:-mr-12
- my-3 h-[600px] bg-[#0e0c0e] rounded-lg
+ my-3 h-[600px] bg-[#0e0c0e] rounded-xl
  "
 >
  <StackBlitz

diff --git a/docs/pages/docs/inspector-component.mdx b/docs/pages/docs/inspector-component.mdx
@@ -33,7 +33,7 @@ Triggered by **hotkeys**, also able to be controlled by component props.
 See the default settings or change them below.
 
 Also provides a panel to show **hierarchy** from the inspected element to root.
-It’s triggered by a **right-click** when inspecting (needs version `>=v2.1.0`).
+It’s triggered by a **right-click** when inspecting (version `>=v2.1.0`).
 Called `InspectContextPanel` due to it's like the mouse context-menu
 
 Try it on the [Showcase page](/showcase) to see the effect.
@@ -150,7 +150,7 @@ For more advanced controls, refer to the [Props](#props) section below.
 
 ## Props
 
-This section refers to the interface of [`InspectorProps`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L49)
+This section refers to the interface of [`InspectorProps`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L67)
 for `<Inspector>` component.
 
 ```tsx
@@ -228,7 +228,7 @@ Whether to disable all behavior include hotkeys listening or trigger.
 - **Type:** `inspectAgents?: InspectAgent<Element>[]{:ts}`
  > interface [`InspectAgent{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/types.ts#L33)
 - **Default:** built-in `[new DomInspectAgent()]{:ts}`
- > class [`DomInspectAgent{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts#L17)
+ > class [`DomInspectAgent{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts#L48)
 
 Agent for get inspection info in different React renderer with user interaction.
 
@@ -239,8 +239,8 @@ Agent for get inspection info in different React renderer with user interaction.
 <p className='mt-3 text-sm text-gray-500'>Added in: `v2.0.0`</p>
 
 - **Type:** `onInspectElement?: (params: OnInspectElementParams<Element>) => void{:ts}`
- > interface [`InspectParams{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L29))
-- **Default:** built-in [`gotoServerEditor{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/utils/editor.ts#L12) util function
+ > interface [`InspectParams{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L46))
+- **Default:** built-in [`gotoServerEditor{:ts}`](https:/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/utils/editor.ts#L20) util function
 
 
 Callback when left-clicking on an element, with ensuring the source code info is found,

diff --git a/examples/cra5-with-rewired/src/ShowPage/ShowPage.tsx b/examples/cra5-with-rewired/src/ShowPage/ShowPage.tsx
@@ -25,6 +25,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 top-4 left-0 rotate-45
+ sm:max-lg:top-[-100px] sm:max-lg:left-[-200px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -35,6 +36,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 bottom-2 right-6 rotate-[135deg]
+ sm:max-lg:bottom-[-100px] sm:max-lg:right-[-100px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -82,7 +84,9 @@ export const ShowPage = () => {
  <span>
  {defaultHotkeys().join(' + ')}
  </span>
- <S.ButtonIcon>🍭</S.ButtonIcon>
+ <S.ButtonIcon>
+ 🍭
+ </S.ButtonIcon>
  </S.InspectorButton>
  </div>
  </div>

diff --git a/examples/nextjs-custom-server/components/ShowPage/ShowPage.tsx b/examples/nextjs-custom-server/components/ShowPage/ShowPage.tsx
@@ -25,6 +25,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 top-4 left-0 rotate-45
+ sm:max-lg:top-[-100px] sm:max-lg:left-[-200px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -35,6 +36,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 bottom-2 right-6 rotate-[135deg]
+ sm:max-lg:bottom-[-100px] sm:max-lg:right-[-100px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -82,7 +84,9 @@ export const ShowPage = () => {
  <span>
  {defaultHotkeys().join(' + ')}
  </span>
- <S.ButtonIcon>🍭</S.ButtonIcon>
+ <S.ButtonIcon>
+ 🍭
+ </S.ButtonIcon>
  </S.InspectorButton>
  </div>
  </div>

diff --git a/examples/rspack/src/ShowPage/ShowPage.tsx b/examples/rspack/src/ShowPage/ShowPage.tsx
@@ -25,6 +25,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 top-4 left-0 rotate-45
+ sm:max-lg:top-[-100px] sm:max-lg:left-[-200px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -35,6 +36,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 bottom-2 right-6 rotate-[135deg]
+ sm:max-lg:bottom-[-100px] sm:max-lg:right-[-100px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -82,7 +84,9 @@ export const ShowPage = () => {
  <span>
  {defaultHotkeys().join(' + ')}
  </span>
- <S.ButtonIcon>🍭</S.ButtonIcon>
+ <S.ButtonIcon>
+ 🍭
+ </S.ButtonIcon>
  </S.InspectorButton>
  </div>
  </div>

diff --git a/examples/umi4/src/ShowPage/ShowPage.tsx b/examples/umi4/src/ShowPage/ShowPage.tsx
@@ -25,6 +25,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 top-4 left-0 rotate-45
+ sm:max-lg:top-[-100px] sm:max-lg:left-[-200px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -35,6 +36,7 @@ export const ShowPage = () => {
  <div
  className='
  absolute -z-10 bottom-2 right-6 rotate-[135deg]
+ sm:max-lg:bottom-[-100px] sm:max-lg:right-[-100px]
  [aspect-ratio:1] max-w-[70vw] w-[564px] h-auto
  fill-blue-400/10 stroke-indigo-300/30
  '
@@ -82,7 +84,9 @@ export const ShowPage = () => {
  <span>
  {defaultHotkeys().join(' + ')}
  </span>
- <S.ButtonIcon>🍭</S.ButtonIcon>
+ <S.ButtonIcon>
+ 🍭
+ </S.ButtonIcon>
  </S.InspectorButton>
  </div>
  </div>