Add cargo add instruction to crate-sidebar

Author: stephank

app/components/crate-sidebar.hbs

@@ -37,7 +37,23 @@
   <div>
     <h2 local-class="heading">Install</h2>
 
-    <p local-class="copy-help">Add the following line to your Cargo.toml file:</p>
+    <p local-class="copy-help">Run the following Cargo command in your project directory:</p>
+    {{#if (is-clipboard-supported)}}
+      <CopyButton
+        @copyText={{this.cargoAddCommand}}
+        title="Copy command to clipboard"
+        local-class="copy-button"
+      >
+        <span>{{this.cargoAddCommand}}</span>
+        {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+      </CopyButton>
+    {{else}}
+      <code local-class="copy-fallback">
+        {{this.cargoAddCommand}}
+      </code>
+    {{/if}}
+
+    <p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
     {{#if (is-clipboard-supported)}}
       <CopyButton
         @copyText={{this.tomlSnippet}}

app/components/crate-sidebar.js

@@ -14,6 +14,10 @@ export default class CrateSidebar extends Component {
     return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage));
   }
 
+  get cargoAddCommand() {
+    return `cargo add ${this.args.crate.name}`;
+  }
+
   get tomlSnippet() {
     return `${this.args.crate.name} = "${this.args.version.num}"`;
   }