add search

tango-adb · Feb 24, 2024 · a6590a9 · a6590a9
1 parent 1656d3e
commit a6590a9
Show file tree

Hide file tree

Showing 15 changed files with 5,342 additions and 1,761 deletions.
diff --git a/blog/2019-05-28-first-blog-post.md b/blog/2019-05-28-first-blog-post.md
diff --git a/blog/2019-05-29-long-blog-post.md b/blog/2019-05-29-long-blog-post.md
diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx
diff --git a/docs/app-manager.md → docs/app-manager.mdx b/docs/app-manager.md → docs/app-manager.mdx
diff --git a/docs/file-browser.md → docs/file-browser.mdx b/docs/file-browser.md → docs/file-browser.mdx
diff --git a/docs/intro.md → docs/intro.mdx b/docs/intro.md → docs/intro.mdx
@@ -17,19 +17,19 @@ After first loading the page, Tango can work offline. You can disconnect from th
 
 ## Quick Start
 
-1. [Enable Developer options and USB debugging](./prepare.md) on the device you want to control.
+1. [Enable Developer options and USB debugging](./prepare.mdx) on the device you want to control.
 2. Connect the device to your computer using a USB cable. For running Tango on Android, use a C-to-C or OTG cable, Tango can't control the device from itself.
 3. Open [Tango](https://tangoapp.dev) in a supported browser on your computer.
 4. Follow on-screen instructions to pair the device. If the device is not detected, make sure you have enabled USB debugging and connected the device to your computer.
 5. The first time you connect to a device, you will be asked to authorize the connection on the device. Follow the instructions on the device.
 
-Having issues while connecting? See [Troubleshooting](./troubleshooting.md).
+Having issues while connecting? See [Troubleshooting](./troubleshooting.mdx).
 
 ## Features
 
-* [**Device Overview**](./overview.md): Display basic information of the device like IP address, battery level, storage and memory usages.
-* [**File Browser**](./file-browser.md): Browse, download and upload files on device.
-* [**App Manager**](./app-manager.md): List, install and uninstall apps on device.
-* [**Screen Mirror**](./screen-mirror.md): Mirror device screen and control the device using mouse and keyboard.
+* [**Device Overview**](./overview.mdx): Display basic information of the device like IP address, battery level, storage and memory usages.
+* [**File Browser**](./file-browser.mdx): Browse, download and upload files on device.
+* [**App Manager**](./app-manager.mdx): List, install and uninstall apps on device.
+* [**Screen Mirror**](./screen-mirror.mdx): Mirror device screen and control the device using mouse and keyboard.
 * Logcat and bugreport tools for debugging the device or apps on it.
 * More features are coming soon.
diff --git a/docs/manage-device.md → docs/manage-device.mdx b/docs/manage-device.md → docs/manage-device.mdx
diff --git a/docs/overview.md → docs/overview.mdx b/docs/overview.md → docs/overview.mdx
diff --git a/docs/prepare.md → docs/prepare.mdx b/docs/prepare.md → docs/prepare.mdx
diff --git a/docs/screen-mirror.md → docs/screen-mirror.mdx b/docs/screen-mirror.md → docs/screen-mirror.mdx
diff --git a/docs/share-device.md → docs/share-device.mdx b/docs/share-device.md → docs/share-device.mdx
diff --git a/docs/troubleshooting.md → docs/troubleshooting.mdx b/docs/troubleshooting.md → docs/troubleshooting.mdx
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,8 +1,170 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import { themes } from "prism-react-renderer";
+
+const lightTheme = {
+  ...themes.github,
+  styles: [
+    ...themes.github.styles,
+    {
+      types: ["title"],
+      style: {
+        color: "#0550AE",
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["parameter"],
+      style: {
+        color: "#953800",
+      },
+    },
+    {
+      types: ["boolean", "rule", "color", "number", "constant", "property"],
+      style: {
+        color: "#005CC5",
+      },
+    },
+    {
+      types: ["atrule", "tag"],
+      style: {
+        color: "#22863A",
+      },
+    },
+    {
+      types: ["script"],
+      style: {
+        color: "#24292E",
+      },
+    },
+    {
+      types: ["operator", "unit", "rule"],
+      style: {
+        color: "#D73A49",
+      },
+    },
+    {
+      types: ["font-matter", "string", "attr-value"],
+      style: {
+        color: "#C6105F",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "#116329",
+      },
+    },
+    {
+      types: ["attr-name"],
+      style: {
+        color: "#0550AE",
+      },
+    },
+    {
+      types: ["keyword"],
+      style: {
+        color: "#CF222E",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "#8250DF",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "#6F42C1",
+      },
+    },
+    {
+      types: ["variable"],
+      style: {
+        color: "#E36209",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "#6B6B6B",
+      },
+    },
+  ],
+};
+
+const darkTheme = {
+  plain: {
+    color: "#D4D4D4",
+    backgroundColor: "#212121",
+  },
+  styles: [
+    ...themes.vsDark.styles,
+    {
+      types: ["title"],
+      style: {
+        color: "#569CD6",
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["property", "parameter"],
+      style: {
+        color: "#9CDCFE",
+      },
+    },
+    {
+      types: ["script"],
+      style: {
+        color: "#D4D4D4",
+      },
+    },
+    {
+      types: ["boolean", "arrow", "atrule", "tag"],
+      style: {
+        color: "#569CD6",
+      },
+    },
+    {
+      types: ["number", "color", "unit"],
+      style: {
+        color: "#B5CEA8",
+      },
+    },
+    {
+      types: ["font-matter"],
+      style: {
+        color: "#CE9178",
+      },
+    },
+    {
+      types: ["keyword", "rule"],
+      style: {
+        color: "#C586C0",
+      },
+    },
+    {
+      types: ["regex"],
+      style: {
+        color: "#D16969",
+      },
+    },
+    {
+      types: ["maybe-class-name"],
+      style: {
+        color: "#4EC9B0",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "#4FC1FF",
+      },
+    },
+  ],
+};
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -32,6 +194,28 @@ const config = {
     locales: ['en'],
   },
 
+  markdown: {
+    mdx1Compat: {
+      admonitions: false,
+      comments: false,
+      headingIds: false,
+    },
+    mermaid: true,
+  },
+
+  themes: [
+    "@docusaurus/theme-mermaid",
+    [
+      require.resolve("@easyops-cn/docusaurus-search-local"),
+      /** @type {Record<string, unknown>} */ (
+        /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */ ({
+          docsRouteBasePath: "/",
+          highlightSearchTermsOnTargetPage: true,
+        })
+      ),
+    ],
+  ],
+
   presets: [
     [
       'classic',
@@ -81,7 +265,7 @@ const config = {
           // { to: '/blog', label: 'Blog', position: 'left' },
           {
             href: 'https://github.com/tango-adb/help-center',
-            label: 'GitHub',
+            label: 'Source code',
             position: 'right',
           },
         ],
@@ -123,8 +307,8 @@ const config = {
         copyright: `Copyright © 2021-${new Date().getFullYear()} Tango ADB. Built with Docusaurus.`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: lightTheme,
+        darkTheme: darkTheme,
       },
     }),
 };

diff --git a/package.json b/package.json
@@ -15,18 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/theme-classic": "^3.1.1",
+    "@docusaurus/theme-mermaid": "^3.1.1",
+    "@docusaurus/types": "^3.1.1",
+    "@easyops-cn/docusaurus-search-local": "^0.40.1",
+    "@mdx-js/react": "^3.0.1",
+    "@types/node": "^20.11.20",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@tsconfig/docusaurus": "^2.0.2",
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [