docs: replace demo preview gif to video

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

Hide file tree

Showing 20 changed files with 367 additions and 2,056 deletions.
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://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
@@ -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,6 +39,7 @@
     "@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",

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://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L49)
+This section refers to the interface of [`InspectorProps`](https://github.com/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://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/types.ts#L33)
 - **Default:** built-in `[new DomInspectAgent()]{:ts}`
-  > class [`DomInspectAgent{:ts}`](https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts#L17)
+  > class [`DomInspectAgent{:ts}`](https://github.com/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://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L29))
-- **Default:** built-in [`gotoServerEditor{:ts}`](https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/utils/editor.ts#L12) util function
+  > interface [`InspectParams{:ts}`](https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.tsx#L46))
+- **Default:** built-in [`gotoServerEditor{:ts}`](https://github.com/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>