add more info and images

blog/2924-05-07-cloudflare-and-alipay/index.mdx

@@ -0,0 +1,47 @@
+---
+authors: simon
+---
+
+# Move the hosting to Cloudflare and accept Alipay for China users
+
+We are constantly working to improve the user experience and make it easier for everyone to use Tango.
+
+Today, we are happy to announce that we have moved the hosting to Cloudflare and now accept Alipay for China users.
+
+{/* truncate */}
+
+## Cloudflare CDN and edge functions
+
+We have moved the hosting to Cloudflare to provide a faster and more reliable connection for our users across the globe. Not only does Cloudflare provide a CDN network to cache and deliver static assets faster, the edge functions also allow us to handle dynamic API calls closer to you. We know some users had troubles loading Tango in the past, and we hope this change will improve the experience for everyone.
+
+In addition, we have optimized the website code to reduce its size. The updating process now downloads 10% less data, and the update time can be reduced by up to 50%.
+
+In the future, we plan to move our sharing coordination service to Cloudflare as well to improve the device sharing feature. We also plan to add a forward proxy to enable device sharing in network conditions where a direct peer-to-peer connection can't be established. Stay tuned for more updates!
+
+## Accept Alipay for China users
+
+Because of PayPal's restrictions, we were unable to accept payments from China users, plus, PayPal is not a popular payment method in China. To make it easier for China users to purchase Tango, we have added Alipay as a payment method. Now, China users can pay with Alipay directly on our website.
+
+Because we are a startup, Alipay only allows us to accept one-time payments. We will add recurring payments once we meet their requirements.
+
+The free trial works differently for Alipay users: for the first payment, you will be charged immediately, but get one extra month (30 days) for free.
+
+In the future, we plan to also add WeChat Pay for users who prefer that.
+
+## 接受支付宝付款
+
+根据国家外汇管制的要求，我们的 PayPal 账户不支持接收中国用户的付款。现在我们添加了支付宝付款。
+
+支付宝现在只支持单笔付款，我们会在满足支付宝的要求后添加自动续费功能。
+
+使用支付宝付款时免费试用的生效方式和 PayPal 不同：第一次付款会立即扣费，但是会额外赠送一个月（30天）的时长。
+
+我们计划在未来添加微信支付。
+
+## Bug fixes and improvements
+
+We have fixed some bugs and made some improvements:
+
+* Fixed the issue where taking screenshots in screen mirror produces a black image.
+* Updated Scrcpy version to improve compatibility with Android 14 and 15.
+* Added support for AV1 codec in screen mirroring. AV1 provides better compression efficiency than H.264 and VP9, and it is royalty-free. AV1 is supported on Android 14, but as it's new, it may not work on all devices, or it may have performance issues. If your device supports AV1 encoding and your computer supports AV1 decoding, the option will be available in the **Video** section to let you try it out.

docs/screen-mirror/_pro.tsx → docs/_pro.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import styles from './_pro.module.css';
 
-export default function Pro() {
+export default function Pro({ feature }: { feature?: string }) {
   return (
     <p>
       <span className={styles.pro}>Pro</span>
-      <span>This feature requires Pro or a higher plan.</span>
+      <span>{feature ?? "This feature"} requires Pro or a higher plan.</span>
     </p>
   );
 }

docs/app-manager.mdx

@@ -12,7 +12,7 @@ There are several filters to help you find the app you want:
 
 * **System App**: show only system apps or third-party apps. System apps are the apps that come with the device and can't be uninstalled.
 * **Can be launched**: whether the app has a main activity that can be launched. Apps that can be launched are usually the ones you can see on your home screen or app drawer.
-* **Can be backed up**: whether the app supports the legacy backup feature. Most apps don't support backup, and this filter is only useful for a few apps.
+* **Allow backup**: whether the app supports the legacy backup feature. Most apps don't support backup, and this filter is only useful for a few apps.
 * **Split APK**: whether the app uses split APKs. This will affect the behavior of the **Export APK** function.
 
 Each filter has three options:
@@ -27,13 +27,40 @@ If multiple filters are in **Yes** or **No** state, only apps that match (or not
 
 If you have an APK file on your computer, you can install it on the device by clicking the **Install APK** button.
 
-It can also install split APKs, including `.apks`, `.xapk`, and `.apkm` files.
+You can also install split APKs, including `.apks`, `.xapk`, and `.apkm` files.
 
 ## Command bar
 
 The command bar has the following buttons:
 
-* **Uninstall**: uninstall the selected apps. It's disabled for system apps.
-* **Backup**: create a backup of the selected apps. App Backup is a deprecated feature, and most apps can't be backed up. For apps that allow backup, the backup file will contain the app's data, settings, and optionally the APK file.
-* **Export APK**: export the APK file of the selected apps. The APK file can be installed on other devices. If the app uses split APKs, the exported file will be a `.apks` file including all installed features.
-* **Details**: show details of the selected app. Including a breakdown of the app's storage usage.
+### Uninstall
+
+Uninstall the selected apps. You can select multiple apps using the checkboxes on the left side.
+
+System apps can't be uninstalled.
+
+![Uninstall dialog](uninstall.png)
+
+### Backup
+
+Create a backup of the selected apps.
+
+App Backup is a deprecated feature, and most apps can't be backed up. For apps that allow backup, the backup file will contain the app's data, settings, and optionally the APK file.
+
+A confirmation dialog will be shown on device before the backup starts.
+
+The created backup file can be restored using the **Restore Backup** button.
+
+Tango doesn't support creating backups with password protection.
+
+### Export APK
+
+Export the APK file of the selected apps. The exported APK file can be installed on other devices.
+
+If the app uses split APKs, the exported file will be a `.apks` file including all installed features.
+
+If multiple apps are selected, the exported file will be a ZIP file containing all APKs.
+
+### Details
+
+Show details of the selected app. Including a breakdown of the app's storage usage.

docs/manage-device.mdx

@@ -12,14 +12,18 @@ The first time you open Tango, you will see the instructions for pairing a devic
 
 If you have another device you want to use with Tango, follow these steps:
 
-* If Tango has already connected to a device, click the <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" style={{verticalAlign:"middle"}} viewBox="0 0 20 20"><path fill="currentColor" d="M12.146 3.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L14.293 7H4.5a.5.5 0 0 1 0-1h9.793l-2.147-2.146a.5.5 0 0 1 0-.708Zm-4.292 7a.5.5 0 0 1 0 .708L5.707 13H15.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0Z"/></svg> button on the top left corner, after the device name. Then click **Pair another device**.
+import ArrowSwap from './arrow-swap.svg';
+
+* If Tango has already connected to a device, click the <ArrowSwap/> button on the top left corner, after the device name. Then click **Pair another device**.
 * If you are on the **All devices are unavailable** page, click the **Pair another device** button.
 
 Then follow the instructions on the screen to pair the device.
 
 ## Switch between devices
 
-If multiple devices are available, Tango automatically connects to the most recently used device. You can view and switch between connected devices by clicking the <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" style={{verticalAlign:"middle"}} viewBox="0 0 20 20"><path fill="currentColor" d="M12.146 3.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L14.293 7H4.5a.5.5 0 0 1 0-1h9.793l-2.147-2.146a.5.5 0 0 1 0-.708Zm-4.292 7a.5.5 0 0 1 0 .708L5.707 13H15.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0Z"/></svg> button on the top left corner, after the device name.
+If multiple devices are available, Tango automatically connects to the most recently used device. You can view and switch between connected devices by clicking the <ArrowSwap/> button on the top left corner, after the device name.
+
+![Device list dialog](device-list.png)
 
 ## Use multiple devices at once
 

docs/remote-access/_category_.yml

@@ -0,0 +1,4 @@
+label: Remote Access
+position: 8
+collapsed: false
+collapsible: false

docs/remote-access/auto-share.mdx

@@ -0,0 +1,43 @@
+---
+sidebar_position: 2
+---
+
+# Automatic device sharing
+
+import Pro from '../_pro.tsx';
+
+<Pro/>
+
+When you log in to Tango on multiple computers, all devices connected to one computer will be automatically shared with other computers. This allows you to access and control the device from any computer without manually creating a sharing link.
+
+## Share device
+
+import ChannelShare from './channel-share.svg';
+
+When a device is automatically shared, there will be a <ChannelShare/> icon in the device list:
+
+![Device List dialog](local.png)
+
+## Connect to shared device
+
+When device A is connected to computer 1, and no device is connected to computer 2, and you have logged in the same account on both computers.
+
+On computer 1 you can find device A normally. On computer 2, the device A can be found by:
+
+* Tap the **Get Started** button on the home page.
+* If the **Get Started** button takes you to the device paring page, tap the **Show paired devices** link below the **Next** button, then select device A from the list.
+* If there is no **Show paired devices** link, wait for a few seconds as the device list loads. If the device list still doesn't show up, ensure that you have logged in with the same account on both computers.
+
+In the device list, automatically shared devices will be in the **Remote Devices** group, and have a <ChannelShare/> icon next to them.
+
+![Device List dialog](remote.png)
+
+import ArrowSwap from '../arrow-swap.svg';
+
+When both computers have devices connected, opening Tango will automatically connect to the local device. To switch to a remote device, click the <ArrowSwap/> button on the top left corner, after the device name, then click the remote device you want to switch to.
+
+## Test it before purchasing
+
+Automatic device sharing uses the same peer-to-peer connection as share by link, and we can't guarantee it will work in every network environment.
+
+If you are purchasing the Pro plan solely for this feature, you can check if it works for you by using the [Share Device By Link](./share-link.mdx) feature first. If the Share Device By Link feature works for you, the automatic device sharing feature should work as well.

docs/share-device.mdx → docs/remote-access/share-link.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 1
 ---
 
 # Share Device By Link
@@ -14,8 +14,20 @@ To create a sharing link, follow these steps:
 2. Tap the <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" style={{verticalAlign:"middle"}} viewBox="0 0 20 20"><path fill="currentColor" d="M4.5 3A1.5 1.5 0 0 0 3 4.5v6A1.5 1.5 0 0 0 4.5 12H6v1H4.5A2.5 2.5 0 0 1 2 10.5v-6A2.5 2.5 0 0 1 4.5 2h6A2.5 2.5 0 0 1 13 4.5v6a2.5 2.5 0 0 1-2.5 2.5H9v-1h1.5a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 10.5 3h-6Zm5 4H11v1H9.5A1.5 1.5 0 0 0 8 9.5v6A1.5 1.5 0 0 0 9.5 17h6a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 15.5 8H14V7h1.5A2.5 2.5 0 0 1 18 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 7 15.5v-6A2.5 2.5 0 0 1 9.5 7Z"></path></svg> button in the top right toolbar.
 3. Tap the **Start** button in the popup dialog.
 
+![Share dialog](dialog.png)
+
+import Pro from '../_pro.tsx';
+
+:::tip
+
+<Pro feature="Unlimited link expire time"/>
+
+:::
+
 A share link will appear in the dialog. You can copy the link and send it to the person you want to share the device with.
 
+![Share dialog](sharing.png)
+
 The device must remain connected in Tango for the sharing link to work. If you disconnect the device or close the browser tab, the sharing link will be invalidated.
 
 ## Stop sharing
@@ -54,3 +66,5 @@ Depending on the network conditions, the speed and latency of the connection may
 In normal usage scenarios, it should only use less than 1Mbps of bandwidth, and the latency is usually not noticeable. However, if the network conditions are poor, some features like file transferring and screen mirroring may not work properly.
 
 At the remote side, you can tap the <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" style={{verticalAlign:"middle"}} viewBox="0 0 20 20"><path fill="currentColor" d="M4.5 3A1.5 1.5 0 0 0 3 4.5v6A1.5 1.5 0 0 0 4.5 12H6v1H4.5A2.5 2.5 0 0 1 2 10.5v-6A2.5 2.5 0 0 1 4.5 2h6A2.5 2.5 0 0 1 13 4.5v6a2.5 2.5 0 0 1-2.5 2.5H9v-1h1.5a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 10.5 3h-6Zm5 4H11v1H9.5A1.5 1.5 0 0 0 8 9.5v6A1.5 1.5 0 0 0 9.5 17h6a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 15.5 8H14V7h1.5A2.5 2.5 0 0 1 18 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 7 15.5v-6A2.5 2.5 0 0 1 9.5 7Z"></path></svg> button in the top right toolbar to check the latency and bandwidth usage of the connection.
+
+![Network Stat](stat.png)

docs/screen-mirror/camera.mdx

@@ -4,14 +4,16 @@ sidebar_position: 1
 
 # Mirror Cameras
 
-import Pro from './_pro.tsx';
+import Pro from '../_pro.tsx';
 
 <Pro/>
 
 On Android 12 and higher, Tango can mirror the camera instead, so you don't need to open the camera app, and there will be no camera UI on the screen.
 
 To mirror a camera, scroll to **Video** section, then change **Source** to **Camera**.
 
+![Camera selected](camera.png)
+
 When **Camera** is selected in **Source**, the following options are available:
 
 * **Camera**: Choose between the front and back camera. The list contains the ID, position, and resolution of each camera. Sadly, it's not possible to know the type of the camera (normal, micro, ultra-wide, etc.) so you may need to try each camera to find the one you want.

docs/screen-mirror/virtual.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Create and mirror virtual display
 
-import Pro from './_pro.tsx';
+import Pro from '../_pro.tsx';
 
 <Pro/>
 
@@ -14,6 +14,8 @@ On Android 11 and higher, Tango can create and mirror virtual displays, which is
 
 To mirror a virtual display, scroll to **Video** section, then change **Source** to **Virtual**.  You can also customize the resolution and density of the virtual display below.
 
+![Virtual Display selected](virtual.png)
+
 ## App launcher and app switcher
 
 On Android 13 and lower, due to system restrictions, your default app launcher and app switcher will not work on virtual displays. Instead, Tango provides a simple app launcher and app switcher for you.

package.json

@@ -15,23 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@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",
+    "@docusaurus/core": "3.3.2",
+    "@docusaurus/preset-classic": "3.3.2",
+    "@docusaurus/theme-classic": "^3.3.2",
+    "@docusaurus/theme-mermaid": "^3.3.2",
+    "@docusaurus/types": "^3.3.2",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
     "@mdx-js/react": "^3.0.1",
-    "@types/node": "^20.11.20",
-    "clsx": "^2.1.0",
+    "@types/node": "^20.12.10",
+    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.1.1",
-    "@tsconfig/docusaurus": "^2.0.2",
-    "typescript": "^5.3.3"
+    "@docusaurus/module-type-aliases": "3.3.2",
+    "@tsconfig/docusaurus": "^2.0.3",
+    "typescript": "^5.4.5"
   },
   "browserslist": {
     "production": [