docs: add light mode (#328)

* docs: BAM => Theodo Apps * docs: upgrade docusaurus * docs: add back copy button on install commands * docs: add light mode * docs: add video component * test: fix flaky test
bamlab · Oct 28, 2024 · 2962d75 · 2962d75
1 parent 4643b9a
commit 2962d75
Show file tree

Hide file tree

Showing 10 changed files with 243 additions and 249 deletions.
diff --git a/packages/commands/measure/src/__tests__/measure.test.tsx b/packages/commands/measure/src/__tests__/measure.test.tsx
@@ -95,8 +95,10 @@ describe("flashlight measure interactive", () => {
     // Simulate measures being emitted on the device
     act(() => emitMeasures());
 
+    // We should now see 1000ms of measures: 3 measures at 0/500/1000ms
+    await screen.findByText("1000 ms");
     // Find the score!
-    await screen.findByText("47");
+    screen.getByText("47");
 
     // expand threads
     await screen.findByText("Other threads");
@@ -106,8 +108,8 @@ describe("flashlight measure interactive", () => {
 
     // Stop measuring
     fireEvent.click(screen.getByText("Stop Measuring"));
-    await waitFor(() => expect(aTraceMock.kill).toBeCalled());
-    await waitFor(() => expect(perfProfilerMock.kill).toBeCalled());
+    await waitFor(() => expect(aTraceMock.kill).toHaveBeenCalled());
+    await waitFor(() => expect(perfProfilerMock.kill).toHaveBeenCalled());
 
     // Close apps
 

diff --git a/website/docs/cloud/pricing.md b/website/docs/cloud/pricing.md
@@ -4,10 +4,10 @@ sidebar_position: 15
 
 # Pricing
 
-`flashlight cloud` and [flashlight.dev](https://app.flashlight.dev) are running with BAM's servers and AWS Device Farm account.
+`flashlight cloud` and [flashlight.dev](https://app.flashlight.dev) are running with Theodo's servers and AWS Device Farm account.
 
 We offer those services **completely free** 🥳  
-However, this means there can be a queue while waiting for devices to be available. (BAM's projects and clients also have priority.)
+However, this means there can be a queue while waiting for devices to be available. (Theodo's projects and clients also have priority.)
 
 ### Going further
 

diff --git a/website/docs/index.md b/website/docs/index.md
@@ -8,14 +8,13 @@ sidebar_position: 1
 
 ## Simple usage
 
-🔌 Plug-in an Android device to your computer. Open any app.
+🔌 Plug-in an Android device to your computer. Open any app. Then the simplest way to get started is to run the `flashlight measure` command:
 
-Then the simplest way to get started is to run the `flashlight measure` command:
+```bash
+flashlight measure
+```
 
-<video autoPlay muted controls style={{width: "100%"}}>
-
-  <source src="https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612"/>
-</video>
+<Video url="https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612"/>
 
 ## Going further
 

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -83,7 +83,8 @@ const config = {
         logo: {
           href: "https://flashlight.dev",
           alt: "Flashlight",
-          src: "img/logo.svg",
+          src: "img/logo-black.svg",
+          srcDark: "img/logo.svg",
         },
         items: [
           {
@@ -116,22 +117,16 @@ const config = {
             href: "https://github.com/bamlab/flashlight",
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} BAM. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Theodo Apps. Built with Docusaurus.`,
       },
 
       prism: {
         darkTheme: themes.vsDark,
+        additionalLanguages: ["bash", "powershell"],
       },
 
-      // forceDarkMode: true,
-      // darkMode: true,
       colorMode: {
-        // "light" | "dark"
         defaultMode: "dark",
-
-        // Hides the switch in the navbar
-        // Useful if you want to support a single color mode
-        disableSwitch: true,
       },
     }),
 };

diff --git a/website/package.json b/website/package.json
@@ -15,17 +15,17 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.1.1",
-    "@docusaurus/preset-classic": "^3.1.1",
-    "@docusaurus/theme-search-algolia": "^3.1.1",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/theme-search-algolia": "^3.5.2",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.0",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/module-type-aliases": "^3.5.2",
     "@tsconfig/docusaurus": "^2.0.2",
     "typescript": "^5.4.2"
   },

diff --git a/website/src/components/Install.mdx b/website/src/components/Install.mdx
@@ -8,12 +8,10 @@ import CodeBlock from "@theme/CodeBlock";
 
 <Tabs>
   <TabItem value="unix" label="macOS/Linux" default>
-    <CodeBlock language="bash">curl https://get.flashlight.dev | bash</CodeBlock>
-  </TabItem>
-  <TabItem value="windows" label="Windows">
-    <CodeBlock language="bash">iwr https://get.flashlight.dev/windows -useb | iex</CodeBlock>
-  </TabItem>
-</Tabs>
+
+    ```bash
+    curl https://get.flashlight.dev | bash
+    ```
 
 :::note macOS arm64 support
 On a macOS with arm64 architecture (Silicon), you'll need to install Rosetta if you don't have it:
@@ -22,3 +20,13 @@ On a macOS with arm64 architecture (Silicon), you'll need to install Rosetta if
 
 More details [here](https://github.com/bamlab/flashlight/issues/199#issuecomment-2351870408)
 :::
+
+  </TabItem>
+  <TabItem value="windows" label="Windows">
+
+    ```powershell
+    iwr https://get.flashlight.dev/windows -useb | iex
+    ```
+
+  </TabItem>
+</Tabs>
diff --git a/website/src/components/Video.tsx b/website/src/components/Video.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Video = ({ url }: { url: string }) => (
+  <video autoPlay muted controls style={{ width: "100%" }}>
+    <source src={url} />
+  </video>
+);
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -7,6 +7,8 @@
 :root {
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-color-primary: #ff039b;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,10 +27,10 @@
   --ifm-heading-color: rgba(255, 255, 255);
   --ifm-heading-font-family: "Merriweather", serif;
   --ifm-menu-color: rgba(200, 200, 200);
-}
 
-.menu__link {
-  color: rgba(255, 255, 255);
+  .menu__link {
+    color: rgba(255, 255, 255);
+  }
 }
 
 .menu__list .menu__list .menu__link {

diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
@@ -2,11 +2,13 @@
 import MDXComponents from "@theme-original/MDXComponents";
 import Contact from "@site/src/components/Contact.mdx";
 import Install from "@site/src/components/Install.mdx";
+import { Video } from "@site/src/components/Video";
 
 const _module = {
   ...MDXComponents,
   Contact,
   Install,
+  Video,
 };
 
 export default _module;