feat: add groups to install onboarding (#452)

Closes FRONT-578

Author: jog1t

apps/hub/src/components/get-started.tsx

@@ -27,15 +27,13 @@ import {
 } from "@rivet-gg/icons";
 import { motion, useMotionValueEvent, useScroll } from "framer-motion";
 import { type ComponentProps, useState } from "react";
-import installCli, {
-  source as installCliSource,
-} from "./onboarding/initial-setup-install-rivet-cli.sh?shiki&lang=bash";
 import setupCli, {
   source as setupCliSource,
 } from "./onboarding/initial-setup-setup-rivet-cli.sh?shiki&lang=bash";
 import testCli, {
   source as testCliSource,
 } from "./onboarding/initial-setup-test-rivet-cli.sh?shiki&lang=bash";
+import { InstallCli } from "./onboarding/install-cli";
 
 const containerVariants = {
   hidden: {
@@ -88,9 +86,7 @@ export function GetStarted() {
         <CardContent>
           <div>
             <h3 className="font-semibold">1. Install</h3>
-            <CodeFrame code={installCliSource} language="bash">
-              <CodeSource>{installCli}</CodeSource>
-            </CodeFrame>
+            <InstallCli />
           </div>
           <div>
             <h3 className="font-semibold">2. Setup</h3>

apps/hub/src/components/onboarding/initial-setup-install-rivet-cli-cmd.sh

@@ -0,0 +1 @@
+powershell -Command "iwr https://releases.rivet.gg/rivet/latest/install.ps1 -useb | iex"

apps/hub/src/components/onboarding/initial-setup-install-rivet-cli-powershell.sh

@@ -0,0 +1 @@
+iwr https://releases.rivet.gg/rivet/latest/install.ps1 -useb | iex

apps/hub/src/components/onboarding/initial-setup-install-rivet-cli-source.sh

@@ -0,0 +1,2 @@
+git clone https://github.com/rivet-gg/rivet
+cargo build --bin rivet

apps/hub/src/components/onboarding/initial-setup-install-rivet-cli-unix.sh

@@ -0,0 +1 @@
+curl -fsSL https://releases.rivet.gg/rivet/latest/install.sh | sh

apps/hub/src/components/onboarding/initial-setup-install-rivet-cli.sh

@@ -0,0 +1,48 @@
+import { CodeFrame, CodeGroup, CodeSource } from "@rivet-gg/components";
+import installCliCmd, {
+  source as installCliCmdSource,
+} from "./initial-setup-install-rivet-cli-cmd.sh?shiki&lang=bash";
+import installCliPowerShell, {
+  source as installCliPowerShellSource,
+} from "./initial-setup-install-rivet-cli-powershell.sh?shiki&lang=bash";
+import installCliSource, {
+  source as installCliSourceSource,
+} from "./initial-setup-install-rivet-cli-source.sh?shiki&lang=bash";
+import installCliUnix, {
+  source as installCliUnixSource,
+} from "./initial-setup-install-rivet-cli-unix.sh?shiki&lang=bash";
+
+export function InstallCli() {
+  return (
+    <CodeGroup>
+      <CodeFrame
+        title="macOS & Linux & WSL"
+        code={installCliUnixSource}
+        language="bash"
+      >
+        <CodeSource>{installCliUnix}</CodeSource>
+      </CodeFrame>
+      <CodeFrame
+        title="Windows (cmd)"
+        code={installCliCmdSource}
+        language="ps1"
+      >
+        <CodeSource>{installCliCmd}</CodeSource>
+      </CodeFrame>
+      <CodeFrame
+        title="Windows (PowerShell)"
+        code={installCliPowerShellSource}
+        language="powershell"
+      >
+        <CodeSource>{installCliPowerShell}</CodeSource>
+      </CodeFrame>
+      <CodeFrame
+        title="Build from source"
+        code={installCliSourceSource}
+        language="bash"
+      >
+        <CodeSource>{installCliSource}</CodeSource>
+      </CodeFrame>
+    </CodeGroup>
+  );
+}

apps/hub/src/components/onboarding/install-cli.tsx

@@ -2,7 +2,6 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
 import { EditorView } from "@codemirror/view";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
 import { Icon, faCopy, faFile } from "@rivet-gg/icons";
 import { githubDark } from "@uiw/codemirror-theme-github";
 import ReactCodeMirror, {
@@ -15,6 +14,7 @@ import { cn } from "./lib/utils";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { ScrollArea } from "./ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { WithTooltip } from "./ui/tooltip";
 
 interface JsonCodeProps extends ReactCodeMirrorProps {}
@@ -151,7 +151,9 @@ export const CodeFrame = ({
               <Icon icon={faFile} className="block" />
               <span>{file}</span>
             </>
-          ) : isInGroup ? null : (
+          ) : isInGroup ? (
+            <Badge variant="outline">{languageNames[language]}</Badge>
+          ) : (
             <Badge variant="outline">{title || languageNames[language]}</Badge>
           )}
         </div>