docs: improve docs styling (#257)

* chore: group renovate dev deps

* docs: move programmatic measures to advance

* docs: improve styling

* docs: remove autogenerated indexes

* docs: add other improvements

renovate.json

@@ -1,4 +1,12 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended"]
+  "extends": ["config:recommended"],
+  "packageRules": [
+    {
+      "matchDepTypes": ["devDependencies"],
+      "matchUpdateTypes": ["patch", "minor"],
+      "groupName": "devDependencies (non-major)",
+      "automerge": true
+    }
+  ]
 }

website/docs/advanced-usage/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "Advanced Usage",
-  "position": 10,
-  "link": {
-    "type": "generated-index",
-    "slug": "advanced-usage"
-  }
+  "position": 10
 }

website/docs/cloud/_category_.json

@@ -1,8 +1,4 @@
 {
-  "label": "☁️ Flashlight Cloud (flashlight.dev)",
-  "position": 5,
-  "link": {
-    "type": "generated-index",
-    "slug": "/cloud"
-  }
+  "label": "☁️ Run in the Cloud",
+  "position": 5
 }

website/docs/cloud/how-it-works.md

@@ -6,7 +6,7 @@ sidebar_position: 10
 
 ![image](https://github.com/bamlab/flashlight/assets/4534323/b39f8578-13d8-4eda-9ce1-98293b087081)
 
-[flashlight.dev](https://app.flashlight.dev) will run the [`flashlight test`](../test/getting-started.md) command for you to run a [Maestro](https://maestro.mobile.dev/) test on **real** a lower end device on AWS Device Farm.
+[flashlight.dev](https://app.flashlight.dev) will run the [`flashlight test`](../test) command for you to run a [Maestro](https://maestro.mobile.dev/) test on **real** a lower end device on AWS Device Farm.
 
 ## Device used
 

website/docs/cloud/intro.md

@@ -1,11 +1,14 @@
 ---
 sidebar_position: 1
+slug: /cloud
 ---
 
 # Getting started
 
-[flashlight.dev](https://flashlight.dev) is now in open beta! 🥳  
-With just a few clicks, you can get an app start performance score:
+[flashlight.dev](https://flashlight.dev) is now in open beta and is [completely free](./pricing.md)! 🥳  
+With just a few clicks, you can get an app start performance score, as explained below.
+
+Alternatively you can use the [`flashlight cloud`](./cli.md) command to run your own custom tests via CLI.
 
 ## Get your app start performance score
 

website/docs/guides/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "Guides",
-  "position": 9,
-  "link": {
-    "type": "generated-index",
-    "slug": "guides"
-  }
+  "position": 9
 }

website/docs/guides/react-native/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "⚛️ React Native",
-  "position": 4,
-  "link": {
-    "type": "generated-index",
-    "slug": "/guides/react-native"
-  }
+  "position": 4
 }

website/docs/index.md

@@ -12,7 +12,7 @@ sidebar_position: 1
 
 Then the simplest way to get started is to run the `flashlight measure` command:
 
-<video autoplay="" muted controls style={{width: "100%"}}>
+<video autoPlay muted controls style={{width: "100%"}}>
 
   <source src="https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612"/>
 </video>

website/docs/report/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "✨ Customize Reports",
-  "position": 4,
-  "link": {
-    "type": "generated-index",
-    "slug": "report"
-  }
+  "position": 4
 }

website/docs/test/_category_.json

@@ -1,8 +1,4 @@
 {
   "label": "🤖 Automate measures",
-  "position": 3,
-  "link": {
-    "type": "generated-index",
-    "slug": "test"
-  }
+  "position": 3
 }

website/docs/test/getting-started.md

@@ -1,5 +1,6 @@
 ---
 sidebar_position: 1
+slug: /test
 ---
 
 # Getting started
@@ -40,9 +41,9 @@ You'll notice in the previous example that the "Average Test runtime" metric wil
 To go further, use a proper e2e testing framework (Appium, Detox, Maestro...).
 
 If you're not using one yet, we recommend to use [Maestro](https://github.com/mobile-dev-inc/maestro)!
-Check out our [Maestro guide](./maestro) to get started quickly with Flashlight and Maestro.
+Check out our [Maestro guide](./test/maestro) to get started quickly with Flashlight and Maestro.
 
-You can also check the full command options [here](./api)
+You can also check the full command options [here](./test/api)
 
 ## 2. Open the web report
 

website/docusaurus.config.js

@@ -4,6 +4,31 @@
 /* eslint-disable import/no-unresolved */
 import { themes } from "prism-react-renderer";
 
+const googleFonts = [
+  {
+    tagName: "link",
+    attributes: {
+      rel: "preconnect",
+      href: "https://fonts.googleapis.com",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "preconnect",
+      href: "https://fonts.gstatic.com",
+      crossorigin: "anonymous",
+    },
+  },
+  {
+    tagName: "link",
+    attributes: {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap",
+    },
+  },
+];
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Flashlight",
@@ -19,7 +44,6 @@ const config = {
     defaultLocale: "en",
     locales: ["en"],
   },
-
   presets: [
     [
       "classic",
@@ -41,6 +65,7 @@ const config = {
     ],
   ],
 
+  headTags: [...googleFonts],
   scripts: [
     {
       src: "https://plausible.io/js/script.js",
@@ -52,8 +77,7 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // TODO: Replace with your project's social card
-      image: "img/docusaurus-social-card.jpg",
+      image: "img/social.png",
       navbar: {
         title: "",
         logo: {

website/src/css/custom.css

@@ -3,28 +3,45 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
-
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #fff500cc;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #fff500;
+  --ifm-color-primary-dark: #e6dc00;
+  --ifm-color-primary-darker: #d9d000;
+  --ifm-color-primary-darkest: #b3ab00;
+  --ifm-color-primary-light: #fff61a;
+  --ifm-color-primary-lighter: #fff626;
+  --ifm-color-primary-lightest: #fff84d;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-font-family-base: "Open Sans", sans-serif;
+  --ifm-font-family-monospace: "Fira Code", monospace;
+  --ifm-font-color-base: rgba(250, 250, 250);
+  --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__list .menu__list .menu__link {
+  color: var(--ifm-menu-color);
+  font-size: 0.85em;
+  line-height: 1em;
+}
+
+.menu__link.menu__link--active,
+.menu__list .menu__list .menu__link.menu__link--active {
+  color: var(--ifm-color-primary);
+}
+
+body {
+  font-family: var(--ifm-font-family-sans-serif);
 }