fix(doc): a few patches to the doc site

Summary:
A few changes:
 * Add more documentation for the `memlab measure` command.
 * Website accommodates the mobile UI size

Also related to #116

Reviewed By: twobassdrum

Differential Revision: D54870111

fbshipit-source-id: 3ff62d6b0f999ce0519e8e2e037a10d10bc56a87

packages/cli/src/commands/RunMeasureCommand.ts

@@ -84,6 +84,18 @@ export default class RunMeasureCommand extends BaseCommand {
     ];
   }
 
+  getDocumenation(): string {
+    return (
+      'In some web apps, the heap size can show considerable variability' +
+      ' across various runs. This fluctuation can often make it hard to' +
+      ' understand the impact of memory leaks. The introduction of the measure' +
+      ' mode aims to address this challenge by executing the same scenario' +
+      ' repetitively, therefore getting multiple data points of JavaScript heap' +
+      ' sizes. This can help understand if the heap size movements during' +
+      ' specific runs come from memory-related issues or just noise.'
+    );
+  }
+
   async run(options: CLIOptions): Promise<void> {
     const numRuns = NumberOfRunsOption.getParsedOption(
       options.configFromOptions,

website/docs/cli/CLI-commands.md

@@ -501,6 +501,8 @@ memlab reset
 
 Run test scenario in measure mode
 
+In some web apps, the heap size can show considerable variability across various runs. This fluctuation can often make it hard to understand the impact of memory leaks. The introduction of the measure mode aims to address this challenge by executing the same scenario repetitively, therefore getting multiple data points of JavaScript heap sizes. This can help understand if the heap size movements during specific runs come from memory-related issues or just noise.
+
 ```bash
 memlab measure --scenario <TEST_SCENARIO_FILE>
 ```

website/src/lib/useWindowSize.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall web_perf_infra
+ */
+
+import {useEffect, useState} from 'react';
+
+// deal with SSR
+const _window =
+  typeof window !== 'undefined'
+    ? window
+    : {
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        innerWidth: 0,
+        innerHeight: 0,
+      };
+
+function getWindowSize() {
+  const {innerWidth: width, innerHeight: height} = _window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(getWindowSize());
+    }
+
+    _window.addEventListener('resize', handleResize);
+    return () => _window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}

website/src/pages/index.tsx

@@ -21,6 +21,7 @@ import TerminalReplay from '../components/TerminalReplay';
 import Showcase from '../components/Showcase';
 import * as Three from 'three';
 import NET from 'vanta/dist/vanta.net.min';
+import useWindowSize from '../lib/useWindowSize';
 
 import nomralizeTypeSpeed from '../lib/TypeSpeedNormalization';
 import homePageStdouts from '../data/HomePageMainTerminal';
@@ -128,12 +129,15 @@ function Feature({imageUrl, title, description, docUrl}) {
 }
 
 const stdouts = nomralizeTypeSpeed(homePageStdouts);
+const MIN_POINTS = 6;
+const MAX_POINTS = 16;
 
 export default function Home(): React.ReactElement {
   const {siteConfig} = useDocusaurusContext();
   const headerContainerID = 'css-animated-bg-container';
   const [vantaEffect, setVantaEffect] = useState(null);
   const headerRef = useRef(null);
+  const {width} = useWindowSize();
 
   useEffect(() => {
     if (!vantaEffect) {
@@ -147,17 +151,22 @@ export default function Home(): React.ReactElement {
           minHeight: 200.0,
           minWidth: 200.0,
           scale: 0.9,
-          scaleMobile: 0.8,
+          scaleMobile: 0.4,
           color: 0x63822b,
           backgroundColor: 0xf0db4f,
-          points: 12.0,
+          points: Math.min(
+            Math.max(Math.floor((12.0 * width) / 1800), MIN_POINTS),
+            MAX_POINTS,
+          ),
           maxDistance: 30.0,
           spacing: 22.0,
         }),
       );
     }
     return () => {
-      if (vantaEffect) vantaEffect.destroy();
+      if (vantaEffect != null) {
+        vantaEffect.destroy();
+      }
     };
   }, [vantaEffect]);