docs: Add desktop client videos (#947)

* Add desktop client videos

* docs: refactor desktop video style

* docs: add wrapper for tabs to load videos correctly

* docs: add desktop video to homepage

website/components/homepage-hero/index.jsx

@@ -12,6 +12,7 @@ export default function HomepageHero({
   links,
   uiVideo,
   cliVideo,
+  desktopVideo,
 }) {
   return (
     <div className={styles.homepageHero}>
@@ -43,6 +44,16 @@ export default function HomepageHero({
                 },
               ],
             },
+            {
+              name: 'Desktop',
+              playbackRate: desktopVideo.playbackRate,
+              src: [
+                {
+                  srcType: desktopVideo.srcType,
+                  url: desktopVideo.url,
+                },
+              ],
+            },
           ],
         }}
       />

website/content/docs/getting-started/connect-to-target.mdx

@@ -13,8 +13,8 @@ sets for this target contain the default host, which has the address
 `127.0.0.1`. When we run `boundary connect` against this target, the single
 available host will be selected and we'll open a local authenticated proxy to
 the target host on the target's default port (`127.0.0.1:22`). Because this
-target is proxying to our local SSH server, we can use our built-in `connect
-ssh` command to wrap the proxied TCP connection and SSH via Boundary:
+target is proxying to our local SSH server, we can use our built-in `connect ssh`
+command to wrap the proxied TCP connection and SSH via Boundary:
 
 ```
 $ boundary connect ssh -target-id ttcp_1234567890
@@ -130,7 +130,25 @@ correct available binary, as WSL must use `.exe` when invoking Windows binaries:
 $ boundary connect ssh -style putty -exec putty.exe -target-id ttcp_1234567890
 ```
 
+## Connect using Desktop Client
+
+While using desktop client, choose target and connect to retrieve local proxy
+details.
+
+<video
+  muted
+  playsInline
+  autoPlay
+  loop
+  class="boundary-clickthrough-video boundary-clickthrough-desktop-video"
+>
+  <source
+    type="video/mp4"
+    src="https://www.datocms-assets.com/2885/1613612836-boundary-desktop-clickthrough-connect-target-v1-0-0.mp4"
+  />
+</video>
+
 ## Next Steps
 
-See our [common workflows](/docs/common-workflows) for in depth discussion on managing scopes, targets, 
+See our [common workflows](/docs/common-workflows) for in depth discussion on managing scopes, targets,
 identities, and sessions.

website/content/docs/getting-started/run-and-login.mdx

@@ -55,7 +55,7 @@ with `jq` to pull the token value out of the response and place it wherever you
 wish, then create a command alias for `boundary` that sources that value into
 the environment or the `-token` flag.
 
-~> Token storage on *nix systems has been more problematic than we expected.
+~> Token storage on \*nix systems has been more problematic than we expected.
 We're exploring alternatives. See the discussion on [this GitHub
 issue](https://github.com/hashicorp/boundary/issues/697#issuecomment-709448942)
 to track it and voice your thoughts.
@@ -75,8 +75,31 @@ name and password:
 </video>
 
 </Tab>
-<Tab heading="Terraform">
 
+<Tab heading="Desktop Client">
+<p>
+
+To authenticate using the Boundary desktop client, launch Boundary desktop client
+and connect to boundary to using [http://127.0.0.1:9200](http://127.0.0.1:9200)
+and enter the login name and password:
+
+<video
+  muted
+  playsInline
+  autoPlay
+  loop
+  class="boundary-clickthrough-video boundary-clickthrough-desktop-video"
+>
+  <source
+    type="video/mp4"
+    src="https://www.datocms-assets.com/2885/1613612831-boundary-desktop-clickthrough-authenticate-v1-0-0.mp4"
+  />
+</video>
+
+</p>
+</Tab>
+
+<Tab heading="Terraform">
 
 You can also use these overrides to configure the [Terraform provider for
 Boundary](https://github.com/hashicorp/terraform-provider-boundary):
@@ -96,7 +119,6 @@ the Boundary server does not use TLS in development mode.
 </Tab>
 </Tabs>
 
-
 ## Next Steps
 
 See [connecting to your first target](/docs/getting-started/connect-to-target) for how

website/pages/home/index.jsx

@@ -29,6 +29,11 @@ export default function HomePage() {
           srcType: 'mp4',
           playbackRate: 1,
         }}
+        desktopVideo={{
+          url: '/videos/hero-desktop.mp4',
+          srcType: 'mp4',
+          playbackRate: 1,
+        }}
       />
 
       <HowItWorks

website/pages/style.css

@@ -56,3 +56,7 @@
   border-radius: 3px;
   box-shadow: 0 14.3254px 14.3254px rgba(37, 41, 55, 0.16);
 }
+
+.boundary-clickthrough-desktop-video {
+  max-width: 800px;
+}