add search

Author: yume-chan

blog/2019-05-28-first-blog-post.md

@@ -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.

blog/2019-05-29-long-blog-post.md

@@ -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,
       },
     }),
 };

blog/2021-08-01-mdx-blog-post.mdx

@@ -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": [