Adding install instructions to the docsite

docs/docs/gettingstarted.mdx

@@ -0,0 +1,70 @@
+---
+sidebar_position: 1
+id: "gettingstarted"
+title: "Getting Started"
+---
+
+import { PlatformProvider, PlatformSelectorButton, PlatformItem } from "@site/src/components/platformcontext.tsx";
+
+<PlatformProvider>
+  <PlatformSelectorButton />
+
+## Installation
+
+You can install Wave directly from our [Downloads page](https://www.waveterm.dev/download) or by using a package manager.
+
+Unless otherwise noted, the package manager entries are supported officially by Command Line Inc.
+
+### Package managers
+
+<PlatformItem platforms={["mac"]}>
+
+#### Homebrew
+
+Wave is available on macOS as a [Homebrew Cask](https://formulae.brew.sh/cask/wave):
+
+```bash
+brew install --cask wave
+```
+
+</PlatformItem>
+<PlatformItem platforms={["windows"]}>
+
+Wave is available on Windows via Chocolatey and the Windows Package Manager
+
+#### Chocolatey
+
+```Powershell
+choco install wave
+```
+
+#### Windows Package Manager
+
+```Powershell
+winget install CommandLine.Wave
+```
+
+</PlatformItem>
+<PlatformItem platforms={["linux"]}>
+
+Wave is available in the following package managers for Linux
+
+#### Snap
+
+Different Linux distributions have different ways of enabling Snap. You can find distro-specific instructions in our [Snapcraft listing](https://snapcraft.io/waveterm).
+
+```bash
+sudo snap install --classic waveterm
+```
+
+#### AUR/Pacman (community)
+
+This is a [community-maintained AUR package](https://aur.archlinux.org/packages/waveterm) for installing Wave on Arch distributions.
+
+#### Nix (community)
+
+This is a [community-maintained Nix package](https://search.nixos.org/packages?channel=unstable&show=waveterm&size=50&sort=relevance&type=packages&query=waveterm) for installing on NixOS or any other Linux distribution set up with Nix.
+
+</PlatformItem>
+
+</PlatformProvider>

docs/docs/index.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: -1
 id: "index"
 title: "Home"
 hide_title: true
@@ -10,7 +10,7 @@ import { Card, CardGroup } from "@site/src/components/card.tsx";
 
 # Welcome to Wave Terminal
 
-Wave is an [open-source](https://github.com/wavetermdev/waveterm) terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI. We support MacOS, Linux, and Windows ([Downloads](https://waveterm.dev/download)).
+Wave is an [open-source](https://github.com/wavetermdev/waveterm) terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI. We support MacOS, Linux, and Windows ([Getting Started](./gettingstarted)).
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built. For too long there has been a disconnect between the CLI and the web. If you want fast, keyboard-accessible, easy-to-write applications, you use the CLI, but if you want graphical interfaces, native widgets, copy/paste, scrolling, variable font sizes, then you'd have to turn to the web. Wave's goal is to bridge that gap.
 

docs/docs/keybindings.mdx

@@ -5,7 +5,7 @@ title: "Key Bindings"
 ---
 
 import { Kbd } from "@site/src/components/kbd.tsx";
-import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
+import { PlatformProvider, PlatformSelectorButton } from "@site/src/components/platformcontext.tsx";
 
 <PlatformProvider>
 
@@ -17,7 +17,7 @@ replace "Cmd" with "Alt" (note that "Ctrl" is "Ctrl" on both Mac, Windows, and L
 
 ## Global Keybindings
 
-<PlatformToggleButton />
+<PlatformSelectorButton />
 <div style={{ marginBottom: 20 }}></div>
 
 | Key                          | Function                                                                          |

docs/docs/layout.mdx

@@ -4,11 +4,11 @@ id: "layout"
 title: "Tab Layout System"
 ---
 
-import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
+import { PlatformProvider, PlatformSelectorButton } from "@site/src/components/platformcontext.tsx";
 import { Kbd } from "@site/src/components/kbd.tsx";
 
 <PlatformProvider>
-<PlatformToggleButton/>
+<PlatformSelectorButton/>
 
 ![screenshot showing a block being dragged over another block, with the placeholder depicting a out-of-line before outer drop](./img/drag-edge.png)
 

docs/docs/widgets.mdx

@@ -5,15 +5,15 @@ title: "Widgets"
 ---
 
 import { Kbd } from "@site/src/components/kbd.tsx";
-import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
+import { PlatformProvider, PlatformSelectorButton } from "@site/src/components/platformcontext.tsx";
 
 <PlatformProvider>
 
 # Widgets
 
 Every individual Component is contained in its own widget. These can be added, removed, moved and resized. Each widget has its own header which can be right clicked to reveal more operations you can do with that widget.
 
-<PlatformToggleButton />
+<PlatformSelectorButton />
 
 ### How to Add a Widget
 

docs/docs/wsh.mdx

@@ -5,7 +5,7 @@ title: "wsh command"
 ---
 
 import { Kbd } from "@site/src/components/kbd.tsx";
-import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
+import { PlatformProvider, PlatformSelectorButton } from "@site/src/components/platformcontext.tsx";
 
 <PlatformProvider>
 

docs/package.json

@@ -29,7 +29,8 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "remark-gfm": "^4.0.0",
-        "remark-typescript-code-import": "^1.0.1"
+        "remark-typescript-code-import": "^1.0.1",
+        "ua-parser-js": "^1.0.39"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "3.6.1",
@@ -39,6 +40,7 @@
         "@mdx-js/typescript-plugin": "^0.0.6",
         "@types/eslint": "^9.6.1",
         "@types/eslint-config-prettier": "^6.11.3",
+        "@types/ua-parser-js": "^0.7.39",
         "eslint": "^9.13.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-mdx": "^3.1.5",

docs/src/components/platformcontext.css

@@ -18,12 +18,16 @@
         background-color 0.2s ease,
         color 0.2s ease;
     outline: none;
+    font-weight: bold;
+
+    &:not(:first-of-type) {
+        border-left: 1px solid var(--ifm-scrollbar-thumb-background-color);
+    }
 }
 
 .pill-option.active {
     background-color: var(--ifm-color-primary);
     color: var(--ifm-color-secondary-contrast-background);
-    font-weight: bold;
 }
 
 .pill-option:not(.active):hover {

docs/src/components/platformcontext.tsx

@@ -1,13 +1,15 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, ReactNode, useCallback, useContext, useState } from "react";
+import { UAParser } from "ua-parser-js";
 
+import clsx from "clsx";
 import "./platformcontext.css";
 
-export type Platform = "mac" | "linux";
+export type Platform = "mac" | "linux" | "windows";
 
 interface PlatformContextProps {
     platform: Platform;
-    togglePlatform: () => void;
+    setPlatform: (platform: Platform) => void;
 }
 
 export const PlatformContext = createContext<PlatformContextProps | undefined>(undefined);
@@ -17,19 +19,30 @@ const detectPlatform = (): Platform => {
     if (savedPlatform && (savedPlatform === "mac" || savedPlatform === "linux")) {
         return savedPlatform;
     }
-    return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "mac" : "linux";
+    const { os } = UAParser(navigator.userAgent);
+
+    if (/Windows/.test(os.name)) {
+        return "windows";
+    } else if (/macOS|iOS/.test(os.name)) {
+        return "mac";
+    } else {
+        return "linux";
+    }
 };
 
 const PlatformProviderInternal = ({ children }: { children: ReactNode }) => {
     const [platform, setPlatform] = useState<Platform>(detectPlatform());
 
-    const togglePlatform = () => {
-        const newPlatform = platform === "mac" ? "linux" : "mac";
+    const setPlatformCallback = useCallback((newPlatform: Platform) => {
         setPlatform(newPlatform);
         localStorage.setItem("platform", newPlatform); // Store in localStorage
-    };
+    }, []);
 
-    return <PlatformContext.Provider value={{ platform, togglePlatform }}>{children}</PlatformContext.Provider>;
+    return (
+        <PlatformContext.Provider value={{ platform, setPlatform: setPlatformCallback }}>
+            {children}
+        </PlatformContext.Provider>
+    );
 };
 
 export const PlatformProvider: React.FC = ({ children }: { children: ReactNode }) => {
@@ -48,27 +61,45 @@ export const usePlatform = (): PlatformContextProps => {
     return context;
 };
 
-const PlatformToggleButtonInternal: React.FC = () => {
-    const { platform, togglePlatform } = usePlatform();
+const PlatformSelectorButtonInternal: React.FC = () => {
+    const { platform, setPlatform } = usePlatform();
 
     return (
         <div className="pill-toggle">
+            <button className={clsx("pill-option", { active: platform === "mac" })} onClick={() => setPlatform("mac")}>
+                macOS
+            </button>
             <button
-                className={`pill-option ${platform === "mac" ? "active" : ""}`}
-                onClick={() => platform !== "mac" && togglePlatform()}
+                className={clsx("pill-option", { active: platform === "linux" })}
+                onClick={() => setPlatform("linux")}
             >
-                MacOS
+                Linux
             </button>
             <button
-                className={`pill-option ${platform === "linux" ? "active" : ""}`}
-                onClick={() => platform !== "linux" && togglePlatform()}
+                className={clsx("pill-option", { active: platform === "windows" })}
+                onClick={() => setPlatform("windows")}
             >
-                Linux/Windows
+                Windows
             </button>
         </div>
     );
 };
 
-export const PlatformToggleButton: React.FC = () => {
-    return <BrowserOnly fallback={<div />}>{() => <PlatformToggleButtonInternal />}</BrowserOnly>;
+export const PlatformSelectorButton: React.FC = () => {
+    return <BrowserOnly fallback={<div />}>{() => <PlatformSelectorButtonInternal />}</BrowserOnly>;
+};
+
+interface PlatformItemProps {
+    children: ReactNode;
+    platforms: Platform[];
+}
+
+const PlatformItemInternal = ({ children, platforms }: PlatformItemProps) => {
+    const platform = usePlatform();
+
+    return platforms.includes(platform.platform) && children;
+};
+
+export const PlatformItem = (props: PlatformItemProps) => {
+    return <BrowserOnly fallback={<div />}>{() => <PlatformItemInternal {...props} />}</BrowserOnly>;
 };

yarn.lock

@@ -5964,6 +5964,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ua-parser-js@npm:^0.7.39":
+  version: 0.7.39
+  resolution: "@types/ua-parser-js@npm:0.7.39"
+  checksum: 10c0/fea522f42dfc2854d9c93144a13c3db3bbe1c791458451db06d46bec7e1dbbe945d1542e02bb38378e39a04bdb7810b43e2ead26f9e6c250832e187312522708
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -19783,6 +19790,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-parser-js@npm:^1.0.39":
+  version: 1.0.39
+  resolution: "ua-parser-js@npm:1.0.39"
+  bin:
+    ua-parser-js: script/cli.js
+  checksum: 10c0/c6452b0c683000f10975cb0a7e74cb1119ea95d4522ae85f396fa53b0b17884358a24ffdd86a66030c6b2981bdc502109a618c79fdaa217ee9032c9e46fcc78a
+  languageName: node
+  linkType: hard
+
 "undici-types@npm:~6.19.2, undici-types@npm:~6.19.8":
   version: 6.19.8
   resolution: "undici-types@npm:6.19.8"
@@ -20646,6 +20662,7 @@ __metadata:
     "@mdx-js/typescript-plugin": "npm:^0.0.6"
     "@types/eslint": "npm:^9.6.1"
     "@types/eslint-config-prettier": "npm:^6.11.3"
+    "@types/ua-parser-js": "npm:^0.7.39"
     "@waveterm/docusaurus-og": "https://github.com/wavetermdev/docusaurus-og"
     clsx: "npm:^2.1.1"
     eslint: "npm:^9.13.0"
@@ -20666,6 +20683,7 @@ __metadata:
     remark-typescript-code-import: "npm:^1.0.1"
     typescript: "npm:^5.6.3"
     typescript-eslint: "npm:^8.14.0"
+    ua-parser-js: "npm:^1.0.39"
   languageName: unknown
   linkType: soft