Refactoring OpenPin installation documentation + minor additions

src/Routes.tsx

@@ -1,4 +1,8 @@
 import OpenPin from "./routes/about/OpenPin";
+import Introduction from "./routes/about/OpenPin/Introduction";
+import Installation from "./routes/about/OpenPin/Installation";
+import Features from "./routes/about/OpenPin/Features";
+import Support from "./routes/about/OpenPin/Support";
 import Interposers from "./routes/about/Interposers";
 import Community from "./routes/about/Community";
 import Installers from "./routes/installers/Installers";
@@ -16,8 +20,27 @@ const Routes = () => (
     </Route>
     <Route path="/about" nest>
       <Switch>
-        <Route path="/openpin">
-          <OpenPin />
+        <Route path="/openpin" nest>
+          <Switch>
+            <Route path="introduction">
+              <Introduction />
+            </Route>
+            <Route path="installation">
+              <Installation />
+            </Route>
+            <Route path="features">
+              <Features />
+            </Route>
+            <Route path="support">
+              <Support />
+            </Route>
+            <Route path="/">
+              <OpenPin />
+            </Route>
+            <Route>
+              <Redirect to="/" />
+            </Route>
+          </Switch>
         </Route>
         <Route path="/interposers">
           <Interposers />

src/routes/about/OpenPin/Features/Content.mdx

@@ -0,0 +1,51 @@
+import { Anchor } from "@mantine/core";
+import { Link } from "wouter";
+
+# OpenPin Features
+
+## Assistant Mode
+
+Hold the touchpad with one finger and speak. Double-tap the touchpad with one finger to stop Ai Pin's response.
+
+### Notes
+Ai Pin will automatically create notes where appropriate, or you can explicitly ask it to. You can view these in .Center.
+
+### Navigation
+You can ask Ai Pin things like:
+
+- 'Where am I?'
+- 'What are some pizza places near me'
+- 'Navigate me to X'
+
+### Other Assistant Features
+Includes: weather, stocks, and web browsing.
+
+---
+
+## Assistant with Vision
+
+Tap, then hold the touchpad with one finger and speak. After you finish speaking, Ai Pin will capture a photo to analyze.
+
+---
+
+## Translation Mode
+
+Hold the touchpad with two fingers and speak. You can change the language Ai Pin translates to/from in .Center.
+
+Ai Pin will automatically detect the 'direction' of the translation and speak the translated result in the other language.
+
+---
+
+## Media Capture
+
+Captures show up in .Center and can be easily viewed and downloaded.
+
+> **Important:** An active WiFi connection is required for all photo and video captures to function properly. The capture feature will not work if your Ai Pin is offline.
+
+### Taking Photos
+Double-tap the touchpad with two fingers to take a photo.
+
+### Recording Videos
+Tap then hold the touchpad with two fingers to take a video. You can release your fingers when you hear a sound.
+
+Videos run for 15s, but you can also manually stop them by double-tapping the touchpad with one finger.

src/routes/about/OpenPin/Features/index.tsx

@@ -0,0 +1,15 @@
+import Content from "./Content.mdx";
+import PageLayout from "../../../../layouts/PageLayout";
+import { TypographyStylesProvider } from "@mantine/core";
+
+const Features = () => {
+  return (
+    <PageLayout title="OpenPin Features">
+      <TypographyStylesProvider>
+        <Content />
+      </TypographyStylesProvider>
+    </PageLayout>
+  );
+};
+
+export default Features;

src/routes/about/OpenPin/Installation/Content.mdx

@@ -0,0 +1,75 @@
+import { YouTubeEmbed } from "src/components/YouTubeEmbed";
+import { Anchor } from "@mantine/core";
+import { Link } from "wouter";
+
+# Installing OpenPin
+
+> **Important:** Read all of the instructions before starting!
+
+<YouTubeEmbed videoId="ICL-s2aeLD4" />
+
+## What You'll Need
+
+- An Ai Pin
+- Any interposer (learn how to buy or build one <Link href="../../interposers">here</Link>)
+- A computer with Chrome
+
+---
+
+## Step 1: Connect Your Ai Pin
+
+- Remove the moon sticker from the back of your Ai Pin
+- Place Ai Pin in the interposer, connect the interposer to your computer
+- Click 'connect' & select the "Ai Pin" USB device when presented with a popup
+
+### Troubleshooting Connection Issues
+
+**Ai Pin doesn't show up in USB popup**
+This typically indicates an improper connection between the Ai Pin and interposer. Ensure your Ai Pin has sufficient battery charge, then verify the positioning in the interposer. For optimal contact, gently adjust the Ai Pin's position within the interposer to align the connection points properly. It's *possible* that your interposer, is malfunctioning.
+
+
+**Ai Pin fails to connect**
+Check for a popup on the laser ink display confirming you want to let your computer connect. If this appears, click accept.
+If you are running Android Studio, shut down Android Studio and execute the command 'adb kill-server` as adb will block the connection from OpenPin Hub.
+**Other issues**
+Try reloading the page, or ask in the [reHumane discord](https://discord.gg/JtQzPHFeBc).
+
+---
+
+## Step 2: Install the Client
+
+- Go to Installers > OpenPin > Install OpenPin > Run Action
+- Click 'Run' and confirm the installation was successful
+
+---
+
+## Step 3: Link Your Ai Pin
+
+### 3.1 Get Your Link Code
+- Go to [openpin.center](https://openpin.center/)
+- Create an account
+- Click 'add device', a QR code should appear
+
+### 3.2 Open Settings on Your Ai Pin
+- Now, on your Ai Pin, tap to wake it then hold up your hand for the laser ink display
+- Push your hand out to navigate to the Launcher, then roll your palm to select 'Settings'
+
+### 3.3 Enable WiFi
+- Select 'Other Settings'
+- When the confirmation screen appears, double-tap the touchpad to confirm navigation
+- Ensure WiFi is connected
+- Double-tap the touchpad again to get back to the OpenPin Client
+
+### 3.4 Scan the Link Code
+- Select 'Link Device' and bring the QR code into the view of Ai Pin's Camera
+- A sound should play when successful
+- You're all done!
+
+---
+
+## Relaunching OpenPin
+
+If Ai Pin ever runs fully out of battery, or something goes very wrong, you will need to relaunch OpenPin.
+
+1. Go to Installers > OpenPin > Relaunch OpenPin > Run Action
+2. Click 'Run' and confirm the relaunch was successful

src/routes/about/OpenPin/Installation/index.tsx

@@ -0,0 +1,15 @@
+import Content from "./Content.mdx";
+import PageLayout from "../../../../layouts/PageLayout";
+import { TypographyStylesProvider } from "@mantine/core";
+
+const Installation = () => {
+  return (
+    <PageLayout title="Installing OpenPin">
+      <TypographyStylesProvider>
+        <Content />
+      </TypographyStylesProvider>
+    </PageLayout>
+  );
+};
+
+export default Installation;

src/routes/about/OpenPin/Introduction/Content.mdx

@@ -0,0 +1,23 @@
+import { Anchor } from "@mantine/core";
+import { Link } from "wouter";
+
+### What is OpenPin?
+
+OpenPin is an open-source project which lets you use your Ai Pin after Humane bricked them. You can install it in a few clicks & without any ADB certs!
+
+### Key Features
+
+- **Assistant**: Voice commands for answers, navigation, weather, and web browsing
+- **Visual Analysis**: Analyze images with AI
+- **Translation**: Real-time language translation
+- **Media Capture**: Take photos and 15-second videos
+
+All content syncs with <Anchor href="https://openpin.center" target="_blank">.Center</Anchor> for easy management.
+
+### Quick Start
+
+You'll need an Ai Pin, an interposer, and a computer with Chrome. See our <Link href="/installation">Installation Guide</Link> for detailed steps.
+
+### Support
+
+Having issues? Check that your Pin is properly connected, charged, and has WiFi enabled. Visit our <Link href="/support">Support Page</Link> or <Link href="../../community">Community</Link> for help.

src/routes/about/OpenPin/Introduction/index.tsx

@@ -0,0 +1,15 @@
+import Content from "./Content.mdx";
+import PageLayout from "../../../../layouts/PageLayout";
+import { TypographyStylesProvider } from "@mantine/core";
+
+const Introduction = () => {
+  return (
+    <PageLayout title="Introduction to OpenPin">
+      <TypographyStylesProvider>
+        <Content />
+      </TypographyStylesProvider>
+    </PageLayout>
+  );
+};
+
+export default Introduction;